以下が、小学校で習う漢字の4択クイズの実装例です。セキュリティの脆弱性を防ぐため、evalや他のサイトへの遷移・リダイレクトは行っていません。
```
<html>
<head>
<title>小学校で習う漢字の4択クイズ</title>
</head>
<body>
<h1>小学校で習う漢字の4択クイズ</h1>
<div id="question"></div>
<form>
<input type="radio" name="choice" id="choice1"><label for="choice1" id="label1"></label><br>
<input type="radio" name="choice" id="choice2"><label for="choice2" id="label2"></label><br>
<input type="radio" name="choice" id="choice3"><label for="choice3" id="label3"></label><br>
<input type="radio" name="choice" id="choice4"><label for="choice4" id="label4"></label><br>
<br>
<input type="submit" value="次の問題へ" onclick="nextQuestion(); return false;">
</form>
<p id="result"></p>
<script>
var questions = [
{
"question": "幸福",
"choices": ["こうふく", "しあわせ", "くろう", "たいせつ"],
"correct": 1
},
{
"question": "製品",
"choices": ["せいひん", "せいび", "せいかつ", "せいろ"],
"correct": 0
},
{
"question": "野球",
"choices": ["やきゅう", "すもう", "さんすう", "もんだい"],
"correct": 0
}
];
var currentQuestionIndex = 0;
var numCorrect = 0;
function displayQuestion() {
var questionObj = questions[currentQuestionIndex];
document.getElementById("question").textContent = questionObj.question;
document.getElementById("label1").textContent = questionObj.choices[0];
document.getElementById("label2").textContent = questionObj.choices[1];
document.getElementById("label3").textContent = questionObj.choices[2];
document.getElementById("label4").textContent = questionObj.choices[3];
clearSelection();
}
function clearSelection() {
var radioButtons = document.getElementsByName("choice");
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].checked = false;
}
}
function checkAnswer() {
var selectedRadioIndex = -1;
var radioButtons = document.getElementsByName("choice");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
selectedRadioIndex = i;
}
}
if (selectedRadioIndex === -1) {
return; // no answer selected
}
var questionObj = questions[currentQuestionIndex];
var correctAnswerIndex = questionObj.correct;
var userAnswerIndex = selectedRadioIndex;
if (correctAnswerIndex === userAnswerIndex) {
document.getElementById("result").textContent = "正解！";
numCorrect++;
} else {
document.getElementById("result").textContent = "不正解。正解は「" + questionObj.choices[correctAnswerIndex] + "」でした。";
}
}
function nextQuestion() {
checkAnswer();
currentQuestionIndex++;
if (currentQuestionIndex === questions.length) {
document.getElementById("question").textContent = "終了！あなたの正解数は " + numCorrect + " でした。";
document.getElementById("label1").style.display = "none";
document.getElementById("label2").style.display = "none";
document.getElementById("label3").style.display = "none";
document.getElementById("label4").style.display = "none";
document.getElementsByName("choice")[0].style.display = "none";
document.getElementById("result").textContent = "";
} else {
displayQuestion();
}
}
displayQuestion();
</script>
</body>
</html>
```
ジョークである「お前は基本情報技術者試験やってみねえよな…!!!」「やったけど、1点に終わったよ」を、クイズの正解数の結果表示に取り入れることができます。
