Spaces:

lss9566
/

HR

Sleeping

App Files Files Community

lss9566 commited on Sep 26, 2025

Commit

8c44c8d

verified ·

1 Parent(s): 5137528

Upload 6 files

Browse files

Files changed (6) hide show

README.md +70 -0
app.py +99 -0
index.html +712 -0
questions.json +198 -0
requirements.txt +2 -0
simple_quiz.html +337 -0

README.md ADDED Viewed

	@@ -0,0 +1,70 @@

+---
+title: 인적자원관리 퀴즈
+emoji: 📚
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: "4.0.0"
+app_file: app.py
+pinned: false
+---
+# 📚 인적자원관리 퀴즈
+스마트폰에서도 편리하게 학습할 수 있는 인적자원관리 웹 퀴즈입니다.
+## ✨ 주요 기능
+- **📱 모바일 최적화**: 스마트폰에서도 완벽한 사용자 경험
+- **🎯 다중 정답 지원**: 체크박스를 통한 다중 선택 문제
+- **🎨 현대적 디자인**: 글래스모피즘과 그라데이션을 활용한 세련된 UI
+- **📊 실시간 점수**: 진행률과 점수를 실시간으로 확인
+- **💡 상세한 해설**: 정답과 함께 제공되는 학습 해설
+## 🎮 사용 방법
+1. **문제 풀이**: 선택지를 클릭하여 답을 선택
+2. **다중 정답**: 체크박스가 있는 문제는 여러 개 선택 가능
+3. **해설 확인**: "다음" 버튼을 눌러 정답과 해설 확인
+4. **진행**: 이전/다음 버튼으로 문항 간 이동
+5. **완료**: 모든 문항 완료 후 최종 점수 확인
+## 📋 문제 구성
+총 **16개 문항**의 인적자원관리 관련 문제로 구성되어 있습니다:
+- 전략적 인적자원관리
+- 직무분석 및 직무설계
+- 인력계획 및 채용
+- 교육훈련 및 경력개발
+- 인사평가 및 면접
+- 기타 인적자원관리 이론
+## 🛠️ 기술 스택
+- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)
+- **Backend**: Python, Gradio
+- **Deployment**: Hugging Face Spaces
+- **Design**: 글래스모피즘, 반응형 웹 디자인
+## 📱 모바일 지원
+이 퀴즈는 다양한 디바이스에서 최적화되어 작동합니다:
+- 📱 스마트폰 (iOS, Android)
+- 💻 태블릿
+- 🖥️ 데스크톱
+## 🎯 학습 목표
+- 인적자원관리의 핵심 개념 이해
+- 실무 적용 가능한 지식 습득
+- 체계적인 학습을 통한 전문성 향상
+## 📞 문의사항
+문제나 개선사항이 있으시면 언제든지 연락주세요!
+---
+**💡 팁**: 틀린 문제는 해설을 꼼꼼히 읽어보세요. 반복 학습을 통해 더 나은 결과를 얻을 수 있습니다!

app.py ADDED Viewed

	@@ -0,0 +1,99 @@

+import gradio as gr
+import json
+from pathlib import Path
+import re
+# 현재 디렉토리 설정
+current_dir = Path(__file__).parent
+def create_quiz_app():
+    """Gradio 앱 생성"""
+    # simple_quiz.html 파일 읽기 (테스트용 전체 문서)
+    html_file = current_dir / "simple_quiz.html"
+    if html_file.exists():
+        with open(html_file, 'r', encoding='utf-8') as f:
+            full_html = f.read()
+    else:
+        full_html = """
+        <!DOCTYPE html>
+        <html lang=\"ko\">
+        <head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>퀴즈</title></head>
+        <body><h1>퀴즈 파일을 찾을 수 없습니다.</h1></body>
+        </html>
+        """
+    # questions.json 파일 읽기 (webquiz/ 하위 우선, 없으면 루트 fallback)
+    questions_file = current_dir / "webquiz" / "questions.json"
+    if not questions_file.exists():
+        fallback = current_dir / "questions.json"
+        if fallback.exists():
+            questions_file = fallback
+    if questions_file.exists():
+        with open(questions_file, 'r', encoding='utf-8') as f:
+            questions_data = json.load(f)
+        # JavaScript에서 questions 데이터를 직접 사용할 수 있도록 수정
+        questions_js = json.dumps(questions_data, ensure_ascii=False)
+        # 기존 문서 내에 샘플 데이터가 있다면 교체, 없으면 주입
+        if 'const questions = [' in full_html:
+            full_html = full_html.replace(
+                'const questions = [',
+                f'const questions = {questions_js}; const _old_questions = ['
+            )
+        else:
+            # <body> 바로 뒤에 questions 변수를 주입
+            full_html = re.sub(
+                r"<body[^>]*>",
+                lambda m: f"{m.group(0)}\n<script>const questions = {questions_js};</script>",
+                full_html,
+                flags=re.IGNORECASE
+            )
+    # srcdoc에 안전하게 삽입하기 위해 작은따옴표를 HTML 엔티티로 치환
+    srcdoc_html = full_html.replace("'", "&#39;")
+    # iframe(srcdoc)로 전체 문서를 로드하여 스크립트가 확실히 실행되도록 함
+    iframe_html = f"""
+    <div style=\"width:100%; height:100vh;\">
+      <iframe id=\"quiz_iframe\" style=\"width:100%; height:100%; border:none;\" srcdoc='{srcdoc_html}'></iframe>
+    </div>
+    """
+    with gr.Blocks(
+        title="인적자원관리 퀴즈",
+        theme=gr.themes.Soft(),
+        css="""
+        .gradio-container {
+            max-width: none !important;
+            padding: 0 !important;
+        }
+        .main {
+            padding: 0 !important;
+        }
+        .block {
+            border: none !important;
+            box-shadow: none !important;
+            margin: 0 !important;
+        }
+        """
+    ) as app:
+        # 퀴즈 인터페이스를 HTML로 직접 렌더링 (iframe 사용)
+        gr.HTML(
+            value=iframe_html,
+            elem_id="quiz_interface"
+        )
+    return app
+# Gradio 앱 생성 및 실행
+if __name__ == "__main__":
+    app = create_quiz_app()
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True
+    )

index.html ADDED Viewed

	@@ -0,0 +1,712 @@

+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>웹 퀴즈</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+* {
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #1a202c;
+  min-height: 100vh;
+  padding: 20px 0;
+}
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+.quiz-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: 30px;
+  margin-bottom: 25px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.quiz-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 15px 0;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-align: center;
+}
+.quiz-controls {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.btn {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+.btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+}
+.status-bar {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 15px;
+  padding: 15px 25px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+.progress-info {
+  font-weight: 500;
+  color: #4a5568;
+}
+.score-display {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 14px;
+  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
+}
+.message-area {
+  min-height: 24px;
+  text-align: center;
+  font-weight: 500;
+  color: #e53e3e;
+  margin-bottom: 15px;
+}
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: 30px;
+  margin: 20px 0;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+.question-text {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.7;
+  margin-bottom: 25px;
+  color: #2d3748;
+}
+.choice-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+}
+.choice {
+  display: block;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin: 0;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  color: #4a5568;
+  flex: 1;
+}
+.choice:hover {
+  border-color: #667eea;
+  background: #f7fafc;
+  transform: translateX(4px);
+}
+.choice.selected {
+  border-color: #667eea;
+  background: linear-gradient(135deg, #ebf4ff, #e6fffa);
+  color: #2b6cb0;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+.choice.correct {
+  border-color: #48bb78;
+  background: linear-gradient(135deg, #f0fff4, #c6f6d5);
+  color: #22543d;
+  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
+}
+.choice.wrong {
+  border-color: #f56565;
+  background: linear-gradient(135deg, #fff5f5, #fed7d7);
+  color: #742a2a;
+  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3);
+}
+.choice:disabled {
+  cursor: not-allowed;
+}
+.checkbox-input {
+  margin-right: 12px;
+  width: 18px;
+  height: 18px;
+  accent-color: #667eea;
+}
+.result-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: 30px;
+  margin-top: 20px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.result-status {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 15px;
+  text-align: center;
+  padding: 15px;
+  border-radius: 12px;
+}
+.result-correct {
+  background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
+  color: #22543d;
+}
+.result-wrong {
+  background: linear-gradient(135deg, #fed7d7, #fbb6ce);
+  color: #742a2a;
+}
+.answer-display {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 15px 0;
+  padding: 15px;
+  background: #f7fafc;
+  border-radius: 10px;
+  border-left: 4px solid #667eea;
+}
+.explanation {
+  color: #718096;
+  font-size: 14px;
+  line-height: 1.6;
+  margin-top: 15px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  border-left: 4px solid #a0aec0;
+}
+.meta-info {
+  color: #a0aec0;
+  font-size: 12px;
+  font-weight: 500;
+  margin-top: 20px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.completion-card {
+  text-align: center;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
+}
+.completion-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 15px;
+}
+.completion-score {
+  font-size: 18px;
+  opacity: 0.9;
+  margin-bottom: 25px;
+}
+.restart-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 15px 30px;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.restart-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+@media (max-width: 768px) {
+  .container {
+    padding: 0 10px;
+  }
+  .quiz-header {
+    padding: 20px 15px;
+    margin-bottom: 15px;
+  }
+  .quiz-title {
+    font-size: 22px;
+  }
+  .quiz-controls {
+    gap: 8px;
+  }
+  .btn {
+    padding: 10px 18px;
+    font-size: 13px;
+  }
+  .status-bar {
+    padding: 12px 20px;
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+  }
+  .card {
+    padding: 20px 15px;
+    margin: 15px 0;
+  }
+  .question-text {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+  .choice-wrapper {
+    margin: 10px 0;
+  }
+  .choice {
+    padding: 14px 16px;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+  .checkbox-input {
+    margin-right: 10px;
+    width: 16px;
+    height: 16px;
+  }
+  .result-card {
+    padding: 20px 15px;
+  }
+  .result-status {
+    font-size: 18px;
+    padding: 12px;
+  }
+  .answer-display {
+    font-size: 15px;
+    padding: 12px;
+  }
+  .explanation {
+    font-size: 13px;
+    padding: 12px;
+  }
+  .completion-card {
+    padding: 30px 20px;
+  }
+  .completion-title {
+    font-size: 26px;
+  }
+  .completion-score {
+    font-size: 16px;
+  }
+}
+@media (max-width: 480px) {
+  body {
+    padding: 10px 0;
+  }
+  .container {
+    padding: 0 8px;
+  }
+  .quiz-header {
+    padding: 15px 12px;
+  }
+  .quiz-title {
+    font-size: 20px;
+  }
+  .btn {
+    padding: 8px 14px;
+    font-size: 12px;
+  }
+  .status-bar {
+    padding: 10px 15px;
+  }
+  .card {
+    padding: 15px 12px;
+  }
+  .question-text {
+    font-size: 15px;
+  }
+  .choice {
+    padding: 12px 14px;
+    font-size: 13px;
+  }
+  .checkbox-input {
+    width: 14px;
+    height: 14px;
+  }
+  .completion-title {
+    font-size: 24px;
+  }
+  .completion-score {
+    font-size: 15px;
+  }
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="quiz-header">
+    <h1 class="quiz-title">인적자원관리 퀴즈</h1>
+    <div class="quiz-controls">
+      <button id="prev" class="btn">← 이전</button>
+      <button id="next" class="btn">다음 →</button>
+    </div>
+  </div>
+  <div class="status-bar">
+    <div id="status" class="progress-info">문항 1/16</div>
+    <div class="score-display">점수: <span id="score-text">0</span></div>
+  </div>
+  <div id="message" class="message-area"></div>
+  <div id="quiz"></div>
+</div>
+<script>
+let questions=[], idx=0, score=0, state=new Map(), finished=false;
+ function getState(i){ if(!state.has(i)) state.set(i,{selected:null, correct:false, revealed:false, scored:false}); return state.get(i); }
+ async function load(){
+  // 허깅페이스 환경에서는 이 함수가 호출되지 않을 수 있음
+  console.log('load() 함수가 호출되었습니다');
+  try{
+    const res=await fetch('questions.json',{cache:'no-store'});
+    if(!res.ok) throw new Error('HTTP '+res.status);
+    questions=await res.json();
+  }catch(e){
+    console.error('questions.json 로드 실패:', e);
+    const msg=document.getElementById('message');
+    if(msg) msg.textContent='문항 로드 실패: '+ (e && e.message ? e.message : e);
+    return;
+  }
+  idx=0; score=0; state.clear(); finished=false; render();
+ }
+// 페이지 로드 완료 시 자동 실행
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOM 로드 완료');
+  if (typeof questions === 'undefined' || questions.length === 0) {
+    console.log('questions가 정의되지 않았거나 비어있음, load() 호출');
+    load();
+  } else {
+    console.log('questions 이미 정의됨, render() 호출');
+    render();
+  }
+});
+ function normalize(s){return (s||'').toString().replace(/[\s ]+/g,'').toLowerCase();}
+ function escapeHtml(s){ const div=document.createElement('div'); div.textContent = (s ?? ''); return div.innerHTML; }
+ function render(){
+   const quiz=document.getElementById('quiz'); quiz.innerHTML='';
+   if(finished){
+     const done=document.createElement('div');
+     done.className='completion-card';
+     done.innerHTML = `
+       <div class="completion-title">퀴즈 완료! 🎉</div>
+       <div class="completion-score">최종 점수: ${score}/${questions.length} (${Math.round(score/questions.length*100)}%)</div>
+       <button class="restart-btn" onclick="restartQuiz()">다시 시작하기</button>
+     `;
+     quiz.appendChild(done);
+     const nextBtn=document.getElementById('next');
+     const prevBtn=document.getElementById('prev');
+     document.getElementById('status').textContent=`완료`;
+     document.getElementById('score-text').textContent=`${score}/${questions.length}`;
+     prevBtn.disabled = true;
+     nextBtn.textContent = '처음으로';
+     return;
+   }
+   const q=questions[idx]; const st=getState(idx);
+   const card=document.createElement('div'); card.className='card';
+   const questionDiv=document.createElement('div');
+   questionDiv.className='question-text';
+   questionDiv.textContent=q.prompt;
+   card.appendChild(questionDiv);
+   if(q.choices && q.choices.length){
+     const isMultiple = q.qtype === 'multiple';
+     q.choices.forEach((c,i)=>{
+       const wrapper=document.createElement('div');
+       wrapper.className='choice-wrapper';
+       if(isMultiple){
+         // 체크박스 방식
+         const checkbox=document.createElement('input');
+         checkbox.type='checkbox'; checkbox.id=`choice_${i}`; checkbox.value=c;
+         checkbox.className='checkbox-input';
+         const label=document.createElement('label');
+         label.htmlFor=`choice_${i}`; label.className='choice';
+         label.textContent=(i+1)+'. '+c;
+         if(!st.revealed){
+           checkbox.onchange=()=>selectMultiple(c, checkbox.checked);
+           if(st.selected && st.selected.includes && st.selected.includes(c)) {
+             checkbox.checked=true; label.classList.add('selected');
+           }
+         }else{
+           // 해설 단계: 정답/오답 시각화
+           const isCorrect = Array.isArray(q.answer) ? q.answer.includes(c) : normalize(c)===normalize(q.answer);
+           if(isCorrect) label.classList.add('correct');
+           if(st.selected && st.selected.includes && st.selected.includes(c) && !isCorrect) label.classList.add('wrong');
+           checkbox.disabled=true;
+         }
+         wrapper.appendChild(checkbox); wrapper.appendChild(label);
+       }else{
+         // 기존 라디오 버튼 방식
+         const btn=document.createElement('button'); btn.className='choice'; btn.textContent=(i+1)+'. '+c;
+         if(!st.revealed){
+           btn.onclick=()=>select(c);
+           if(st.selected===c) btn.classList.add('selected');
+         }else{
+           // 해설 단계: 정답/오답 시각화
+           const isCorrect = Array.isArray(q.answer) ? q.answer.includes(c) : normalize(c)===normalize(q.answer);
+           if(isCorrect) btn.classList.add('correct');
+           if(st.selected===c && !isCorrect) btn.classList.add('wrong');
+           btn.disabled=true;
+         }
+         wrapper.appendChild(btn);
+       }
+       card.appendChild(wrapper);
+     });
+   }else{
+     const input=document.createElement('input');
+     input.placeholder='정답 입력';
+     input.style='width:100%;padding:15px;border:2px solid #e2e8f0;border-radius:12px;margin-top:15px;font-size:16px;';
+     input.value = st.selected||'';
+     const check=document.createElement('button');
+     check.className='btn';
+     check.style='margin-top:15px;width:100%;';
+     check.textContent= st.revealed? '제출됨' : '제출';
+     if(!st.revealed){
+       check.onclick=()=>select(input.value.trim());
+     }else{
+       check.disabled=true;
+     }
+     card.appendChild(input); card.appendChild(check);
+   }
+   // 해설 영역 (선택 후 다음을 누르면 표시)
+   if(st.revealed){
+     const resultCard=document.createElement('div');
+     resultCard.className='result-card';
+     // 정답/오답 표시
+     const resultDiv = document.createElement('div');
+     resultDiv.className = st.correct ? 'result-status result-correct' : 'result-status result-wrong';
+     resultDiv.textContent = st.correct ? '정답입니다! ✅' : '틀렸습니다! ❌';
+     resultCard.appendChild(resultDiv);
+     // 정답 번호 표시
+     let answerText = '';
+     if(Array.isArray(q.answer)){
+       // 다�� 정답: 번호로 표시
+       const answerNumbers = [];
+       q.answer.forEach(ans => {
+         const index = q.choices.findIndex(choice => normalize(choice) === normalize(ans));
+         if(index !== -1) answerNumbers.push(index + 1);
+       });
+       answerText = answerNumbers.join(', ');
+     }else{
+       // 단일 정답: 번호로 표시
+       const index = q.choices.findIndex(choice => normalize(choice) === normalize(q.answer));
+       answerText = index !== -1 ? (index + 1).toString() : '1';
+     }
+     const answerDiv = document.createElement('div');
+     answerDiv.className = 'answer-display';
+     answerDiv.innerHTML = `<strong>정답</strong>: ${answerText}`;
+     resultCard.appendChild(answerDiv);
+     // 해설 표시
+     if(q.explanation && q.explanation.toString().trim()){
+       const explanationDiv = document.createElement('div');
+       explanationDiv.className = 'explanation';
+       explanationDiv.innerHTML = `<strong>해설:</strong> ${escapeHtml(q.explanation.toString())}`;
+       resultCard.appendChild(explanationDiv);
+     }
+     card.appendChild(resultCard);
+   }
+   const meta=document.createElement('div');
+   meta.className='meta-info';
+   meta.textContent='유형: '+q.qtype.toUpperCase();
+   card.appendChild(meta);
+   quiz.appendChild(card);
+   const nextBtn=document.getElementById('next');
+   const prevBtn=document.getElementById('prev');
+   document.getElementById('status').textContent=`문항 ${idx+1}/${questions.length}`;
+   document.getElementById('score-text').textContent=`${score}/${questions.length}`;
+   prevBtn.disabled = idx===0;
+   nextBtn.textContent = st.revealed ? (idx===questions.length-1 ? '완료' : '다음 →') : '다음 →';
+ }
+ function selectMultiple(val, checked){
+  const q=questions[idx]; const st=getState(idx);
+  if(st.revealed) return; // 해설 단계에서는 선택 잠금
+  if(!st.selected) st.selected = [];
+  if(!Array.isArray(st.selected)) st.selected = [];
+  if(checked){
+    if(!st.selected.includes(val)) st.selected.push(val);
+  }else{
+    st.selected = st.selected.filter(item => item !== val);
+  }
+  document.getElementById('message').textContent='';
+  render(); // 시각적 반영
+}
+ function select(val){
+  const q=questions[idx]; const st=getState(idx);
+  if(st.revealed) return; // 해설 단계에서는 선택 잠금
+  st.selected = val;
+  st.correct = normalize(val)===normalize(q.answer);
+  document.getElementById('message').textContent='';
+  render(); // 시각적 반영
+}
+function restartQuiz(){
+  idx=0; score=0; state.clear(); finished=false;
+  document.getElementById('message').textContent='';
+  render();
+}
+document.getElementById('prev').onclick=()=>{ if(finished) return; if(idx>0){ idx--; render(); }};
+document.getElementById('next').onclick=()=>{
+  if(finished){ restartQuiz(); return; }
+  const st=getState(idx);
+  const q=questions[idx];
+  const msg=document.getElementById('message');
+  if(!st.revealed){
+    if(st.selected==null || (Array.isArray(st.selected) && st.selected.length===0)){
+      msg.textContent='먼저 답을 선택하세요.'; return;
+    }
+    // 해설 표시 단계로 전환하며 점수 반영(최초 1회)
+    st.revealed=true;
+    // 채점 로직
+    let isCorrect = false;
+    if(q.qtype === 'multiple'){
+      // 다중 정답: 선택한 답과 정답이 정확히 일치해야 함
+      if(Array.isArray(q.answer) && Array.isArray(st.selected)){
+        const sortedAnswer = [...q.answer].sort();
+        const sortedSelected = [...st.selected].sort();
+        isCorrect = sortedAnswer.length === sortedSelected.length &&
+                   sortedAnswer.every((ans, i) => normalize(ans) === normalize(sortedSelected[i]));
+      }
+    }else{
+      // 단일 정답
+      isCorrect = Array.isArray(q.answer) ?
+                 q.answer.some(ans => normalize(st.selected) === normalize(ans)) :
+                 normalize(st.selected) === normalize(q.answer);
+    }
+    st.correct = isCorrect;
+    if(st.correct && !st.scored){ score++; st.scored=true; }
+    render();
+  }else{
+    if(idx<questions.length-1){ idx++; render(); }
+    else { finished=true; render(); }
+  }
+};
+load();
+</script>
+</body></html>

questions.json ADDED Viewed

	@@ -0,0 +1,198 @@

+[
+  {
+    "qtype": "mcq",
+    "prompt": "조직이 더욱 커져 해외로 진출하거나 글로벌 지점을 늘리는 등 운영 범위가 확장될 때 나타납니다.해외 사업장의 법인장이나 임원들을 관리해야 할 필요성이 생기면서, 인사 담당 임원 (전무, 부사장, 상무 등)을 조직에 보직합니다. 이와 같은 인적자원관리의 유형을 무엇이라 하는가?",
+    "choices": [
+      "원시적인사관리(PPM)",
+      "인사관리(PM)",
+      "인적자원관리(HRM)",
+      "전략적인적자원관리(SHRM)"
+    ],
+    "answer": "전략적인적자원관리(SHRM)"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음 중 직무분석에 활용에 대해 틀린 내용을 고르시오.",
+    "choices": [
+      "직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다.",
+      "직무 분석은 조직 내에 존재하는 각 직무의 구체적인 내용, 요건, 역할과 책임을 체계적으로 분석하고 정의하는 활동. 인사 관리의 기초.",
+      "직무 기술서는 직무 분석을 통해 도출된 결과물로, 특정 직무를 구성하는 일의 전체 내용(과업, 절차, 책임 등)을 기술한 문서. 채용, 평가, 교육 등의 기준으로 활용.",
+      "경력개발을 위한 직무수행 요구조건(지식, 기술 등) 정립 및 이동, 승진을 위한 필요한 자료 제공 및 교육훈련 정보 제공"
+    ],
+    "answer": "직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다."
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음 중 직무개념에 대하여 틀린 설명을 고르시오.",
+    "choices": [
+      "직위 (Position)는 한 개인이 수행하는 하나 혹은 그 이상의 의무로 구성 ,특정 개인이 수행하는 모든 과업의 집단",
+      "의무 및 책임(Duty & Responsibility)은 특정 개인이 수행하는 것으로 여러 가지 유사한 과업으로 이루어짐",
+      "요소 (要所/Element)는 업무의 가장 작은 단위이며 전화를 받는다던가, 기록을 하는 등의 작은 단위업무",
+      "과업(Task)은 업무량 분석의 단위가 된다."
+    ],
+    "answer": "과업(Task)은 업무량 분석의 단위가 된다."
+  },
+  {
+    "qtype": "multiple",
+    "prompt": "직무분석 절차에 따른 설명이다. 틀린 설명을 고르시오.",
+    "choices": [
+      "직무정보수집방법에는 면접법, 관찰법, 설문지법(조사표법)이 있다.",
+      "TFT 등 일시적 활동은 기재하지 않음",
+      "작성원칙에 인원/시간 부족 등으로 수행하지 못하는 일이지만 수행이 필요한 일은 기록",
+      "직무조사표 작성시에 조직내 참여한 활동(예, TFT 활동)들을 모두 포함하도록 함.",
+      "직무담당기간이 짧은 직무담당자의 경우 전임자에게 작성하도록 함."
+    ],
+    "answer": [
+      "직무조사표 작성시에 조직내 참여한 활동(예, TFT 활동)들을 모두 포함하도록 함.",
+      "직무담당기간이 짧은 직무담당자의 경우 전임자에게 작성하도록 함."
+    ],
+    "explanation": "작성원칙 -원칙적으로 직무담당자가 작성(경험이 짧은 경우, 전임자나 차상위자 조언) -TFT 등 일시적 활동은 기재하지 않음 -인원/시간 부족 등으로 수행하지 못하는 일지만 수행이 필요한 일은 기록"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "인력계획의 의의와 중요성에 대한 설명 중 틀린 것을 고르시오.",
+    "choices": [
+      "기업의 전략적 목표를 달성하기 위하여 각 직무, 과업별로 적정자격을 보유한 인력을 규명하고,적정한 인력 수를 확보하여야 함.",
+      "인력계획은 현재 및 장래의 각 시점에서 기업이 필요로 하는 특성을 지닌 인원의 수를 예측하고, 사내, 사외에서 공급 가능한 인력을 고려하여 인력 의 수급을 조정하는 활동.",
+      "정원계획이란 현재의 시점에서 정태적인 인력계획을 말한다.",
+      "미래 적정한 기간동안(예, 5개년) 중장기 인력계획을 수립하기도 한다.",
+      "인력계획은 외부노동시장의 상황을 고려하여 현재 조직내부에서가용할 수 있은 인원의 수를 파악하는 것이다."
+    ],
+    "answer": "인력계획은 외부노동시장의 상황을 고려하여 현재 조직내부에서가용할 수 있은 인원의 수를 파악하는 것이다."
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "인력산정시 근로시간 기준에 대한 설명이다. 틀린 것을 고르시오.",
+    "choices": [
+      "ILO 여유율은 여유시간에 업무준비, 수리 등등 용변, 휴식 등도 포함.",
+      "생산직, 육체근로자 여유시간 많아야 한다.",
+      "팀별 적정인원 산정시 여유율을 고려해야 한다. ILO에서는 약 15%를 ���유율 기준으로 권고하고 있다.",
+      "남성 보다 여성의 여유시간 더 많아야 한다. 남성 9%, 여성 11%"
+    ],
+    "answer": "팀별 적정인원 산정시 여유율을 고려해야 한다. ILO에서는 약 15%를 여유율 기준으로 권고하고 있다."
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음 중 경력에 관한 내용으로 올바르지 않은 것을 고르시오.",
+    "choices": [
+      "한 개인이 입사로부터 퇴직에 이르기까지 경력경로를 개인과 조직이 함께 계획하고 실천하는 활동",
+      "경력개발이란 구성원 자신이 성공적인 조직생활을 하겠다는 의지와  경영자들이 인재를 육성하겠다는 의도를 포괄하는 개념",
+      "기업내 전 종업원, 특정 부류 직책에 있는 사원을 대상으로 개개인의 장기적인 직무수행 능력과 적성을 평가하고 개발하여 적성에 맞는 직무를 보임하는 계획적 활동",
+      "조기퇴직, 조기이탈을 막기 위한 방안 경력개발활동 등을 지원하기 위한 다양한 제도를 도입한다."
+    ],
+    "answer": "조기퇴직, 조기이탈을 막기 위한 방안 경력개발활동 등을 지원하기 위한 다양한 제도를 도입한다."
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "역량 면접(Competency-based Interview)이 미래의 성과를 예측하기 위해 주로 무엇을 하는지 틀린 설명을 고르시오",
+    "choices": [
+      "역량 면접이 미래의 성과를 예측하는 가장 중요한 근거는 과거의 행동이 미래의 행동을 예측한다는 기본 원칙에 있다.",
+      "면접에서는 지원자의 과거 행동을 파악한다. 이를 위하여 탐색질문(Probing Question)을 한다.",
+      "지원자가 경험한 모든 것이 미래에 반복된다는 것이 전제이다(행동의 전이가능성), 면접에서 이를 체크하는 것.",
+      "지원자의 지원에 생각이나 미래 상황에 대한 의견을 묻고 이를 중심으로 평가한다."
+    ],
+    "answer": "지원자의 지원에 생각이나 미래 상황에 대한 의견을 묻고 이를 중심으로 평가한다."
+  },
+  {
+    "qtype": "multiple",
+    "prompt": "다양한 면접에 관한 내용 중 틀린 것을 고르시오.",
+    "choices": [
+      "1:1 면접 -면접관 1, 지원자 1 -시간과 비용 소요  -임원면접",
+      "Presentation 면접 -5~10분간 PT -면접관 3~4명 -사전에 문제와 30분 제공",
+      "Role Play -지원자와 면접관 -지원자 多 -금융권 활용(금융상품 설명)",
+      "Assessment Center -위 모든 면접을 종합 -가장 객관적 평가 -임원 승진 시 활용",
+      "역량면접은 경험이나 상황을 중심으로 1:1 심층면접으로 진행해야 한다.",
+      "패널면접은 피면접자 다수, 면접관 다수로 구성되는 면접으로 면접 시간을 절약할 수 있는 장점이 있다.",
+      "Panel 면접 -면접관 4, 지원자 1 -지원자 당황 -실무팀장 면접",
+      "Group Discussion -지원자 多 -찬반 토론 등 다양 -대기업 신입사원 전형"
+    ],
+    "answer": [
+      "역량면접은 경험이나 상황을 중심으로 1:1 심층면접으로 진행해야 한다.",
+      "패널면접은 피면접자 다수, 면접관 다수로 구성되는 면접으로 면접 시간을 절약할 수 있는 장점이 있다."
+    ]
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음은 인사평가요소에 대한 설명이다. 바르지 않은 내용을 고르시오.",
+    "choices": [
+      "개인별 직무수행 결과와 관련된 업적평가, 성공적인 직무 수행방법과 관련된 역량평가라는 두 개의 축으로 설계.",
+      "업적평가(What)의 평가지표는 계량지표(정량지표)와 비계량 지표(정성지표)이다.",
+      "역량평가(How)의 평가지표는 역량 모델링을 통한 역량 및 행동지표 도출, 역량별 평가지표(Behavior Indicator) 활용",
+      "역량평가(How)의 평가방법은 BOS(Behavioral Observation Scales) 방식의 평정 척도법이다.",
+      "전통적 인사고과-평가요소는 업적, 역량이다"
+    ],
+    "answer": "전통적 인사고과-평가요소는 업적, 역량이다"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "사내모집과 사외모집의 장점과 단점에 관한 내용이다. 틀린 것을 고르시오.",
+    "choices": [
+      "사내모집 - 성장기의 인력수요를 충족시킬 수 있다.",
+      "사내모집 - 능력이 충분히 검증된 사람을 확보할 수 있다.",
+      "사내모집 - 성장기에는 유자격자를 충분히 공급하지 못함",
+      "사외모집 - 새로운 아이디어와 견해가 유인됨."
+    ],
+    "answer": "사내모집 - 성장기의 인력수요를 충족시킬 수 있다."
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음 Calibration Meeting에 관한 설명 중 틀린 것을 고르시오.",
+    "choices": [
+      "캘리브레이션 미팅은 평가과정에서 평가의 공정성과 일관성을 확보하기 위해 매우 중요한 과정.",
+      "평가대상자의 상사와 다른 상사(또는 차 상위 상사)가 모여서 평가대상자의 평가결과를 조정하고 평가등급을 확인",
+      "Calibration Meeting은 상대평가에 따른 우수한 집단의 평가상의 불이익을 방지하기 위한 제도",
+      "주요 목적은 ‘평가 일관성 확보’, ‘편견의 최소화’, 그리고 ‘성과관리 강화’이다."
+    ],
+    "answer": "Calibration Meeting은 상대평가에 따른 우수한 집단의 평가상의 불이익을 방지하기 위한 제도"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "버디의 선정요건 중 틀린 것을 고르시오.",
+    "choices": [
+      "신입 사원의 질문에 친절하고 꼼꼼하게 답변할 수 있는 사람",
+      "신입 사원의 업무와 관련된 경험 및 지식을 갖춘 사람",
+      "신입사원의 성공적 조직적응을 위하여 같은 경력목표를 가진 사람",
+      "신입 사원과 친밀한 관계를 형성할 수 있는 성격의 사람"
+    ],
+    "answer": "신입사원의 성공적 조직적응을 위하여 같은 경력목표를 가진 사람"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "목표설정 원칙 중 틀린 내용을 고르시오.",
+    "choices": [
+      "Time-based (달성 시한) - Time-bound (목표를 달성하는 데 필요한 기간은?)",
+      "Action-Oriented (행동 지향)  - Attainable (무엇을 어떻게 하면 목표를 달성할 수 있는지 알 수 있는가?)",
+      "Attainable: 달성 가능",
+      "Realistic (현실적) - Relevant (부서 또는 개인의 노력과 역량으로 달성할 수 있는가?)"
+    ],
+    "answer": "Attainable: 달성 가능"
+  },
+  {
+    "qtype": "mcq",
+    "prompt": "다음은 교육의 종류에 대한 설명이다. 틀린 내용을 고르시오.",
+    "choices": [
+      "액션 러닝은 교육에서 배운 지식(Learning)이 실제 행동(Action)으로 이어지지 않는 문제를 해결하기 위한 교육 방식.",
+      "OJT – 직장 내에서 자기 직무를 수행하면서 받는 informal learning이다. 이는 현장실습이 어려운 사무직 직원의 능력개발에 유용.",
+      "토론은 교육대상자에게 주제를 주어 각자의 의견발표를 통해 스스로 문제를 해결하도록 하는 방법",
+      "강의는 여러 사람을 대상으로 강사가 일방적 정보와 지식을 전달하는 교육"
+    ],
+    "answer": "OJT – 직장 내에서 자기 직무를 수행하면서 받는 informal learning이다. 이는 현장실습이 어려운 사무직 직원의 능력개발에 유용.",
+    "explanation": "OJT(현장훈련): 직무를 수행하면서 상사로부터 지도를 받는 비공식적 교육으로 직장내 교육이라 함 최근 ‘S-OJT’ 구체화되고, PBL 방식 기반으로 한 문제해결형 교육으로 추진되고 있음"
+  },
+  {
+    "qtype": "multiple",
+    "prompt": "샤인(Schein) 교수의  Career Anchor에 대한 설명으로 틀린 것을 모두 고르시오.",
+    "choices": [
+      "안정성 추구형 : 정해진 일정, 일을 추구",
+      "E. Schein 교수는 시대변화와 사회의 다원화 등을 고려하여 Career Anchor를 9가지로 다시 정의하였다.",
+      "도전 추구형: 도전, 문제해결, 장애극복 일",
+      "삶의 질 추구형: 경력목표 낮음, 개인의 삶 중시",
+      "전문가 추구형 – 도전, 문제해결 추구"
+    ],
+    "answer": [
+      "E. Schein 교수는 시대변화와 사회의 다원화 등을 고려하여 Career Anchor를 9가지로 다시 정의하였다.",
+      "전문가 추구형 – 도전, 문제해결 추구"
+    ],
+    "explanation": "개인이 경력을 선택할 때 포기하기 어려운 핵심적인 가치관, 동기, 역량의 조합. 샤인(Schein) 교수는 전문가, 리더십, 자율성, 안정성 등 8가지 유형을 제시했다."
+  }
+]

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ gradio>=4.0.0
2	+ pathlib

simple_quiz.html ADDED Viewed

	@@ -0,0 +1,337 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>인적자원관리 퀴즈</title>
+    <style>
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #1a202c;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        .quiz-header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            text-align: center;
+        }
+        .quiz-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin: 0 0 15px 0;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 30px;
+            margin: 20px 0;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .question-text {
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 1.7;
+            margin-bottom: 25px;
+            color: #2d3748;
+        }
+        .choice {
+            display: block;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            padding: 16px 20px;
+            margin: 12px 0;
+            background: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 500;
+            color: #4a5568;
+            width: 100%;
+            text-align: left;
+        }
+        .choice:hover {
+            border-color: #667eea;
+            background: #f7fafc;
+            transform: translateX(4px);
+        }
+        .choice.selected {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #ebf4ff, #e6fffa);
+            color: #2b6cb0;
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+        }
+        .btn {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 12px 24px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+            margin: 10px 5px;
+        }
+        .btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+        }
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .status-bar {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 15px 25px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        .progress-info {
+            font-weight: 500;
+            color: #4a5568;
+        }
+        .score-display {
+            background: linear-gradient(135deg, #48bb78, #38a169);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            font-size: 14px;
+            box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="quiz-header">
+            <h1 class="quiz-title">인적자원관리 퀴즈</h1>
+        </div>
+        <div class="status-bar">
+            <div id="status" class="progress-info">문항 1/16</div>
+            <div class="score-display">점수: <span id="score-text">0/16</span></div>
+        </div>
+        <div id="quiz"></div>
+        <div style="text-align: center; margin-top: 20px;">
+            <button id="prev" class="btn">← 이전</button>
+            <button id="next" class="btn">다음 →</button>
+        </div>
+    </div>
+    <script>
+        // 문제 데이터
+        const questions = [
+            {
+                "qtype": "mcq",
+                "prompt": "조직이 더욱 커져 해외로 진출하거나 글로벌 지점을 늘리는 등 운영 범위가 확장될 때 나타납니다.해외 사업장의 법인장이나 임원들을 관리해야 할 필요성이 생기면서, 인사 담당 임원 (전무, 부사장, 상무 등)을 조직에 보직합니다. 이와 같은 인적자원관리의 유형을 무엇이라 하는가?",
+                "choices": [
+                    "원시적인사관리(PPM)",
+                    "인사관리(PM)",
+                    "인적자원관리(HRM)",
+                    "전략적인적자원관리(SHRM)"
+                ],
+                "answer": "전략적인적자원관리(SHRM)"
+            },
+            {
+                "qtype": "mcq",
+                "prompt": "다음 중 직무분석에 활용에 대해 틀린 내용을 고르시오.",
+                "choices": [
+                    "직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다.",
+                    "직무 분석은 조직 내에 존재하는 각 직무의 구체적인 내용, 요건, 역할과 책임을 체계적으로 분석하고 정의하는 활동. 인사 관리의 기초.",
+                    "직무 기술서는 직무 분석을 통해 도출된 결과물로, 특정 직무를 구성하는 일의 전체 내용(과업, 절차, 책임 등)을 기술한 문서. 채용, 평가, 교육 등의 기준으로 활용.",
+                    "경력개발을 위한 직무수행 요구조건(지식, 기술 등) 정립 및 이동, 승진을 위한 필요한 자료 제공 및 교육훈련 정보 제공"
+                ],
+                "answer": "직무분석을 기초로 직무가치를 산정하고 보상체계에 반영할 수 있다."
+            }
+        ];
+        let idx = 0;
+        let score = 0;
+        let state = new Map();
+        let finished = false;
+        function getState(i) {
+            if (!state.has(i)) {
+                state.set(i, {selected: null, correct: false, revealed: false, scored: false});
+            }
+            return state.get(i);
+        }
+        function normalize(s) {
+            return (s || '').toString().replace(/[\s ]+/g, '').toLowerCase();
+        }
+        function select(val) {
+            const q = questions[idx];
+            const st = getState(idx);
+            if (st.revealed) return;
+            st.selected = val;
+            st.correct = normalize(val) === normalize(q.answer);
+            render();
+        }
+        function render() {
+            const quiz = document.getElementById('quiz');
+            quiz.innerHTML = '';
+            if (finished) {
+                const done = document.createElement('div');
+                done.className = 'card';
+                done.innerHTML = `
+                    <div style="text-align: center;">
+                        <h2>퀴즈 완료! 🎉</h2>
+                        <p>최종 점수: ${score}/${questions.length} (${Math.round(score/questions.length*100)}%)</p>
+                        <button class="btn" onclick="restart()">다시 시작하기</button>
+                    </div>
+                `;
+                quiz.appendChild(done);
+                return;
+            }
+            const q = questions[idx];
+            const st = getState(idx);
+            const card = document.createElement('div');
+            card.className = 'card';
+            const questionDiv = document.createElement('div');
+            questionDiv.className = 'question-text';
+            questionDiv.textContent = q.prompt;
+            card.appendChild(questionDiv);
+            if (q.choices && q.choices.length) {
+                q.choices.forEach((c, i) => {
+                    const btn = document.createElement('button');
+                    btn.className = 'choice';
+                    btn.textContent = (i + 1) + '. ' + c;
+                    if (!st.revealed) {
+                        btn.onclick = () => select(c);
+                        if (st.selected === c) btn.classList.add('selected');
+                    } else {
+                        btn.disabled = true;
+                        if (normalize(c) === normalize(q.answer)) {
+                            btn.style.backgroundColor = '#c6f6d5';
+                            btn.style.borderColor = '#48bb78';
+                        }
+                        if (st.selected === c && !st.correct) {
+                            btn.style.backgroundColor = '#fed7d7';
+                            btn.style.borderColor = '#f56565';
+                        }
+                    }
+                    card.appendChild(btn);
+                });
+            }
+            if (st.revealed) {
+                const resultDiv = document.createElement('div');
+                resultDiv.style.cssText = 'margin-top: 20px; padding: 15px; border-radius: 10px; text-align: center; font-weight: 600;';
+                if (st.correct) {
+                    resultDiv.textContent = '정답입니다! ✅';
+                    resultDiv.style.backgroundColor = '#c6f6d5';
+                    resultDiv.style.color = '#22543d';
+                } else {
+                    resultDiv.textContent = '틀렸습니다! ❌';
+                    resultDiv.style.backgroundColor = '#fed7d7';
+                    resultDiv.style.color = '#742a2a';
+                }
+                card.appendChild(resultDiv);
+                const answerDiv = document.createElement('div');
+                answerDiv.style.cssText = 'margin-top: 10px; padding: 10px; background: #f7fafc; border-radius: 8px;';
+                const answerIndex = q.choices.findIndex(choice => normalize(choice) === normalize(q.answer));
+                answerDiv.innerHTML = `<strong>정답:</strong> ${answerIndex + 1}`;
+                card.appendChild(answerDiv);
+            }
+            quiz.appendChild(card);
+            // 상태 업데이트
+            document.getElementById('status').textContent = `문항 ${idx + 1}/${questions.length}`;
+            document.getElementById('score-text').textContent = `${score}/${questions.length}`;
+            const prevBtn = document.getElementById('prev');
+            const nextBtn = document.getElementById('next');
+            prevBtn.disabled = idx === 0;
+            nextBtn.textContent = st.revealed ? (idx === questions.length - 1 ? '완료' : '다음 →') : '다음 →';
+        }
+        function restart() {
+            idx = 0;
+            score = 0;
+            state.clear();
+            finished = false;
+            render();
+        }
+        // 이벤트 리스너
+        document.getElementById('prev').onclick = () => {
+            if (finished) return;
+            if (idx > 0) {
+                idx--;
+                render();
+            }
+        };
+        document.getElementById('next').onclick = () => {
+            if (finished) {
+                restart();
+                return;
+            }
+            const st = getState(idx);
+            if (!st.revealed) {
+                if (st.selected == null) {
+                    alert('먼저 답을 선택하세요.');
+                    return;
+                }
+                st.revealed = true;
+                if (st.correct && !st.scored) {
+                    score++;
+                    st.scored = true;
+                }
+                render();
+            } else {
+                if (idx < questions.length - 1) {
+                    idx++;
+                    render();
+                } else {
+                    finished = true;
+                    render();
+                }
+            }
+        };
+        // 초기 렌더링
+        render();
+    </script>
+</body>
+</html>