<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>クイズ結果</title>
<link rel="stylesheet" href="phlox.css" />
</head>
<body>
<h1>クイズ結果</h1>
<div id="result"></div>
<button onclick="location.href='phlox-quiz8.html'">もう一度挑戦する</button>
<script>
const resultDiv = document.getElementById("result");
const saved = localStorage.getItem("quizResults");
if (!saved) {
resultDiv.innerHTML = "<p>結果データがありません。<br><a href='phlox-quiz8.html'>クイズに戻る</a></p>";
throw new Error("結果データなし");
}
const { quizData, answers } = JSON.parse(saved);
let score = 0;
let html = "";
quizData.forEach((q, i) => {
const userAnswer = answers[i];
const isCorrect = userAnswer === q.correct;
if (isCorrect) score++;
// ✅ or ❌ を決定
let mark = "";
if (userAnswer === null) {
mark = " ❌";
} else {
mark = isCorrect ? " ✅" : " ❌";
}
html += `
<div class="question-result">
<p><strong>Q${i + 1}:</strong> ${q.question}</p>
<p>あなたの答え：${userAnswer || "未回答"}${mark}</p>
<p>正解：${q.correct}</p>
<div>${q.explanation}</div>
<hr>
</div>
`;
});
html = `<h2>あなたの得点：${quizData.length}問中${score}問正解です</h2>` + html;
resultDiv.innerHTML = html;
</script>
</body>
</html>
