SPI\u4f53\u9a13\u6a21\u8a66\uff085\u554f\u7248\uff09<\/title>\n <style>\n \/* === \u57fa\u672c\u30b9\u30bf\u30a4\u30eb === *\/\n body {\n font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;\n line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333;\n position: relative;\n }\n .spi-test-container {\n max-width: 800px; margin: 20px auto; padding: 30px; background-color: #fff;\n border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n position: relative;\n }\n .spi-test-container h1, .spi-test-container h2 { text-align: center; color: #0056b3; }\n .spi-test-container h1 { margin-bottom: 15px; font-size: 24px; }\n .spi-test-container h2 { font-size: 1.2em; margin-bottom: 20px; font-weight: normal; color: #555; }\n .question-block { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px dashed #ccc; display: none; }\n .question-block:last-of-type { border-bottom: none; margin-bottom: 20px; }\n .question-block.active { display: block; }\n .question-block p.question-text {\n font-weight: bold; margin-bottom: 15px; font-size: 1.1em; color: #333;\n line-height: 1.8;\n }\n .question-block label {\n display: block; margin-bottom: 12px; padding: 12px; border: 1px solid #e0e0e0;\n border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;\n background-color: #f8f8f8;\n line-height: 1.7;\n }\n .question-block label:hover { background-color: #e8f0fa; border-color: #007bff; }\n .question-block input[type=\"radio\"] { margin-right: 10px; vertical-align: middle; }\n #submit-answers-btn, #next-question-btn { display: block; width: 100%; max-width: 350px; margin: 40px auto 0; padding: 15px 30px; font-size: 1.2em; font-weight: bold; color: #fff; background-color: #007bff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\n #submit-answers-btn:hover, #next-question-btn:hover { background-color: #0056b3; box-shadow: 0 3px 7px rgba(0,0,0,0.15); }\n #next-question-btn { background-color: #007bff; margin-top: 20px; }\n #submit-answers-btn { display: none; background-color: #4CAF50; }\n\n \/* === \u5186\u30b0\u30e9\u30d5\u3068\u9032\u6357\u8868\u793a (PC\u7248) === *\/\n .overall-progress-timer {\n position: absolute; top: 15px; right: 20px;\n display: flex; flex-direction: column; align-items: center; justify-content: flex-start;\n z-index: 10;\n }\n .time-label-external {\n font-size: 11px; font-weight: bold; color: #555; margin-bottom: 4px;\n text-align: center;\n }\n .progress-circle-container {\n position: relative; width: 80px; height: 80px;\n background-color: #ffffff; border-radius: 50%;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n }\n .progress-circle {\n width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0;\n box-sizing: border-box; background-color: transparent;\n transition: background 0.2s linear;\n }\n .overall-time-circle {\n background: conic-gradient( #696969 0deg, #696969 360deg );\n }\n .progress-status-circle {\n background: conic-gradient( #E0E0E0 0deg, #E0E0E0 360deg );\n transform: scale(0.70);\n }\n .progress-label-internal {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n font-size: 9px; color: #555; font-weight: bold; text-align: center;\n pointer-events: none;\n }\n\n \/* === \u5404\u554f\u984c\u306e\u30bf\u30a4\u30de\u30fc\u8868\u793a (\u6ce2\u7dda\u98a8\u30d6\u30ed\u30c3\u30af\u30d0\u30fc) === *\/\n .question-timer-container { margin: 20px 0; padding-top: 10px; border-top: 1px solid #f0f0f0; }\n .question-timer-label {\n font-size: 0.9em; color: #333; margin-bottom: 8px; display: block;\n font-weight: bold;\n }\n .question-time-bar-bg {\n width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: flex;\n }\n .question-time-bar-segment {\n height: 100%; flex-grow: 1; margin-right: 2px; border-radius: 2px;\n transition: background-color 0.1s ease-in-out;\n }\n .question-time-bar-segment:last-child { margin-right: 0; }\n .segment-green-light { background-color: #E8F5E9; }\n .segment-green-dark { background-color: #66BB6A; }\n .segment-yellow-light { background-color: #FFF9C4; }\n .segment-yellow-dark { background-color: #FFEE58; }\n .segment-orange-light { background-color: #FFE0B2; }\n .segment-orange-dark { background-color: #FFA726; }\n .segment-red-light { background-color: #FFCDD2; }\n .segment-red-dark { background-color: #EF5350; }\n\n \/* === \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc (\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u5411\u3051\u8abf\u6574) === *\/\n @media screen and (max-width: 600px) {\n .spi-test-container { padding: 20px 15px; }\n .overall-progress-timer {\n position: static; width: 100%; height: auto; margin-top: 0; margin-bottom: 20px;\n display: flex; flex-direction: column; align-items: center;\n padding: 10px 5px; box-sizing: border-box; border-bottom: 1px solid #eee; z-index: 0;\n }\n .time-label-external { margin-bottom: 5px; font-size: 12px; }\n .progress-circle-container { width: 70px; height: 70px; margin: 0; flex-shrink: 0; }\n .progress-label-internal { font-size: 8px; }\n .question-block { padding-bottom: 20px; }\n #submit-answers-btn, #next-question-btn { padding: 12px 20px; font-size: 1em; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"spi-test-container\">\n <div class=\"overall-progress-timer\">\n <div class=\"time-label-external\">\u6642\u9593<\/div>\n <div class=\"progress-circle-container\">\n <div class=\"progress-circle overall-time-circle\"><\/div>\n <div class=\"progress-circle progress-status-circle\"><\/div>\n <div class=\"progress-label-internal\">\u56de\u7b54\u72b6\u6cc1<\/div>\n <\/div>\n <\/div>\n\n <h1 id=\"i-0\">SPI\u4f53\u9a13\u6a21\u8a66<\/h1>\n <div class=\"toc\"><div id=\"sgb-css-id-1\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--radius-type: var(--wp--custom--rounded--small,6px);--sgb--custom--box-radius: 8;\"><\/div><\/div><h2 id=\"i-1\">\u4ee5\u4e0b\u306e\u554f\u984c\u306b\u89e3\u7b54\u3057\u3001\u6700\u5f8c\u306b\u300c\u7d50\u679c\u3092\u8868\u793a\u3059\u308b\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/h2>\n\n <form id=\"spi-quiz-form\">\n <div class=\"question-block\" id=\"question1\">\n <p class=\"question-text\">1\/5 \u6700\u521d\u306b\u793a\u3055\u308c\u305f\u4e8c\u8a9e\u306e\u95a2\u4fc2\u3068\u540c\u3058\u95a2\u4fc2\u306b\u306a\u308b\u3088\u3046\u306b\u3001<br>(\u3000\u3000)\u306b\u5f53\u3066\u306f\u307e\u308b\u8a00\u8449\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\u3010\u8aad\u66f8\uff1a\u77e5\u8b58\u3011<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q1-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q1\" value=\"\u904b\u52d5\uff1a\u5065\u5eb7\"> (\u30a2) \u904b\u52d5\uff1a\u5065\u5eb7<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u98df\u4e8b\uff1a\u6e80\u8179\"> (\u30a4) \u98df\u4e8b\uff1a\u6e80\u8179<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u7761\u7720\uff1a\u5922\"> (\u30a6) \u7761\u7720\uff1a\u5922<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u65c5\u884c\uff1a\u75b2\u52b4\"> (\u30a8) \u65c5\u884c\uff1a\u75b2\u52b4<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question2\">\n <p class=\"question-text\">2\/5 A\u3001B\u3001C\u3001D\u3001E\u306e5\u4eba\u304c\u5f92\u7af6\u8d70\u3092\u3057\u305f\u3002<br>\u4ee5\u4e0b\u306e\u60c5\u5831\u304c\u3042\u308b\u3068\u304d\u30013\u756a\u76ee\u306b\u30b4\u30fc\u30eb\u3057\u305f\u306e\u306f\u8ab0\u304b\u3002<br>\n \u30fbA\u306fB\u3088\u308a\u65e9\u304f\u30b4\u30fc\u30eb\u3057\u305f\u304c\u3001C\u3088\u308a\u9045\u304b\u3063\u305f\u3002<br>\n \u30fbD\u306fE\u3088\u308a\u65e9\u304f\u30b4\u30fc\u30eb\u3057\u305f\u304c\u3001B\u3088\u308a\u9045\u304b\u3063\u305f\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q2-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q2\" value=\"A\"> (\u30a2) A<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"B\"> (\u30a4) B<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"C\"> (\u30a6) C<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"D\"> (\u30a8) D<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question3\">\n <p class=\"question-text\">3\/5 \u6b21\u306e\u6587\u306e(\u3000\u3000)\u306b\u6700\u3082\u3088\u304f\u5f53\u3066\u306f\u307e\u308b\u8a00\u8449\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\u5f7c\u306e\u92ed\u3044\u6307\u6458\u306f\u3001\u8b70\u8ad6\u306e(\u3000\u3000)\u3092\u5f97\u3066\u3044\u305f\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q3-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q3\" value=\"\u7684\"> (\u30a2) \u7684<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u672c\u8cea\"> (\u30a4) \u672c\u8cea<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u8981\u9818\"> (\u30a6) \u8981\u9818<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u6838\u5fc3\"> (\u30a8) \u6838\u5fc3<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question4\">\n <p class=\"question-text\">4\/5 \u3042\u308b\u5546\u54c1\u3092\u5b9a\u4fa1\u306e2\u5272\u5f15\u3067\u4ed5\u5165\u308c\u3001\u5b9a\u4fa1\u3067\u8ca9\u58f2\u3057\u305f\u3068\u3053\u308d\u3001<br>\u5229\u76ca\u306f800\u5186\u3060\u3063\u305f\u3002\u3053\u306e\u5546\u54c1\u306e\u4ed5\u5165\u308c\u5024\u306f\u3044\u304f\u3089\u304b\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q4-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q4\" value=\"2400\"> (\u30a2) 2400\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"3200\"> (\u30a4) 3200\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"4000\"> (\u30a6) 4000\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"4800\"> (\u30a8) 4800\u5186<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question5\">\n <p class=\"question-text\">5\/5 \u30a2\uff5e\u30a8\u306e\u8a9e\u53e5\u3092\u4e26\u3079\u66ff\u3048\u3066\u610f\u5473\u306e\u901a\u308b\u6587\u3092\u4f5c\u308a\u3001<br>2\u756a\u76ee\u306b\u6765\u308b\u3082\u306e\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\n \u30a2\uff1a\u305d\u306e\u7d50\u679c<br>\n \u30a4\uff1a\u69d8\u3005\u306a\u89d2\u5ea6\u304b\u3089\u691c\u8a0e\u3057<br>\n \u30a6\uff1a\u65b0\u3057\u3044\u65b9\u91dd\u304c\u6c7a\u5b9a\u3055\u308c\u305f<br>\n \u30a8\uff1a\u4f1a\u8b70\u3067\u9577\u6642\u9593\u306b\u308f\u305f\u308a<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q5-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a2\"> (\u30a2) \u305d\u306e\u7d50\u679c<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a4\"> (\u30a4) \u69d8\u3005\u306a\u89d2\u5ea6\u304b\u3089\u691c\u8a0e\u3057<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a6\"> (\u30a6) \u65b0\u3057\u3044\u65b9\u91dd\u304c\u6c7a\u5b9a\u3055\u308c\u305f<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a8\"> (\u30a8) \u4f1a\u8b70\u3067\u9577\u6642\u9593\u306b\u308f\u305f\u308a<\/label>\n <\/div>\n\n <button type=\"button\" id=\"next-question-btn\">\u6b21\u306e\u554f\u984c\u3078<\/button>\n <button type=\"submit\" id=\"submit-answers-btn\">\u7d50\u679c\u3092\u8868\u793a\u3059\u308b<\/button>\n <\/form>\n<\/div>\n\n<script>\n\/\/ ====[ JavaScript ]====\ndocument.addEventListener('DOMContentLoaded', function() {\n\n (function() { \/\/ IIFE\n\n const TIME_LIMIT_PER_QUESTION_DEFAULT = 60; \/\/ \u5404\u554f\u306e\u5236\u9650\u6642\u9593\uff08\u5f93\u6765\u3069\u304a\u308a\uff09\n const TOTAL_TIME_LIMIT = 4 * 60; \/\/ \u5408\u8a08\u5236\u9650\u6642\u9593\uff1a4\u5206\uff08= 240\u79d2\uff09\n const BAR_SEGMENTS = 20;\n const RESULT_PAGE_URL = 'https:\/\/kokoshiro.jp\/note\/spitest_form\/';\n\n \/\/ 5\u554f\u7248\u306b\u66f4\u65b0\n const questionsData = [\n { id: \"q1\", correct: \"\u904b\u52d5\uff1a\u5065\u5eb7\", timeLimit: 60 },\n { id: \"q2\", correct: \"B\", timeLimit: 60 },\n { id: \"q3\", correct: \"\u7684\", timeLimit: 60 },\n { id: \"q4\", correct: \"3200\", timeLimit: 60 },\n { id: \"q5\", correct: \"\u30a4\", timeLimit: 60 }\n ];\n const TOTAL_QUESTIONS = questionsData.length;\n\n \/\/ \u30bb\u30b0\u30e1\u30f3\u30c8\u8272\u8a2d\u5b9a\uff08\u5f93\u6765\u3069\u304a\u308a\uff09\n const BAR_ZONES_CONFIG = [\n { count: 9, lightClass: 'segment-green-light', darkClass: 'segment-green-dark' },\n { count: 5, lightClass: 'segment-yellow-light', darkClass: 'segment-yellow-dark' },\n { count: 5, lightClass: 'segment-orange-light', darkClass: 'segment-orange-dark' },\n { count: 1, lightClass: 'segment-red-light', darkClass: 'segment-red-dark' }\n ];\n\n let form, nextButton, submitButton, overallTimeCircle, progressStatusCircle,\n questionBlocksNodeList;\n\n let currentQuestionIndex = 0;\n let questionTimerInterval = null;\n let overallTimerInterval = null;\n let questionTimeRemaining = TIME_LIMIT_PER_QUESTION_DEFAULT;\n let overallTimeElapsed = 0;\n let userAnswers = {};\n let testFinished = false;\n let testInitialized = false;\n\n function initializeTest() {\n try {\n form = document.getElementById('spi-quiz-form');\n nextButton = document.getElementById('next-question-btn');\n submitButton = document.getElementById('submit-answers-btn');\n overallTimeCircle = document.querySelector('.overall-time-circle');\n progressStatusCircle = document.querySelector('.progress-status-circle');\n questionBlocksNodeList = document.querySelectorAll('.question-block');\n\n const required = { form, nextButton, submitButton, overallTimeCircle, progressStatusCircle };\n let allElementsFound = true;\n for (const key in required) {\n if (!required[key]) {\n console.error(`[SPI Test] DOM element missing during initialization: ${key}`);\n allElementsFound = false;\n }\n }\n if (!questionBlocksNodeList || questionBlocksNodeList.length === 0) {\n console.error('[SPI Test] No question blocks (.question-block) found during initialization.');\n allElementsFound = false;\n }\n if (!allElementsFound) {\n throw new Error('One or more essential DOM elements were not found. Test cannot start.');\n }\n\n if (questionBlocksNodeList.length !== TOTAL_QUESTIONS) {\n console.warn(`[SPI Test] Warning: Number of HTML question blocks (${questionBlocksNodeList.length}) `\n + `does not match TOTAL_QUESTIONS (${TOTAL_QUESTIONS}).`);\n }\n\n setupTimerBars();\n showQuestion(currentQuestionIndex);\n updateOverallTimerDisplay();\n updateProgressDisplay();\n startOverallTimer();\n setupEventListeners();\n testInitialized = true;\n\n } catch (e) {\n console.error('[SPI Test] initializeTest: CRITICAL ERROR during initialization.', e);\n alert('\u30c6\u30b9\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u91cd\u5927\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u958b\u767a\u8005\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002');\n }\n }\n\n function setupTimerBars() {\n questionBlocksNodeList.forEach((block) => {\n const barContainer = block.querySelector('.question-time-bar-bg');\n if (!barContainer) return;\n while (barContainer.firstChild) barContainer.removeChild(barContainer.firstChild);\n\n let segmentGlobalIndex = 0;\n BAR_ZONES_CONFIG.forEach(zone => {\n for (let i = 0; i < zone.count; i++) {\n if (segmentGlobalIndex < BAR_SEGMENTS) {\n const segment = document.createElement('div');\n segment.classList.add('question-time-bar-segment', zone.lightClass);\n barContainer.appendChild(segment);\n segmentGlobalIndex++;\n }\n }\n });\n });\n }\n\n function showQuestion(index) {\n if (!questionBlocksNodeList || index < 0 || index >= questionBlocksNodeList.length) return;\n\n questionBlocksNodeList.forEach((block, i) => {\n block.classList.toggle('active', i === index);\n });\n\n startQuestionTimer();\n updateNavigationButtons(index);\n updateProgressDisplay();\n }\n\n function startQuestionTimer() {\n stopQuestionTimer();\n const currentQuestionData = questionsData[currentQuestionIndex];\n questionTimeRemaining = currentQuestionData.timeLimit || TIME_LIMIT_PER_QUESTION_DEFAULT;\n\n updateQuestionTimerDisplay();\n questionTimerInterval = setInterval(() => {\n if (testFinished) { stopQuestionTimer(); return; }\n questionTimeRemaining--;\n updateQuestionTimerDisplay();\n if (questionTimeRemaining <= 0) {\n handleQuestionTimeout();\n }\n }, 1000);\n }\n\n function stopQuestionTimer() {\n if (questionTimerInterval) {\n clearInterval(questionTimerInterval);\n questionTimerInterval = null;\n }\n }\n\n function startOverallTimer() {\n stopOverallTimer();\n overallTimeElapsed = 0;\n updateOverallTimerDisplay();\n overallTimerInterval = setInterval(() => {\n if (testFinished) { stopOverallTimer(); return; }\n overallTimeElapsed++;\n updateOverallTimerDisplay();\n if (overallTimeElapsed >= TOTAL_TIME_LIMIT) handleOverallTimeout();\n }, 1000);\n }\n\n function stopOverallTimer() {\n if (overallTimerInterval) {\n clearInterval(overallTimerInterval);\n overallTimerInterval = null;\n }\n }\n\n function updateQuestionTimerDisplay() {\n const qIndex = currentQuestionIndex;\n if (qIndex < 0 || qIndex >= questionBlocksNodeList.length || !questionBlocksNodeList[qIndex]) return;\n\n const currentBlock = questionBlocksNodeList[qIndex];\n const barContainer = currentBlock.querySelector('.question-time-bar-bg');\n if (!barContainer) return;\n\n const segments = barContainer.querySelectorAll('.question-time-bar-segment');\n if (segments.length !== BAR_SEGMENTS) return;\n\n const currentQuestionData = questionsData[qIndex];\n const currentQuestionTimeLimit = currentQuestionData.timeLimit || TIME_LIMIT_PER_QUESTION_DEFAULT;\n const elapsedRatio = 1 - (questionTimeRemaining \/ currentQuestionTimeLimit);\n\n const filledSegmentsCount = Math.floor(elapsedRatio * BAR_SEGMENTS);\n let segmentGlobalIndex = 0;\n BAR_ZONES_CONFIG.forEach(zone => {\n for (let i = 0; i < zone.count; i++) {\n if (segmentGlobalIndex < BAR_SEGMENTS) {\n const segment = segments[segmentGlobalIndex];\n segment.className = 'question-time-bar-segment';\n segment.classList.add(zone.lightClass);\n if (segmentGlobalIndex < filledSegmentsCount) {\n segment.classList.remove(zone.lightClass);\n segment.classList.add(zone.darkClass);\n }\n segmentGlobalIndex++;\n }\n }\n });\n }\n\n function updateOverallTimerDisplay() {\n if (!overallTimeCircle) return;\n const timeRatio = Math.min(1, Math.max(0, overallTimeElapsed \/ TOTAL_TIME_LIMIT));\n const degree = timeRatio * 360;\n \/\/ \u9032\u884c\u90e8\u5206\uff1a#76C7C0 \/ \u6b8b\u308a\uff1a#696969\n overallTimeCircle.style.background = `conic-gradient(#76C7C0 ${degree}deg, #696969 ${degree}deg)`;\n }\n\n function updateProgressDisplay() {\n if (!progressStatusCircle) return;\n const answeredCount = Object.values(userAnswers).filter(ans => ans !== null && ans !== undefined).length;\n const progressRatio = TOTAL_QUESTIONS > 0 ? answeredCount \/ TOTAL_QUESTIONS : 0;\n const degree = progressRatio * 360;\n \/\/ \u56de\u7b54\u6e08\u307f\u90e8\u5206\uff1a#FFEB3B \/ \u672a\u56de\u7b54\uff1a#E0E0E0\n progressStatusCircle.style.background = `conic-gradient(#FFEB3B ${degree}deg, #E0E0E0 ${degree}deg)`;\n }\n\n function updateNavigationButtons(index) {\n if (!nextButton || !submitButton) return;\n const isLastQuestion = (index >= questionsData.length - 1);\n nextButton.style.display = isLastQuestion ? 'none' : 'block';\n submitButton.style.display = isLastQuestion ? 'block' : 'none';\n }\n\n function saveCurrentAnswer(isTimeout = false) {\n try {\n if (currentQuestionIndex < 0 || currentQuestionIndex >= questionsData.length) return;\n const qId = questionsData[currentQuestionIndex].id;\n const currentBlock = questionBlocksNodeList[currentQuestionIndex];\n if (!currentBlock) return;\n\n const selOpt = currentBlock.querySelector(`input[name=\"${qId}\"]:checked`);\n const ansVal = selOpt ? selOpt.value : null;\n\n \/\/ \u672a\u4fdd\u5b58 or \u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u6642\u306f\u4fdd\u5b58\uff08\u4e0a\u66f8\u304d\u9632\u6b62\u306e\u6319\u52d5\u306f\u5f93\u6765\u306e\u307e\u307e\uff09\n if (isTimeout || userAnswers[qId] === undefined || userAnswers[qId] === null) {\n userAnswers[qId] = ansVal;\n }\n updateProgressDisplay();\n } catch (e) {\n console.error(`Err saveAns Q${currentQuestionIndex + 1}:`, e);\n }\n }\n\n function handleQuestionTimeout() { \/\/ \u30a2\u30e9\u30fc\u30c8\u306a\u3057\u3067\u81ea\u52d5\u9077\u79fb\n stopQuestionTimer();\n saveCurrentAnswer(true);\n goToNextQuestion();\n }\n\n function handleOverallTimeout() { \/\/ \u30a2\u30e9\u30fc\u30c8\u306a\u3057\u3067\u81ea\u52d5\u9001\u4fe1\n if (testFinished) return;\n testFinished = true;\n stopQuestionTimer();\n stopOverallTimer();\n saveCurrentAnswer(true);\n submitQuiz(); \/\/ \u81ea\u52d5\u3067\u7d50\u679c\u9001\u4fe1\uff08\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\uff09\n }\n\n function goToNextQuestion() {\n if (testFinished) return;\n stopQuestionTimer();\n\n if (currentQuestionIndex < questionsData.length - 1) {\n currentQuestionIndex++;\n showQuestion(currentQuestionIndex);\n } else {\n \/\/ \u6700\u5f8c\u306e\u554f\u984c\u306b\u5230\u9054\u3057\u305f\u3089Submit\u30dc\u30bf\u30f3\u8868\u793a\u72b6\u614b\u3078\n updateNavigationButtons(currentQuestionIndex);\n }\n }\n\n function submitQuiz() {\n if (!testFinished) {\n testFinished = true;\n stopQuestionTimer();\n stopOverallTimer();\n saveCurrentAnswer();\n }\n \/\/ \u672a\u767b\u9332\u8a2d\u554f\u3092null\u3067\u57cb\u3081\u308b\uff08\u7d50\u679c\u30da\u30fc\u30b8\u7528\uff09\n questionsData.forEach(qD => {\n if (userAnswers[qD.id] === undefined) userAnswers[qD.id] = null;\n });\n\n try {\n const qs = window.location.search;\n localStorage.setItem('spiUserAnswers', JSON.stringify(userAnswers));\n if (RESULT_PAGE_URL) window.location.href = RESULT_PAGE_URL + qs;\n else alert('Result URL not set.');\n } catch (e) {\n console.error('Err save\/redirect:', e);\n alert('\u7d50\u679c\u306e\u4fdd\u5b58\u307e\u305f\u306f\u9077\u79fb\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002');\n }\n }\n\n function setupEventListeners() {\n if (nextButton) {\n nextButton.addEventListener('click', function() {\n if (!testInitialized || testFinished) return;\n\n const currentBlock = questionBlocksNodeList[currentQuestionIndex];\n if (!currentBlock) return;\n\n const questionId = questionsData[currentQuestionIndex]?.id;\n if (!questionId) return;\n\n const selectedOption = currentBlock.querySelector(`input[name=\"${questionId}\"]:checked`);\n if (!selectedOption) {\n alert('\u3053\u306e\u554f\u984c\u306e\u56de\u7b54\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n return;\n }\n saveCurrentAnswer();\n goToNextQuestion();\n });\n }\n\n if (form) {\n form.addEventListener('submit', function(event) {\n event.preventDefault();\n if (!testInitialized || testFinished) return;\n\n const lastQIdx = questionsData.length - 1;\n if (currentQuestionIndex === lastQIdx) {\n const lastQId = questionsData[lastQIdx].id;\n const lastBlk = questionBlocksNodeList[lastQIdx];\n if (lastBlk) {\n const lastSel = lastBlk.querySelector(`input[name=\"${lastQId}\"]:checked`);\n if (!lastSel && (userAnswers[lastQId] === undefined || userAnswers[lastQId] === null)) {\n if (!confirm('\u6700\u5f8c\u306e\u554f\u984c\u304c\u672a\u56de\u7b54\u306e\u3088\u3046\u3067\u3059\u3002\u3053\u306e\u307e\u307e\u7d50\u679c\u3092\u8868\u793a\u3057\u307e\u3059\u304b\uff1f')) return;\n }\n }\n }\n submitQuiz();\n });\n }\n }\n\n initializeTest();\n\n })(); \/\/ IIFE\u7d42\u4e86\n}); \/\/ DOMContentLoaded\u7d42\u4e86\n<\/script>\n\n<\/body>\n\n<\/html><\/div>\n\n\n\n\n\n<div id=\"exit-popup\" class=\"exit-popup-overlay\">\n <div class=\"exit-popup-content\">\n <p class=\"popup-title\">\u672c\u5f53\u306b\u3053\u3053\u3067\u7d42\u4e86\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u304b\uff1f<\/p>\n \n <p class=\"popup-text\">\n \u3042\u3068\u5c11\u3057\u3067SPI\u4f53\u9a13\u6a21\u8a66\u306e\u7d50\u679c\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\uff01<br>\n \u4eca\u3084\u3081\u3066\u3057\u307e\u3046\u3068\u3001\u3042\u306a\u305f\u306e\u5f31\u70b9\u3084\u50be\u5411\u304c\u3064\u304b\u3081\u306a\u3044\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<br>\n \u3082\u30461\u554f\u3060\u3051\u89e3\u3044\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\n <\/p>\n \n <div class=\"popup-btn-area\">\n <a href=\"javascript:void(0);\" id=\"real-back-btn\" class=\"popup-btn btn-cancel\">\u4e2d\u65ad\u3059\u308b<\/a>\n <button id=\"close-popup\" class=\"popup-btn btn-continue\">\u56de\u7b54\u3092\u7d9a\u3051\u308b<\/button>\n <\/div>\n <\/div>\n<\/div>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u5f53\u306b\u3053\u3053\u3067\u7d42\u4e86\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u304b\uff1f \u3042\u3068\u5c11\u3057\u3067SPI\u4f53\u9a13\u6a21\u8a66\u306e\u7d50\u679c\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\uff01 \u4eca\u3084\u3081\u3066\u3057\u307e\u3046\u3068\u3001\u3042\u306a\u305f\u306e\u5f31\u70b9\u3084\u50be\u5411\u304c\u3064\u304b\u3081\u306a\u3044\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002 \u3082\u30461\u554f\u3060\u3051\u89e3\u3044\u3066\u307f\u307e\u305b\u3093\u304b\uff1f \u4e2d\u65ad\u3059\u308b \u56de\u7b54\u3092\u7d9a\u3051\u308b<\/p>\n","protected":false},"author":38,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-57754","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=57754"}],"version-history":[{"count":80,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754\/revisions"}],"predecessor-version":[{"id":89817,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754\/revisions\/89817"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=57754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n SPI\u4f53\u9a13\u6a21\u8a66\uff085\u554f\u7248\uff09<\/title>\n <style>\n \/* === \u57fa\u672c\u30b9\u30bf\u30a4\u30eb === *\/\n body {\n font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;\n line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333;\n position: relative;\n }\n .spi-test-container {\n max-width: 800px; margin: 20px auto; padding: 30px; background-color: #fff;\n border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n position: relative;\n }\n .spi-test-container h1, .spi-test-container h2 { text-align: center; color: #0056b3; }\n .spi-test-container h1 { margin-bottom: 15px; font-size: 24px; }\n .spi-test-container h2 { font-size: 1.2em; margin-bottom: 20px; font-weight: normal; color: #555; }\n .question-block { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px dashed #ccc; display: none; }\n .question-block:last-of-type { border-bottom: none; margin-bottom: 20px; }\n .question-block.active { display: block; }\n .question-block p.question-text {\n font-weight: bold; margin-bottom: 15px; font-size: 1.1em; color: #333;\n line-height: 1.8;\n }\n .question-block label {\n display: block; margin-bottom: 12px; padding: 12px; border: 1px solid #e0e0e0;\n border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;\n background-color: #f8f8f8;\n line-height: 1.7;\n }\n .question-block label:hover { background-color: #e8f0fa; border-color: #007bff; }\n .question-block input[type=\"radio\"] { margin-right: 10px; vertical-align: middle; }\n #submit-answers-btn, #next-question-btn { display: block; width: 100%; max-width: 350px; margin: 40px auto 0; padding: 15px 30px; font-size: 1.2em; font-weight: bold; color: #fff; background-color: #007bff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }\n #submit-answers-btn:hover, #next-question-btn:hover { background-color: #0056b3; box-shadow: 0 3px 7px rgba(0,0,0,0.15); }\n #next-question-btn { background-color: #007bff; margin-top: 20px; }\n #submit-answers-btn { display: none; background-color: #4CAF50; }\n\n \/* === \u5186\u30b0\u30e9\u30d5\u3068\u9032\u6357\u8868\u793a (PC\u7248) === *\/\n .overall-progress-timer {\n position: absolute; top: 15px; right: 20px;\n display: flex; flex-direction: column; align-items: center; justify-content: flex-start;\n z-index: 10;\n }\n .time-label-external {\n font-size: 11px; font-weight: bold; color: #555; margin-bottom: 4px;\n text-align: center;\n }\n .progress-circle-container {\n position: relative; width: 80px; height: 80px;\n background-color: #ffffff; border-radius: 50%;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n }\n .progress-circle {\n width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0;\n box-sizing: border-box; background-color: transparent;\n transition: background 0.2s linear;\n }\n .overall-time-circle {\n background: conic-gradient( #696969 0deg, #696969 360deg );\n }\n .progress-status-circle {\n background: conic-gradient( #E0E0E0 0deg, #E0E0E0 360deg );\n transform: scale(0.70);\n }\n .progress-label-internal {\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n font-size: 9px; color: #555; font-weight: bold; text-align: center;\n pointer-events: none;\n }\n\n \/* === \u5404\u554f\u984c\u306e\u30bf\u30a4\u30de\u30fc\u8868\u793a (\u6ce2\u7dda\u98a8\u30d6\u30ed\u30c3\u30af\u30d0\u30fc) === *\/\n .question-timer-container { margin: 20px 0; padding-top: 10px; border-top: 1px solid #f0f0f0; }\n .question-timer-label {\n font-size: 0.9em; color: #333; margin-bottom: 8px; display: block;\n font-weight: bold;\n }\n .question-time-bar-bg {\n width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: flex;\n }\n .question-time-bar-segment {\n height: 100%; flex-grow: 1; margin-right: 2px; border-radius: 2px;\n transition: background-color 0.1s ease-in-out;\n }\n .question-time-bar-segment:last-child { margin-right: 0; }\n .segment-green-light { background-color: #E8F5E9; }\n .segment-green-dark { background-color: #66BB6A; }\n .segment-yellow-light { background-color: #FFF9C4; }\n .segment-yellow-dark { background-color: #FFEE58; }\n .segment-orange-light { background-color: #FFE0B2; }\n .segment-orange-dark { background-color: #FFA726; }\n .segment-red-light { background-color: #FFCDD2; }\n .segment-red-dark { background-color: #EF5350; }\n\n \/* === \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc (\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u5411\u3051\u8abf\u6574) === *\/\n @media screen and (max-width: 600px) {\n .spi-test-container { padding: 20px 15px; }\n .overall-progress-timer {\n position: static; width: 100%; height: auto; margin-top: 0; margin-bottom: 20px;\n display: flex; flex-direction: column; align-items: center;\n padding: 10px 5px; box-sizing: border-box; border-bottom: 1px solid #eee; z-index: 0;\n }\n .time-label-external { margin-bottom: 5px; font-size: 12px; }\n .progress-circle-container { width: 70px; height: 70px; margin: 0; flex-shrink: 0; }\n .progress-label-internal { font-size: 8px; }\n .question-block { padding-bottom: 20px; }\n #submit-answers-btn, #next-question-btn { padding: 12px 20px; font-size: 1em; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"spi-test-container\">\n <div class=\"overall-progress-timer\">\n <div class=\"time-label-external\">\u6642\u9593<\/div>\n <div class=\"progress-circle-container\">\n <div class=\"progress-circle overall-time-circle\"><\/div>\n <div class=\"progress-circle progress-status-circle\"><\/div>\n <div class=\"progress-label-internal\">\u56de\u7b54\u72b6\u6cc1<\/div>\n <\/div>\n <\/div>\n\n <h1 id=\"i-0\">SPI\u4f53\u9a13\u6a21\u8a66<\/h1>\n <div class=\"toc\"><div id=\"sgb-css-id-1\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--radius-type: var(--wp--custom--rounded--small,6px);--sgb--custom--box-radius: 8;\"><\/div><\/div><h2 id=\"i-1\">\u4ee5\u4e0b\u306e\u554f\u984c\u306b\u89e3\u7b54\u3057\u3001\u6700\u5f8c\u306b\u300c\u7d50\u679c\u3092\u8868\u793a\u3059\u308b\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/h2>\n\n <form id=\"spi-quiz-form\">\n <div class=\"question-block\" id=\"question1\">\n <p class=\"question-text\">1\/5 \u6700\u521d\u306b\u793a\u3055\u308c\u305f\u4e8c\u8a9e\u306e\u95a2\u4fc2\u3068\u540c\u3058\u95a2\u4fc2\u306b\u306a\u308b\u3088\u3046\u306b\u3001<br>(\u3000\u3000)\u306b\u5f53\u3066\u306f\u307e\u308b\u8a00\u8449\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\u3010\u8aad\u66f8\uff1a\u77e5\u8b58\u3011<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q1-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q1\" value=\"\u904b\u52d5\uff1a\u5065\u5eb7\"> (\u30a2) \u904b\u52d5\uff1a\u5065\u5eb7<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u98df\u4e8b\uff1a\u6e80\u8179\"> (\u30a4) \u98df\u4e8b\uff1a\u6e80\u8179<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u7761\u7720\uff1a\u5922\"> (\u30a6) \u7761\u7720\uff1a\u5922<\/label>\n <label><input type=\"radio\" name=\"q1\" value=\"\u65c5\u884c\uff1a\u75b2\u52b4\"> (\u30a8) \u65c5\u884c\uff1a\u75b2\u52b4<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question2\">\n <p class=\"question-text\">2\/5 A\u3001B\u3001C\u3001D\u3001E\u306e5\u4eba\u304c\u5f92\u7af6\u8d70\u3092\u3057\u305f\u3002<br>\u4ee5\u4e0b\u306e\u60c5\u5831\u304c\u3042\u308b\u3068\u304d\u30013\u756a\u76ee\u306b\u30b4\u30fc\u30eb\u3057\u305f\u306e\u306f\u8ab0\u304b\u3002<br>\n \u30fbA\u306fB\u3088\u308a\u65e9\u304f\u30b4\u30fc\u30eb\u3057\u305f\u304c\u3001C\u3088\u308a\u9045\u304b\u3063\u305f\u3002<br>\n \u30fbD\u306fE\u3088\u308a\u65e9\u304f\u30b4\u30fc\u30eb\u3057\u305f\u304c\u3001B\u3088\u308a\u9045\u304b\u3063\u305f\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q2-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q2\" value=\"A\"> (\u30a2) A<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"B\"> (\u30a4) B<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"C\"> (\u30a6) C<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"D\"> (\u30a8) D<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question3\">\n <p class=\"question-text\">3\/5 \u6b21\u306e\u6587\u306e(\u3000\u3000)\u306b\u6700\u3082\u3088\u304f\u5f53\u3066\u306f\u307e\u308b\u8a00\u8449\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\u5f7c\u306e\u92ed\u3044\u6307\u6458\u306f\u3001\u8b70\u8ad6\u306e(\u3000\u3000)\u3092\u5f97\u3066\u3044\u305f\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q3-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q3\" value=\"\u7684\"> (\u30a2) \u7684<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u672c\u8cea\"> (\u30a4) \u672c\u8cea<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u8981\u9818\"> (\u30a6) \u8981\u9818<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"\u6838\u5fc3\"> (\u30a8) \u6838\u5fc3<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question4\">\n <p class=\"question-text\">4\/5 \u3042\u308b\u5546\u54c1\u3092\u5b9a\u4fa1\u306e2\u5272\u5f15\u3067\u4ed5\u5165\u308c\u3001\u5b9a\u4fa1\u3067\u8ca9\u58f2\u3057\u305f\u3068\u3053\u308d\u3001<br>\u5229\u76ca\u306f800\u5186\u3060\u3063\u305f\u3002\u3053\u306e\u5546\u54c1\u306e\u4ed5\u5165\u308c\u5024\u306f\u3044\u304f\u3089\u304b\u3002<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q4-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q4\" value=\"2400\"> (\u30a2) 2400\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"3200\"> (\u30a4) 3200\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"4000\"> (\u30a6) 4000\u5186<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"4800\"> (\u30a8) 4800\u5186<\/label>\n <\/div>\n\n <div class=\"question-block\" id=\"question5\">\n <p class=\"question-text\">5\/5 \u30a2\uff5e\u30a8\u306e\u8a9e\u53e5\u3092\u4e26\u3079\u66ff\u3048\u3066\u610f\u5473\u306e\u901a\u308b\u6587\u3092\u4f5c\u308a\u3001<br>2\u756a\u76ee\u306b\u6765\u308b\u3082\u306e\u3092\u9078\u3073\u306a\u3055\u3044\u3002<br>\n \u30a2\uff1a\u305d\u306e\u7d50\u679c<br>\n \u30a4\uff1a\u69d8\u3005\u306a\u89d2\u5ea6\u304b\u3089\u691c\u8a0e\u3057<br>\n \u30a6\uff1a\u65b0\u3057\u3044\u65b9\u91dd\u304c\u6c7a\u5b9a\u3055\u308c\u305f<br>\n \u30a8\uff1a\u4f1a\u8b70\u3067\u9577\u6642\u9593\u306b\u308f\u305f\u308a<\/p>\n <div class=\"question-timer-container\">\n <span class=\"question-timer-label\">\u56de\u7b54\u6642\u9593:<\/span>\n <div class=\"question-time-bar-bg\" id=\"q5-timer-bar\"><\/div>\n <\/div>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a2\"> (\u30a2) \u305d\u306e\u7d50\u679c<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a4\"> (\u30a4) \u69d8\u3005\u306a\u89d2\u5ea6\u304b\u3089\u691c\u8a0e\u3057<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a6\"> (\u30a6) \u65b0\u3057\u3044\u65b9\u91dd\u304c\u6c7a\u5b9a\u3055\u308c\u305f<\/label>\n <label><input type=\"radio\" name=\"q5\" value=\"\u30a8\"> (\u30a8) \u4f1a\u8b70\u3067\u9577\u6642\u9593\u306b\u308f\u305f\u308a<\/label>\n <\/div>\n\n <button type=\"button\" id=\"next-question-btn\">\u6b21\u306e\u554f\u984c\u3078<\/button>\n <button type=\"submit\" id=\"submit-answers-btn\">\u7d50\u679c\u3092\u8868\u793a\u3059\u308b<\/button>\n <\/form>\n<\/div>\n\n<script>\n\/\/ ====[ JavaScript ]====\ndocument.addEventListener('DOMContentLoaded', function() {\n\n (function() { \/\/ IIFE\n\n const TIME_LIMIT_PER_QUESTION_DEFAULT = 60; \/\/ \u5404\u554f\u306e\u5236\u9650\u6642\u9593\uff08\u5f93\u6765\u3069\u304a\u308a\uff09\n const TOTAL_TIME_LIMIT = 4 * 60; \/\/ \u5408\u8a08\u5236\u9650\u6642\u9593\uff1a4\u5206\uff08= 240\u79d2\uff09\n const BAR_SEGMENTS = 20;\n const RESULT_PAGE_URL = 'https:\/\/kokoshiro.jp\/note\/spitest_form\/';\n\n \/\/ 5\u554f\u7248\u306b\u66f4\u65b0\n const questionsData = [\n { id: \"q1\", correct: \"\u904b\u52d5\uff1a\u5065\u5eb7\", timeLimit: 60 },\n { id: \"q2\", correct: \"B\", timeLimit: 60 },\n { id: \"q3\", correct: \"\u7684\", timeLimit: 60 },\n { id: \"q4\", correct: \"3200\", timeLimit: 60 },\n { id: \"q5\", correct: \"\u30a4\", timeLimit: 60 }\n ];\n const TOTAL_QUESTIONS = questionsData.length;\n\n \/\/ \u30bb\u30b0\u30e1\u30f3\u30c8\u8272\u8a2d\u5b9a\uff08\u5f93\u6765\u3069\u304a\u308a\uff09\n const BAR_ZONES_CONFIG = [\n { count: 9, lightClass: 'segment-green-light', darkClass: 'segment-green-dark' },\n { count: 5, lightClass: 'segment-yellow-light', darkClass: 'segment-yellow-dark' },\n { count: 5, lightClass: 'segment-orange-light', darkClass: 'segment-orange-dark' },\n { count: 1, lightClass: 'segment-red-light', darkClass: 'segment-red-dark' }\n ];\n\n let form, nextButton, submitButton, overallTimeCircle, progressStatusCircle,\n questionBlocksNodeList;\n\n let currentQuestionIndex = 0;\n let questionTimerInterval = null;\n let overallTimerInterval = null;\n let questionTimeRemaining = TIME_LIMIT_PER_QUESTION_DEFAULT;\n let overallTimeElapsed = 0;\n let userAnswers = {};\n let testFinished = false;\n let testInitialized = false;\n\n function initializeTest() {\n try {\n form = document.getElementById('spi-quiz-form');\n nextButton = document.getElementById('next-question-btn');\n submitButton = document.getElementById('submit-answers-btn');\n overallTimeCircle = document.querySelector('.overall-time-circle');\n progressStatusCircle = document.querySelector('.progress-status-circle');\n questionBlocksNodeList = document.querySelectorAll('.question-block');\n\n const required = { form, nextButton, submitButton, overallTimeCircle, progressStatusCircle };\n let allElementsFound = true;\n for (const key in required) {\n if (!required[key]) {\n console.error(`[SPI Test] DOM element missing during initialization: ${key}`);\n allElementsFound = false;\n }\n }\n if (!questionBlocksNodeList || questionBlocksNodeList.length === 0) {\n console.error('[SPI Test] No question blocks (.question-block) found during initialization.');\n allElementsFound = false;\n }\n if (!allElementsFound) {\n throw new Error('One or more essential DOM elements were not found. Test cannot start.');\n }\n\n if (questionBlocksNodeList.length !== TOTAL_QUESTIONS) {\n console.warn(`[SPI Test] Warning: Number of HTML question blocks (${questionBlocksNodeList.length}) `\n + `does not match TOTAL_QUESTIONS (${TOTAL_QUESTIONS}).`);\n }\n\n setupTimerBars();\n showQuestion(currentQuestionIndex);\n updateOverallTimerDisplay();\n updateProgressDisplay();\n startOverallTimer();\n setupEventListeners();\n testInitialized = true;\n\n } catch (e) {\n console.error('[SPI Test] initializeTest: CRITICAL ERROR during initialization.', e);\n alert('\u30c6\u30b9\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u91cd\u5927\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u958b\u767a\u8005\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002');\n }\n }\n\n function setupTimerBars() {\n questionBlocksNodeList.forEach((block) => {\n const barContainer = block.querySelector('.question-time-bar-bg');\n if (!barContainer) return;\n while (barContainer.firstChild) barContainer.removeChild(barContainer.firstChild);\n\n let segmentGlobalIndex = 0;\n BAR_ZONES_CONFIG.forEach(zone => {\n for (let i = 0; i < zone.count; i++) {\n if (segmentGlobalIndex < BAR_SEGMENTS) {\n const segment = document.createElement('div');\n segment.classList.add('question-time-bar-segment', zone.lightClass);\n barContainer.appendChild(segment);\n segmentGlobalIndex++;\n }\n }\n });\n });\n }\n\n function showQuestion(index) {\n if (!questionBlocksNodeList || index < 0 || index >= questionBlocksNodeList.length) return;\n\n questionBlocksNodeList.forEach((block, i) => {\n block.classList.toggle('active', i === index);\n });\n\n startQuestionTimer();\n updateNavigationButtons(index);\n updateProgressDisplay();\n }\n\n function startQuestionTimer() {\n stopQuestionTimer();\n const currentQuestionData = questionsData[currentQuestionIndex];\n questionTimeRemaining = currentQuestionData.timeLimit || TIME_LIMIT_PER_QUESTION_DEFAULT;\n\n updateQuestionTimerDisplay();\n questionTimerInterval = setInterval(() => {\n if (testFinished) { stopQuestionTimer(); return; }\n questionTimeRemaining--;\n updateQuestionTimerDisplay();\n if (questionTimeRemaining <= 0) {\n handleQuestionTimeout();\n }\n }, 1000);\n }\n\n function stopQuestionTimer() {\n if (questionTimerInterval) {\n clearInterval(questionTimerInterval);\n questionTimerInterval = null;\n }\n }\n\n function startOverallTimer() {\n stopOverallTimer();\n overallTimeElapsed = 0;\n updateOverallTimerDisplay();\n overallTimerInterval = setInterval(() => {\n if (testFinished) { stopOverallTimer(); return; }\n overallTimeElapsed++;\n updateOverallTimerDisplay();\n if (overallTimeElapsed >= TOTAL_TIME_LIMIT) handleOverallTimeout();\n }, 1000);\n }\n\n function stopOverallTimer() {\n if (overallTimerInterval) {\n clearInterval(overallTimerInterval);\n overallTimerInterval = null;\n }\n }\n\n function updateQuestionTimerDisplay() {\n const qIndex = currentQuestionIndex;\n if (qIndex < 0 || qIndex >= questionBlocksNodeList.length || !questionBlocksNodeList[qIndex]) return;\n\n const currentBlock = questionBlocksNodeList[qIndex];\n const barContainer = currentBlock.querySelector('.question-time-bar-bg');\n if (!barContainer) return;\n\n const segments = barContainer.querySelectorAll('.question-time-bar-segment');\n if (segments.length !== BAR_SEGMENTS) return;\n\n const currentQuestionData = questionsData[qIndex];\n const currentQuestionTimeLimit = currentQuestionData.timeLimit || TIME_LIMIT_PER_QUESTION_DEFAULT;\n const elapsedRatio = 1 - (questionTimeRemaining \/ currentQuestionTimeLimit);\n\n const filledSegmentsCount = Math.floor(elapsedRatio * BAR_SEGMENTS);\n let segmentGlobalIndex = 0;\n BAR_ZONES_CONFIG.forEach(zone => {\n for (let i = 0; i < zone.count; i++) {\n if (segmentGlobalIndex < BAR_SEGMENTS) {\n const segment = segments[segmentGlobalIndex];\n segment.className = 'question-time-bar-segment';\n segment.classList.add(zone.lightClass);\n if (segmentGlobalIndex < filledSegmentsCount) {\n segment.classList.remove(zone.lightClass);\n segment.classList.add(zone.darkClass);\n }\n segmentGlobalIndex++;\n }\n }\n });\n }\n\n function updateOverallTimerDisplay() {\n if (!overallTimeCircle) return;\n const timeRatio = Math.min(1, Math.max(0, overallTimeElapsed \/ TOTAL_TIME_LIMIT));\n const degree = timeRatio * 360;\n \/\/ \u9032\u884c\u90e8\u5206\uff1a#76C7C0 \/ \u6b8b\u308a\uff1a#696969\n overallTimeCircle.style.background = `conic-gradient(#76C7C0 ${degree}deg, #696969 ${degree}deg)`;\n }\n\n function updateProgressDisplay() {\n if (!progressStatusCircle) return;\n const answeredCount = Object.values(userAnswers).filter(ans => ans !== null && ans !== undefined).length;\n const progressRatio = TOTAL_QUESTIONS > 0 ? answeredCount \/ TOTAL_QUESTIONS : 0;\n const degree = progressRatio * 360;\n \/\/ \u56de\u7b54\u6e08\u307f\u90e8\u5206\uff1a#FFEB3B \/ \u672a\u56de\u7b54\uff1a#E0E0E0\n progressStatusCircle.style.background = `conic-gradient(#FFEB3B ${degree}deg, #E0E0E0 ${degree}deg)`;\n }\n\n function updateNavigationButtons(index) {\n if (!nextButton || !submitButton) return;\n const isLastQuestion = (index >= questionsData.length - 1);\n nextButton.style.display = isLastQuestion ? 'none' : 'block';\n submitButton.style.display = isLastQuestion ? 'block' : 'none';\n }\n\n function saveCurrentAnswer(isTimeout = false) {\n try {\n if (currentQuestionIndex < 0 || currentQuestionIndex >= questionsData.length) return;\n const qId = questionsData[currentQuestionIndex].id;\n const currentBlock = questionBlocksNodeList[currentQuestionIndex];\n if (!currentBlock) return;\n\n const selOpt = currentBlock.querySelector(`input[name=\"${qId}\"]:checked`);\n const ansVal = selOpt ? selOpt.value : null;\n\n \/\/ \u672a\u4fdd\u5b58 or \u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u6642\u306f\u4fdd\u5b58\uff08\u4e0a\u66f8\u304d\u9632\u6b62\u306e\u6319\u52d5\u306f\u5f93\u6765\u306e\u307e\u307e\uff09\n if (isTimeout || userAnswers[qId] === undefined || userAnswers[qId] === null) {\n userAnswers[qId] = ansVal;\n }\n updateProgressDisplay();\n } catch (e) {\n console.error(`Err saveAns Q${currentQuestionIndex + 1}:`, e);\n }\n }\n\n function handleQuestionTimeout() { \/\/ \u30a2\u30e9\u30fc\u30c8\u306a\u3057\u3067\u81ea\u52d5\u9077\u79fb\n stopQuestionTimer();\n saveCurrentAnswer(true);\n goToNextQuestion();\n }\n\n function handleOverallTimeout() { \/\/ \u30a2\u30e9\u30fc\u30c8\u306a\u3057\u3067\u81ea\u52d5\u9001\u4fe1\n if (testFinished) return;\n testFinished = true;\n stopQuestionTimer();\n stopOverallTimer();\n saveCurrentAnswer(true);\n submitQuiz(); \/\/ \u81ea\u52d5\u3067\u7d50\u679c\u9001\u4fe1\uff08\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\uff09\n }\n\n function goToNextQuestion() {\n if (testFinished) return;\n stopQuestionTimer();\n\n if (currentQuestionIndex < questionsData.length - 1) {\n currentQuestionIndex++;\n showQuestion(currentQuestionIndex);\n } else {\n \/\/ \u6700\u5f8c\u306e\u554f\u984c\u306b\u5230\u9054\u3057\u305f\u3089Submit\u30dc\u30bf\u30f3\u8868\u793a\u72b6\u614b\u3078\n updateNavigationButtons(currentQuestionIndex);\n }\n }\n\n function submitQuiz() {\n if (!testFinished) {\n testFinished = true;\n stopQuestionTimer();\n stopOverallTimer();\n saveCurrentAnswer();\n }\n \/\/ \u672a\u767b\u9332\u8a2d\u554f\u3092null\u3067\u57cb\u3081\u308b\uff08\u7d50\u679c\u30da\u30fc\u30b8\u7528\uff09\n questionsData.forEach(qD => {\n if (userAnswers[qD.id] === undefined) userAnswers[qD.id] = null;\n });\n\n try {\n const qs = window.location.search;\n localStorage.setItem('spiUserAnswers', JSON.stringify(userAnswers));\n if (RESULT_PAGE_URL) window.location.href = RESULT_PAGE_URL + qs;\n else alert('Result URL not set.');\n } catch (e) {\n console.error('Err save\/redirect:', e);\n alert('\u7d50\u679c\u306e\u4fdd\u5b58\u307e\u305f\u306f\u9077\u79fb\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002');\n }\n }\n\n function setupEventListeners() {\n if (nextButton) {\n nextButton.addEventListener('click', function() {\n if (!testInitialized || testFinished) return;\n\n const currentBlock = questionBlocksNodeList[currentQuestionIndex];\n if (!currentBlock) return;\n\n const questionId = questionsData[currentQuestionIndex]?.id;\n if (!questionId) return;\n\n const selectedOption = currentBlock.querySelector(`input[name=\"${questionId}\"]:checked`);\n if (!selectedOption) {\n alert('\u3053\u306e\u554f\u984c\u306e\u56de\u7b54\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n return;\n }\n saveCurrentAnswer();\n goToNextQuestion();\n });\n }\n\n if (form) {\n form.addEventListener('submit', function(event) {\n event.preventDefault();\n if (!testInitialized || testFinished) return;\n\n const lastQIdx = questionsData.length - 1;\n if (currentQuestionIndex === lastQIdx) {\n const lastQId = questionsData[lastQIdx].id;\n const lastBlk = questionBlocksNodeList[lastQIdx];\n if (lastBlk) {\n const lastSel = lastBlk.querySelector(`input[name=\"${lastQId}\"]:checked`);\n if (!lastSel && (userAnswers[lastQId] === undefined || userAnswers[lastQId] === null)) {\n if (!confirm('\u6700\u5f8c\u306e\u554f\u984c\u304c\u672a\u56de\u7b54\u306e\u3088\u3046\u3067\u3059\u3002\u3053\u306e\u307e\u307e\u7d50\u679c\u3092\u8868\u793a\u3057\u307e\u3059\u304b\uff1f')) return;\n }\n }\n }\n submitQuiz();\n });\n }\n }\n\n initializeTest();\n\n })(); \/\/ IIFE\u7d42\u4e86\n}); \/\/ DOMContentLoaded\u7d42\u4e86\n<\/script>\n\n<\/body>\n\n<\/html><\/div>\n\n\n\n\n\n<div id=\"exit-popup\" class=\"exit-popup-overlay\">\n <div class=\"exit-popup-content\">\n <p class=\"popup-title\">\u672c\u5f53\u306b\u3053\u3053\u3067\u7d42\u4e86\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u304b\uff1f<\/p>\n \n <p class=\"popup-text\">\n \u3042\u3068\u5c11\u3057\u3067SPI\u4f53\u9a13\u6a21\u8a66\u306e\u7d50\u679c\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\uff01<br>\n \u4eca\u3084\u3081\u3066\u3057\u307e\u3046\u3068\u3001\u3042\u306a\u305f\u306e\u5f31\u70b9\u3084\u50be\u5411\u304c\u3064\u304b\u3081\u306a\u3044\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<br>\n \u3082\u30461\u554f\u3060\u3051\u89e3\u3044\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\n <\/p>\n \n <div class=\"popup-btn-area\">\n <a href=\"javascript:void(0);\" id=\"real-back-btn\" class=\"popup-btn btn-cancel\">\u4e2d\u65ad\u3059\u308b<\/a>\n <button id=\"close-popup\" class=\"popup-btn btn-continue\">\u56de\u7b54\u3092\u7d9a\u3051\u308b<\/button>\n <\/div>\n <\/div>\n<\/div>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u5f53\u306b\u3053\u3053\u3067\u7d42\u4e86\u3057\u3066\u3057\u307e\u3044\u307e\u3059\u304b\uff1f \u3042\u3068\u5c11\u3057\u3067SPI\u4f53\u9a13\u6a21\u8a66\u306e\u7d50\u679c\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\uff01 \u4eca\u3084\u3081\u3066\u3057\u307e\u3046\u3068\u3001\u3042\u306a\u305f\u306e\u5f31\u70b9\u3084\u50be\u5411\u304c\u3064\u304b\u3081\u306a\u3044\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002 \u3082\u30461\u554f\u3060\u3051\u89e3\u3044\u3066\u307f\u307e\u305b\u3093\u304b\uff1f \u4e2d\u65ad\u3059\u308b \u56de\u7b54\u3092\u7d9a\u3051\u308b<\/p>\n","protected":false},"author":38,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-forfront.php","meta":{"footnotes":""},"class_list":{"0":"post-57754","1":"page","2":"type-page","3":"status-publish","5":"entry"},"_links":{"self":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/comments?post=57754"}],"version-history":[{"count":80,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754\/revisions"}],"predecessor-version":[{"id":89817,"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/pages\/57754\/revisions\/89817"}],"wp:attachment":[{"href":"https:\/\/kokoshiro.jp\/note\/wp-json\/wp\/v2\/media?parent=57754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}