<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>音楽記号〜基礎知識・打楽器編〜</title>
<link rel="stylesheet" href="phlox.css" />
<style>
table.quizTable {
border-collapse: collapse;
width: 100%;
margin: 1em auto;
}
table.quizTable th,
table.quizTable td {
border: 1px solid #ccc;
padding: 0.6em;
vertical-align: top;
text-align: left;
}
td.choices {
text-align: center;
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: flex-start;
}
.radio-group label {
display: inline-block;
min-width: 8em;
}
</style>
</head>
<body>
<h1>ここは打楽器の基礎知識についてのクイズ</h1>
<form id="quizForm">
<table class="quizTable" id="quizTable">
<thead>
<tr><th>問題</th><th>選択肢</th></tr>
</thead>
<tbody></tbody>
</table>
<input type="submit" value="送信">
</form>
<script>
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
async function loadCSV() {
const res = await fetch("phlox-quiz7.csv?ts=" + Date.now());
const text = await res.text();
const lines = text.trim().split("\n").filter(line => line.trim() !== "");
const quizData = [];
for (let i = 1; i < lines.length; i++) {
const row = lines[i].match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g)?.map(s => s.replace(/^"|"$/g, ""));
if (!row || row.length < 5) continue;
const [question, c1 = "", c2 = "", c3 = "", c4 = "", correctNumStr = "", explanation = ""] = row;
const rawChoices = [c1, c2, c3, c4];
const choices = rawChoices.filter(c => c.trim() !== "");
const correctIndex = parseInt(correctNumStr, 10) - 1;
const correctAnswer = rawChoices[correctIndex];
const shuffledChoices = shuffle([...choices]);
quizData.push({
question: question,
choices: shuffledChoices,
correct: correctAnswer,
explanation: explanation
});
}
renderQuiz(quizData);
}
function renderQuiz(quizData) {
const tbody = document.querySelector("#quizTable tbody");
tbody.innerHTML = "";
quizData.forEach((q, idx) => {
const tr = document.createElement("tr");
const tdQuestion = document.createElement("td");
tdQuestion.innerHTML = `<strong>Q${idx + 1}</strong> ${q.question}`;
const tdChoices = document.createElement("td");
tdChoices.className = "choices";
const choiceGroup = document.createElement("div");
choiceGroup.className = "radio-group";
q.choices.forEach(choice => {
const label = document.createElement("label");
label.innerHTML = `<input type="radio" name="q${idx}" value="${choice}"> ${choice}`;
choiceGroup.appendChild(label);
});
tdChoices.appendChild(choiceGroup);
tr.appendChild(tdQuestion);
tr.appendChild(tdChoices);
tbody.appendChild(tr);
});
const form = document.getElementById("quizForm");
form.onsubmit = function (e) {
e.preventDefault();
const answers = quizData.map((q, idx) => {
const checked = document.querySelector(`input[name="q${idx}"]:checked`);
return checked ? checked.value : null;
});
localStorage.setItem("quizResults", JSON.stringify({ quizData, answers }));
location.href = "kaisetu-7.html";
};
}
loadCSV();
</script>
</body>
</html>
