\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09<\/title>\n <style>\n :root {\n --primary-color: #2563eb;\n --primary-hover: #1d4ed8;\n --bg-color: #f8fafc;\n --card-bg: #ffffff;\n --text-color: #1e293b;\n --border-color: #e2e8f0;\n --gray-bg: #f1f5f9;\n --success-color: #16a34a;\n --danger-color: #dc2626;\n --warning-color: #d97706;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Helvetica Neue', Arial, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n padding: 20px;\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n background-color: var(--card-bg);\n border-radius: 12px;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n overflow: hidden;\n }\n\n header {\n background-color: var(--primary-color);\n color: white;\n padding: 20px;\n text-align: center;\n }\n\n header h1 {\n font-size: 1.5rem;\n margin-bottom: 5px;\n }\n\n .screen {\n padding: 30px;\n display: none;\n }\n\n .screen.active {\n display: block;\n }\n\n .start-screen {\n text-align: center;\n padding: 40px 20px;\n }\n\n .start-screen h2 {\n margin-bottom: 15px;\n color: var(--primary-color);\n }\n\n .start-screen p {\n margin-bottom: 30px;\n color: #64748b;\n }\n\n .btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 28px;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n\n .btn:hover {\n background-color: var(--primary-hover);\n }\n\n .btn:disabled {\n background-color: #cbd5e1;\n cursor: not-allowed;\n }\n\n .btn-secondary {\n background-color: #64748b;\n }\n .btn-secondary:hover {\n background-color: #475569;\n }\n\n .btn-danger {\n background-color: var(--danger-color);\n }\n .btn-danger:hover {\n background-color: #b91c1c;\n }\n\n .quiz-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 15px;\n margin-bottom: 20px;\n }\n\n .timer {\n font-size: 1.2rem;\n font-weight: bold;\n color: var(--danger-color);\n background-color: #fee2e2;\n padding: 5px 12px;\n border-radius: 20px;\n }\n\n .question-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .question-number {\n font-weight: bold;\n color: #64748b;\n }\n\n .review-check-btn {\n background: none;\n border: 2px solid var(--warning-color);\n color: var(--warning-color);\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: bold;\n transition: all 0.2s;\n }\n\n .review-check-btn.checked {\n background-color: var(--warning-color);\n color: white;\n }\n\n .question-text {\n font-size: 1.15rem;\n font-weight: bold;\n margin-bottom: 20px;\n }\n\n .options-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 30px;\n }\n\n .option-item {\n display: flex;\n align-items: center;\n padding: 12px 15px;\n border: 2px solid var(--border-color);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .option-item:hover {\n background-color: var(--gray-bg);\n border-color: #94a3b8;\n }\n\n .option-item input[type=\"radio\"] {\n margin-right: 10px;\n transform: scale(1.2);\n }\n\n .option-item.selected {\n border-color: var(--primary-color);\n background-color: #eff6ff;\n }\n\n .quiz-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n gap: 10px;\n }\n\n .palette-container {\n border-top: 2px solid var(--border-color);\n padding-top: 20px;\n }\n\n .palette-title {\n font-size: 0.9rem;\n color: #64748b;\n margin-bottom: 10px;\n }\n\n .palette-grid {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 8px;\n max-height: 200px;\n overflow-y: auto;\n }\n\n .palette-btn {\n aspect-ratio: 1;\n border: 2px solid var(--border-color);\n background-color: white;\n border-radius: 6px;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n\n .palette-btn.current {\n border-color: var(--primary-color);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);\n }\n\n .palette-btn.answered {\n background-color: #e0f2fe;\n border-color: #bae6fd;\n color: #0369a1;\n }\n\n .palette-btn.review::after {\n content: '\u2605';\n position: absolute;\n top: -6px;\n right: -6px;\n color: var(--warning-color);\n font-size: 0.8rem;\n }\n\n .result-header {\n text-align: center;\n margin-bottom: 25px;\n }\n\n .score-display {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary-color);\n margin: 10px 0;\n }\n\n .result-tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 10px;\n overflow-x: auto;\n }\n\n .tab-btn {\n background: none;\n border: none;\n padding: 8px 16px;\n font-size: 0.95rem;\n font-weight: bold;\n color: #64748b;\n cursor: pointer;\n border-radius: 20px;\n transition: all 0.2s;\n white-space: nowrap;\n }\n\n .tab-btn.active {\n background-color: var(--primary-color);\n color: white;\n }\n\n .result-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 30px;\n max-height: 450px;\n overflow-y: auto;\n padding-right: 5px;\n }\n\n .result-card {\n border: 2px solid var(--border-color);\n border-radius: 8px;\n padding: 15px;\n background-color: white;\n }\n\n .result-card.correct {\n border-left: 6px solid var(--success-color);\n }\n\n .result-card.incorrect {\n border-left: 6px solid var(--danger-color);\n }\n\n .result-card-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.9rem;\n font-weight: bold;\n }\n\n .badge-correct { color: var(--success-color); }\n .badge-incorrect { color: var(--danger-color); }\n\n .result-q-text {\n font-weight: bold;\n margin-bottom: 10px;\n }\n\n .result-answers {\n font-size: 0.9rem;\n margin-bottom: 10px;\n background-color: var(--gray-bg);\n padding: 8px 12px;\n border-radius: 6px;\n }\n\n .explanation {\n font-size: 0.9rem;\n color: #475569;\n border-top: 1px dashed var(--border-color);\n padding-top: 8px;\n }\n\n .result-actions {\n text-align: center;\n }\n\n @media (max-width: 600px) {\n .palette-grid {\n grid-template-columns: repeat(5, 1fr);\n }\n .quiz-nav {\n flex-direction: column;\n align-items: stretch;\n }\n .quiz-nav button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <header>\n <h1>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54<\/h1>\n <p>\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\u5206\u91ce\uff1a\u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u30e9\u30f3\u30c0\u30e010\u554f\uff09<\/p>\n <\/header>\n\n \n <div id=\"start-screen\" class=\"screen active start-screen\">\n <h2>\u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09<\/h2>\n <p>\u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u300c\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u554f\u984c\u30d7\u30fc\u30eb\u304b\u3089\u30e9\u30f3\u30c0\u30e0\u306b10\u554f\u304c\u51fa\u984c\u3055\u308c\u307e\u3059\uff09<\/p>\n <div>\n <button id=\"start-btn\" class=\"btn\">\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"screen\">\n <div class=\"quiz-header\">\n <span id=\"quiz-title-info\">\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc \u30c6\u30b9\u30c8\u4e2d<\/span>\n <div id=\"timer\" class=\"timer\">10:00<\/div>\n <\/div>\n\n <div class=\"question-meta\">\n <span id=\"question-number\" class=\"question-number\">\u554f\u984c 1 \/ 10<\/span>\n <button id=\"review-btn\" class=\"review-check-btn\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af<\/button>\n <\/div>\n\n <div id=\"question-text\" class=\"question-text\">\n \u3053\u3053\u306b\u554f\u984c\u6587\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n <\/div>\n\n <div id=\"options-list\" class=\"options-list\">\n \n <\/div>\n\n <div class=\"quiz-nav\">\n <button id=\"prev-btn\" class=\"btn btn-secondary\">\u524d\u306e\u554f\u984c<\/button>\n <button id=\"finish-early-btn\" class=\"btn btn-danger\">\u30c6\u30b9\u30c8\u7d42\u4e86<\/button>\n <button id=\"next-btn\" class=\"btn\">\u6b21\u306e\u554f\u984c<\/button>\n <\/div>\n\n <div class=\"palette-container\">\n <div class=\"palette-title\">\u554f\u984c\u30d1\u30ec\u30c3\u30c8\uff08\u30af\u30ea\u30c3\u30af\u3067\u30b8\u30e3\u30f3\u30d7\uff09<\/div>\n <div id=\"palette-grid\" class=\"palette-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"result-screen\" class=\"screen\">\n <div class=\"result-header\">\n <h2>\u30c6\u30b9\u30c8\u7d50\u679c<\/h2>\n <div id=\"score-display\" class=\"score-display\">\u5f97\u70b9: 0\u70b9 (0\/10\u554f\u6b63\u89e3)<\/div>\n <p id=\"time-taken-display\">\u6240\u8981\u6642\u9593: 0\u52060\u79d2<\/p>\n <\/div>\n\n <div class=\"result-tabs\">\n <button class=\"tab-btn active\" data-filter=\"all\">\u3059\u3079\u3066\u8868\u793a<\/button>\n <button class=\"tab-btn\" data-filter=\"incorrect\">\u00d7 \u4e0d\u6b63\u89e3\u306e\u307f<\/button>\n <button class=\"tab-btn\" data-filter=\"review\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u306e\u307f<\/button>\n <\/div>\n\n <div id=\"result-list\" class=\"result-list\">\n \n <\/div>\n\n <div class=\"result-actions\">\n <button id=\"restart-btn\" class=\"btn\">\u3082\u3046\u4e00\u5ea6\u6311\u6226\u3059\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ \u63d0\u4f9b\u3055\u308c\u305fPDF\u306e\u554f\u984c\u30c7\u30fc\u30bf\u3092\u57fa\u306b\u3057\u305f\u554f\u984c\u30d7\u30fc\u30eb\n const rawQuestions = [\n { q: \"100V-800W\u306e\u8868\u793a\u306e\u3042\u308b\u30db\u30c3\u30c8\u30d7\u30ec\u30fc\u30c8\u3092100V\u306e\u96fb\u6e90\u3067\u4f7f\u7528\u3059\u308b\u3068\u304d\u30011\u5206\u9593\u306e\u767a\u71b1\u91cf\u306f\u4f55J\u304b\u3002\", options: [\"48000 J\", \"8000 J\", \"24000 J\", \"96000 J\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u529b(W) \u00d7 \u6642\u9593(\u79d2) \uff1d \u767a\u71b1\u91cf(J) \u3088\u308a\u3001800W \u00d7 60\u79d2 \uff1d 48,000J\uff0848kJ\uff09\u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u96fb\u71b1\u7dda\u306b2A\u306e\u96fb\u6d41\u309210\u5206\u9593\u6d41\u3059\u3068\u3001\u767a\u71b1\u91cf\u306f9000J\u3060\u3063\u305f\u3002\u3053\u306e\u3068\u304d\u306e\u96fb\u5727\u306f\u4f55\u304b\u3002\", options: [\"7.5V\", \"15V\", \"5V\", \"10V\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u767a\u71b1\u91cf(J) = \u96fb\u5727(V) \u00d7 \u96fb\u6d41(A) \u00d7 \u6642\u9593(\u79d2) \u3088\u308a\u30019000 = V \u00d7 2A \u00d7 600\u79d2\u3002\u3053\u308c\u3092\u89e3\u304f\u3068 V = 7.5V \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u56de\u8def\u5185\u306e\u96fb\u6d41\u306e\u6d41\u308c\u308b\u5411\u304d\u304c\u9006\u306b\u306a\u308b\u3068\u3001\u691c\u6d41\u8a08\u306e\u6307\u91dd\u306e\u632f\u308c\u306f\u3069\u306e\u3088\u3046\u306b\u306a\u308b\u304b\u3002\", options: [\"\u9006\u306b\u632f\u308c\u308b\", \"\u5927\u304d\u304f\u632f\u308c\u308b\", \"\u632f\u308c\u306a\u304f\u306a\u308b\", \"\u5909\u308f\u3089\u306a\u3044\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6d41\u306e\u5411\u304d\u304c\u9006\u306b\u306a\u308b\u3068\u3001\u691c\u6d41\u8a08\u306e\u6307\u91dd\u3082\u9006\u65b9\u5411\u306b\u632f\u308c\u307e\u3059\u3002\" },\n { q: \"\u96fb\u6c17\u304c\u3082\u3064\u3001\u97f3\u3084\u71b1\u3092\u767a\u751f\u3055\u305b\u305f\u308a\u3082\u306e\u3092\u52d5\u304b\u3057\u305f\u308a\u3059\u308b\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5316\u5b66\u30a8\u30cd\u30eb\u30ae\u30fc\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6c17\u304c\u3082\u3064\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u96fb\u5727\u8a08\u306e\u4e00\u7aef\u5b50\u306b\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u304c\u3042\u308b\u304b\u3002\u7aef\u5b50\u306e\u6570\u5024\u3092\u7b54\u3048\u3088\u3002\", options: [\"300V, 15V, 3V\", \"100V, 10V, 1V\", \"500V, 50V, 5V\", \"150V, 15V, 1.5V\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4e00\u822c\u7684\u306a\u96fb\u5727\u8a08\u306e\u4e00\u7aef\u5b50\u306b\u306f\u3001300V\u300115V\u30013V\u306e3\u7a2e\u985e\u304c\u3042\u308a\u307e\u3059\u3002\" },\n { q: \"\u96fb\u6d41\u30fb\u96fb\u5727\u30fb\u62b5\u6297\u306e\u95a2\u4fc2\u3092\u8868\u3057\u305f\u6cd5\u5247\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\", \"\u30d5\u30ec\u30df\u30f3\u30b0\u306e\u6cd5\u5247\", \"\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u30d1\u30b9\u30ab\u30eb\u306e\u6cd5\u5247\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6d41\u306e\u5f37\u3055\u306f\u96fb\u5727\u306b\u6bd4\u4f8b\u3057\u3001\u62b5\u6297\u306b\u53cd\u6bd4\u4f8b\u3059\u308b\u3068\u3044\u3046\u95a2\u4fc2\u3092\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u30d5\u30ec\u30df\u30f3\u30b0\u5de6\u624b\u306e\u6cd5\u5247\u3067\u3001\u4e2d\u6307\u304c\u96fb\u6d41\u306e\u5411\u304d\u3001\u89aa\u6307\u304c\u96fb\u6d41\u304c\u78c1\u754c\u304b\u3089\u53d7\u3051\u308b\u529b\u306e\u5411\u304d\u3092\u8868\u3059\u3068\u304d\u3001\u4eba\u3055\u3057\u6307\u306f\u4f55\u306e\u5411\u304d\u3092\u8868\u3059\u304b\u3002\", options: [\"\u78c1\u754c\u306e\u5411\u304d\", \"\u96fb\u5727\u306e\u5411\u304d\", \"\u96fb\u5b50\u306e\u5411\u304d\", \"\u904b\u52d5\u306e\u5411\u304d\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30d5\u30ec\u30df\u30f3\u30b0\u5de6\u624b\u306e\u6cd5\u5247\u3067\u306f\u3001\u4eba\u3055\u3057\u6307\uff1d\u78c1\u754c\u306e\u5411\u304d\u3001\u4e2d\u6307\uff1d\u96fb\u6d41\u306e\u5411\u304d\u3001\u89aa\u6307\uff1d\u529b\u306e\u5411\u304d\u3092\u8868\u3057\u307e\u3059\u3002\" },\n { q: \"\u7570\u306a\u308b\u7a2e\u985e\u306e\u96fb\u6c17\u306f\u3057\u308a\u305e\u3051\u5408\u3044\u3001\u540c\u3058\u7a2e\u985e\u306e\u96fb\u6c17\u306f\u5f15\u304d\u5408\u3046\u3002\u3053\u306e\u3088\u3046\u306b\u3001\u96fb\u6c17\u306e\u9593\u3067\u306f\u305f\u3089\u304f\u529b\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u96fb\u6c17\u529b\uff08\u96fb\u6c17\u306e\u529b\uff09\", \"\u78c1\u529b\", \"\u91cd\u529b\", \"\u6469\u64e6\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7570\u306a\u308b\u7a2e\u985e\u306e\u96fb\u6c17\u306e\u9593\u3067\u306f\u305f\u3089\u304f\u529b\uff08\u3057\u308a\u305e\u3051\u5408\u3046\u30fb\u5f15\u304d\u5408\u3046\u529b\uff09\u3092\u96fb\u6c17\u529b\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u91d1\u5c5e\u306e\u3088\u3046\u306b\u96fb\u6d41\u3092\u6d41\u3057\u3084\u3059\u3044\u7269\u8cea\u306b\u306f\u81ea\u7531\u306b\u52d5\u304f\u96fb\u5b50\u306e\u6570\u306f\u591a\u3044\u304b\u3001\u5c11\u306a\u3044\u304b\u3002\", options: [\"\u591a\u3044\", \"\u5c11\u306a\u3044\", \"\u3069\u3061\u3089\u3067\u3082\u306a\u3044\", \"\u5909\u5316\u3057\u306a\u3044\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u91d1\u5c5e\u306a\u3069\u306e\u5c0e\u4f53\u306b\u306f\u3001\u81ea\u7531\u306b\u79fb\u52d5\u3067\u304d\u308b\u81ea\u7531\u96fb\u5b50\u304c\u591a\u304f\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\" },\n { q: \"\u30b3\u30a4\u30eb\u306e\u4e2d\u306e\u78c1\u754c\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u306b\u30b3\u30a4\u30eb\u306b\u751f\u3058\u308b\u96fb\u6d41\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u8a98\u5c0e\u96fb\u6d41\", \"\u6e26\u96fb\u6d41\", \"\u76f4\u6d41\", \"\u4ea4\u6d41\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u78c1\u8a98\u5c0e\u306b\u3088\u3063\u3066\u30b3\u30a4\u30eb\u306b\u6d41\u308c\u308b\u96fb\u6d41\u3092\u8a98\u5c0e\u96fb\u6d41\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u30cb\u30af\u30ed\u30e0\u7dda\u306b3V\u306e\u96fb\u5727\u3092\u304b\u3051\u305f\u30890.1A\u306e\u96fb\u6d41\u304c\u6d41\u308c\u305f\u3002\u62b5\u6297\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"30\u03a9\", \"0.3\u03a9\", \"3\u03a9\", \"300\u03a9\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\uff08\u62b5\u6297 \uff1d \u96fb\u5727 \u00f7 \u96fb\u6d41\uff09\u3088\u308a\u30013V \u00f7 0.1A \uff1d 30\u03a9 \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"100V-300W\u306e\u96fb\u71b1\u5668\u3092100V\u306e\u96fb\u6e90\u306b\u3064\u306a\u3044\u30678\u6642\u9593\u4f7f\u7528\u3057\u305f\u3068\u304d\u306e\u96fb\u529b\u91cf\u306f\u4f55Wh\u304b\u3002\", options: [\"2400 Wh\", \"300 Wh\", \"800 Wh\", \"240 Wh\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u529b\u91cf(Wh) \uff1d \u96fb\u529b(W) \u00d7 \u6642\u9593(\u6642\u9593) \u3088\u308a\u3001300W \u00d7 8\u6642\u9593 \uff1d 2400Wh \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u6c34\u306e\u96fb\u6c17\u5206\u89e3\u3067\u306f\u96fb\u6d41\u306b\u76f4\u6d41\u3001\u4ea4\u6d41\u306e\u3069\u3061\u3089\u304c\u7528\u3044\u3089\u308c\u308b\u304b\u3002\", options: [\"\u76f4\u6d41\", \"\u4ea4\u6d41\", \"\u3069\u3061\u3089\u3067\u3082\u3088\u3044\", \"\u4e21\u65b9\u540c\u6642\u306b\u4f7f\u7528\u3059\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6c34\u306e\u96fb\u6c17\u5206\u89e3\u306b\u306f\u3001\u4e00\u5b9a\u306e\u5411\u304d\u306b\u6d41\u308c\u308b\u300c\u76f4\u6d41\u300d\u304c\u7528\u3044\u3089\u308c\u307e\u3059\u3002\" },\n { q: \"\u30ac\u30e9\u30b9\u7ba1\u306e\u4e21\u7aef\u306b\u9ad8\u3044\u96fb\u5727\u3092\u304b\u3051\u3001\u7ba1\u5185\u306e\u7a7a\u6c17\u3092\u629c\u3044\u3066\u3044\u304f\u3053\u3068\u3067\u898b\u3089\u308c\u308b\u653e\u96fb\u73fe\u8c61\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u771f\u7a7a\u653e\u96fb\", \"\u96fb\u78c1\u8a98\u5c0e\", \"\u9759\u96fb\u6c17\", \"\u6c34\u5727\u653e\u96fb\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6c17\u5727\u306e\u4f4e\u3044\u7a7a\u9593\u3067\u8d77\u3053\u308b\u653e\u96fb\u3092\u300c\u771f\u7a7a\u653e\u96fb\u300d\u3068\u3044\u3044\u307e\u3059\u3002\" }\n ];\n\n let questions = [];\n let currentIndex = 0;\n let userAnswers = {};\n let reviewFlags = {};\n let timerInterval = null;\n let timeLeft = 600;\n let startTime = 0;\n\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultScreen = document.getElementById('result-screen');\n \n const startBtn = document.getElementById('start-btn');\n const nextBtn = document.getElementById('next-btn');\n const prevBtn = document.getElementById('prev-btn');\n const finishEarlyBtn = document.getElementById('finish-early-btn');\n const restartBtn = document.getElementById('restart-btn');\n const reviewBtn = document.getElementById('review-btn');\n \n const questionNumberEl = document.getElementById('question-number');\n const questionTextEl = document.getElementById('question-text');\n const optionsListEl = document.getElementById('options-list');\n const timerEl = document.getElementById('timer');\n const paletteGridEl = document.getElementById('palette-grid');\n const scoreDisplayEl = document.getElementById('score-display');\n const timeTakenDisplayEl = document.getElementById('time-taken-display');\n const resultListEl = document.getElementById('result-list');\n const tabBtns = document.querySelectorAll('.tab-btn');\n\n function selectAndShuffleQuestions(allQuestions, count) {\n let indices = Array.from({ length: allQuestions.length }, (_, i) => i);\n for (let i = indices.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [indices[i], indices[j]] = [indices[j], indices[i]];\n }\n\n let selectedIndices = indices.slice(0, Math.min(count, allQuestions.length));\n let selected = selectedIndices.map(i => allQuestions[i]);\n\n return selected.map(q => {\n let optionObjs = q.options.map((opt, idx) => ({\n text: opt,\n isCorrect: idx === q.answer\n }));\n\n for (let i = optionObjs.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [optionObjs[i], optionObjs[j]] = [optionObjs[j], optionObjs[i]];\n }\n\n const newAnswerIdx = optionObjs.findIndex(o => o.isCorrect);\n\n return {\n q: q.q,\n options: optionObjs.map(o => o.text),\n answer: newAnswerIdx,\n explanation: q.explanation\n };\n });\n }\n\n startBtn.addEventListener('click', () => {\n questions = selectAndShuffleQuestions(rawQuestions, 10);\n currentIndex = 0;\n userAnswers = {};\n reviewFlags = {};\n timeLeft = 600;\n startTime = Date.now();\n\n switchScreen(quizScreen);\n startTimer();\n renderQuestion();\n renderPalette();\n });\n\n function switchScreen(screen) {\n [startScreen, quizScreen, resultScreen].forEach(s => s.classList.remove('active'));\n screen.classList.add('active');\n }\n\n function startTimer() {\n clearInterval(timerInterval);\n updateTimerDisplay();\n timerInterval = setInterval(() => {\n timeLeft--;\n updateTimerDisplay();\n if (timeLeft <= 0) {\n clearInterval(timerInterval);\n finishTest();\n }\n }, 1000);\n }\n\n function updateTimerDisplay() {\n const minutes = Math.floor(timeLeft \/ 60);\n const seconds = timeLeft % 60;\n timerEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n }\n\n function renderQuestion() {\n const qData = questions[currentIndex];\n questionNumberEl.textContent = `\u554f\u984c ${currentIndex + 1} \/ ${questions.length}`;\n questionTextEl.textContent = qData.q;\n\n if (reviewFlags[currentIndex]) {\n reviewBtn.textContent = '\u2605 \u898b\u76f4\u3057\u4e2d\uff08\u89e3\u9664\uff09';\n reviewBtn.classList.add('checked');\n } else {\n reviewBtn.textContent = '\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af';\n reviewBtn.classList.remove('checked');\n }\n\n optionsListEl.innerHTML = '';\n qData.options.forEach((opt, idx) => {\n const label = document.createElement('label');\n label.className = `option-item ${userAnswers[currentIndex] === idx ? 'selected' : ''}`;\n \n const radio = document.createElement('input');\n radio.type = 'radio';\n radio.name = 'quiz-option';\n radio.value = idx;\n radio.checked = userAnswers[currentIndex] === idx;\n\n radio.addEventListener('change', () => {\n userAnswers[currentIndex] = idx;\n renderOptionsSelection();\n renderPalette();\n });\n\n label.appendChild(radio);\n label.appendChild(document.createTextNode(opt));\n optionsListEl.appendChild(label);\n });\n\n prevBtn.disabled = currentIndex === 0;\n nextBtn.textContent = currentIndex === questions.length - 1 ? '\u7d50\u679c\u3092\u898b\u308b' : '\u6b21\u306e\u554f\u984c';\n }\n\n function renderOptionsSelection() {\n const items = optionsListEl.querySelectorAll('.option-item');\n items.forEach((item, idx) => {\n if (userAnswers[currentIndex] === idx) {\n item.classList.add('selected');\n item.querySelector('input').checked = true;\n } else {\n item.classList.remove('selected');\n item.querySelector('input').checked = false;\n }\n });\n }\n\n nextBtn.addEventListener('click', () => {\n if (currentIndex < questions.length - 1) {\n currentIndex++;\n renderQuestion();\n renderPalette();\n } else {\n finishTest();\n }\n });\n\n prevBtn.addEventListener('click', () => {\n if (currentIndex > 0) {\n currentIndex--;\n renderQuestion();\n renderPalette();\n }\n });\n\n finishEarlyBtn.addEventListener('click', () => {\n if (confirm('\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3057\u3066\u7d50\u679c\u753b\u9762\u3078\u79fb\u52d5\u3057\u307e\u3059\u304b\uff1f')) {\n finishTest();\n }\n });\n\n reviewBtn.addEventListener('click', () => {\n reviewFlags[currentIndex] = !reviewFlags[currentIndex];\n renderQuestion();\n renderPalette();\n });\n\n function renderPalette() {\n paletteGridEl.innerHTML = '';\n questions.forEach((_, idx) => {\n const btn = document.createElement('button');\n btn.className = 'palette-btn';\n btn.textContent = idx + 1;\n\n if (idx === currentIndex) btn.classList.add('current');\n if (userAnswers[idx] !== undefined) btn.classList.add('answered');\n if (reviewFlags[idx]) btn.classList.add('review');\n\n btn.addEventListener('click', () => {\n currentIndex = idx;\n renderQuestion();\n renderPalette();\n });\n\n paletteGridEl.appendChild(btn);\n });\n }\n\n function finishTest() {\n clearInterval(timerInterval);\n switchScreen(resultScreen);\n\n let score = 0;\n questions.forEach((q, idx) => {\n if (userAnswers[idx] === q.answer) {\n score++;\n }\n });\n\n const total = questions.length;\n const percentage = Math.round((score \/ total) * 100);\n scoreDisplayEl.textContent = `\u5f97\u70b9: ${percentage}\u70b9 (${score}\/${total}\u554f\u6b63\u89e3)`;\n\n const timeSpent = Math.floor((Date.now() - startTime) \/ 1000);\n const mins = Math.floor(timeSpent \/ 60);\n const secs = timeSpent % 60;\n timeTakenDisplayEl.textContent = `\u6240\u8981\u6642\u9593: ${mins}\u5206${secs}\u79d2`;\n\n renderResultList('all');\n }\n\n function renderResultList(filter) {\n resultListEl.innerHTML = '';\n questions.forEach((q, idx) => {\n const isCorrect = userAnswers[idx] === q.answer;\n const isReviewed = !!reviewFlags[idx];\n\n if (filter === 'incorrect' && isCorrect) return;\n if (filter === 'review' && !isReviewed) return;\n\n const card = document.createElement('div');\n card.className = `result-card ${isCorrect ? 'correct' : 'incorrect'}`;\n\n const userAnsText = userAnswers[idx] !== undefined ? q.options[userAnswers[idx]] : '\u672a\u89e3\u7b54';\n const correctAnsText = q.options[q.answer];\n\n card.innerHTML = `\n <div class=\"result-card-header\">\n <span>\u554f\u984c ${idx + 1} ${isReviewed ? ' \u2605\u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u6e08\u307f' : ''}<\/span>\n <span class=\"${isCorrect ? 'badge-correct' : 'badge-incorrect'}\">\n ${isCorrect ? '\u3007 \u6b63\u89e3' : '\u00d7 \u4e0d\u6b63\u89e3'}\n <\/span>\n <\/div>\n <div class=\"result-q-text\">${q.q}<\/div>\n <div class=\"result-answers\">\n \u3042\u306a\u305f\u306e\u89e3\u7b54: ${userAnsText} \uff0f \u6b63\u89e3: ${correctAnsText}\n <\/div>\n <div class=\"explanation\">${q.explanation}<\/div>\n `;\n resultListEl.appendChild(card);\n });\n\n if (resultListEl.children.length === 0) {\n resultListEl.innerHTML = '<p style=\"text-align: center; color: #64748b; padding: 20px;\">\u8a72\u5f53\u3059\u308b\u554f\u984c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n }\n }\n\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n tabBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderResultList(btn.getAttribute('data-filter'));\n });\n });\n\n restartBtn.addEventListener('click', () => {\n switchScreen(startScreen);\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\u5206\u91ce\uff1a\u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u30e9\u30f3\u30c0\u30e010\u554f\uff09 \u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u300c\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8\u300d\u30dc\u30bf\u30f3\u3092\u62bc […]<\/p>\n","protected":false},"author":1,"featured_media":2120,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_EyeCatch_disable":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_lightning_design_setting":{"layout":"col-one-no-subsection","site_body_padding":"true"},"footnotes":""},"categories":[308],"tags":[],"class_list":["post-4629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-308"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/comments?post=4629"}],"version-history":[{"count":4,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629\/revisions"}],"predecessor-version":[{"id":4643,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629\/revisions\/4643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media\/2120"}],"wp:attachment":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media?parent=4629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

$\"\u30af\u30a4\u30ba\"$ <\/div>\n\n\n\n \n \n \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09<\/title>\n <style>\n :root {\n --primary-color: #2563eb;\n --primary-hover: #1d4ed8;\n --bg-color: #f8fafc;\n --card-bg: #ffffff;\n --text-color: #1e293b;\n --border-color: #e2e8f0;\n --gray-bg: #f1f5f9;\n --success-color: #16a34a;\n --danger-color: #dc2626;\n --warning-color: #d97706;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Helvetica Neue', Arial, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n padding: 20px;\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n background-color: var(--card-bg);\n border-radius: 12px;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n overflow: hidden;\n }\n\n header {\n background-color: var(--primary-color);\n color: white;\n padding: 20px;\n text-align: center;\n }\n\n header h1 {\n font-size: 1.5rem;\n margin-bottom: 5px;\n }\n\n .screen {\n padding: 30px;\n display: none;\n }\n\n .screen.active {\n display: block;\n }\n\n .start-screen {\n text-align: center;\n padding: 40px 20px;\n }\n\n .start-screen h2 {\n margin-bottom: 15px;\n color: var(--primary-color);\n }\n\n .start-screen p {\n margin-bottom: 30px;\n color: #64748b;\n }\n\n .btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 28px;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n\n .btn:hover {\n background-color: var(--primary-hover);\n }\n\n .btn:disabled {\n background-color: #cbd5e1;\n cursor: not-allowed;\n }\n\n .btn-secondary {\n background-color: #64748b;\n }\n .btn-secondary:hover {\n background-color: #475569;\n }\n\n .btn-danger {\n background-color: var(--danger-color);\n }\n .btn-danger:hover {\n background-color: #b91c1c;\n }\n\n .quiz-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 15px;\n margin-bottom: 20px;\n }\n\n .timer {\n font-size: 1.2rem;\n font-weight: bold;\n color: var(--danger-color);\n background-color: #fee2e2;\n padding: 5px 12px;\n border-radius: 20px;\n }\n\n .question-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .question-number {\n font-weight: bold;\n color: #64748b;\n }\n\n .review-check-btn {\n background: none;\n border: 2px solid var(--warning-color);\n color: var(--warning-color);\n padding: 4px 10px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: bold;\n transition: all 0.2s;\n }\n\n .review-check-btn.checked {\n background-color: var(--warning-color);\n color: white;\n }\n\n .question-text {\n font-size: 1.15rem;\n font-weight: bold;\n margin-bottom: 20px;\n }\n\n .options-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 30px;\n }\n\n .option-item {\n display: flex;\n align-items: center;\n padding: 12px 15px;\n border: 2px solid var(--border-color);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .option-item:hover {\n background-color: var(--gray-bg);\n border-color: #94a3b8;\n }\n\n .option-item input[type=\"radio\"] {\n margin-right: 10px;\n transform: scale(1.2);\n }\n\n .option-item.selected {\n border-color: var(--primary-color);\n background-color: #eff6ff;\n }\n\n .quiz-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n gap: 10px;\n }\n\n .palette-container {\n border-top: 2px solid var(--border-color);\n padding-top: 20px;\n }\n\n .palette-title {\n font-size: 0.9rem;\n color: #64748b;\n margin-bottom: 10px;\n }\n\n .palette-grid {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 8px;\n max-height: 200px;\n overflow-y: auto;\n }\n\n .palette-btn {\n aspect-ratio: 1;\n border: 2px solid var(--border-color);\n background-color: white;\n border-radius: 6px;\n font-weight: bold;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n\n .palette-btn.current {\n border-color: var(--primary-color);\n box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);\n }\n\n .palette-btn.answered {\n background-color: #e0f2fe;\n border-color: #bae6fd;\n color: #0369a1;\n }\n\n .palette-btn.review::after {\n content: '\u2605';\n position: absolute;\n top: -6px;\n right: -6px;\n color: var(--warning-color);\n font-size: 0.8rem;\n }\n\n .result-header {\n text-align: center;\n margin-bottom: 25px;\n }\n\n .score-display {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary-color);\n margin: 10px 0;\n }\n\n .result-tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 10px;\n overflow-x: auto;\n }\n\n .tab-btn {\n background: none;\n border: none;\n padding: 8px 16px;\n font-size: 0.95rem;\n font-weight: bold;\n color: #64748b;\n cursor: pointer;\n border-radius: 20px;\n transition: all 0.2s;\n white-space: nowrap;\n }\n\n .tab-btn.active {\n background-color: var(--primary-color);\n color: white;\n }\n\n .result-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 30px;\n max-height: 450px;\n overflow-y: auto;\n padding-right: 5px;\n }\n\n .result-card {\n border: 2px solid var(--border-color);\n border-radius: 8px;\n padding: 15px;\n background-color: white;\n }\n\n .result-card.correct {\n border-left: 6px solid var(--success-color);\n }\n\n .result-card.incorrect {\n border-left: 6px solid var(--danger-color);\n }\n\n .result-card-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.9rem;\n font-weight: bold;\n }\n\n .badge-correct { color: var(--success-color); }\n .badge-incorrect { color: var(--danger-color); }\n\n .result-q-text {\n font-weight: bold;\n margin-bottom: 10px;\n }\n\n .result-answers {\n font-size: 0.9rem;\n margin-bottom: 10px;\n background-color: var(--gray-bg);\n padding: 8px 12px;\n border-radius: 6px;\n }\n\n .explanation {\n font-size: 0.9rem;\n color: #475569;\n border-top: 1px dashed var(--border-color);\n padding-top: 8px;\n }\n\n .result-actions {\n text-align: center;\n }\n\n @media (max-width: 600px) {\n .palette-grid {\n grid-template-columns: repeat(5, 1fr);\n }\n .quiz-nav {\n flex-direction: column;\n align-items: stretch;\n }\n .quiz-nav button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <header>\n <h1>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54<\/h1>\n <p>\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\u5206\u91ce\uff1a\u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u30e9\u30f3\u30c0\u30e010\u554f\uff09<\/p>\n <\/header>\n\n \n <div id=\"start-screen\" class=\"screen active start-screen\">\n <h2>\u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09<\/h2>\n <p>\u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u300c\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u554f\u984c\u30d7\u30fc\u30eb\u304b\u3089\u30e9\u30f3\u30c0\u30e0\u306b10\u554f\u304c\u51fa\u984c\u3055\u308c\u307e\u3059\uff09<\/p>\n <div>\n <button id=\"start-btn\" class=\"btn\">\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"screen\">\n <div class=\"quiz-header\">\n <span id=\"quiz-title-info\">\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc \u30c6\u30b9\u30c8\u4e2d<\/span>\n <div id=\"timer\" class=\"timer\">10:00<\/div>\n <\/div>\n\n <div class=\"question-meta\">\n <span id=\"question-number\" class=\"question-number\">\u554f\u984c 1 \/ 10<\/span>\n <button id=\"review-btn\" class=\"review-check-btn\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af<\/button>\n <\/div>\n\n <div id=\"question-text\" class=\"question-text\">\n \u3053\u3053\u306b\u554f\u984c\u6587\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n <\/div>\n\n <div id=\"options-list\" class=\"options-list\">\n \n <\/div>\n\n <div class=\"quiz-nav\">\n <button id=\"prev-btn\" class=\"btn btn-secondary\">\u524d\u306e\u554f\u984c<\/button>\n <button id=\"finish-early-btn\" class=\"btn btn-danger\">\u30c6\u30b9\u30c8\u7d42\u4e86<\/button>\n <button id=\"next-btn\" class=\"btn\">\u6b21\u306e\u554f\u984c<\/button>\n <\/div>\n\n <div class=\"palette-container\">\n <div class=\"palette-title\">\u554f\u984c\u30d1\u30ec\u30c3\u30c8\uff08\u30af\u30ea\u30c3\u30af\u3067\u30b8\u30e3\u30f3\u30d7\uff09<\/div>\n <div id=\"palette-grid\" class=\"palette-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"result-screen\" class=\"screen\">\n <div class=\"result-header\">\n <h2>\u30c6\u30b9\u30c8\u7d50\u679c<\/h2>\n <div id=\"score-display\" class=\"score-display\">\u5f97\u70b9: 0\u70b9 (0\/10\u554f\u6b63\u89e3)<\/div>\n <p id=\"time-taken-display\">\u6240\u8981\u6642\u9593: 0\u52060\u79d2<\/p>\n <\/div>\n\n <div class=\"result-tabs\">\n <button class=\"tab-btn active\" data-filter=\"all\">\u3059\u3079\u3066\u8868\u793a<\/button>\n <button class=\"tab-btn\" data-filter=\"incorrect\">\u00d7 \u4e0d\u6b63\u89e3\u306e\u307f<\/button>\n <button class=\"tab-btn\" data-filter=\"review\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u306e\u307f<\/button>\n <\/div>\n\n <div id=\"result-list\" class=\"result-list\">\n \n <\/div>\n\n <div class=\"result-actions\">\n <button id=\"restart-btn\" class=\"btn\">\u3082\u3046\u4e00\u5ea6\u6311\u6226\u3059\u308b<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n \/\/ \u63d0\u4f9b\u3055\u308c\u305fPDF\u306e\u554f\u984c\u30c7\u30fc\u30bf\u3092\u57fa\u306b\u3057\u305f\u554f\u984c\u30d7\u30fc\u30eb\n const rawQuestions = [\n { q: \"100V-800W\u306e\u8868\u793a\u306e\u3042\u308b\u30db\u30c3\u30c8\u30d7\u30ec\u30fc\u30c8\u3092100V\u306e\u96fb\u6e90\u3067\u4f7f\u7528\u3059\u308b\u3068\u304d\u30011\u5206\u9593\u306e\u767a\u71b1\u91cf\u306f\u4f55J\u304b\u3002\", options: [\"48000 J\", \"8000 J\", \"24000 J\", \"96000 J\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u529b(W) \u00d7 \u6642\u9593(\u79d2) \uff1d \u767a\u71b1\u91cf(J) \u3088\u308a\u3001800W \u00d7 60\u79d2 \uff1d 48,000J\uff0848kJ\uff09\u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u96fb\u71b1\u7dda\u306b2A\u306e\u96fb\u6d41\u309210\u5206\u9593\u6d41\u3059\u3068\u3001\u767a\u71b1\u91cf\u306f9000J\u3060\u3063\u305f\u3002\u3053\u306e\u3068\u304d\u306e\u96fb\u5727\u306f\u4f55\u304b\u3002\", options: [\"7.5V\", \"15V\", \"5V\", \"10V\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u767a\u71b1\u91cf(J) = \u96fb\u5727(V) \u00d7 \u96fb\u6d41(A) \u00d7 \u6642\u9593(\u79d2) \u3088\u308a\u30019000 = V \u00d7 2A \u00d7 600\u79d2\u3002\u3053\u308c\u3092\u89e3\u304f\u3068 V = 7.5V \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u56de\u8def\u5185\u306e\u96fb\u6d41\u306e\u6d41\u308c\u308b\u5411\u304d\u304c\u9006\u306b\u306a\u308b\u3068\u3001\u691c\u6d41\u8a08\u306e\u6307\u91dd\u306e\u632f\u308c\u306f\u3069\u306e\u3088\u3046\u306b\u306a\u308b\u304b\u3002\", options: [\"\u9006\u306b\u632f\u308c\u308b\", \"\u5927\u304d\u304f\u632f\u308c\u308b\", \"\u632f\u308c\u306a\u304f\u306a\u308b\", \"\u5909\u308f\u3089\u306a\u3044\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6d41\u306e\u5411\u304d\u304c\u9006\u306b\u306a\u308b\u3068\u3001\u691c\u6d41\u8a08\u306e\u6307\u91dd\u3082\u9006\u65b9\u5411\u306b\u632f\u308c\u307e\u3059\u3002\" },\n { q: \"\u96fb\u6c17\u304c\u3082\u3064\u3001\u97f3\u3084\u71b1\u3092\u767a\u751f\u3055\u305b\u305f\u308a\u3082\u306e\u3092\u52d5\u304b\u3057\u305f\u308a\u3059\u308b\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5316\u5b66\u30a8\u30cd\u30eb\u30ae\u30fc\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6c17\u304c\u3082\u3064\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u96fb\u5727\u8a08\u306e\u4e00\u7aef\u5b50\u306b\u306f\u3069\u306e\u3088\u3046\u306a\u3082\u306e\u304c\u3042\u308b\u304b\u3002\u7aef\u5b50\u306e\u6570\u5024\u3092\u7b54\u3048\u3088\u3002\", options: [\"300V, 15V, 3V\", \"100V, 10V, 1V\", \"500V, 50V, 5V\", \"150V, 15V, 1.5V\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4e00\u822c\u7684\u306a\u96fb\u5727\u8a08\u306e\u4e00\u7aef\u5b50\u306b\u306f\u3001300V\u300115V\u30013V\u306e3\u7a2e\u985e\u304c\u3042\u308a\u307e\u3059\u3002\" },\n { q: \"\u96fb\u6d41\u30fb\u96fb\u5727\u30fb\u62b5\u6297\u306e\u95a2\u4fc2\u3092\u8868\u3057\u305f\u6cd5\u5247\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\", \"\u30d5\u30ec\u30df\u30f3\u30b0\u306e\u6cd5\u5247\", \"\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u30d1\u30b9\u30ab\u30eb\u306e\u6cd5\u5247\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u6d41\u306e\u5f37\u3055\u306f\u96fb\u5727\u306b\u6bd4\u4f8b\u3057\u3001\u62b5\u6297\u306b\u53cd\u6bd4\u4f8b\u3059\u308b\u3068\u3044\u3046\u95a2\u4fc2\u3092\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u30d5\u30ec\u30df\u30f3\u30b0\u5de6\u624b\u306e\u6cd5\u5247\u3067\u3001\u4e2d\u6307\u304c\u96fb\u6d41\u306e\u5411\u304d\u3001\u89aa\u6307\u304c\u96fb\u6d41\u304c\u78c1\u754c\u304b\u3089\u53d7\u3051\u308b\u529b\u306e\u5411\u304d\u3092\u8868\u3059\u3068\u304d\u3001\u4eba\u3055\u3057\u6307\u306f\u4f55\u306e\u5411\u304d\u3092\u8868\u3059\u304b\u3002\", options: [\"\u78c1\u754c\u306e\u5411\u304d\", \"\u96fb\u5727\u306e\u5411\u304d\", \"\u96fb\u5b50\u306e\u5411\u304d\", \"\u904b\u52d5\u306e\u5411\u304d\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30d5\u30ec\u30df\u30f3\u30b0\u5de6\u624b\u306e\u6cd5\u5247\u3067\u306f\u3001\u4eba\u3055\u3057\u6307\uff1d\u78c1\u754c\u306e\u5411\u304d\u3001\u4e2d\u6307\uff1d\u96fb\u6d41\u306e\u5411\u304d\u3001\u89aa\u6307\uff1d\u529b\u306e\u5411\u304d\u3092\u8868\u3057\u307e\u3059\u3002\" },\n { q: \"\u7570\u306a\u308b\u7a2e\u985e\u306e\u96fb\u6c17\u306f\u3057\u308a\u305e\u3051\u5408\u3044\u3001\u540c\u3058\u7a2e\u985e\u306e\u96fb\u6c17\u306f\u5f15\u304d\u5408\u3046\u3002\u3053\u306e\u3088\u3046\u306b\u3001\u96fb\u6c17\u306e\u9593\u3067\u306f\u305f\u3089\u304f\u529b\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u96fb\u6c17\u529b\uff08\u96fb\u6c17\u306e\u529b\uff09\", \"\u78c1\u529b\", \"\u91cd\u529b\", \"\u6469\u64e6\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7570\u306a\u308b\u7a2e\u985e\u306e\u96fb\u6c17\u306e\u9593\u3067\u306f\u305f\u3089\u304f\u529b\uff08\u3057\u308a\u305e\u3051\u5408\u3046\u30fb\u5f15\u304d\u5408\u3046\u529b\uff09\u3092\u96fb\u6c17\u529b\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u91d1\u5c5e\u306e\u3088\u3046\u306b\u96fb\u6d41\u3092\u6d41\u3057\u3084\u3059\u3044\u7269\u8cea\u306b\u306f\u81ea\u7531\u306b\u52d5\u304f\u96fb\u5b50\u306e\u6570\u306f\u591a\u3044\u304b\u3001\u5c11\u306a\u3044\u304b\u3002\", options: [\"\u591a\u3044\", \"\u5c11\u306a\u3044\", \"\u3069\u3061\u3089\u3067\u3082\u306a\u3044\", \"\u5909\u5316\u3057\u306a\u3044\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u91d1\u5c5e\u306a\u3069\u306e\u5c0e\u4f53\u306b\u306f\u3001\u81ea\u7531\u306b\u79fb\u52d5\u3067\u304d\u308b\u81ea\u7531\u96fb\u5b50\u304c\u591a\u304f\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\" },\n { q: \"\u30b3\u30a4\u30eb\u306e\u4e2d\u306e\u78c1\u754c\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u306b\u30b3\u30a4\u30eb\u306b\u751f\u3058\u308b\u96fb\u6d41\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u8a98\u5c0e\u96fb\u6d41\", \"\u6e26\u96fb\u6d41\", \"\u76f4\u6d41\", \"\u4ea4\u6d41\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u78c1\u8a98\u5c0e\u306b\u3088\u3063\u3066\u30b3\u30a4\u30eb\u306b\u6d41\u308c\u308b\u96fb\u6d41\u3092\u8a98\u5c0e\u96fb\u6d41\u3068\u3044\u3044\u307e\u3059\u3002\" },\n { q: \"\u30cb\u30af\u30ed\u30e0\u7dda\u306b3V\u306e\u96fb\u5727\u3092\u304b\u3051\u305f\u30890.1A\u306e\u96fb\u6d41\u304c\u6d41\u308c\u305f\u3002\u62b5\u6297\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"30\u03a9\", \"0.3\u03a9\", \"3\u03a9\", \"300\u03a9\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30aa\u30fc\u30e0\u306e\u6cd5\u5247\uff08\u62b5\u6297 \uff1d \u96fb\u5727 \u00f7 \u96fb\u6d41\uff09\u3088\u308a\u30013V \u00f7 0.1A \uff1d 30\u03a9 \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"100V-300W\u306e\u96fb\u71b1\u5668\u3092100V\u306e\u96fb\u6e90\u306b\u3064\u306a\u3044\u30678\u6642\u9593\u4f7f\u7528\u3057\u305f\u3068\u304d\u306e\u96fb\u529b\u91cf\u306f\u4f55Wh\u304b\u3002\", options: [\"2400 Wh\", \"300 Wh\", \"800 Wh\", \"240 Wh\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u96fb\u529b\u91cf(Wh) \uff1d \u96fb\u529b(W) \u00d7 \u6642\u9593(\u6642\u9593) \u3088\u308a\u3001300W \u00d7 8\u6642\u9593 \uff1d 2400Wh \u3068\u306a\u308a\u307e\u3059\u3002\" },\n { q: \"\u6c34\u306e\u96fb\u6c17\u5206\u89e3\u3067\u306f\u96fb\u6d41\u306b\u76f4\u6d41\u3001\u4ea4\u6d41\u306e\u3069\u3061\u3089\u304c\u7528\u3044\u3089\u308c\u308b\u304b\u3002\", options: [\"\u76f4\u6d41\", \"\u4ea4\u6d41\", \"\u3069\u3061\u3089\u3067\u3082\u3088\u3044\", \"\u4e21\u65b9\u540c\u6642\u306b\u4f7f\u7528\u3059\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6c34\u306e\u96fb\u6c17\u5206\u89e3\u306b\u306f\u3001\u4e00\u5b9a\u306e\u5411\u304d\u306b\u6d41\u308c\u308b\u300c\u76f4\u6d41\u300d\u304c\u7528\u3044\u3089\u308c\u307e\u3059\u3002\" },\n { q: \"\u30ac\u30e9\u30b9\u7ba1\u306e\u4e21\u7aef\u306b\u9ad8\u3044\u96fb\u5727\u3092\u304b\u3051\u3001\u7ba1\u5185\u306e\u7a7a\u6c17\u3092\u629c\u3044\u3066\u3044\u304f\u3053\u3068\u3067\u898b\u3089\u308c\u308b\u653e\u96fb\u73fe\u8c61\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u771f\u7a7a\u653e\u96fb\", \"\u96fb\u78c1\u8a98\u5c0e\", \"\u9759\u96fb\u6c17\", \"\u6c34\u5727\u653e\u96fb\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6c17\u5727\u306e\u4f4e\u3044\u7a7a\u9593\u3067\u8d77\u3053\u308b\u653e\u96fb\u3092\u300c\u771f\u7a7a\u653e\u96fb\u300d\u3068\u3044\u3044\u307e\u3059\u3002\" }\n ];\n\n let questions = [];\n let currentIndex = 0;\n let userAnswers = {};\n let reviewFlags = {};\n let timerInterval = null;\n let timeLeft = 600;\n let startTime = 0;\n\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultScreen = document.getElementById('result-screen');\n \n const startBtn = document.getElementById('start-btn');\n const nextBtn = document.getElementById('next-btn');\n const prevBtn = document.getElementById('prev-btn');\n const finishEarlyBtn = document.getElementById('finish-early-btn');\n const restartBtn = document.getElementById('restart-btn');\n const reviewBtn = document.getElementById('review-btn');\n \n const questionNumberEl = document.getElementById('question-number');\n const questionTextEl = document.getElementById('question-text');\n const optionsListEl = document.getElementById('options-list');\n const timerEl = document.getElementById('timer');\n const paletteGridEl = document.getElementById('palette-grid');\n const scoreDisplayEl = document.getElementById('score-display');\n const timeTakenDisplayEl = document.getElementById('time-taken-display');\n const resultListEl = document.getElementById('result-list');\n const tabBtns = document.querySelectorAll('.tab-btn');\n\n function selectAndShuffleQuestions(allQuestions, count) {\n let indices = Array.from({ length: allQuestions.length }, (_, i) => i);\n for (let i = indices.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [indices[i], indices[j]] = [indices[j], indices[i]];\n }\n\n let selectedIndices = indices.slice(0, Math.min(count, allQuestions.length));\n let selected = selectedIndices.map(i => allQuestions[i]);\n\n return selected.map(q => {\n let optionObjs = q.options.map((opt, idx) => ({\n text: opt,\n isCorrect: idx === q.answer\n }));\n\n for (let i = optionObjs.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [optionObjs[i], optionObjs[j]] = [optionObjs[j], optionObjs[i]];\n }\n\n const newAnswerIdx = optionObjs.findIndex(o => o.isCorrect);\n\n return {\n q: q.q,\n options: optionObjs.map(o => o.text),\n answer: newAnswerIdx,\n explanation: q.explanation\n };\n });\n }\n\n startBtn.addEventListener('click', () => {\n questions = selectAndShuffleQuestions(rawQuestions, 10);\n currentIndex = 0;\n userAnswers = {};\n reviewFlags = {};\n timeLeft = 600;\n startTime = Date.now();\n\n switchScreen(quizScreen);\n startTimer();\n renderQuestion();\n renderPalette();\n });\n\n function switchScreen(screen) {\n [startScreen, quizScreen, resultScreen].forEach(s => s.classList.remove('active'));\n screen.classList.add('active');\n }\n\n function startTimer() {\n clearInterval(timerInterval);\n updateTimerDisplay();\n timerInterval = setInterval(() => {\n timeLeft--;\n updateTimerDisplay();\n if (timeLeft <= 0) {\n clearInterval(timerInterval);\n finishTest();\n }\n }, 1000);\n }\n\n function updateTimerDisplay() {\n const minutes = Math.floor(timeLeft \/ 60);\n const seconds = timeLeft % 60;\n timerEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n }\n\n function renderQuestion() {\n const qData = questions[currentIndex];\n questionNumberEl.textContent = `\u554f\u984c ${currentIndex + 1} \/ ${questions.length}`;\n questionTextEl.textContent = qData.q;\n\n if (reviewFlags[currentIndex]) {\n reviewBtn.textContent = '\u2605 \u898b\u76f4\u3057\u4e2d\uff08\u89e3\u9664\uff09';\n reviewBtn.classList.add('checked');\n } else {\n reviewBtn.textContent = '\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af';\n reviewBtn.classList.remove('checked');\n }\n\n optionsListEl.innerHTML = '';\n qData.options.forEach((opt, idx) => {\n const label = document.createElement('label');\n label.className = `option-item ${userAnswers[currentIndex] === idx ? 'selected' : ''}`;\n \n const radio = document.createElement('input');\n radio.type = 'radio';\n radio.name = 'quiz-option';\n radio.value = idx;\n radio.checked = userAnswers[currentIndex] === idx;\n\n radio.addEventListener('change', () => {\n userAnswers[currentIndex] = idx;\n renderOptionsSelection();\n renderPalette();\n });\n\n label.appendChild(radio);\n label.appendChild(document.createTextNode(opt));\n optionsListEl.appendChild(label);\n });\n\n prevBtn.disabled = currentIndex === 0;\n nextBtn.textContent = currentIndex === questions.length - 1 ? '\u7d50\u679c\u3092\u898b\u308b' : '\u6b21\u306e\u554f\u984c';\n }\n\n function renderOptionsSelection() {\n const items = optionsListEl.querySelectorAll('.option-item');\n items.forEach((item, idx) => {\n if (userAnswers[currentIndex] === idx) {\n item.classList.add('selected');\n item.querySelector('input').checked = true;\n } else {\n item.classList.remove('selected');\n item.querySelector('input').checked = false;\n }\n });\n }\n\n nextBtn.addEventListener('click', () => {\n if (currentIndex < questions.length - 1) {\n currentIndex++;\n renderQuestion();\n renderPalette();\n } else {\n finishTest();\n }\n });\n\n prevBtn.addEventListener('click', () => {\n if (currentIndex > 0) {\n currentIndex--;\n renderQuestion();\n renderPalette();\n }\n });\n\n finishEarlyBtn.addEventListener('click', () => {\n if (confirm('\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3057\u3066\u7d50\u679c\u753b\u9762\u3078\u79fb\u52d5\u3057\u307e\u3059\u304b\uff1f')) {\n finishTest();\n }\n });\n\n reviewBtn.addEventListener('click', () => {\n reviewFlags[currentIndex] = !reviewFlags[currentIndex];\n renderQuestion();\n renderPalette();\n });\n\n function renderPalette() {\n paletteGridEl.innerHTML = '';\n questions.forEach((_, idx) => {\n const btn = document.createElement('button');\n btn.className = 'palette-btn';\n btn.textContent = idx + 1;\n\n if (idx === currentIndex) btn.classList.add('current');\n if (userAnswers[idx] !== undefined) btn.classList.add('answered');\n if (reviewFlags[idx]) btn.classList.add('review');\n\n btn.addEventListener('click', () => {\n currentIndex = idx;\n renderQuestion();\n renderPalette();\n });\n\n paletteGridEl.appendChild(btn);\n });\n }\n\n function finishTest() {\n clearInterval(timerInterval);\n switchScreen(resultScreen);\n\n let score = 0;\n questions.forEach((q, idx) => {\n if (userAnswers[idx] === q.answer) {\n score++;\n }\n });\n\n const total = questions.length;\n const percentage = Math.round((score \/ total) * 100);\n scoreDisplayEl.textContent = `\u5f97\u70b9: ${percentage}\u70b9 (${score}\/${total}\u554f\u6b63\u89e3)`;\n\n const timeSpent = Math.floor((Date.now() - startTime) \/ 1000);\n const mins = Math.floor(timeSpent \/ 60);\n const secs = timeSpent % 60;\n timeTakenDisplayEl.textContent = `\u6240\u8981\u6642\u9593: ${mins}\u5206${secs}\u79d2`;\n\n renderResultList('all');\n }\n\n function renderResultList(filter) {\n resultListEl.innerHTML = '';\n questions.forEach((q, idx) => {\n const isCorrect = userAnswers[idx] === q.answer;\n const isReviewed = !!reviewFlags[idx];\n\n if (filter === 'incorrect' && isCorrect) return;\n if (filter === 'review' && !isReviewed) return;\n\n const card = document.createElement('div');\n card.className = `result-card ${isCorrect ? 'correct' : 'incorrect'}`;\n\n const userAnsText = userAnswers[idx] !== undefined ? q.options[userAnswers[idx]] : '\u672a\u89e3\u7b54';\n const correctAnsText = q.options[q.answer];\n\n card.innerHTML = `\n <div class=\"result-card-header\">\n <span>\u554f\u984c ${idx + 1} ${isReviewed ? ' \u2605\u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u6e08\u307f' : ''}<\/span>\n <span class=\"${isCorrect ? 'badge-correct' : 'badge-incorrect'}\">\n ${isCorrect ? '\u3007 \u6b63\u89e3' : '\u00d7 \u4e0d\u6b63\u89e3'}\n <\/span>\n <\/div>\n <div class=\"result-q-text\">${q.q}<\/div>\n <div class=\"result-answers\">\n \u3042\u306a\u305f\u306e\u89e3\u7b54: ${userAnsText} \uff0f \u6b63\u89e3: ${correctAnsText}\n <\/div>\n <div class=\"explanation\">${q.explanation}<\/div>\n `;\n resultListEl.appendChild(card);\n });\n\n if (resultListEl.children.length === 0) {\n resultListEl.innerHTML = '<p style=\"text-align: center; color: #64748b; padding: 20px;\">\u8a72\u5f53\u3059\u308b\u554f\u984c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n }\n }\n\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n tabBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderResultList(btn.getAttribute('data-filter'));\n });\n });\n\n restartBtn.addEventListener('click', () => {\n switchScreen(startScreen);\n });\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\u5206\u91ce\uff1a\u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u30e9\u30f3\u30c0\u30e010\u554f\uff09 \u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u96fb\u6d41\u3068\u78c1\u754c\u30fb\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u300c\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8\u300d\u30dc\u30bf\u30f3\u3092\u62bc […]<\/p>\n","protected":false},"author":1,"featured_media":2120,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_EyeCatch_disable":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_lightning_design_setting":{"layout":"col-one-no-subsection","site_body_padding":"true"},"footnotes":""},"categories":[308],"tags":[],"class_list":["post-4629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-308"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/comments?post=4629"}],"version-history":[{"count":4,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629\/revisions"}],"predecessor-version":[{"id":4643,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4629\/revisions\/4643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media\/2120"}],"wp:attachment":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media?parent=4629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}