{"id":4651,"date":"2026-08-03T16:45:57","date_gmt":"2026-08-03T07:45:57","guid":{"rendered":"https:\/\/nansiki.net\/2018\/?p=4651"},"modified":"2026-10-07T01:31:29","modified_gmt":"2026-10-06T16:31:29","slug":"%e7%90%86%e7%a7%91_%e7%a7%91%e5%ad%a6_%e8%87%aa%e7%84%b6%e3%81%a8%e4%ba%ba%e9%96%93","status":"publish","type":"post","link":"https:\/\/nansiki.net\/2018\/archives\/4651","title":{"rendered":"\u7406\u79d1_\u79d1\u5b66_\u81ea\u7136\u3068\u4eba\u9593"},"content":{"rendered":"<div class=\"veu_autoEyeCatchBox\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"572\" src=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2022\/02\/kuizu.jpg\" class=\"attachment-large size-large wp-post-image\" alt=\"\u30af\u30a4\u30ba\" srcset=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2022\/02\/kuizu.jpg 784w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2022\/02\/kuizu-300x219.jpg 300w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2022\/02\/kuizu-768x560.jpg 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/div>\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u7b2c15\u56de \u81ea\u7136\u3068\u4eba\u9593\u30fb\u751f\u614b\u7cfb\uff09<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n        body {\n            font-family: 'Inter', sans-serif;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-100 text-slate-800 min-p-4 flex items-center justify-center min-h-screen\">\n\n    <div class=\"w-full max-w-3xl bg-white rounded-2xl shadow-xl overflow-hidden my-6\">\n        \n        <!-- Header -->\n        <header class=\"bg-emerald-600 text-white p-6 text-center\">\n            <h1 class=\"text-2xl font-bold\">\u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54<\/h1>\n            <p class=\"text-emerald-100 text-sm mt-1\">\u7b2c15\u56de \u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u81ea\u7136\u3068\u4eba\u9593\u30fb\u751f\u614b\u7cfb\uff09<\/p>\n        <\/header>\n\n        <!-- \u2460 \u30b9\u30bf\u30fc\u30c8\u753b\u9762 -->\n        <div id=\"start-screen\" class=\"screen active p-8 text-center\">\n            <h2 class=\"text-xl font-bold text-slate-700 mb-3\">\u30c6\u30b9\u30c8\u3092\u59cb\u3081\u307e\u3057\u3087\u3046\uff01<\/h2>\n            <p class=\"text-slate-500 mb-6 text-sm sm:text-base\">\n                \u81ea\u7136\u754c\u306e\u3064\u308a\u3042\u3044\u3001\u98df\u7269\u9023\u9396\u3001\u5206\u89e3\u8005\u3001\u74b0\u5883\u554f\u984c\u3084\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u3064\u3044\u3066\u306e\u7dcf\u5fa9\u7fd2\u30c6\u30b9\u30c8\u3067\u3059\u3002<br>\n                \u3059\u3079\u3066\u306e\u554f\u984c\u306b\u4e01\u5be7\u306a\u89e3\u8aac\u304c\u3064\u3044\u3066\u3044\u307e\u3059\u3002\n            <\/p>\n            \n            <div class=\"bg-slate-50 border border-slate-200 rounded-xl p-5 mb-8 text-left max-w-md mx-auto shadow-sm\">\n                <h3 class=\"font-bold text-slate-700 mb-2 text-sm\">&#x1f4a1; \u30c6\u30b9\u30c8\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\n                <ul class=\"list-disc list-inside text-sm text-slate-600 space-y-1\">\n                    <li>\u51fa\u984c\u6570\uff1a\u53b3\u9078\u3055\u308c\u305f\u91cd\u8981\u554f\u984c\uff08\u30e9\u30f3\u30c0\u30e0\u30fb\u91cd\u8907\u306a\u3057\uff09<\/li>\n                    <li>\u5236\u9650\u6642\u9593\uff1a10\u5206\uff08\u30bf\u30a4\u30de\u30fc\u4ed8\u304d\u3001\u6642\u9593\u5185\u306f\u81ea\u7531\u306b\u898b\u76f4\u3057\u53ef\u80fd\uff09<\/li>\n                    <li>\u9078\u629e\u80a2\u306f\u3059\u3079\u30663\u629e\u4ee5\u4e0a\u306b\u8abf\u6574\u6e08\u307f\uff01<\/li>\n                    <li>\u2606\u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u6a5f\u80fd\u3067\u5f8c\u304b\u3089\u306e\u78ba\u8a8d\u3082\u7c21\u5358<\/li>\n                <\/ul>\n            <\/div>\n\n            <button id=\"start-btn\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-8 py-3 rounded-xl shadow-lg transition transform hover:-translate-y-0.5\">\n                \u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8\n            <\/button>\n        <\/div>\n\n        <!-- \u2461 \u30af\u30a4\u30ba\u753b\u9762 -->\n        <div id=\"quiz-screen\" class=\"screen hidden p-6 sm:p-8\">\n            <div class=\"flex justify-between items-center border-b border-slate-200 pb-4 mb-6\">\n                <span id=\"quiz-title-info\" class=\"text-sm font-semibold text-slate-500\">\u81ea\u7136\u3068\u4eba\u9593 \u30c6\u30b9\u30c8\u4e2d<\/span>\n                <div id=\"timer\" class=\"font-mono text-rose-600 bg-rose-50 px-3 py-1 rounded-full font-bold text-sm border border-rose-200\">10:00<\/div>\n            <\/div>\n\n            <div class=\"flex justify-between items-center mb-3\">\n                <span id=\"question-number\" class=\"text-xs font-bold uppercase tracking-wider text-slate-400\">\u554f\u984c 1 \/ 10<\/span>\n                <button id=\"review-btn\" class=\"border border-amber-500 text-amber-600 hover:bg-amber-50 px-3 py-1 rounded-lg text-xs font-bold transition\">\n                    \u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\n                <\/button>\n            <\/div>\n\n            <div id=\"question-text\" class=\"text-lg font-bold text-slate-800 mb-6 min-h-[4rem]\">\n                \u3053\u3053\u306b\u554f\u984c\u6587\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n            <\/div>\n\n            <div id=\"options-list\" class=\"space-y-3 mb-8\">\n                <!-- \u9078\u629e\u80a2\u304c\u52d5\u7684\u306b\u633f\u5165\u3055\u308c\u307e\u3059 -->\n            <\/div>\n\n            <div class=\"flex flex-col sm:flex-row justify-between items-center gap-3 border-t border-slate-100 pt-6\">\n                <button id=\"prev-btn\" class=\"w-full sm:w-auto bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold px-5 py-2.5 rounded-xl transition text-sm\">\n                    \u524d\u306e\u554f\u984c\n                <\/button>\n                <button id=\"finish-early-btn\" class=\"w-full sm:w-auto bg-rose-100 hover:bg-rose-200 text-rose-700 font-bold px-5 py-2.5 rounded-xl transition text-sm\">\n                    \u30c6\u30b9\u30c8\u7d42\u4e86\n                <\/button>\n                <button id=\"next-btn\" class=\"w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2.5 rounded-xl shadow transition text-sm\">\n                    \u6b21\u306e\u554f\u984c\n                <\/button>\n            <\/div>\n\n            <!-- \u554f\u984c\u30d1\u30ec\u30c3\u30c8 -->\n            <div class=\"mt-8 pt-6 border-t border-slate-200\">\n                <div class=\"text-xs font-bold text-slate-400 mb-2\">\u554f\u984c\u30d1\u30ec\u30c3\u30c8\uff08\u30af\u30ea\u30c3\u30af\u3067\u30b8\u30e3\u30f3\u30d7\uff09<\/div>\n                <div id=\"palette-grid\" class=\"grid grid-cols-5 sm:grid-cols-10 gap-2\">\n                    <!-- \u30d1\u30ec\u30c3\u30c8\u30dc\u30bf\u30f3\u304c\u52d5\u7684\u306b\u633f\u5165\u3055\u308c\u307e\u3059 -->\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- \u2462 \u7d50\u679c\u753b\u9762 -->\n        <div id=\"result-screen\" class=\"screen hidden p-6 sm:p-8\">\n            <div class=\"text-center mb-6\">\n                <h2 class=\"text-2xl font-bold text-slate-800\">\u30c6\u30b9\u30c8\u7d50\u679c<\/h2>\n                <div id=\"score-display\" class=\"text-3xl font-extrabold text-emerald-600 my-2\">\u5f97\u70b9: 0\u70b9 (0\/10\u554f\u6b63\u89e3)<\/div>\n                <p id=\"time-taken-display\" class=\"text-sm text-slate-500\">\u6240\u8981\u6642\u9593: 0\u52060\u79d2<\/p>\n            <\/div>\n\n            <div class=\"flex gap-2 border-b border-slate-200 pb-3 mb-6 overflow-x-auto\">\n                <button class=\"tab-btn active bg-emerald-600 text-white px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition\" data-filter=\"all\">\u3059\u3079\u3066\u8868\u793a<\/button>\n                <button class=\"tab-btn bg-slate-100 text-slate-600 hover:bg-slate-200 px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition\" data-filter=\"incorrect\">\u00d7 \u4e0d\u6b63\u89e3\u306e\u307f<\/button>\n                <button class=\"tab-btn bg-slate-100 text-slate-600 hover:bg-slate-200 px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition\" data-filter=\"review\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u306e\u307f<\/button>\n            <\/div>\n\n            <div id=\"result-list\" class=\"space-y-4 max-h-[400px] overflow-y-auto pr-2 mb-6\">\n                <!-- \u7d50\u679c\u30ab\u30fc\u30c9\u304c\u52d5\u7684\u306b\u633f\u5165\u3055\u308c\u307e\u3059 -->\n            <\/div>\n\n            <div class=\"text-center\">\n                <button id=\"restart-btn\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-8 py-3 rounded-xl shadow-lg transition\">\n                    \u3082\u3046\u4e00\u5ea6\u6311\u6226\u3059\u308b\n                <\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ \u81ea\u7136\u3068\u4eba\u9593\u30fb\u751f\u614b\u7cfb\u306b\u95a2\u3059\u308b\u8c4a\u5bcc\u306a\u554f\u984c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\uff08\u3059\u3079\u30663\u629e\u4ee5\u4e0a\u306b\u8abf\u6574\u6e08\u307f\u30fb\u4e01\u5be7\u306a\u89e3\u8aac\u4ed8\u304d\uff09\n            const rawQuestions = [\n                {\n                    q: \"\u83cc\u985e\u306e\u751f\u6d3b\u306b\u5fc5\u8981\u3067\u306a\u3044\u3082\u306e\u306f\u6b21\u306e\u3046\u3061\u3069\u308c\u304b\u3002\",\n                    options: [\n                        \"\u65e5\u5149\",\n                        \"\u990a\u5206\",\n                        \"\u6c34\u3068\u9069\u5f53\u306a\u6e29\u5ea6\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u83cc\u985e\uff08\u30ab\u30d3\u3084\u30ad\u30ce\u30b3\u306a\u3069\uff09\u306f\u3001\u690d\u7269\u3068\u306f\u7570\u306a\u308a\u8449\u7dd1\u4f53\u3092\u6301\u305f\u306a\u3044\u305f\u3081\u5149\u5408\u6210\u3092\u3057\u307e\u305b\u3093\u3002\u305d\u306e\u305f\u3081\u3001\u751f\u6d3b\u3084\u751f\u80b2\u306b\u300c\u65e5\u5149\u300d\u306f\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002\u305f\u3060\u3057\u3001\u304b\u3089\u3060\u3092\u7dad\u6301\u3059\u308b\u305f\u3081\u306e\u990a\u5206\u3084\u6c34\u5206\u3001\u9069\u5207\u306a\u6e29\u5ea6\u306f\u751f\u80b2\u306b\u5fc5\u8981\u3067\u3059\u3002\"\n                },\n                {\n                    q: \"\u6b21\u306e\u751f\u7269\u306e\u3046\u3061\u3001\u5206\u89e3\u8005\u306e\u306f\u305f\u3089\u304d\u3092\u3059\u308b\u3082\u306e\u3092\u3059\u3079\u3066\u9078\u3093\u3060\u7d44\u307f\u5408\u308f\u305b\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n                    options: [\n                        \"\u30a2\u30aa\u30ab\u30d3\u3001\u30ad\u30ce\u30b3\",\n                        \"\u30e0\u30ab\u30c7\u3001\u30d8\u30d3\",\n                        \"\u30a4\u30ca\u30b4\u3001\u30a2\u30aa\u30df\u30c9\u30ed\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5206\u89e3\u8005\u3068\u306f\u3001\u6b7b\u9ab8\u3084\u6392\u6cc4\u7269\u306a\u3069\u306e\u6709\u6a5f\u7269\u3092\u7121\u6a5f\u7269\u306b\u5206\u89e3\u3059\u308b\u751f\u7269\u306e\u3053\u3068\u3067\u3001\u4e3b\u306b\u7d30\u83cc\u985e\u3084\u83cc\u985e\uff08\u30ab\u30d3\u3084\u30ad\u30ce\u30b3\uff09\u304c\u3053\u308c\u306b\u3042\u305f\u308a\u307e\u3059\u3002\u30e0\u30ab\u30c7\u3084\u30d8\u30d3\u306f\u6d88\u8cbb\u8005\uff08\u52d5\u7269\uff09\u3067\u3059\u3002\"\n                },\n                {\n                    q: \"\u690d\u7269\u306e\u3064\u304f\u308a\u51fa\u3057\u305f\u6709\u6a5f\u7269\u306e\u4e2d\u306b\u306f\u3001\u3082\u3068\u3082\u3068\u4f55\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u5f62\u3092\u5909\u3048\u3066\u305f\u304f\u308f\u3048\u3089\u308c\u3066\u3044\u308b\u304b\u3002\",\n                    options: [\n                        \"\u592a\u967d\uff08\u653e\u5c04\uff09\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\",\n                        \"\u5730\u71b1\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\",\n                        \"\u539f\u5b50\u529b\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u690d\u7269\u306f\u5149\u5408\u6210\u306b\u3088\u3063\u3066\u3001\u592a\u967d\u306e\u5149\u30a8\u30cd\u30eb\u30ae\u30fc\u3092\u5229\u7528\u3057\u3066\u4e8c\u9178\u5316\u70ad\u7d20\u3068\u6c34\u304b\u3089\u30c7\u30f3\u30d7\u30f3\u306a\u3069\u306e\u6709\u6a5f\u7269\u3092\u3064\u304f\u308a\u51fa\u3057\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u6709\u6a5f\u7269\u306e\u4e2d\u306b\u306f\u3082\u3068\u3082\u3068\u306e\u592a\u967d\u306e\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u5f62\u3092\u5909\u3048\u3066\u305f\u304f\u308f\u3048\u3089\u308c\u3066\u3044\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u83cc\u985e\u3084\u7d30\u83cc\u985e\u306b\u3088\u3063\u3066\u6709\u6a5f\u7269\u304c\u5206\u89e3\u3055\u308c\u308b\u3068\u3001\u4e8c\u9178\u5316\u70ad\u7d20\u3084\u6c34\u306e\u307b\u304b\u306b\u4f55\u304c\u751f\u3058\u308b\u304b\u3002\u3082\u3063\u3068\u3082\u9069\u5f53\u306a\u3082\u306e\u3092\u7b54\u3048\u3088\u3002\",\n                    options: [\n                        \"\u7a92\u7d20\u5316\u5408\u7269\uff08\u7121\u6a5f\u7269\uff09\",\n                        \"\u30bf\u30f3\u30d1\u30af\u8cea\",\n                        \"\u30c7\u30f3\u30d7\u30f3\u3084\u8102\u80aa\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5206\u89e3\u8005\u304c\u6709\u6a5f\u7269\u3092\u5206\u89e3\u3059\u308b\u3068\u3001\u6700\u7d42\u7684\u306b\u690d\u7269\u304c\u518d\u3073\u5438\u53ce\u3067\u304d\u308b\u300c\u7a92\u7d20\u5316\u5408\u7269\u306a\u3069\u306e\u7121\u6a5f\u7269\u300d\u3084\u3001\u4e8c\u9178\u5316\u70ad\u7d20\u30fb\u6c34\u304c\u751f\u3058\u307e\u3059\u3002\u3053\u308c\u3089\u306f\u81ea\u7136\u754c\u306e\u7269\u8cea\u5faa\u74b0\u306e\u8981\u3068\u306a\u308a\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u81ea\u7136\u754c\u306e\u98df\u7269\u9023\u9396\u3084\u751f\u7269\u306e\u6570\u306b\u304a\u3044\u3066\u3001\u751f\u7523\u8005\u3068\u6d88\u8cbb\u8005\u306e\u95a2\u4fc2\u306b\u3064\u3044\u3066\u6b63\u3057\u3044\u8a18\u8ff0\u306f\u3069\u308c\u304b\u3002\",\n                    options: [\n                        \"\u98df\u3079\u308b\u751f\u7269\uff08\u6d88\u8cbb\u8005\uff09\u306e\u65b9\u304c\u3001\u98df\u3079\u3089\u308c\u308b\u751f\u7269\uff08\u751f\u7523\u8005\uff09\u3088\u308a\u3082\u6570\u91cf\u304c\u5c11\u306a\u3044\",\n                        \"\u98df\u3079\u308b\u751f\u7269\uff08\u6d88\u8cbb\u8005\uff09\u306e\u65b9\u304c\u3001\u98df\u3079\u3089\u308c\u308b\u751f\u7269\u3088\u308a\u3082\u6570\u91cf\u304c\u591a\u3044\",\n                        \"\u751f\u7523\u8005\u3068\u6d88\u8cbb\u8005\u306e\u6570\u306f\u5e38\u306b\u5168\u304f\u540c\u3058\u3067\u3042\u308b\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u98df\u7269\u9023\u9396\u306e\u30d4\u30e9\u30df\u30c3\u30c9\u306b\u304a\u3044\u3066\u3001\u4e0b\u4f4d\uff08\u751f\u7523\u8005\uff09\u304b\u3089\u4e0a\u4f4d\uff08\u8089\u98df\u52d5\u7269\uff09\u306b\u884c\u304f\u307b\u3069\u5f97\u3089\u308c\u308b\u30a8\u30cd\u30eb\u30ae\u30fc\u304c\u6e1b\u308b\u305f\u3081\u3001\u6570\u304c\u5c11\u306a\u304f\u306a\u308a\u307e\u3059\u3002\u3064\u307e\u308a\u3001\u98df\u3079\u308b\u751f\u7269\u306e\u65b9\u304c\u98df\u3079\u3089\u308c\u308b\u751f\u7269\u3088\u308a\u3082\u6570\u91cf\u306f\u5c11\u306a\u304f\u306a\u308a\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u5730\u7403\u4e0a\u306e\u6c34\u306f\u3001\u59ff\u3092\u5909\u3048\u306a\u304c\u3089\u5faa\u74b0\u3057\u3066\u30d0\u30e9\u30f3\u30b9\u3092\u4fdd\u3063\u3066\u3044\u308b\u3002\u3053\u306e\u73fe\u8c61\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n                    options: [\n                        \"\u6c34\u306e\u5faa\u74b0\",\n                        \"\u6c34\u306e\u51dd\u7e2e\",\n                        \"\u6c34\u84b8\u767a\u30b5\u30a4\u30af\u30eb\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5730\u7403\u4e0a\u306e\u6c34\u306e\u91cf\u306f\u3001\u5730\u8868\uff08\u6d77\u3084\u5ddd\uff09\u304b\u3089\u306e\u84b8\u767a\u3068\u3001\u5927\u6c17\u4e2d\u304b\u3089\u306e\u964d\u6c34\u306a\u3069\u306e\u300c\u5faa\u74b0\u300d\u306b\u3088\u3063\u3066\u3001\u5168\u4f53\u3068\u3057\u3066\u306e\u3064\u308a\u5408\u3044\u304c\u4fdd\u305f\u308c\u3066\u3044\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u30ab\u30d3\u3084\u30ad\u30ce\u30b3\u306e\u3088\u3046\u306b\u3001\u83cc\u7cf8\u306b\u3088\u3063\u3066\u304b\u3089\u3060\u304c\u3067\u304d\u3066\u3044\u308b\u306a\u304b\u307e\u3092\u7dcf\u79f0\u3057\u3066\u4f55\u3068\u3044\u3046\u304b\u3002\",\n                    options: [\n                        \"\u83cc\u985e\",\n                        \"\u7d30\u83cc\u985e\",\n                        \"\u85fb\u985e\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u30ab\u30d3\u3001\u30ad\u30ce\u30b3\u3001\u9175\u6bcd\u83cc\u306a\u3069\u306f\u300c\u83cc\u985e\u300d\u306b\u5206\u985e\u3055\u308c\u307e\u3059\u3002\u83cc\u985e\u306f\u7d30\u80de\u304c\u7cf8\u72b6\u306b\u3064\u306a\u304c\u3063\u305f\u300c\u83cc\u7cf8\u300d\u3067\u304b\u3089\u3060\u304c\u3067\u304d\u3066\u3044\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002\"\n                },\n                {\n                    q: \"\u68ee\u6797\u3092\u7834\u58ca\u3057\u305f\u308a\u3001\u3042\u308b\u7279\u5b9a\u306e\u52d5\u7269\u3060\u3051\u3092\u5927\u91cf\u306b\u6355\u7372\u3057\u305f\u308a\u3059\u308b\u3068\u3001\u751f\u614b\u7cfb\u306e\u3064\u308a\u3042\u3044\u306f\u3069\u3046\u306a\u308b\u304b\u3002\",\n                    options: [\n                        \"\u304f\u305a\u308c\u3066\u3057\u307e\u3044\u3001\u3082\u3068\u306b\u3082\u3069\u308b\u307e\u3067\u306b\u9577\u3044\u6642\u9593\u304c\u304b\u304b\u308b\",\n                        \"\u3059\u3050\u306b\u81ea\u7136\u306e\u529b\u3067\u3082\u3068\u3069\u304a\u308a\u306b\u306a\u308b\",\n                        \"\u751f\u614b\u7cfb\u306b\u306f\u4f55\u306e\u5f71\u97ff\u3082\u4e0e\u3048\u306a\u3044\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u81ea\u7136\u754c\u306e\u30d0\u30e9\u30f3\u30b9\u306f\u4e00\u5b9a\u306e\u8abf\u7bc0\u6a5f\u80fd\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u5927\u898f\u6a21\u306a\u74b0\u5883\u7834\u58ca\u3084\u7279\u5b9a\u306e\u751f\u7269\u306e\u6fc0\u6e1b\u304c\u8d77\u304d\u308b\u3068\u3001\u3064\u308a\u3042\u3044\u304c\u5927\u304d\u304f\u304f\u305a\u308c\u3001\u3082\u3068\u306b\u3082\u3069\u308b\u307e\u3067\u306b\u975e\u5e38\u306b\u9577\u3044\u5e74\u6708\u304c\u304b\u304b\u308a\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u5316\u77f3\u71c3\u6599\u306e\u3046\u3061\u767a\u71b1\u91cf\u306f\u5927\u304d\u304f\u5927\u91cf\u306b\u7523\u51fa\u3059\u308b\u304c\u3001\u56fa\u4f53\u3067\u3042\u3064\u304b\u3044\u306b\u304f\u304f\u3001\u71c3\u3084\u3059\u3068\u4e8c\u9178\u5316\u70ad\u7d20\u3084\u4e8c\u9178\u5316\u786b\u9ec4\u306a\u3069\u304c\u767a\u751f\u3059\u308b\u30a8\u30cd\u30eb\u30ae\u30fc\u6e90\u306f\u4f55\u304b\u3002\",\n                    options: [\n                        \"\u77f3\u70ad\",\n                        \"\u5929\u7136\u30ac\u30b9\",\n                        \"\u6c34\u529b\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u77f3\u70ad\u306f\u5730\u8cea\u6642\u4ee3\u306e\u690d\u7269\u306e\u6b7b\u304c\u3044\u304c\u5909\u5316\u3057\u3066\u3067\u304d\u305f\u56fa\u4f53\u306e\u5316\u77f3\u71c3\u6599\u3067\u3059\u3002\u30a8\u30cd\u30eb\u30ae\u30fc\u6e90\u3068\u3057\u3066\u5927\u91cf\u306b\u5229\u7528\u3055\u308c\u307e\u3059\u304c\u3001\u71c3\u713c\u6642\u306b\u591a\u304f\u306e\u4e8c\u9178\u5316\u70ad\u7d20\u3084\u6709\u5bb3\u7269\u8cea\u3092\u767a\u751f\u3055\u305b\u308b\u539f\u56e0\u306b\u306a\u308a\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u83cc\u985e\u3084\u7d30\u83cc\u985e\u306a\u3069\u306e\u5206\u89e3\u8005\u306b\u3088\u3063\u3066\u5206\u89e3\u3055\u308c\u305f\u7121\u6a5f\u7269\u306f\u3001\u3075\u305f\u305f\u3073\u690d\u7269\u306b\u3068\u308a\u5165\u308c\u3089\u308c\u3066\u3001\u4f55\u306b\u5408\u6210\u3055\u308c\u308b\u304b\u3002\",\n                    options: [\n                        \"\u6709\u6a5f\u7269\",\n                        \"\u6c34\u5206\",\n                        \"\u5316\u77f3\u71c3\u6599\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5206\u89e3\u8005\u306b\u3088\u3063\u3066\u7121\u6a5f\u7269\u306b\u5206\u89e3\u3055\u308c\u305f\u990a\u5206\u306f\u3001\u690d\u7269\u306e\u6839\u304b\u3089\u5438\u53ce\u3055\u308c\u3001\u5149\u5408\u6210\u306a\u3069\u3092\u901a\u3058\u3066\u3075\u305f\u305f\u3073\u690d\u7269\u306e\u304b\u3089\u3060\u3092\u3064\u304f\u308b\u300c\u6709\u6a5f\u7269\u300d\u306b\u5408\u6210\u3055\u308c\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u52d5\u7269\u306f\u690d\u7269\u3084\u4ed6\u306e\u52d5\u7269\u3092\u98df\u3079\u3066\u30bf\u30f3\u30d1\u30af\u8cea\u3092\u3068\u308a\u5165\u308c\u3001\u6700\u7d42\u7684\u306b\u6d88\u5316\u7ba1\u304b\u3089\u4f55\u3068\u3044\u3046\u7269\u8cea\u306e\u5f62\u3067\u4f53\u5185\u306b\u5438\u53ce\u3059\u308b\u304b\u3002\",\n                    options: [\n                        \"\u30a2\u30df\u30ce\u9178\",\n                        \"\u30d6\u30c9\u30a6\u7cd6\",\n                        \"\u8102\u80aa\u9178\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u52d5\u7269\u304c\u6442\u53d6\u3057\u305f\u30bf\u30f3\u30d1\u30af\u8cea\u306f\u6d88\u5316\u9175\u7d20\u306b\u3088\u3063\u3066\u5206\u89e3\u3055\u308c\u3001\u6700\u5c0f\u5358\u4f4d\u3067\u3042\u308b\u300c\u30a2\u30df\u30ce\u9178\u300d\u306e\u5f62\u306b\u306a\u3063\u3066\u304b\u3089\u3060\uff08\u5c0f\u8178\u306a\u3069\uff09\u306b\u5438\u53ce\u3055\u308c\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u6b21\u306e\u751f\u7269\u306e\u3046\u3061\u3001\u30a2\u30aa\u30ab\u30d3\u3068\u540c\u3058\u300c\u83cc\u985e\u300d\u306b\u5c5e\u3059\u308b\u3082\u306e\u30921\u3064\u9078\u3079\u3002\",\n                    options: [\n                        \"\u30ad\u30ce\u30b3\",\n                        \"\u30a2\u30e1\u30fc\u30d0\",\n                        \"\u30a2\u30aa\u30df\u30c9\u30ed\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u30a2\u30aa\u30ab\u30d3\u3082\u30ad\u30ce\u30b3\u3082\u3069\u3061\u3089\u3082\u300c\u83cc\u985e\u300d\u306e\u306a\u304b\u307e\u3067\u3059\u3002\u30a2\u30e1\u30fc\u30d0\u306f\u5358\u7d30\u80de\u751f\u7269\uff08\u539f\u751f\u751f\u7269\uff09\u3001\u30a2\u30aa\u30df\u30c9\u30ed\u306f\u690d\u7269\uff08\u85fb\u985e\uff09\u306e\u306a\u304b\u307e\u3067\u3059\u3002\"\n                },\n                {\n                    q: \"\u30a2\u30aa\u30ab\u30d3\u3092\u9855\u5fae\u93e1\u3067\u89b3\u5bdf\u3057\u305f\u3068\u304d\u306b\u898b\u3089\u308c\u308b\u3001\u80de\u5b50\u304c\u3067\u304d\u308b\u5148\u7aef\u306e\u90e8\u5206\u3084\u3001\u7d30\u3044\u7cf8\u72b6\u306e\u3064\u304f\u308a\u306e\u540d\u79f0\u306e\u7d44\u307f\u5408\u308f\u305b\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n                    options: [\n                        \"\u2460 \u80de\u5b50\u3001\u2461 \u83cc\u7cf8\",\n                        \"\u2460 \u6839\u7c92\u3001\u2461 \u8449\u7dd1\u4f53\",\n                        \"\u2460 \u82b1\u7c89\u3001\u2461 \u830e\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u30a2\u30aa\u30ab\u30d3\u306a\u3069\u306e\u83cc\u985e\u306f\u3001\u7cf8\u72b6\u306e\u300c\u83cc\u7cf8\u300d\u304c\u7d44\u307f\u5408\u308f\u3055\u3063\u3066\u3067\u304d\u3066\u304a\u308a\u3001\u5148\u7aef\u306b\u306f\u7e41\u6b96\u306e\u305f\u3081\u306e\u300c\u80de\u5b50\u300d\u3092\u3064\u304f\u308b\u90e8\u5206\uff08\u80de\u5b50\u56a2\u306a\u3069\uff09\u304c\u89b3\u5bdf\u3055\u308c\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u30ef\u30e9\u30b8\u30e0\u30b7\u3001\u30c0\u30f3\u30b4\u30e0\u30b7\u3001\u30df\u30df\u30ba\u306a\u3069\u306f\u3001\u843d\u3061\u8449\u3092\u7d30\u304b\u304f\u3057\u305f\u308a\u6709\u6a5f\u7269\u3092\u5206\u89e3\u3057\u3084\u3059\u3044\u72b6\u614b\u306b\u5909\u3048\u308b\u306f\u305f\u3089\u304d\u3092\u3059\u308b\u304c\u3001\u3053\u308c\u3089\u306f\u81ea\u7136\u754c\u306b\u304a\u3044\u3066\u4f55\u306b\u5206\u985e\u3055\u308c\u308b\u304b\u3002\",\n                    options: [\n                        \"\u5206\u89e3\u8005\uff08\u307e\u305f\u306f\u5206\u89e3\u3092\u52a9\u3051\u308b\u751f\u7269\uff09\",\n                        \"\u751f\u7523\u8005\",\n                        \"\u5b8c\u5168\u306a\u7121\u6a5f\u7269\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u30c0\u30f3\u30b4\u30e0\u30b7\u3084\u30df\u30df\u30ba\u306a\u3069\u306e\u5c0f\u52d5\u7269\u306f\u3001\u843d\u3061\u8449\u306a\u3069\u3092\u98df\u3079\u3066\u7d30\u304b\u304f\u565b\u307f\u7815\u304f\u3053\u3068\u3067\u3001\u7d30\u83cc\u3084\u83cc\u985e\u304c\u3055\u3089\u306b\u5206\u89e3\u3057\u3084\u3059\u3044\u72b6\u614b\u3092\u3064\u304f\u308b\u3001\u751f\u614b\u7cfb\u306b\u304a\u3044\u3066\u975e\u5e38\u306b\u91cd\u8981\u306a\u5206\u89e3\u30fb\u9084\u5143\u30d7\u30ed\u30bb\u30b9\u306e\u62c5\u3044\u624b\u3067\u3059\u3002\"\n                },\n                {\n                    q: \"\u5730\u7403\u306e\u8868\u9762\u3092\u3068\u308a\u307e\u304f\u304a\u3088\u305d\u6570\u767ekm\u306e\u539a\u3055\u306e\u5c64\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n                    options: [\n                        \"\u5927\u6c17\u570f\",\n                        \"\u6c34\u570f\",\n                        \"\u751f\u7269\u570f\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5730\u7403\u3092\u3068\u308a\u307e\u304f\u7a7a\u6c17\u306e\u5c64\u3092\u300c\u5927\u6c17\u570f\u300d\u3068\u3044\u3044\u3001\u305d\u306e\u539a\u3055\u306f\u304a\u3088\u305d\u6570\u767ekm\u306b\u53ca\u3073\u307e\u3059\u3002\u306a\u304a\u6db2\u4f53\u304c\u5b58\u5728\u3059\u308b\u90e8\u5206\u306f\u300c\u6c34\u570f\u300d\u3068\u547c\u3070\u308c\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u81ea\u7136\u754c\u306b\u304a\u3044\u3066\u3001\u591a\u304f\u306e\u98df\u7269\u9023\u9396\u304c\u8907\u96d1\u306b\u7db2\u306e\u76ee\u306e\u3088\u3046\u306b\u7d61\u307f\u5408\u3063\u3066\u3064\u306a\u304c\u3063\u3066\u3044\u308b\u3082\u306e\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n                    options: [\n                        \"\u98df\u7269\u7db2\",\n                        \"\u751f\u614b\u30d4\u30e9\u30df\u30c3\u30c9\",\n                        \"\u7269\u8cea\u5faa\u74b0\u30cd\u30c3\u30c8\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u5b9f\u969b\u306e\u81ea\u7136\u754c\u3067\u306f\u30011\u7a2e\u985e\u306e\u52d5\u7269\u304c\u8907\u6570\u306e\u7a2e\u985e\u306e\u3048\u3055\u3092\u98df\u3079\u305f\u308a\u98df\u3079\u3089\u308c\u305f\u308a\u3059\u308b\u305f\u3081\u3001\u98df\u7269\u9023\u9396\u304c\u7db2\u306e\u76ee\u306e\u3088\u3046\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3092\u300c\u98df\u7269\u7db2\u300d\u3068\u547c\u3073\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u4e16\u754c\u4e2d\u306e\u8cb4\u91cd\u306a\u6587\u5316\u8ca1\u3084\u81ea\u7136\u74b0\u5883\u3092\u4fdd\u8b77\u3057\u3001\u6b21\u4e16\u4ee3\u306b\u5f15\u304d\u7d99\u3050\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u305f\u56fd\u969b\u6761\u7d04\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n                    options: [\n                        \"\u4e16\u754c\u907a\u7523\u6761\u7d04\",\n                        \"\u4eac\u90fd\u8b70\u5b9a\u66f8\",\n                        \"\u30e9\u30e0\u30b5\u30fc\u30eb\u6761\u7d04\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u30e6\u30cd\u30b9\u30b3\u3067\u63a1\u629e\u3055\u308c\u305f\u300c\u4e16\u754c\u907a\u7523\u6761\u7d04\u300d\u306f\u3001\u4eba\u985e\u5171\u901a\u306e\u8ca1\u7523\u3067\u3042\u308b\u6587\u5316\u8ca1\u3084\u81ea\u7136\u306e\u81ea\u7136\u74b0\u5883\u3092\u4fdd\u8b77\u30fb\u4fdd\u5b58\u3059\u308b\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u3066\u3044\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u8fd1\u5e74\u3001\u5927\u6c17\u4e2d\u306e\u4e8c\u9178\u5316\u70ad\u7d20\u6fc3\u5ea6\u304c\u5c11\u3057\u305a\u3064\u5897\u52a0\u3057\u3066\u3044\u308b\u3002\u305d\u306e\u304a\u3082\u306a\u539f\u56e0\u3068\u3057\u3066\u6700\u3082\u9069\u5207\u306a\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n                    options: [\n                        \"\u77f3\u70ad\u3084\u77f3\u6cb9\u306a\u3069\u306e\u5316\u77f3\u71c3\u6599\u306e\u5927\u91cf\u4f7f\u7528\",\n                        \"\u68ee\u6797\u306e\u81ea\u7136\u306a\u6210\u9577\u306b\u3088\u308b\u3082\u306e\",\n                        \"\u6d77\u6d0b\u30d7\u30e9\u30f3\u30af\u30c8\u30f3\u306e\u6025\u901f\u306a\u7e41\u6b96\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u8fd1\u4ee3\u4ee5\u964d\u3001\u4eba\u985e\u304c\u77f3\u70ad\u30fb\u77f3\u6cb9\u30fb\u5929\u7136\u30ac\u30b9\u3068\u3044\u3063\u305f\u5316\u77f3\u71c3\u6599\u3092\u5927\u91cf\u306b\u71c3\u3084\u3057\u7d9a\u3051\u3066\u304d\u305f\u3053\u3068\u304c\u3001\u5927\u6c17\u4e2d\u306e\u4e8c\u9178\u5316\u70ad\u7d20\u6fc3\u5ea6\u5897\u52a0\u304a\u3088\u3073\u5730\u7403\u6e29\u6696\u5316\u306e\u6700\u5927\u306e\u539f\u56e0\u3068\u3055\u308c\u3066\u3044\u307e\u3059\u3002\"\n                },\n                {\n                    q: \"\u690d\u7269\u306e\u6839\u304b\u3089\u3068\u308a\u5165\u308c\u3089\u308c\u305f\u7a92\u7d20\u5316\u5408\u7269\u306f\u3001\u690d\u7269\u306e\u304b\u3089\u3060\u306e\u4e2d\u3067\u4f55\u3068\u3044\u3046\u91cd\u8981\u306a\u6709\u6a5f\u7269\u3092\u5408\u6210\u3059\u308b\u306e\u306b\u4f7f\u308f\u308c\u308b\u304b\u3002\",\n                    options: [\n                        \"\u30bf\u30f3\u30d1\u30af\u8cea\",\n                        \"\u30c7\u30f3\u30d7\u30f3\",\n                        \"\u8102\u80aa\"\n                    ],\n                    answer: 0,\n                    explanation: \"\u89e3\u8aac\uff1a\u690d\u7269\u306f\u6839\u304b\u3089\u5438\u53ce\u3057\u305f\u7a92\u7d20\u5316\u5408\u7269\u3092\u3082\u3068\u306b\u3001\u81ea\u3089\u306e\u6210\u9577\u3084\u7d44\u7e54\u306b\u6b20\u304b\u305b\u306a\u3044\u300c\u30bf\u30f3\u30d1\u30af\u8cea\u300d\u3092\u5408\u6210\u3057\u307e\u3059\u3002\u52d5\u7269\u306f\u3053\u308c\u3092\u98df\u3079\u3066\u30bf\u30f3\u30d1\u30af\u8cea\u3092\u5f97\u3066\u3044\u307e\u3059\u3002\"\n                }\n            ];\n\n            let questions = [];\n            let currentIndex = 0;\n            let userAnswers = {}; \n            let reviewFlags = {}; \n            let timerInterval = null;\n            let timeLeft = 600; \/\/ 10\u5206\n            let startTime = 0;\n\n            \/\/ DOM\u8981\u7d20\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            \/\/ \u76f4\u524d\u306e\u554f\u984c\u3068\u91cd\u8907\u3057\u306b\u304f\u304f\u3059\u308b\u30b7\u30e3\u30c3\u30d5\u30eb\u6a5f\u80fd\u4ed8\u304d\u914d\u5217\u9078\u629e\uff0810\u554f\u62bd\u51fa\uff09\n            function generateRandomQuestions(array, count) {\n                let shuffled = [...array].sort(() => Math.random() - 0.5);\n                return shuffled.slice(0, count);\n            }\n\n            \/\/ \u30b9\u30bf\u30fc\u30c8\n            startBtn.addEventListener('click', () => {\n                questions = generateRandomQuestions(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.add('hidden'));\n                [startScreen, quizScreen, resultScreen].forEach(s => s.classList.remove('active'));\n                screen.classList.remove('hidden');\n                screen.classList.add('active');\n            }\n\n            \/\/ \u30bf\u30a4\u30de\u30fc\u5236\u5fa1\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            \/\/ \u554f\u984c\u63cf\u753b\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.className = 'bg-amber-500 text-white px-3 py-1 rounded-lg text-xs font-bold transition shadow-sm';\n                } else {\n                    reviewBtn.textContent = '\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af';\n                    reviewBtn.className = 'border border-amber-500 text-amber-600 hover:bg-amber-50 px-3 py-1 rounded-lg text-xs font-bold transition';\n                }\n\n                optionsListEl.innerHTML = '';\n                qData.options.forEach((opt, idx) => {\n                    const label = document.createElement('label');\n                    const isSelected = userAnswers[currentIndex] === idx;\n                    label.className = `flex items-center p-4 border-2 rounded-xl cursor-pointer transition ${isSelected ? 'border-emerald-600 bg-emerald-50\/50 shadow-sm' : 'border-slate-200 hover:bg-slate-50 hover:border-slate-300'}`;\n                    \n                    const radio = document.createElement('input');\n                    radio.type = 'radio';\n                    radio.name = 'quiz-option';\n                    radio.value = idx;\n                    radio.checked = isSelected;\n                    radio.className = 'w-4 h-4 text-emerald-600 focus:ring-emerald-500 mr-3';\n\n                    radio.addEventListener('change', () => {\n                        userAnswers[currentIndex] = idx;\n                        renderPalette();\n                        renderQuestion();\n                    });\n\n                    label.appendChild(radio);\n                    label.appendChild(document.createTextNode(opt));\n                    optionsListEl.appendChild(label);\n                });\n\n                prevBtn.disabled = currentIndex === 0;\n                prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1';\n                \n                if (currentIndex === questions.length - 1) {\n                    nextBtn.textContent = '\u63a1\u70b9\u3059\u308b';\n                } else {\n                    nextBtn.textContent = '\u6b21\u306e\u554f\u984c';\n                }\n\n                renderPalette();\n            }\n\n            reviewBtn.addEventListener('click', () => {\n                reviewFlags[currentIndex] = !reviewFlags[currentIndex];\n                renderQuestion();\n            });\n\n            prevBtn.addEventListener('click', () => {\n                if (currentIndex > 0) {\n                    currentIndex--;\n                    renderQuestion();\n                }\n            });\n\n            nextBtn.addEventListener('click', () => {\n                if (currentIndex < questions.length - 1) {\n                    currentIndex++;\n                    renderQuestion();\n                } else {\n                    if (confirm('\u3059\u3079\u3066\u306e\u554f\u984c\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3057\u3066\u63a1\u70b9\u3057\u307e\u3059\u304b\uff1f')) {\n                        finishTest();\n                    }\n                }\n            });\n\n            finishEarlyBtn.addEventListener('click', () => {\n                if (confirm('\u672c\u5f53\u306b\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3057\u3066\u63a1\u70b9\u753b\u9762\u3078\u79fb\u52d5\u3057\u307e\u3059\u304b\uff1f')) {\n                    finishTest();\n                }\n            });\n\n            \/\/ \u30d1\u30ec\u30c3\u30c8\u63cf\u753b\n            function renderPalette() {\n                paletteGridEl.innerHTML = '';\n                questions.forEach((_, idx) => {\n                    const btn = document.createElement('button');\n                    let btnClass = 'aspect-square border-2 rounded-lg font-bold text-xs flex items-center justify-center relative transition ';\n                    \n                    if (idx === currentIndex) {\n                        btnClass += 'border-emerald-600 ring-2 ring-emerald-600\/20 bg-white text-emerald-700 ';\n                    } else if (userAnswers[idx] !== undefined) {\n                        btnClass += 'bg-emerald-100 border-emerald-200 text-emerald-800 ';\n                    } else {\n                        btnClass += 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50 ';\n                    }\n\n                    btn.className = btnClass;\n                    btn.textContent = idx + 1;\n\n                    if (reviewFlags[idx]) {\n                        const star = document.createElement('span');\n                        star.textContent = '\u2605';\n                        star.className = 'absolute -top-1.5 -right-1.5 text-amber-500 text-[10px]';\n                        btn.appendChild(star);\n                    }\n\n                    btn.addEventListener('click', () => {\n                        currentIndex = idx;\n                        renderQuestion();\n                    });\n\n                    paletteGridEl.appendChild(btn);\n                });\n            }\n\n            \/\/ \u63a1\u70b9\n            function finishTest() {\n                clearInterval(timerInterval);\n                switchScreen(resultScreen);\n\n                const timeSpentSec = Math.floor((Date.now() - startTime) \/ 1000);\n                const minutes = Math.floor(timeSpentSec \/ 60);\n                const seconds = timeSpentSec % 60;\n                timeTakenDisplayEl.textContent = `\u6240\u8981\u6642\u9593: ${minutes}\u5206${seconds}\u79d2`;\n\n                let correctCount = 0;\n                questions.forEach((q, idx) => {\n                    if (userAnswers[idx] === q.answer) {\n                        correctCount++;\n                    }\n                });\n\n                const score = correctCount * 10;\n                scoreDisplayEl.textContent = `\u5f97\u70b9: ${score}\u70b9 (${correctCount}\/${questions.length}\u554f\u6b63\u89e3)`;\n\n                renderResults('all');\n            }\n\n            \/\/ \u7d50\u679c\u4e00\u89a7\uff08\u30d5\u30a3\u30eb\u30bf\u30fc\u6a5f\u80fd\u3064\u304d\uff09\n            function renderResults(filter) {\n                resultListEl.innerHTML = '';\n\n                questions.forEach((q, idx) => {\n                    const userAnswer = userAnswers[idx];\n                    const isCorrect = userAnswer === 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 = `border-2 rounded-xl p-4 bg-white ${isCorrect ? 'border-l-8 border-l-emerald-500 border-slate-200' : 'border-l-8 border-l-rose-500 border-slate-200'}`;\n\n                    const userAnswerText = userAnswer !== undefined ? q.options[userAnswer] : '\u672a\u56de\u7b54';\n                    const correctAnswerText = q.options[q.answer];\n\n                    card.innerHTML = `\n                        <div class=\"flex justify-between items-center mb-2 text-xs font-bold\">\n                            <span class=\"text-slate-500\">\u554f\u984c ${idx + 1} ${isReviewed ? '<span class=\"text-amber-500 ml-1\">\u2605\u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af<\/span>' : ''}<\/span>\n                            <span class=\"${isCorrect ? 'text-emerald-600' : 'text-rose-600'} text-sm\">${isCorrect ? '\u3007 \u6b63\u89e3' : '\u00d7 \u4e0d\u6b63\u89e3'}<\/span>\n                        <\/div>\n                        <div class=\"font-bold text-slate-800 mb-3 text-sm sm:text-base\">${q.q}<\/div>\n                        <div class=\"bg-slate-50 p-3 rounded-lg text-xs sm:text-sm space-y-1 mb-3\">\n                            <div>\u3042\u306a\u305f\u306e\u7b54\u3048: <strong class=\"${isCorrect ? 'text-emerald-700' : 'text-rose-700'}\">${userAnswerText}<\/strong><\/div>\n                            <div>\u6b63\u89e3: <strong class=\"text-emerald-700\">${correctAnswerText}<\/strong><\/div>\n                        <\/div>\n                        <div class=\"text-xs sm:text-sm text-slate-600 bg-emerald-50\/40 p-3 rounded-lg border border-emerald-100\">\n                            ${q.explanation}\n                        <\/div>\n                    `;\n                    resultListEl.appendChild(card);\n                });\n\n                if (resultListEl.children.length === 0) {\n                    resultListEl.innerHTML = '<p class=\"text-center text-slate-400 py-8 text-sm\">\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', (e) => {\n                    tabBtns.forEach(b => {\n                        b.classList.remove('bg-emerald-600', 'text-white');\n                        b.classList.add('bg-slate-100', 'text-slate-600');\n                    });\n                    e.target.classList.remove('bg-slate-100', 'text-slate-600');\n                    e.target.classList.add('bg-emerald-600', 'text-white');\n                    renderResults(e.target.dataset.filter);\n                });\n            });\n\n            restartBtn.addEventListener('click', () => {\n                switchScreen(startScreen);\n            });\n\n        })();\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u7b2c15\u56de \u81ea\u7136\u3068\u4eba\u9593\u30fb\u751f\u614b\u7cfb\uff09 \u4e2d\u5b66\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u7b2c15\u56de \u5f31\u70b9\u767a\u898b\u30c6\u30b9\u30c8\uff08\u81ea\u7136\u3068\u4eba\u9593\u30fb\u751f\u614b\u7cfb\uff09 \u30c6\u30b9\u30c8\u3092\u59cb\u3081\u307e\u3057\u3087\u3046\uff01 \u81ea\u7136\u754c\u306e\u3064\u308a\u3042\u3044\u3001\u98df\u7269\u9023\u9396\u3001\u5206\u89e3\u8005\u3001\u74b0\u5883\u554f\u984c\u3084\u30a8\u30cd\u30eb\u30ae\u30fc\u306b\u3064\u3044\u3066\u306e\u7dcf\u5fa9\u7fd2\u30c6 [&hellip;]<\/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-4651","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\/4651","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=4651"}],"version-history":[{"count":1,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4651\/revisions"}],"predecessor-version":[{"id":4652,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4651\/revisions\/4652"}],"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=4651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}