【コピペOK】Javascriptでクイズアプリの作り方

完成イメージ

問題文を変えて、ご自由に使用ください。

解説・作り方

それぞれのコードについて解説していきます。

HTML

簡単に HTML を作成する

quiz_inner の id がついてる div タグは装飾為に使用してるだけなので、なくても大丈夫です。

CSS

CSS でそれっぽくデザインします。

デザインはお好きに変更してください！

質問の部分は Javascript で変更していきます。

Javascript

// 配列で質問を用意する
let question = [
// 配列に配列を入れる
["日本で最も面積が大きい都道府県は?", "【1】北海道", "【2】岩手県", "【3】静岡県", "【4】鹿児島県", "1"],
["次の内、東北三第祭りにはいらないものはどれ？", "【1】秋田竿燈（かんとう）祭り", "【2】仙台七夕祭り", "【3】山形花笠まつり", "【4】青森ねぶた祭", "3"],
["日本一標高の高い山は？", "【1】御嶽山", "【2】間ノ岳", "【3】富士山", "【4】北岳", "3"],
];

配列の中に配列を入れることで、質問を用意します。

配列最初に問題文を入れます。
次に HTML で 4 つの質問を用意したので、4 つ質問用意します。
最後の数字は正答判定に必要なもので、正解の問題の番号を入れてください。

次に、それぞれの HTML 要素を取得していきます。

// 問題のタイトルの取得
const QesNumber = document.getElementById("question_number");
const QesTitle = document.getElementById("question");

    // 問題文のの取得
    const Qes1 = document.getElementById("qes1");
    const Qes2 = document.getElementById("qes2");
    const Qes3 = document.getElementById("qes3");
    const Qes4 = document.getElementById("qes4");

    // 回答の取得
    const Ans1 = document.getElementById("answer1");
    const Ans2 = document.getElementById("answer2");
    const Ans3 = document.getElementById("answer3");
    const Ans4 = document.getElementById("answer4");

document.getElementById を使ってそれぞれの HTML 要素が取得できます。

次にカウントの変数を初期値 0 で宣言してあげます。

//　カウント
let QuizCnt = 0;
let Correct = 0;

QuizCnt は現在何問目か、Correct は正答数を計算するのに必要です。

次に、クイズをセットする関数を用意します。

//　クイズをセットする
function SetQuize() {
QesNumber.textContent = "第" + (QuizCnt + 1) + "問"; //初期値が 0 なので+1 する
QesTitle.textContent = question[QuizCnt][0];
Qes1.textContent = question[QuizCnt][1];
Qes2.textContent = question[QuizCnt][2];
Qes3.textContent = question[QuizCnt][3];
Qes4.textContent = question[QuizCnt][4];
}

それぞれ、textContent で書き換えてあげます。
第〇〇問を表示する部分は QuizCnt を使いますが、初期値を 0 に設定したので、+１をしてあげます。
question[QuizCnt][0]は問題文,[1]~[4]は問題文を表示できます。

この時点では関数を宣言しただけなので、 SetQuize()を一回読んであげます。

//　初回に 1 回だけ呼ぶ
SetQuize();

これで無事、問題文が表示されたかと思います。

次に回答チェックの関数を作っていきます。

// 回答のチェック関数
function CheckAnswer(ans) {
//答えが合っている場合
if (ans == question[QuizCnt][5]) {
window.alert("正解！");
//Correct を 1 増やす
Correct++;
}

//不正解の場合
else {
window.alert("不正解...");
}

// クイズカウントを 1 増やす
QuizCnt+ +;
// 全て回答したら
if (QuizCnt == question.length) {
QesNumber.textContent = "終わり！";
QesTitle.textContent = "正答率" + Correct + "/" + question.length;
Qes1.textContent = "";
Qes2.textContent = "";
Qes3.textContent = "";
Qes4.textContent = "";
return;
}

SetQuize();
}

引数に ans を入れ、何番のボタンが押されたを確かめます。 ans == question[QuizCnt][5]は[5]は配列の最後に用意した番号です。
これにより、「押された番号と、配列で用意していた番号が一致していたら」という条件ができます。
正解の場合は、window.alert で正解を出し、Correct++;で回答回数を 1 増やしてあげます。

不正解の場合は、else で分けてあげます。

そして、正解しても、しなくても QuizCnt を増やし、SetQuize();で再び、問題をセットします。

QuizCnt == question.length で、全て回答した処理を実行します。
質問は空にして、タイトルの部分に得点を表示してあげます。

これもまた、関数を宣言しただけなので呼んであげる必要があります。

//クリック判定
Ans1.addEventListener("click", () => {
CheckAnswer(1);
});
Ans2.addEventListener("click", () => {
CheckAnswer(2);
});
Ans3.addEventListener("click", () => {
CheckAnswer(3);
});
Ans4.addEventListener("click", () => {
CheckAnswer(4);
});

addEventListener でクリックされた時に CheckAnswer()を読んであげてます。
それぞれの問題番号にあった引数を入れてあげます。
以上で完成です！

もう少し、コードを短く簡潔にできると思いますが、今回はこれで終了します。

ありがとうございました！