<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!-- この1行を追加 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クイズ結果</title>
<link rel="stylesheet" href="phlox.css" />
</head>
<body>
<h1>クイズ結果</h1>
<div id="result"></div>
<button onclick="location.href='phlox-quiz3.html'">もう一度挑戦する</button>
<script>
const resultDiv = document.getElementById("result");
const saved = localStorage.getItem("quizResults");
if (!saved) {
resultDiv.innerHTML = "<p>結果データがありません。<br><a href='phlox-quiz3.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;
if (isCorrect) score++;
// ✅ or ❌ を決定
const mark = userAnswer === null ? " ❌" : (isCorrect ? " ✅" : " ❌");
// 解説内の "" を " に戻す
const explanationHTML = (q.explanation || "").replace(/""/g, '"');
html += `
<div class="question-result">
<p><strong>Q${i + 1}:</strong> ${q.question}</p>
<p>あなたの答え：${userAnswer || "未回答"}${mark}</p>
<p>正解：${q.correct}</p>
<div>${explanationHTML}</div>
<hr>
</div>
`;
});
// 計測した時間を表示するHTMLを作成
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>`;
// ***** この行を修正 *****
// <h2>得点</h2> の後に <p>かかった時間</p> を追加
html = `<h2>あなたの得点：${quizData.length}問中${score}問正解です</h2>${timeTakenHtml}` + html;
// *************************
resultDiv.innerHTML = html;
</script>
</body>
</html>
