<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クイズ結果</title>
<link rel="stylesheet" href="phlox.css" />
<style>
.question-result.correct {
background-color: #69a369; /* 変更: quiz-phlox-trialと統一 */
border-left: 5px solid #28a745;
padding: 1em;
margin-bottom: 1em;
border-radius: 4px;
color: #f0f0f0;
}
.question-result.incorrect {
background-color: #ce7575; /* 変更: quiz-phlox-trialと統一 */
border-left: 5px solid #dc3545;
padding: 1em;
margin-bottom: 1em;
border-radius: 4px;
color: #f0f0f0;
}
</style>
</head>
<body>
<h1>クイズ結果</h1>
<div id="result"></div>
<button onclick="location.href='phlox-quiz1.html'">もう一度挑戦する</button>
<script>
const resultDiv = document.getElementById("result");
const saved = localStorage.getItem("quizResults");
if (!saved) {
resultDiv.innerHTML = "<p>結果データがありません。<br><a href='phlox-quiz1.html'>クイズに戻る</a></p>";
throw new Error("結果データなし");
}
const { quizData, answers, totalTime } = JSON.parse(saved);
let score = 0;
let html = "";
quizData.forEach((q, i) => {
const userAnswer = answers[i];
const isCorrect = userAnswer === q.correct;
const explanationHTML = (q.explanation || "").replace(/""/g, '"');
if (isCorrect) score++;
const mark = isCorrect ? "✅" : "❌";
const resultClass = isCorrect ? "correct" : "incorrect";
html += `
<div class="question-result ${resultClass}">
<p><strong>Q${i + 1}:</strong> ${q.question}</p>
<p>あなたの答え：${userAnswer || "未回答"}${mark}</p>
<p>正解：${q.correct}</p>
<div>${explanationHTML}</div>
</div>
`;
});
const displayMinutes = String(Math.floor(totalTime / 60)).padStart(2, '0');
const displaySeconds = String(totalTime % 60).padStart(2, '0');
const timeTakenHtml = `<p style="font-size: 1.2em; font-weight: bold;">かかった時間：${displayMinutes}:${displaySeconds}</p>`;
html = `<h2>あなたの得点：${quizData.length}問中${score}問正解です</h2>${timeTakenHtml}` + html;
resultDiv.innerHTML = html;
</script>
</body>
</html>
