{"id":4615,"date":"2026-08-03T14:05:43","date_gmt":"2026-08-03T05:05:43","guid":{"rendered":"https:\/\/nansiki.net\/2018\/?p=4615"},"modified":"2026-10-07T01:32:13","modified_gmt":"2026-10-06T16:32:13","slug":"%e7%90%86%e7%a7%91_%e7%89%a9%e7%90%86_%e5%8a%9b%e3%83%bb%e9%9f%b3%e3%83%bb%e5%85%89%e3%81%ae%e4%b8%80%e5%95%8f%e4%b8%80%e7%ad%94","status":"publish","type":"post","link":"https:\/\/nansiki.net\/2018\/archives\/4615","title":{"rendered":"\u7406\u79d1_\u7269\u7406_\u529b\u30fb\u97f3\u30fb\u5149\u306e\u4e00\u554f\u4e00\u7b54"},"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\u7269\u7406\uff1a\u529b\u30fb\u5149\u30fb\u97f3\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        <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            <span id=\"progress-indicator\" style=\"font-size: 0.9rem; color: #666;\"><\/span>\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: \"\u5730\u7403\u4e0a\u3067\u306f\u8cea\u91cf\u304c30kg\u3067\u3042\u308b\u7269\u4f53\u306e\u3001\u6708\u9762\u4e0a\u3067\u306e\u8cea\u91cf\u306f\u3044\u304f\u3089\u304b\u3002\",\n            options: [\"5kg\", \"30kg\", \"180kg\", \"540kg\"],\n            answer: 1,\n            explanation: \"\u8cea\u91cf\u306f\u5834\u6240\u304c\u5909\u308f\u3063\u3066\u3082\u5909\u308f\u3089\u306a\u3044\u305f\u3081\u3001\u5730\u7403\u4e0a\u3067\u3082\u6708\u9762\u4e0a\u3067\u308230kg\u3067\u3059\u3002\"\n        },\n        {\n            q: \"\u3070\u306d\u3070\u304b\u308a\u306e\u4f38\u3073\u3092\u8abf\u3079\u308b\u3068\u304d\u3001\u76ee\u306e\u9ad8\u3055\u306f\u3088\u307f\u3068\u308d\u3046\u3068\u3059\u308b\u76ee\u3082\u308a\u306b\u5bfe\u3057\u3066\u3069\u306e\u4f4d\u7f6e\u306b\u3042\u308b\u306e\u304c\u3088\u3044\u304b\u3002\",\n            options: [\"\u771f\u4e0a\", \"\u771f\u4e0b\", \"\u771f\u6a2a\", \"\u659c\u3081\u4e0a\"],\n            answer: 2,\n            explanation: \"\u76ee\u76db\u308a\u3092\u6b63\u78ba\u306b\u8aad\u307f\u53d6\u308b\u305f\u3081\u306b\u306f\u3001\u76ee\u3082\u308a\u306b\u5bfe\u3057\u3066\u771f\u6a2a\u306e\u9ad8\u3055\u304b\u3089\u898b\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\"\n        },\n        {\n            q: \"\u300c\u529b\u304c\u306f\u305f\u3089\u304f\u70b9(\u4f5c\u7528\u70b9)\u300d\u300c\u529b\u306e\u5927\u304d\u3055\u300d\u300c\u529b\u306e\u5411\u304d\u300d\u3053\u308c\u30893\u3064\u3092\u307e\u3068\u3081\u3066\u4f55\u3068\u3044\u3046\u304b\u3002\",\n            options: [\"\u529b\u306e\u4e09\u8981\u7d20\", \"\u529b\u306e\u5408\u6210\", \"\u529b\u306e\u3064\u308a\u5408\u3044\", \"\u529b\u306e\u30e2\u30fc\u30e1\u30f3\u30c8\"],\n            answer: 0,\n            explanation: \"\u3053\u308c\u30893\u3064\u306f\u300c\u529b\u306e\u4e09\u8981\u7d20\u300d\u3068\u547c\u3070\u308c\u307e\u3059\u3002\"\n        },\n        {\n            q: \"\u93e1\u306b\u5199\u308b\u81ea\u5206\u306e\u59ff\u306f\u3001\u5b9f\u50cf\u30fb\u865a\u50cf\u30fb\u5e7b\u50cf\u306e\u3069\u308c\u304b\u3002\",\n            options: [\"\u5b9f\u50cf\", \"\u865a\u50cf\", \"\u5e7b\u50cf\"],\n            answer: 1,\n            explanation: \"\u93e1\u306b\u5199\u308b\u50cf\u306f\u3001\u5b9f\u969b\u306b\u306f\u5149\u304c\u96c6\u307e\u3063\u3066\u3044\u306a\u3044\u300c\u865a\u50cf\u300d\u3067\u3059\u3002\"\n        },\n        {\n            q: \"\u6708\u9762\u4e0a\u3067\u306e\u91cd\u3055\u304c90N\u3060\u3063\u305f\u7269\u4f53\u306e\u5730\u7403\u4e0a\u3067\u306e\u91cd\u3055\u306f\u4f55N\u304b\u3002\u305f\u3060\u3057\u3001\u6708\u9762\u4e0a\u3067\u306e\u91cd\u529b\u306f\u5730\u7403\u4e0a\u306e6\u5206\u306e1\u3067\u3042\u308b\u3002\",\n            options: [\"15N\", \"90N\", \"540N\", \"600N\"],\n            answer: 2,\n            explanation: \"\u5730\u7403\u4e0a\u306e\u91cd\u529b\u306f\u6708\u9762\u306e6\u500d\u306a\u306e\u3067\u300190N \u00d7 6 = 540N \u3068\u306a\u308a\u307e\u3059\u3002\"\n        },\n        {\n            q: \"\u30d4\u30f3\u3068\u5f35\u3063\u305f\u3072\u3082\u3084\u7cf8\u304c\u3001\u305d\u308c\u306b\u63a5\u7d9a\u3057\u305f\u3082\u306e\u3092\u5f15\u304f\u529b\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n            options: [\"\u5782\u76f4\u6297\u529b\", \"\u6469\u64e6\u529b\", \"\u5f35\u529b\", \"\u5f3e\u6027\u529b\"],\n            answer: 2,\n            explanation: \"\u3072\u3082\u3084\u7cf8\u304c\u30d4\u30f3\u3068\u5f35\u3063\u3066\u5f15\u304f\u529b\u3092\u300c\u5f35\u529b\u300d\u3068\u3044\u3044\u307e\u3059\u3002\"\n        },\n        {\n            q: \"\u624b\u306b\u3082\u3063\u305f\u5c0f\u77f3\u3092\u306f\u306a\u3059\u3068\u3001\u5c0f\u77f3\u304c\u3072\u3068\u308a\u3067\u306b\u843d\u3061\u308b\u306e\u306f\u5c0f\u77f3\u306b\u3069\u306e\u5411\u304d\u306e\u529b\u304c\u306f\u305f\u3089\u304f\u304b\u3089\u304b\u3002\",\n            options: [\"\u4e0a\u5411\u304d\", \"\u4e0b\u5411\u304d\uff08\u925b\u76f4\u4e0b\u5411\u304d\uff09\", \"\u6c34\u5e73\u53f3\u5411\u304d\", \"\u6c34\u5e73\u5de6\u5411\u304d\"],\n            answer: 1,\n            explanation: \"\u5730\u7403\u4e0a\u306e\u7269\u4f53\u306b\u306f\u4e2d\u5fc3\u306b\u5411\u304b\u3063\u3066\uff08\u4e0b\u5411\u304d\u30fb\u925b\u76f4\u4e0b\u5411\u304d\u306b\uff09\u91cd\u529b\u304c\u306f\u305f\u3089\u304d\u307e\u3059\u3002\"\n        },\n        {\n            q: \"\u5e73\u884c\u306a\u5149\u3092\u51f8\u30ec\u30f3\u30ba\u306e\u771f\u6b63\u9762\u304b\u3089\u5f53\u3066\u305f\u3068\u304d\u306b\u3067\u304d\u308b\u3001\u5149\u306e\u96c6\u307e\u308b\u70b9\u3092\u4f55\u3068\u3044\u3046\u304b\u3002\",\n            options: [\"\u7126\u70b9\", \"\u4f5c\u7528\u70b9\", \"\u5165\u5c04\u70b9\", \"\u53cd\u5c04\u70b9\"],\n            answer: 0,\n            explanation: \"\u51f8\u30ec\u30f3\u30ba\u306b\u5e73\u884c\u306a\u5149\u3092\u5f53\u3066\u305f\u3068\u304d\u3001\u5149\u304c\u96c6\u307e\u308b\u70b9\u306f\u300c\u7126\u70b9\u300d\u3068\u3044\u3044\u307e\u3059\u3002\"\n        },\n        {\n            q: \"1\u70b9\u306b\u306f\u305f\u3089\u304f2\u529b\u304c\u3064\u308a\u5408\u3046\u305f\u3081\u306e\u6761\u4ef6\u3068\u3057\u3066\u6b63\u3057\u3044\u3082\u306e\u306f\u3069\u308c\u304b\u3002\",\n            options: [\n                \"2\u529b\u306e\u5927\u304d\u3055\u304c\u7b49\u3057\u304f\u3001\u5411\u304d\u304c\u540c\u3058\u3067\u3042\u308b\",\n                \"2\u529b\u306e\u5927\u304d\u3055\u304c\u7b49\u3057\u304f\u3001\u5411\u304d\u304c\u53cd\u5bfe\u3067\u3001\u540c\u4e00\u76f4\u7dda\u4e0a\u306b\u3042\u308b\",\n                \"2\u529b\u306e\u5927\u304d\u3055\u304c\u7570\u306a\u308a\u3001\u5411\u304d\u304c\u53cd\u5bfe\u3067\u3042\u308b\",\n                \"2\u529b\u304c\u305d\u308c\u305e\u308c\u5225\u306e\u65b9\u5411\u3092\u5411\u3044\u3066\u3044\u308b\"\n            ],\n            answer: 1,\n            explanation: \"\u529b\u306e\u3064\u308a\u5408\u3044\u306e3\u6761\u4ef6\u306f\u3001\u300c\u2460\u5927\u304d\u3055\u304c\u7b49\u3057\u3044\u300d\u300c\u2461\u5411\u304d\u304c\u53cd\u5bfe\u300d\u300c\u2462\u540c\u4e00\u76f4\u7dda\u4e0a\u306b\u3042\u308b\u300d\u3067\u3059\u3002\"\n        },\n        {\n            q: \"\u7121\u91cd\u91cf\u72b6\u614b\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3001\u3070\u306d\u3070\u304b\u308a\u306b5N\u306e\u7269\u4f53\u3092\u3064\u308b\u3059\u3068\u306f\u304b\u308a\u306e\u76ee\u3082\u308a\u306f\u4f55N\u3092\u3055\u3059\u304b\u3002\",\n            options: [\"0N\", \"5N\", \"30N\", \"50N\"],\n            answer: 0,\n            explanation: \"\u7121\u91cd\u91cf\u72b6\u614b\u3067\u306f\u91cd\u529b\u304c\u306f\u305f\u3089\u304b\u306a\u3044\uff08\u304a\u3082\u308a\u304c\u3070\u306d\u3092\u5f15\u304b\u306a\u3044\uff09\u305f\u3081\u3001\u76ee\u76db\u308a\u306f0N\u3092\u3055\u3057\u307e\u3059\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 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    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\u7269\u7406\uff1a\u529b\u30fb\u5149\u30fb\u97f3\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 \u6b21\u306e\u554f\u984c  [&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-4615","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\/4615","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=4615"}],"version-history":[{"count":3,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4615\/revisions"}],"predecessor-version":[{"id":4618,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/posts\/4615\/revisions\/4618"}],"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=4615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/categories?post=4615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/tags?post=4615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}