Upload 2 files

simple_quiz.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>인적자원관리 퀴즈</title>
     <style>
+        * , *::before, *::after { box-sizing: border-box; }
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             line-height: 1.6;
@@ -13,11 +14,12 @@
             color: #1a202c;
             min-height: 100vh;
             padding: 20px;
+            overflow-x: hidden;
         }
         .container {
-            max-width: 800px;
+            max-width: 720px;
             margin: 0 auto;
-            padding: 0 20px;
+            padding: 0 16px;
         }
         .quiz-header {
             background: rgba(255, 255, 255, 0.95);
@@ -30,7 +32,7 @@
             text-align: center;
         }
         .quiz-title {
-            font-size: 28px;
+            font-size: clamp(22px, 6vw, 28px);
             font-weight: 700;
             margin: 0 0 15px 0;
             background: linear-gradient(135deg, #667eea, #764ba2);
@@ -41,29 +43,30 @@
         .card {
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(20px);
-            border-radius: 20px;
-            padding: 30px;
-            margin: 20px 0;
+            border-radius: 16px;
+            padding: 24px;
+            margin: 16px 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-size: clamp(16px, 4.5vw, 18px);
             font-weight: 500;
             line-height: 1.7;
-            margin-bottom: 25px;
+            margin-bottom: 20px;
             color: #2d3748;
         }
         .choice {
             display: block;
             border: 2px solid #e2e8f0;
             border-radius: 12px;
-            padding: 16px 20px;
-            margin: 12px 0;
+            padding: 14px 16px;
+            margin: 10px 0;
             background: white;
             cursor: pointer;
             transition: all 0.3s ease;
             font-weight: 500;
+            font-size: clamp(16px, 5vw, 18px);
             color: #4a5568;
             width: 100%;
             text-align: left;
@@ -84,10 +87,10 @@
             color: white;
             border: none;
             border-radius: 12px;
-            padding: 12px 24px;
+            padding: 12px 20px;
             cursor: pointer;
             font-weight: 500;
-            font-size: 14px;
+            font-size: 15px;
             transition: all 0.3s ease;
             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
             margin: 10px 5px;
@@ -104,11 +107,12 @@
             background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(10px);
             border-radius: 15px;
-            padding: 15px 25px;
-            margin-bottom: 20px;
+            padding: 12px 18px;
+            margin-bottom: 16px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            gap: 8px;
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
             border: 1px solid rgba(255, 255, 255, 0.3);
         }
@@ -119,12 +123,24 @@
         .score-display {
             background: linear-gradient(135deg, #48bb78, #38a169);
             color: white;
-            padding: 8px 16px;
+            padding: 8px 14px;
             border-radius: 20px;
             font-weight: 600;
             font-size: 14px;
             box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
         }
+
+        /* Mobile optimizations */
+        @media (max-width: 480px) {
+            body { padding: 8px; }
+            .container { padding: 0 6px; max-width: 100%; }
+            .quiz-header { padding: 18px; border-radius: 16px; }
+            .card { padding: 16px; border-radius: 14px; }
+            .question-text { margin-bottom: 16px; }
+            .choice { padding: 14px 16px; margin: 8px 0; font-size: clamp(17px, 5.4vw, 19px); }
+            .status-bar { flex-direction: column; align-items: stretch; text-align: center; }
+            .btn { padding: 12px 18px; font-size: 15px; }
+        }
     </style>
 </head>
 <body>
@@ -232,105 +248,102 @@
                     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.onclick = () => select(c);
+
+                    const stNow = getState(idx);
+                    if (stNow.revealed) {
                         btn.disabled = true;
+                        btn.style.cursor = 'default';
                         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';
+                            btn.style.background = 'linear-gradient(135deg, #f0fff4, #ebf8ff)';
+                            btn.style.color = '#2f855a';
                         }
                     }
+
+                    if (stNow.selected === c) {
+                        btn.classList.add('selected');
+                    }
+
                     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 btnWrap = document.createElement('div');
+            btnWrap.style.textAlign = 'center';
+            btnWrap.style.marginTop = '12px';
 
-                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);
-            }
+            const submitBtn = document.createElement('button');
+            submitBtn.className = 'btn';
+            submitBtn.textContent = '정답 확인';
+            submitBtn.onclick = () => reveal();
+
+            const nextBtn = document.createElement('button');
+            nextBtn.className = 'btn';
+            nextBtn.textContent = '다음 문항';
+            nextBtn.onclick = () => gotoNext();
+
+            btnWrap.appendChild(submitBtn);
+            btnWrap.appendChild(nextBtn);
+            card.appendChild(btnWrap);
 
             quiz.appendChild(card);
 
-            // 상태 업데이트
-            document.getElementById('status').textContent = `문항 ${idx + 1}/${questions.length}`;
+            // 상태 갱신
+            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 ? '완료' : '다음 →') : '다음 →';
+
+            // 버튼 상태
+            document.getElementById('prev').disabled = (idx === 0);
+            document.getElementById('next').disabled = (idx >= questions.length - 1);
+        }
+
+        function reveal() {
+            const st = getState(idx);
+            if (st.revealed) return;
+            const q = questions[idx];
+            if (st.selected == null) return;
+            st.revealed = true;
+            if (!st.scored && st.correct) {
+                score += 1;
+                st.scored = true;
+            }
+            render();
+        }
+
+        function gotoNext() {
+            if (idx < questions.length - 1) {
+                idx += 1;
+                render();
+            } else {
+                finished = true;
+                render();
+            }
         }
 
         function restart() {
             idx = 0;
             score = 0;
-            state.clear();
+            state = new Map();
             finished = false;
             render();
         }
 
-        // 이벤트 리스너
-        document.getElementById('prev').onclick = () => {
-            if (finished) return;
+        // 하단 버튼
+        document.getElementById('prev').addEventListener('click', () => {
             if (idx > 0) {
-                idx--;
+                idx -= 1;
                 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;
-                }
+        });
+        document.getElementById('next').addEventListener('click', () => {
+            if (idx < questions.length - 1) {
+                idx += 1;
                 render();
-            } else {
-                if (idx < questions.length - 1) {
-                    idx++;
-                    render();
-                } else {
-                    finished = true;
-                    render();
-                }
             }
-        };
+        });
 
-        // 초기 렌더링
+        // 초기 렌더
         render();
     </script>
 </body>