jsコード
const quiz = [ //配列にオブジェクトを格納
{
question: "ゲーム市場、最も売れたゲーム機は次のうちどれ？",
answers: [
"スーパーファミコン",
"プレイステーション２",
"ニンテンドースイッチ",
"ニンテンドーDS",
],
correct: "ニンテンドーDS" //選択されたHTMLのテキストと比較する変数を指定
},{
question: "日本の初代内閣総理大臣は誰？",
answers: [
"伊藤博文",
"大隈重信",
"安倍晋三",
"高橋是清",
],
correct: "伊藤博文"
},{
question: "横浜ベイスターズが初めて日本一に輝いた時の監督は？",
answers: [
"三浦大輔",
"ラミレス",
"中畑清",
"権藤博",
],
correct: "権藤博"
}
];
const quizLength = quiz.length;
let quizIndex = 0;
let score = 0;
const $button = document.getElementsByTagName("button");
const buttonLength = $button.length; //buttonをノードとして取得し、変数化
const setupQuiz = function(){ //quizを解いたら次のquizをセットする関数
document.getElementById("js-question").textContent = quiz[quizIndex].question;
let buttonIndex = 0;
let buttonLength = $button.length;
while(buttonIndex < buttonLength){
$button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
buttonIndex++
}
}
setupQuiz();
const clickHandler = function(e){
if (quiz[quizIndex].correct === e.target.textContent){ //イベントをオブジェクトとして取得 + テキストの内容と解答を比較
window.alert("正解");
score++; //正解ならスコアを＋１
} else {
window.alert("不正解");
}
quizIndex++; //次のクイズをセットするためにインデックスを＋
if(quizIndex < quizLength){
setupQuiz();
}else{
window.alert("終了!あなたの正解数は"+score+"/"+quizLength+"です。");
}
}
let handlerIndex = 0;
while(handlerIndex < buttonLength){
$button[handlerIndex].addEventListener("click",function(e){
clickHandler(e);
});
handlerIndex++
}
#HTMLコード
・・・前略
<body>
<div class="container">
<div class="jumbotron mt-5">
<div class="d-flex justify-content-center">
<div id="js-question" class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</div>
<div id="js-items" class="d-flex justify-content-center">
<div class="m-2">
<button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
</div>
<div class="m-2">
<button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
</div>
<div class="m-2">
<button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
</div>
<div class="m-2">
<button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
解説
①クイズの内容とボタン等にテキストを.textContent = でjsの内容に変更する
②設定したクイズの内容が一問解いたら切り替わるようにquizIndexを関数の内部で++する。
③正解の場合スコアを記録し、alertで通知
