\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u904b\u52d5\u3068\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 \/* \u30b9\u30bf\u30fc\u30c8\u753b\u9762 *\/\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 \/* \u30dc\u30bf\u30f3\u5171\u901a *\/\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 \/* \u30af\u30a4\u30ba\u30d8\u30c3\u30c0\u30fc *\/\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 \/* \u554f\u984c\u30a8\u30ea\u30a2 *\/\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 \/* \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30a8\u30ea\u30a2 *\/\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 \/* \u554f\u984c\u30d1\u30ec\u30c3\u30c8 *\/\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 \/* \u7d50\u679c\u753b\u9762 *\/\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>\u904b\u52d5\u3068\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\u904b\u52d5\u3068\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<\/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\">\u904b\u52d5\u3068\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 const rawQuestions = [\n { q: \"\u91cd\u30551.5N\u306e\u30dc\u30fc\u30eb\u304c\u57fa\u6e96\u9762\u304b\u30892m\u306e\u9ad8\u3055\u306b\u306f\u306d\u4e0a\u304c\u3063\u305f\u3068\u304d\u306e\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"3J\", \"1.5J\", \"2J\", \"6J\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc(J) \uff1d \u91cd\u3055(N) \u00d7 \u9ad8\u3055(m) \u3088\u308a\u30011.5N \u00d7 2m \uff1d 3J \u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u3001\u69d8\u3005\u306a\u5f62\u3092\u3068\u308a\u306a\u304c\u3089\u3001\u5168\u4f53\u3068\u3057\u3066\u306e\u91cf\u306f\u4e00\u5b9a\u3068\u306a\u3063\u3066\u3044\u308b\u3002\u3053\u306e\u6cd5\u5247\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u8cea\u91cf\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u6163\u6027\u306e\u6cd5\u5247\", \"\u30d1\u30b9\u30ab\u30eb\u306e\u539f\u7406\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u5909\u63db\u306e\u524d\u5f8c\u3067\u30a8\u30cd\u30eb\u30ae\u30fc\u306e\u7dcf\u91cf\u304c\u4e00\u5b9a\u306b\u4fdd\u305f\u308c\u308b\u6cd5\u5247\u3092\u300c\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u7a7a\u6c17\u4e2d\u3067\u30dc\u30fc\u30eb\u3068\u7fbd\u6bdb\u3092\u540c\u6642\u306b\u843d\u4e0b\u3055\u305b\u3066\u3082\u3001\u843d\u4e0b\u306e\u3088\u3046\u3059\u304c\u540c\u3058\u3088\u3046\u306b\u306a\u3089\u306a\u3044\u3002\u3053\u308c\u306f\u7fbd\u6bdb\u306b\u306f\u4f55\u304c\u306f\u305f\u3089\u3044\u3066\u3044\u308b\u304b\u3089\u304b\u3002\", options: [\"\u7a7a\u6c17\u306e\u62b5\u6297\", \"\u91cd\u529b\", \"\u6d6e\u529b\", \"\u6469\u64e6\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7a7a\u6c17\u4e2d\u3067\u306f\u3001\u8efd\u3044\u7fbd\u6bdb\u306a\u3069\u306f\u300c\u7a7a\u6c17\u306e\u62b5\u6297\u300d\u3092\u5927\u304d\u304f\u53d7\u3051\u308b\u305f\u3081\u3001\u81ea\u7531\u843d\u4e0b\u306e\u3088\u3046\u306b\u540c\u6642\u306b\u843d\u3061\u307e\u305b\u3093[cite: 17, 23]\u3002\" },\n { q: \"\u30e2\u30fc\u30bf\u30fc\u306f\u3001\u96fb\u6c17\u306e\u3082\u3064\u4f55\u3068\u3044\u3046\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u904b\u52d5\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u5909\u63db\u3057\u3066\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\u304b\u3002\", options: [\"\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5149\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5316\u5b66\u30a8\u30cd\u30eb\u30ae\u30fc\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30e2\u30fc\u30bf\u30fc\u306f\u300c\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\u300d\u3092\u904b\u52d5\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u5909\u63db\u3057\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u8cea\u91cf10kg\u306e\u7269\u4f53\u3092\u3082\u3063\u3066\u7acb\u3063\u3066\u3044\u308b\u4eba\u306f\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\u304b\u3001\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\u304b\u3002\", options: [\"\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\", \"\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\", \"\u5834\u5408\u306b\u3088\u308b\", \"\u30de\u30a4\u30ca\u30b9\u306e\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7269\u7406\u306b\u304a\u3051\u308b\u4ed5\u4e8b\u306f\u300c\u529b\u306e\u304b\u3051\u305f\u65b9\u5411\u306b\u7269\u4f53\u304c\u79fb\u52d5\u3057\u305f\u304b\u300d\u3067\u6c7a\u307e\u308a\u307e\u3059\u3002\u52d5\u3044\u3066\u3044\u306a\u3044\u305f\u3081\u300c\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\u300d\u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u4ed6\u306e\u7269\u4f53\u3092\u52d5\u304b\u3057\u305f\u308a\u3001\u5909\u5f62\u3057\u305f\u308a\u3001\u3053\u308f\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u80fd\u529b\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u4ed5\u4e8b\", \"\u529b\", \"\u96fb\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4ed5\u4e8b\u3092\u3059\u308b\u80fd\u529b\u306e\u3053\u3068\u3092\u300c\u30a8\u30cd\u30eb\u30ae\u30fc\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"1.0kg\u306e\u9244\u7403A\u30922.0cm\/s\u306e\u901f\u3055\u3067\u6728\u7247\u306b\u885d\u7a81\u3055\u305b\u308b\u3068\u3001\u6728\u7247\u306f30cm\u79fb\u52d5\u3057\u305f\u3002\u6b21\u306b\u3001\u3042\u308b\u8cea\u91cf\u306e\u9244\u7403B\u30922.0cm\/s\u306e\u901f\u3055\u3067\u885d\u7a81\u3055\u305b\u308b\u3068\u6728\u7247\u306f90cm\u79fb\u52d5\u3057\u305f\u3002\u9244\u7403B\u306e\u8cea\u91cf\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"3.0kg\", \"1.5kg\", \"6.0kg\", \"9.0kg\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6728\u7247\u306e\u79fb\u52d5\u8ddd\u96e2\u306f\u7269\u4f53\u306e\u8cea\u91cf\u306b\u6bd4\u4f8b\u3057\u307e\u3059\u3002\u79fb\u52d5\u8ddd\u96e2\u304c3\u500d\uff0830cm\u219290cm\uff09\u306b\u306a\u3063\u3066\u3044\u308b\u305f\u3081\u3001\u8cea\u91cf\u30823\u500d\u306e 1.0kg \u00d7 3 \uff1d 3.0kg \u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u659c\u9762\u3067\u53f0\u8eca\u3092\u8d70\u3089\u305b\u305f\u3068\u304d\u306e\u53f0\u8eca\u306e\u904b\u52d5\u306f\u7b49\u901f\u76f4\u7dda\u904b\u52d5\u3068\u3044\u3048\u308b\u304b\u3001\u3044\u3048\u306a\u3044\u304b\u3002\", options: [\"\u3044\u3048\u306a\u3044\", \"\u3044\u3048\u308b\", \"\u3069\u3061\u3089\u3068\u3082\u8a00\u3048\u306a\u3044\", \"\u6469\u64e6\u304c\u306a\u3044\u5834\u5408\u306e\u307f\u3044\u3048\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u659c\u9762\u3092\u4e0b\u308b\u53f0\u8eca\u306f\u901f\u3055\u304c\u5909\u5316\uff08\u52a0\u901f\uff09\u3059\u308b\u305f\u3081\u3001\u300c\u7b49\u901f\u76f4\u7dda\u904b\u52d5\u300d\u3068\u306f\u3044\u3048\u307e\u305b\u3093[cite: 17, 23]\u3002\" },\n { q: \"\u5358\u4f4d\u6642\u9593\u306b\u7269\u4f53\u304c\u79fb\u52d5\u3057\u305f\u8ddd\u96e2\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u901f\u3055\", \"\u5e73\u5747\u306e\u901f\u3055\", \"\u77ac\u9593\u7684\u30b9\u30d4\u30fc\u30c9\", \"\u52a0\u901f\u5ea6\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u5358\u4f4d\u6642\u9593\u3042\u305f\u308a\u306b\u9032\u3080\u8ddd\u96e2\u3092\u300c\u901f\u3055\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u659c\u9762\u306b\u3042\u308b\u7269\u4f53\u306e\u8ee2\u304c\u308b\u901f\u3055\u306f\u6642\u9593\u3068\u3068\u3082\u306b\u901f\u304f\u306a\u308b\u304c\u3001\u901f\u3055\u306e\u5909\u5316\u3059\u308b\u5272\u5408\u306f\u659c\u9762\u306e\u89d2\u5ea6\u304c\u5c0f\u3055\u304f\u306a\u308b\u3068\u3069\u3046\u306a\u308b\u304b\u3002\", options: [\"\u5c0f\u3055\u304f\u306a\u308b\", \"\u5927\u304d\u304f\u306a\u308b\", \"\u5909\u308f\u3089\u306a\u3044\", \"\u30bc\u30ed\u306b\u306a\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u659c\u9762\u306e\u89d2\u5ea6\u3092\u5c0f\u3055\u304f\u3059\u308b\u3068\u3001\u50be\u304d\u304c\u7de9\u3084\u304b\u306b\u306a\u308a\u3001\u901f\u3055\u306e\u5897\u3048\u65b9\uff08\u5909\u5316\u3059\u308b\u5272\u5408\uff09\u3082\u300c\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u300d[cite: 17, 23]\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, count);\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u904b\u52d5\u3068\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u904b\u52d5\u3068\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\u904b\u52d5\u3068\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\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u30c6 […]<\/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-4627","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\/4627","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=4627"}],"version-history":[{"count":1,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4627\/revisions"}],"predecessor-version":[{"id":4628,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4627\/revisions\/4628"}],"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=4627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4627"}],"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\u904b\u52d5\u3068\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 \/* \u30b9\u30bf\u30fc\u30c8\u753b\u9762 *\/\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 \/* \u30dc\u30bf\u30f3\u5171\u901a *\/\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 \/* \u30af\u30a4\u30ba\u30d8\u30c3\u30c0\u30fc *\/\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 \/* \u554f\u984c\u30a8\u30ea\u30a2 *\/\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 \/* \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30a8\u30ea\u30a2 *\/\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 \/* \u554f\u984c\u30d1\u30ec\u30c3\u30c8 *\/\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 \/* \u7d50\u679c\u753b\u9762 *\/\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>\u904b\u52d5\u3068\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\u904b\u52d5\u3068\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<\/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\">\u904b\u52d5\u3068\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 const rawQuestions = [\n { q: \"\u91cd\u30551.5N\u306e\u30dc\u30fc\u30eb\u304c\u57fa\u6e96\u9762\u304b\u30892m\u306e\u9ad8\u3055\u306b\u306f\u306d\u4e0a\u304c\u3063\u305f\u3068\u304d\u306e\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"3J\", \"1.5J\", \"2J\", \"6J\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4f4d\u7f6e\u30a8\u30cd\u30eb\u30ae\u30fc(J) \uff1d \u91cd\u3055(N) \u00d7 \u9ad8\u3055(m) \u3088\u308a\u30011.5N \u00d7 2m \uff1d 3J \u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u3001\u69d8\u3005\u306a\u5f62\u3092\u3068\u308a\u306a\u304c\u3089\u3001\u5168\u4f53\u3068\u3057\u3066\u306e\u91cf\u306f\u4e00\u5b9a\u3068\u306a\u3063\u3066\u3044\u308b\u3002\u3053\u306e\u6cd5\u5247\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u8cea\u91cf\u4fdd\u5b58\u306e\u6cd5\u5247\", \"\u6163\u6027\u306e\u6cd5\u5247\", \"\u30d1\u30b9\u30ab\u30eb\u306e\u539f\u7406\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u5909\u63db\u306e\u524d\u5f8c\u3067\u30a8\u30cd\u30eb\u30ae\u30fc\u306e\u7dcf\u91cf\u304c\u4e00\u5b9a\u306b\u4fdd\u305f\u308c\u308b\u6cd5\u5247\u3092\u300c\u30a8\u30cd\u30eb\u30ae\u30fc\u4fdd\u5b58\u306e\u6cd5\u5247\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u7a7a\u6c17\u4e2d\u3067\u30dc\u30fc\u30eb\u3068\u7fbd\u6bdb\u3092\u540c\u6642\u306b\u843d\u4e0b\u3055\u305b\u3066\u3082\u3001\u843d\u4e0b\u306e\u3088\u3046\u3059\u304c\u540c\u3058\u3088\u3046\u306b\u306a\u3089\u306a\u3044\u3002\u3053\u308c\u306f\u7fbd\u6bdb\u306b\u306f\u4f55\u304c\u306f\u305f\u3089\u3044\u3066\u3044\u308b\u304b\u3089\u304b\u3002\", options: [\"\u7a7a\u6c17\u306e\u62b5\u6297\", \"\u91cd\u529b\", \"\u6d6e\u529b\", \"\u6469\u64e6\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7a7a\u6c17\u4e2d\u3067\u306f\u3001\u8efd\u3044\u7fbd\u6bdb\u306a\u3069\u306f\u300c\u7a7a\u6c17\u306e\u62b5\u6297\u300d\u3092\u5927\u304d\u304f\u53d7\u3051\u308b\u305f\u3081\u3001\u81ea\u7531\u843d\u4e0b\u306e\u3088\u3046\u306b\u540c\u6642\u306b\u843d\u3061\u307e\u305b\u3093[cite: 17, 23]\u3002\" },\n { q: \"\u30e2\u30fc\u30bf\u30fc\u306f\u3001\u96fb\u6c17\u306e\u3082\u3064\u4f55\u3068\u3044\u3046\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u904b\u52d5\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u5909\u63db\u3057\u3066\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\u304b\u3002\", options: [\"\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u71b1\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5149\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u5316\u5b66\u30a8\u30cd\u30eb\u30ae\u30fc\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u30e2\u30fc\u30bf\u30fc\u306f\u300c\u96fb\u6c17\u30a8\u30cd\u30eb\u30ae\u30fc\u300d\u3092\u904b\u52d5\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u5909\u63db\u3057\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u8cea\u91cf10kg\u306e\u7269\u4f53\u3092\u3082\u3063\u3066\u7acb\u3063\u3066\u3044\u308b\u4eba\u306f\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\u304b\u3001\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\u304b\u3002\", options: [\"\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\", \"\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\", \"\u5834\u5408\u306b\u3088\u308b\", \"\u30de\u30a4\u30ca\u30b9\u306e\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u7269\u7406\u306b\u304a\u3051\u308b\u4ed5\u4e8b\u306f\u300c\u529b\u306e\u304b\u3051\u305f\u65b9\u5411\u306b\u7269\u4f53\u304c\u79fb\u52d5\u3057\u305f\u304b\u300d\u3067\u6c7a\u307e\u308a\u307e\u3059\u3002\u52d5\u3044\u3066\u3044\u306a\u3044\u305f\u3081\u300c\u4ed5\u4e8b\u3092\u3057\u3066\u3044\u306a\u3044\u300d\u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u4ed6\u306e\u7269\u4f53\u3092\u52d5\u304b\u3057\u305f\u308a\u3001\u5909\u5f62\u3057\u305f\u308a\u3001\u3053\u308f\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u80fd\u529b\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u30a8\u30cd\u30eb\u30ae\u30fc\", \"\u4ed5\u4e8b\", \"\u529b\", \"\u96fb\u529b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u4ed5\u4e8b\u3092\u3059\u308b\u80fd\u529b\u306e\u3053\u3068\u3092\u300c\u30a8\u30cd\u30eb\u30ae\u30fc\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"1.0kg\u306e\u9244\u7403A\u30922.0cm\/s\u306e\u901f\u3055\u3067\u6728\u7247\u306b\u885d\u7a81\u3055\u305b\u308b\u3068\u3001\u6728\u7247\u306f30cm\u79fb\u52d5\u3057\u305f\u3002\u6b21\u306b\u3001\u3042\u308b\u8cea\u91cf\u306e\u9244\u7403B\u30922.0cm\/s\u306e\u901f\u3055\u3067\u885d\u7a81\u3055\u305b\u308b\u3068\u6728\u7247\u306f90cm\u79fb\u52d5\u3057\u305f\u3002\u9244\u7403B\u306e\u8cea\u91cf\u306f\u3044\u304f\u3089\u304b\u3002\", options: [\"3.0kg\", \"1.5kg\", \"6.0kg\", \"9.0kg\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u6728\u7247\u306e\u79fb\u52d5\u8ddd\u96e2\u306f\u7269\u4f53\u306e\u8cea\u91cf\u306b\u6bd4\u4f8b\u3057\u307e\u3059\u3002\u79fb\u52d5\u8ddd\u96e2\u304c3\u500d\uff0830cm\u219290cm\uff09\u306b\u306a\u3063\u3066\u3044\u308b\u305f\u3081\u3001\u8cea\u91cf\u30823\u500d\u306e 1.0kg \u00d7 3 \uff1d 3.0kg \u3068\u306a\u308a\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u659c\u9762\u3067\u53f0\u8eca\u3092\u8d70\u3089\u305b\u305f\u3068\u304d\u306e\u53f0\u8eca\u306e\u904b\u52d5\u306f\u7b49\u901f\u76f4\u7dda\u904b\u52d5\u3068\u3044\u3048\u308b\u304b\u3001\u3044\u3048\u306a\u3044\u304b\u3002\", options: [\"\u3044\u3048\u306a\u3044\", \"\u3044\u3048\u308b\", \"\u3069\u3061\u3089\u3068\u3082\u8a00\u3048\u306a\u3044\", \"\u6469\u64e6\u304c\u306a\u3044\u5834\u5408\u306e\u307f\u3044\u3048\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u659c\u9762\u3092\u4e0b\u308b\u53f0\u8eca\u306f\u901f\u3055\u304c\u5909\u5316\uff08\u52a0\u901f\uff09\u3059\u308b\u305f\u3081\u3001\u300c\u7b49\u901f\u76f4\u7dda\u904b\u52d5\u300d\u3068\u306f\u3044\u3048\u307e\u305b\u3093[cite: 17, 23]\u3002\" },\n { q: \"\u5358\u4f4d\u6642\u9593\u306b\u7269\u4f53\u304c\u79fb\u52d5\u3057\u305f\u8ddd\u96e2\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\", options: [\"\u901f\u3055\", \"\u5e73\u5747\u306e\u901f\u3055\", \"\u77ac\u9593\u7684\u30b9\u30d4\u30fc\u30c9\", \"\u52a0\u901f\u5ea6\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u5358\u4f4d\u6642\u9593\u3042\u305f\u308a\u306b\u9032\u3080\u8ddd\u96e2\u3092\u300c\u901f\u3055\u300d\u3068\u3044\u3044\u307e\u3059[cite: 17, 23]\u3002\" },\n { q: \"\u659c\u9762\u306b\u3042\u308b\u7269\u4f53\u306e\u8ee2\u304c\u308b\u901f\u3055\u306f\u6642\u9593\u3068\u3068\u3082\u306b\u901f\u304f\u306a\u308b\u304c\u3001\u901f\u3055\u306e\u5909\u5316\u3059\u308b\u5272\u5408\u306f\u659c\u9762\u306e\u89d2\u5ea6\u304c\u5c0f\u3055\u304f\u306a\u308b\u3068\u3069\u3046\u306a\u308b\u304b\u3002\", options: [\"\u5c0f\u3055\u304f\u306a\u308b\", \"\u5927\u304d\u304f\u306a\u308b\", \"\u5909\u308f\u3089\u306a\u3044\", \"\u30bc\u30ed\u306b\u306a\u308b\"], answer: 0, explanation: \"\u3010\u89e3\u8aac\u3011\u659c\u9762\u306e\u89d2\u5ea6\u3092\u5c0f\u3055\u304f\u3059\u308b\u3068\u3001\u50be\u304d\u304c\u7de9\u3084\u304b\u306b\u306a\u308a\u3001\u901f\u3055\u306e\u5897\u3048\u65b9\uff08\u5909\u5316\u3059\u308b\u5272\u5408\uff09\u3082\u300c\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u300d[cite: 17, 23]\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, count);\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\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u904b\u52d5\u3068\u30a8\u30cd\u30eb\u30ae\u30fc\uff09 \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u904b\u52d5\u3068\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\u904b\u52d5\u3068\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\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u30c6 […]<\/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-4627","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\/4627","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=4627"}],"version-history":[{"count":1,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4627\/revisions"}],"predecessor-version":[{"id":4628,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4627\/revisions\/4628"}],"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=4627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}