{"id":4619,"date":"2026-08-03T14:18:31","date_gmt":"2026-08-03T05:18:31","guid":{"rendered":"https:\/\/nansiki.net\/2018\/?p=4619"},"modified":"2026-10-07T01:32:07","modified_gmt":"2026-10-06T16:32:07","slug":"%e7%90%86%e7%a7%91_%e5%8c%96%e5%ad%a6_%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d%e3%81%aa%e7%89%a9%e8%b3%aa","status":"publish","type":"post","link":"https:\/\/nansiki.net\/2018\/archives\/4619","title":{"rendered":"\u7406\u79d1_\u5316\u5b66_\u3044\u308d\u3044\u308d\u306a\u7269\u8cea"},"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<div id=\"science-quiz-app\" style=\"max-width: 700px; margin: 0 auto; font-family: sans-serif; border: 1px solid #ccc; border-radius: 8px; padding: 20px; background: #f9f9f9;\">\n    \n    <!-- \u30b9\u30bf\u30fc\u30c8\u753b\u9762 -->\n    <div id=\"start-screen\" style=\"text-align: center; padding: 30px 10px;\">\n        <h2 style=\"color: #0073aa; margin-bottom: 15px;\">\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54\uff08\u5316\u5b66\uff1a\u3044\u308d\u3044\u308d\u306a\u7269\u8cea\uff09<\/h2>\n        <p style=\"font-size: 1.05rem; color: #444; margin-bottom: 10px;\">\u5236\u9650\u6642\u9593\uff1a10\u5206 \/ \u51fa\u984c\u6570\uff1a10\u554f<\/p>\n        <p style=\"font-size: 0.95rem; color: #666; margin-bottom: 25px;\">\u203b\u554f\u984c\u306f\u6bce\u56de\u30e9\u30f3\u30c0\u30e0\u306b\u51fa\u984c\u3055\u308c\u307e\u3059\u3002<\/p>\n        <button id=\"start-btn\" style=\"padding: 12px 30px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1rem; font-weight: bold;\">\u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8<\/button>\n    <\/div>\n\n    <!-- \u30af\u30a4\u30ba\u753b\u9762\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09 -->\n    <div id=\"quiz-screen\" style=\"display: none;\">\n        <div id=\"quiz-header\" style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0073aa; padding-bottom: 10px; margin-bottom: 20px;\">\n            <h2 style=\"margin: 0; font-size: 1.2rem; color: #0073aa;\">\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54<\/h2>\n            <div id=\"timer\" style=\"font-size: 1.1rem; font-weight: bold; color: #d9534f; background: #fff; padding: 5px 10px; border: 1px solid #d9534f; border-radius: 4px;\">\u5236\u9650\u6642\u9593: 10:00<\/div>\n        <\/div>\n\n        <div id=\"question-container\" style=\"margin-bottom: 20px;\">\n            <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;\">\n                <p id=\"question-number\" style=\"font-weight: bold; color: #555; margin: 0;\"><\/p>\n                <button id=\"review-toggle-btn\" style=\"padding: 4px 10px; font-size: 0.85rem; background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af<\/button>\n            <\/div>\n            <p id=\"question-text\" style=\"font-size: 1.1rem; font-weight: bold; color: #333; line-height: 1.5; margin-top: 10px;\"><\/p>\n            <div id=\"options-container\" style=\"display: flex; flex-direction: column; gap: 10px; margin-top: 15px;\"><\/div>\n        <\/div>\n\n        <!-- \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30a8\u30ea\u30a2\uff08\u30c6\u30b9\u30c8\u7d42\u4e86\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\uff09 -->\n        <div id=\"navigation\" style=\"display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; padding-top: 15px; margin-bottom: 15px;\">\n            <button id=\"prev-btn\" style=\"padding: 8px 16px; background: #ccc; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;\" disabled>\u524d\u306e\u554f\u984c<\/button>\n            <div style=\"display: flex; gap: 8px; align-items: center;\">\n                <button id=\"force-finish-btn\" style=\"padding: 8px 12px; background: #d9534f; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.9rem;\">\u30c6\u30b9\u30c8\u7d42\u4e86<\/button>\n                <span id=\"progress-indicator\" style=\"font-size: 0.9rem; color: #666;\"><\/span>\n            <\/div>\n            <button id=\"next-btn\" style=\"padding: 8px 16px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;\">\u6b21\u306e\u554f\u984c<\/button>\n        <\/div>\n\n        <!-- \u554f\u984c\u756a\u53f7\u30d1\u30ec\u30c3\u30c8 -->\n        <div style=\"border-top: 1px dashed #ddd; padding-top: 15px; text-align: center;\">\n            <p style=\"font-size: 0.85rem; color: #666; margin: 0 0 8px 0;\">\u554f\u984c\u4e00\u89a7\uff08\u30af\u30ea\u30c3\u30af\u3057\u3066\u79fb\u52d5\uff09<\/p>\n            <div id=\"palette-container\" style=\"display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;\"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- \u7d50\u679c\u753b\u9762\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09 -->\n    <div id=\"result-container\" style=\"display: none;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0073aa; padding-bottom: 10px; margin-bottom: 20px;\">\n            <h2 style=\"margin: 0; font-size: 1.2rem; color: #0073aa;\">\u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54<\/h2>\n            <div id=\"result-timer\" style=\"font-size: 0.95rem; font-weight: bold; color: #666;\"><\/div>\n        <\/div>\n        <div style=\"text-align: center;\">\n            <h3 style=\"color: #0073aa; font-size: 1.5rem; margin-top: 0;\">\u30c6\u30b9\u30c8\u7d42\u4e86\uff01<\/h3>\n            <p id=\"score-display\" style=\"font-size: 1.2rem; font-weight: bold; margin: 15px 0;\"><\/p>\n        <\/div>\n\n        <!-- \u30d5\u30a3\u30eb\u30bf\u30fc\u30bf\u30d6 -->\n        <div style=\"display: flex; justify-content: center; gap: 10px; margin: 20px 0;\">\n            <button class=\"filter-btn active-filter\" data-filter=\"all\" style=\"padding: 6px 14px; border: 1px solid #0073aa; background: #0073aa; color: #fff; border-radius: 4px; cursor: pointer; font-weight: bold;\">\u3059\u3079\u3066\u8868\u793a<\/button>\n            <button class=\"filter-btn\" data-filter=\"incorrect\" style=\"padding: 6px 14px; border: 1px solid #ccc; background: #fff; color: #333; border-radius: 4px; cursor: pointer;\">\u00d7 \u4e0d\u6b63\u89e3\u306e\u307f<\/button>\n            <button class=\"filter-btn\" data-filter=\"reviewed\" style=\"padding: 6px 14px; border: 1px solid #ccc; background: #fff; color: #333; border-radius: 4px; cursor: pointer;\">\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u306e\u307f<\/button>\n        <\/div>\n\n        <div id=\"review-list\" style=\"text-align: left; margin-top: 15px;\"><\/div>\n        <div style=\"text-align: center;\">\n            <button id=\"restart-btn\" style=\"margin-top: 25px; padding: 10px 20px; background: #0073aa; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1rem;\">\u3082\u3046\u4e00\u5ea6\u6311\u6226\u3059\u308b\uff08\u554f\u984c\u3082\u30e9\u30f3\u30c0\u30e0\u5165\u66ff\uff09<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const rawQuestions = [\n        {\n            q: \"\u786b\u5b89\uff08\u786b\u9178\u30a2\u30f3\u30e2\u30cb\u30a6\u30e0\uff09\u306b\u6d88\u77f3\u7070\u3092\u6df7\u305c\u305f\u3082\u306e\u3092\u52a0\u71b1\u3059\u308b\u3068\u767a\u751f\u3059\u308b\u6c17\u4f53\u306f\u4f55\u304b\u3002\",\n            options: [\"\u6c34\u7d20\", \"\u30a2\u30f3\u30e2\u30cb\u30a2\", \"\u4e8c\u9178\u5316\u70ad\u7d20\", \"\u9178\u7d20\"],\n            answer: 1,\n            explanation: \"\u786b\u5b89\u306b\u6d88\u77f3\u7070\u3092\u6df7\u305c\u3066\u52a0\u71b1\u3059\u308b\u3068\u3001\u523a\u6fc0\u81ed\u306e\u3042\u308b\u6c17\u4f53\u3067\u3042\u308b\u30a2\u30f3\u30e2\u30cb\u30a2\u304c\u767a\u751f\u3057\u307e\u3059[cite: 2, 10]\u3002\"\n        },\n        {\n            q: \"\u70ad\u9178\u6c34\u7d20\u30ca\u30c8\u30ea\u30a6\u30e0\u306b\u3046\u3059\u3044\u5869\u9178\u3092\u52a0\u3048\u308b\u3068\u767a\u751f\u3059\u308b\u6c17\u4f53\u306f\u4f55\u304b\u3002\",\n            options: [\"\u6c34\u7d20\", \"\u30a2\u30f3\u30e2\u30cb\u30a2\", \"\u4e8c\u9178\u5316\u70ad\u7d20\", \"\u5869\u7d20\"],\n            answer: 2,\n            explanation: \"\u70ad\u9178\u6c34\u7d20\u30ca\u30c8\u30ea\u30a6\u30e0\u3084\u77f3\u7070\u77f3\u306b\u3046\u3059\u3044\u5869\u9178\u3092\u52a0\u3048\u308b\u3068\u3001\u4e8c\u9178\u5316\u70ad\u7d20\u304c\u767a\u751f\u3057\u307e\u3059[cite: 2, 5, 10]\u3002\"\n        },\n        {\n            q: \"\u30c9\u30e9\u30a4\u30a2\u30a4\u30b9\u306f\u6c37\u306e\u3088\u3046\u306b\u3068\u3051\u3066\u6db2\u4f53\u306b\u306a\u3089\u305a\u3001\u76f4\u63a5\u6c17\u4f53\u306e\u4e8c\u9178\u5316\u70ad\u7d20\u306b\u306a\u308b\u3002\u3053\u306e\u3088\u3046\u306a\u73fe\u8c61\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n            options: [\"\u878d\u89e3\", \"\u84b8\u767a\", \"\u6607\u83ef\", \"\u51dd\u56fa\"],\n            answer: 2,\n            explanation: \"\u56fa\u4f53\u304b\u3089\u76f4\u63a5\u6c17\u4f53\u306b\u5909\u5316\u3059\u308b\u73fe\u8c61\u3092\u300c\u6607\u83ef\u300d\u3068\u3044\u3044\u307e\u3059[cite: 7, 10]\u3002\"\n        },\n        {\n            q: \"\u6c34\u306b\u6c37\u3092\u5165\u308c\u3066\u3082\u6c37\u306f\u3057\u305a\u307e\u306a\u3044\u306e\u306f\u306a\u305c\u304b\u3002\u305d\u306e\u7406\u7531\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n            options: [\n                \"\u6c37\u306e\u307b\u3046\u304c\u6c34\u3088\u308a\u91cd\u3044\u304b\u3089\",\n                \"\u6c34\u306e\u5bc6\u5ea6\u306e\u307b\u3046\u304c\u6c37\u306e\u5bc6\u5ea6\u3088\u308a\u5927\u304d\u3044\u304b\u3089\",\n                \"\u6c37\u306e\u5bc6\u5ea6\u3068\u6c34\u306e\u5bc6\u5ea6\u304c\u307e\u3063\u305f\u304f\u540c\u3058\u3060\u304b\u3089\",\n                \"\u6c34\u304c\u6d6e\u529b\u3092\u767a\u751f\u3055\u305b\u3066\u3044\u306a\u3044\u304b\u3089\"\n            ],\n            answer: 1,\n            explanation: \"\u6c34\u306f\u56fa\u4f53\uff08\u6c37\uff09\u306b\u306a\u308b\u3068\u4f53\u7a4d\u304c\u5897\u3048\u308b\u305f\u3081\u3001\u6c34\u306e\u5bc6\u5ea6\u306e\u307b\u3046\u304c\u6c37\u306e\u5bc6\u5ea6\u3088\u308a\u5927\u304d\u304f\u306a\u308a\u3001\u6c37\u306f\u6c34\u306b\u6d6e\u304d\u307e\u3059[cite: 9, 10]\u3002\"\n        },\n        {\n            q: \"\u91d1\u5c5e\u306b\u306f\u3001\u5f15\u3063\u5f35\u308b\u3068\u7d30\u304f\u306e\u3073\u308b\u3068\u3044\u3046\u5171\u901a\u306e\u6027\u8cea\u304c\u3042\u308b\u3002\u3053\u306e\u6027\u8cea\u3092\u7279\u306b\u4f55\u3068\u3044\u3046\u304b\u3002\",\n            options: [\"\u5c55\u6027\", \"\u5ef6\u6027\", \"\u5c0e\u96fb\u6027\", \"\u78c1\u6027\"],\n            answer: 1,\n            explanation: \"\u91d1\u5c5e\u3092\u53e9\u3044\u3066\u8584\u304f\u5e83\u3052\u308b\u6027\u8cea\u3092\u5c55\u6027\u3001\u5f15\u3063\u5f35\u3063\u3066\u7d30\u304f\u306e\u3073\u308b\u6027\u8cea\u3092\u300c\u5ef6\u6027\u300d\u3068\u3044\u3044\u307e\u3059[cite: 7, 10]\u3002\"\n        },\n        {\n            q: \"\u5bb9\u5668\u306b\u6db2\u4f53\u3092\u5165\u308c\u3066\u52a0\u71b1\u3059\u308b\u3068\u304d\u3001\u6025\u306b\u6cb8\u9a30\u3057\u3066\u6db2\u4f53\u304c\u5916\u3078\u98db\u3073\u51fa\u3059\u306e\u3092\u9632\u3050\u305f\u3081\u306b\u4f55\u3092\u5165\u308c\u308b\u304b\u3002\",\n            options: [\"\u30ac\u30e9\u30b9\u68d2\", \"\u308d\u3046\u3068\", \"\u6cb8\u9a30\u77f3\", \"\u30e1\u30b9\u30b7\u30ea\u30f3\u30c0\u30fc\"],\n            answer: 2,\n            explanation: \"\u7a81\u6cb8\u3092\u9632\u3050\u305f\u3081\u306b\u300c\u6cb8\u9a30\u77f3\u300d\u3092\u5165\u308c\u307e\u3059[cite: 4, 10]\u3002\"\n        },\n        {\n            q: \"\u6b21\u306e\u6c34\u6eb6\u6db2\u306e\u3046\u3061\u3001\u7121\u8272\u900f\u660e\u3067\u306a\u3044\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n            options: [\"\u84b8\u7559\u6c34\", \"\u5869\u9178\", \"\u77f3\u7070\u6c34\", \"\u786b\u9178\u9285\u6c34\u6eb6\u6db2\"],\n            answer: 3,\n            explanation: \"\u786b\u9178\u9285\u6c34\u6eb6\u6db2\u306f\u9752\u8272\u900f\u660e\u3067\u3042\u308a\u3001\u4ed6\u306e\u84b8\u7559\u6c34\u30fb\u5869\u9178\u30fb\u77f3\u7070\u6c34\u306f\u7121\u8272\u900f\u660e\u3067\u3059[cite: 3, 10]\u3002\"\n        },\n        {\n            q: \"\u30dd\u30ea\u5869\u5316\u30d3\u30cb\u30eb\u306e\u7565\u8a9e\u3092\u3001\u6b21\u306e\u3046\u3061\u304b\u3089\u9078\u3079\u3002\",\n            options: [\"PE\", \"PET\", \"PVC\", \"PS\"],\n            answer: 2,\n            explanation: \"\u30dd\u30ea\u5869\u5316\u30d3\u30cb\u30eb\u306e\u7565\u8a9e\u306f PVC \u3067\u3059\uff08PE\u306f\u30dd\u30ea\u30a8\u30c1\u30ec\u30f3\u3001PET\u306f\u30dd\u30ea\u30a8\u30c1\u30ec\u30f3\u30c6\u30ec\u30d5\u30bf\u30e9\u30fc\u30c8\u3001PS\u306f\u30dd\u30ea\u30b9\u30c1\u30ec\u30f3\uff09[cite: 3, 10]\u3002\"\n        },\n        {\n            q: \"\u7269\u8cea\u304c\u72b6\u614b\u5909\u5316\uff08\u56fa\u4f53\u30fb\u6db2\u4f53\u30fb\u6c17\u4f53\u306e\u5909\u5316\uff09\u3092\u3059\u308b\u5834\u5408\u3001\u5909\u5316\u3059\u308b\u306e\u306f\u300c\u8cea\u91cf\u300d\u3068\u300c\u4f53\u7a4d\u300d\u306e\u3069\u3061\u3089\u304b\u3002\",\n            options: [\"\u8cea\u91cf\", \"\u4f53\u7a4d\", \"\u4e21\u65b9\u3068\u3082\u5909\u5316\u3059\u308b\", \"\u3069\u3061\u3089\u3082\u5909\u5316\u3057\u306a\u3044\"],\n            answer: 1,\n            explanation: \"\u72b6\u614b\u5909\u5316\u306b\u3088\u3063\u3066\u7c92\u5b50\u3068\u7c92\u5b50\u306e\u9593\u306e\u3059\u304d\u9593\u304c\u5909\u308f\u308b\u305f\u3081\u3001\u4f53\u7a4d\u304c\u5909\u5316\u3057\u307e\u3059\uff08\u8cea\u91cf\u306f\u5909\u308f\u308a\u307e\u305b\u3093\uff09[cite: 2, 10]\u3002\"\n        },\n        {\n            q: \"\u53f3\u304d\u304d\u306e\u4eba\u304c\u4e0a\u76bf\u3066\u3093\u3073\u3093\u3092\u4f7f\u3063\u3066\u8cea\u91cf\u306e\u308f\u304b\u3089\u306a\u3044\u7269\u8cea\u306e\u8cea\u91cf\u3092\u6e2c\u308b\u3068\u304d\u3001\u7269\u8cea\u306f\u5de6\u53f3\u3069\u3061\u3089\u306e\u76bf\u306b\u306e\u305b\u308b\u304b\u3002\",\n            options: [\"\u53f3\u306e\u76bf\", \"\u5de6\u306e\u76bf\", \"\u3069\u3061\u3089\u3067\u3082\u3088\u3044\", \"\u4e21\u65b9\u306e\u76bf\u306b\u534a\u5206\u305a\u3064\"],\n            answer: 1,\n            explanation: \"\u4e0a\u76bf\u3066\u3093\u3073\u3093\u3067\u306f\u3001\u306f\u304b\u308b\u7269\u8cea\u3092\u300c\u5de6\u306e\u76bf\u300d\u306b\u306e\u305b\u307e\u3059[cite: 7, 10]\u3002\"\n        }\n    ];\n\n    let questions = [];\n    let currentIdx = 0;\n    let userAnswers = [];\n    let reviewFlags = [];\n    let timeLeft = 600;\n    let timerInterval = null;\n    let currentFilter = 'all';\n    let totalSecondsUsed = 600;\n\n    const startScreen = document.getElementById('start-screen');\n    const quizScreen = document.getElementById('quiz-screen');\n    const startBtn = document.getElementById('start-btn');\n    const questionNumberEl = document.getElementById('question-number');\n    const questionTextEl = document.getElementById('question-text');\n    const optionsContainerEl = document.getElementById('options-container');\n    const prevBtn = document.getElementById('prev-btn');\n    const nextBtn = document.getElementById('next-btn');\n    const forceFinishBtn = document.getElementById('force-finish-btn');\n    const progressIndicator = document.getElementById('progress-indicator');\n    const paletteContainer = document.getElementById('palette-container');\n    const reviewToggleBtn = document.getElementById('review-toggle-btn');\n    const resultContainer = document.getElementById('result-container');\n    const scoreDisplay = document.getElementById('score-display');\n    const reviewList = document.getElementById('review-list');\n    const restartBtn = document.getElementById('restart-btn');\n    const timerEl = document.getElementById('timer');\n    const resultTimerEl = document.getElementById('result-timer');\n\n    function shuffleArray(array) {\n        let arr = [...array];\n        for (let i = arr.length - 1; i > 0; i--) {\n            let j = Math.floor(Math.random() * (i + 1));\n            [arr[i], arr[j]] = [arr[j], arr[i]];\n        }\n        return arr;\n    }\n\n    function initQuiz() {\n        questions = shuffleArray(rawQuestions);\n        currentIdx = 0;\n        userAnswers = new Array(questions.length).fill(null);\n        reviewFlags = new Array(questions.length).fill(false);\n        timeLeft = 600;\n        totalSecondsUsed = 600;\n        currentFilter = 'all';\n    }\n\n    function startTimer() {\n        timerInterval = setInterval(() => {\n            timeLeft--;\n            totalSecondsUsed = 600 - timeLeft;\n            let m = Math.floor(timeLeft \/ 60);\n            let s = timeLeft % 60;\n            timerEl.textContent = `\u5236\u9650\u6642\u9593: ${m}:${s < 10 ? '0' : ''}${s}`;\n            if (timeLeft <= 0) {\n                clearInterval(timerInterval);\n                showResult();\n            }\n        }, 1000);\n    }\n\n    function updatePalette() {\n        paletteContainer.innerHTML = '';\n        questions.forEach((_, idx) => {\n            const btn = document.createElement('button');\n            btn.textContent = idx + 1;\n            let bg = '#fff';\n            let color = '#333';\n            let border = '#ccc';\n\n            if (idx === currentIdx) {\n                border = '#0073aa';\n                bg = '#eef8ff';\n            }\n            if (userAnswers[idx] !== null) {\n                bg = '#e2f0d9';\n                border = '#70ad47';\n            }\n            if (reviewFlags[idx]) {\n                border = '#ffc000';\n            }\n\n            btn.style.cssText = `width: 32px; height: 32px; border: 2px solid ${border}; background: ${bg}; color: ${color}; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.9rem;`;\n            \n            btn.addEventListener('click', () => {\n                currentIdx = idx;\n                loadQuestion();\n            });\n            paletteContainer.appendChild(btn);\n        });\n    }\n\n    function loadQuestion() {\n        const q = questions[currentIdx];\n        questionNumberEl.textContent = `\u554f\u984c ${currentIdx + 1} \/ ${questions.length}`;\n        questionTextEl.textContent = q.q;\n        optionsContainerEl.innerHTML = '';\n\n        if (reviewFlags[currentIdx]) {\n            reviewToggleBtn.textContent = '\u2605 \u898b\u76f4\u3057\u4e2d\uff08\u89e3\u9664\uff09';\n            reviewToggleBtn.style.background = '#fff3cd';\n            reviewToggleBtn.style.borderColor = '#ffeeba';\n        } else {\n            reviewToggleBtn.textContent = '\u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af';\n            reviewToggleBtn.style.background = '#f0f0f0';\n            reviewToggleBtn.style.borderColor = '#ccc';\n        }\n\n        q.options.forEach((opt, idx) => {\n            const label = document.createElement('label');\n            label.style.cssText = \"display: block; padding: 10px 15px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: background 0.2s;\";\n            \n            const radio = document.createElement('input');\n            radio.type = 'radio';\n            radio.name = 'quiz-option';\n            radio.value = idx;\n            radio.style.marginRight = '10px';\n            if (userAnswers[currentIdx] === idx) {\n                radio.checked = true;\n                label.style.background = '#eef8ff';\n                label.style.borderColor = '#0073aa';\n            }\n\n            radio.addEventListener('change', () => {\n                userAnswers[currentIdx] = idx;\n                document.querySelectorAll('#options-container label').forEach(l => {\n                    l.style.background = '#fff';\n                    l.style.borderColor = '#ddd';\n                });\n                label.style.background = '#eef8ff';\n                label.style.borderColor = '#0073aa';\n                updatePalette();\n            });\n\n            label.appendChild(radio);\n            label.appendChild(document.createTextNode(opt));\n            optionsContainerEl.appendChild(label);\n        });\n\n        prevBtn.disabled = currentIdx === 0;\n        prevBtn.style.background = currentIdx === 0 ? '#ccc' : '#e0e0e0';\n        prevBtn.style.cursor = currentIdx === 0 ? 'not-allowed' : 'pointer';\n\n        nextBtn.textContent = currentIdx === questions.length - 1 ? '\u63a1\u70b9\u3059\u308b' : '\u6b21\u306e\u554f\u984c';\n        progressIndicator.textContent = `${currentIdx + 1}\u554f\u76ee \/ \u5168${questions.length}\u554f`;\n        updatePalette();\n    }\n\n    function renderReviewList() {\n        let score = 0;\n        let reviewHtml = '<ul style=\"padding-left: 0; list-style: none; line-height: 1.6;\">';\n\n        questions.forEach((q, i) => {\n            const isCorrect = userAnswers[i] === q.answer;\n            if (isCorrect) score++;\n            const isReviewed = reviewFlags[i];\n\n            if (currentFilter === 'incorrect' && isCorrect) return;\n            if (currentFilter === 'reviewed' && !isReviewed) return;\n\n            const userAnsText = userAnswers[i] !== null ? q.options[userAnswers[i]] : '\u672a\u56de\u7b54';\n            const correctAnsText = q.options[q.answer];\n\n            reviewHtml += `<li style=\"margin-bottom: 20px; padding: 15px; background: #fff; border: 1px solid #ddd; border-radius: 6px; position: relative;\">\n                ${isReviewed ? '<span style=\"position: absolute; top: 10px; right: 15px; background: #fff3cd; color: #856404; font-size: 0.8rem; padding: 2px 6px; border-radius: 4px; border: 1px solid #ffeeba;\">\u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af\u6e08<\/span>' : ''}\n                <strong>Q${i + 1}. ${q.q}<\/strong><br>\n                <div style=\"margin-top: 8px;\">\n                    \u3042\u306a\u305f\u306e\u7b54\u3048: <span style=\"color: ${isCorrect ? 'green' : 'red'}; font-weight: bold;\">${userAnsText}<\/span> ${isCorrect ? '\u3007' : '\u00d7'}<br>\n                    \u6b63\u89e3: <span style=\"color: green; font-weight: bold;\">${correctAnsText}<\/span><br>\n                    <span style=\"color: #555; font-size: 0.9rem; display: inline-block; margin-top: 4px;\">\u89e3\u8aac: ${q.explanation}<\/span>\n                <\/div>\n            <\/li>`;\n        });\n        reviewHtml += '<\/ul>';\n\n        if (reviewHtml === '<ul style=\"padding-left: 0; list-style: none; line-height: 1.6;\"><\/ul>') {\n            reviewHtml = '<p style=\"text-align: center; color: #666; padding: 20px;\">\u8a72\u5f53\u3059\u308b\u554f\u984c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n        }\n\n        scoreDisplay.textContent = `\u6b63\u89e3\u6570: ${score} \/ ${questions.length} \u554f (\u5f97\u70b9: ${score * 10}\u70b9)`;\n        let usedM = Math.floor(totalSecondsUsed \/ 60);\n        let usedS = totalSecondsUsed % 60;\n        resultTimerEl.textContent = `\u6240\u8981\u6642\u9593: ${usedM}\u5206${usedS}\u79d2`;\n        reviewList.innerHTML = reviewHtml;\n    }\n\n    function showResult() {\n        clearInterval(timerInterval);\n        quizScreen.style.display = 'none';\n        resultContainer.style.display = 'block';\n        currentFilter = 'all';\n        \n        document.querySelectorAll('.filter-btn').forEach(b => {\n            b.style.background = '#fff';\n            b.style.color = '#333';\n            b.style.borderColor = '#ccc';\n        });\n        const allBtn = document.querySelector('.filter-btn[data-filter=\"all\"]');\n        allBtn.style.background = '#0073aa';\n        allBtn.style.color = '#fff';\n        allBtn.style.borderColor = '#0073aa';\n\n        renderReviewList();\n    }\n\n    startBtn.addEventListener('click', () => {\n        initQuiz();\n        startScreen.style.display = 'none';\n        quizScreen.style.display = 'block';\n        startTimer();\n        loadQuestion();\n    });\n\n    prevBtn.addEventListener('click', () => {\n        if (currentIdx > 0) {\n            currentIdx--;\n            loadQuestion();\n        }\n    });\n\n    nextBtn.addEventListener('click', () => {\n        if (currentIdx < questions.length - 1) {\n            currentIdx++;\n            loadQuestion();\n        } else {\n            showResult();\n        }\n    });\n\n    \/\/ \u3069\u306e\u554f\u984c\u304b\u3089\u3067\u3082\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3067\u304d\u308b\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\n    forceFinishBtn.addEventListener('click', () => {\n        if (confirm('\u672c\u5f53\u306b\u30c6\u30b9\u30c8\u3092\u7d42\u4e86\u3057\u3066\u63a1\u70b9\u3057\u307e\u3059\u304b\uff1f')) {\n            showResult();\n        }\n    });\n\n    reviewToggleBtn.addEventListener('click', () => {\n        reviewFlags[currentIdx] = !reviewFlags[currentIdx];\n        loadQuestion();\n    });\n\n    document.querySelectorAll('.filter-btn').forEach(btn => {\n        btn.addEventListener('click', (e) => {\n            document.querySelectorAll('.filter-btn').forEach(b => {\n                b.style.background = '#fff';\n                b.style.color = '#333';\n                b.style.borderColor = '#ccc';\n            });\n            e.target.style.background = '#0073aa';\n            e.target.style.color = '#fff';\n            e.target.style.borderColor = '#0073aa';\n\n            currentFilter = e.target.getAttribute('data-filter');\n            renderReviewList();\n        });\n    });\n\n    restartBtn.addEventListener('click', () => {\n        resultContainer.style.display = 'none';\n        startScreen.style.display = 'block';\n    });\n})();\n<\/script>\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\u5316\u5b66\uff1a\u3044\u308d\u3044\u308d\u306a\u7269\u8cea\uff09 \u5236\u9650\u6642\u9593\uff1a10\u5206 \/ \u51fa\u984c\u6570\uff1a10\u554f \u203b\u554f\u984c\u306f\u6bce\u56de\u30e9\u30f3\u30c0\u30e0\u306b\u51fa\u984c\u3055\u308c\u307e\u3059\u3002 \u30c6\u30b9\u30c8\u30b9\u30bf\u30fc\u30c8 \u4e2d\u5b66\u751f\u7406\u79d1 \u4e00\u554f\u4e00\u7b54 \u5236\u9650\u6642\u9593: 10:00 \u2606 \u898b\u76f4\u3057\u30c1\u30a7\u30c3\u30af \u524d\u306e\u554f\u984c \u30c6\u30b9\u30c8 [&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"},"footnotes":""},"categories":[308],"tags":[],"class_list":["post-4619","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\/4619","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=4619"}],"version-history":[{"count":2,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4619\/revisions"}],"predecessor-version":[{"id":4621,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4619\/revisions\/4621"}],"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=4619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}