クイズコンテンツを作る

そのまま利用できるクイズスクリプト

クイズサンプル
クイズコンテンツについて、１つのＨＴＭＬファイルにまとめたものを作成しました。

このクイズのスクリプトは次のようになっています。（１つのＨＴＭＬの中に、ＣＳＳもＪａｖａｓｃｒｉｐｔも入れ込んだ形になっているので、このまま簡単に利用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クイズ：複数正解対応版</title>
<style>
body {
font-family: sans-serif;
background-color: #f0f7ff;
padding: 20px;
line-height: 1.6;
}
.quiz-container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.question {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 20px;
padding: 10px;
border-left: 5px solid #8e5ff1;
background: #f9f4ff;
}
.choices {
display: flex;
flex-direction: column;
gap: 10px;
}
.choice-item {
display: flex;
align-items: center;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: 0.2s;
}
.choice-item:hover { background-color: #f0f4ff; }
.choice-item input { margin-right: 15px; transform: scale(1.2); }

/* 正解・不正解表示 */
.correct { background-color: #d4edda !important; border-color: #28a745 !important; }
.wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; }

.btn-submit, .btn-next {
display: block;
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #8e5ff1;
color: #fff;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
}
.btn-submit:disabled { background-color: #ccc; }
.feedback {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
display: none;
}
</style>
</head>
<body>

<button id="submit-btn" class="btn-submit" onclick="submitAnswer()">回答を確定する</button>
<div id="feedback" class="feedback"></div>
<button id="next-btn" class="btn-next" style="display:none;" onclick="nextQuestion()">次の問題へ</button>
</div>

<div id="result-screen" style="display:none; text-align:center;">
<h2>結果発表</h2>
<p id="score-text" style="font-size: 2em; color: #8e5ff1; font-weight: bold;"></p>
<button class="btn-next" onclick="location.reload()">もう一度挑戦する</button>
</div>
</div>

let currentIdx = 0;
let score = 0;

function loadQuestion() {
const data = quizData[currentIdx];
document.getElementById("question").innerText = `Q${currentIdx + 1}. ${data.q}`;
document.getElementById("question-type").innerText = data.isMulti ? "【複数選択】" : "【1つ選択】";

const choicesContainer = document.getElementById("choices");
choicesContainer.innerHTML = "";
document.getElementById("feedback").style.display = "none";
document.getElementById("next-btn").style.display = "none";
document.getElementById("submit-btn").style.display = "block";
document.getElementById("submit-btn").disabled = false;

data.c.forEach((choice, index) => {
const label = document.createElement("label");
label.className = "choice-item";
const input = document.createElement("input");
input.type = data.isMulti ? "checkbox" : "radio";
input.name = "quiz-choice";
input.value = index;

label.appendChild(input);
label.appendChild(document.createTextNode(choice));
choicesContainer.appendChild(label);
});
}

function submitAnswer() {
const data = quizData[currentIdx];
const inputs = document.getElementsByName("quiz-choice");
const selected = [];

for (let input of inputs) {
if (input.checked) selected.push(parseInt(input.value));
input.disabled = true; // 回答後は操作不能に
}

if (selected.length === 0) {
alert("選択肢を選んでください");
return;
}

// 正解判定（配列の中身が一致するか）
const isCorrect = JSON.stringify(selected.sort()) === JSON.stringify(data.a.sort());
const feedback = document.getElementById("feedback");
const items = document.getElementsByClassName("choice-item");

// 正解の選択肢を緑にする
data.a.forEach(idx => items[idx].classList.add("correct"));

if (isCorrect) {
feedback.innerText = "⭕ 正解！ " + data.d;
feedback.style.background = "#d4edda";
score++;
} else {
// 間違えた選択肢を赤にする
selected.forEach(idx => {
if (!data.a.includes(idx)) items[idx].classList.add("wrong");
});
feedback.innerText = "❌ 不正解... " + data.d;
feedback.style.background = "#f8d7da";
}

feedback.style.display = "block";
document.getElementById("submit-btn").style.display = "none";
document.getElementById("next-btn").style.display = "block";
}

function nextQuestion() {
currentIdx++;
if (currentIdx < quizData.length) {
loadQuestion();
} else {
showResult();
}
}

loadQuestion();
</script>

</body>
</html>

問題データの中に isMulti: true という設定を入れることで、自動的にチェックボックス形式に切り替わるようにしています。

問題データの構造
クイズの心臓部

const quizData = [
{
q: "問題文をここに書きます",
c: ["選択肢1", "選択肢2", "選択肢3"],
a: 0,
d: "正解したときや、間違えたときに表示する解説です。"
},
// 次の問題をここに追加していく...
];

項目	意味	書き方
q	問題文	クイズとして表示したい文章を "" で囲んで書きます。
c	選択肢	["A", "B", "C"] のように、[ と ] の中にカンマ区切りで書きます。
a	正解番号	0から数え始めるのがポイントです！・1番目が正解なら 0 ・2番目が正解なら 1 ・3番目が正解なら 2 と書きます。
d	解説	答えを選んだ後に表示される説明文です。

問題を増やすには？

例えば、4問目、5問目と増やしたい場合は、{ ... } のカタマリをコピーして、コンマ（,）で区切って並べるだけです。

const quizData = [
{
q: "HTMLの正式名称は何？",
c: ["HyperText Markup Language", "HighText Machine Language", "HyperTool Multi Language"],
a: 0,
d: "HTMLはウェブページの構造を作る言語です。"
}, // ← ここにコンマが必要
{
q: "ウェブページの見た目を整えるのは？",
c: ["JavaScript", "HTML", "CSS"],
a: 2,
d: "CSS（Cascading Style Sheets）で色やレイアウトを指定します。"
} // 最後にはコンマがなくてもOK
];