JavaScriptでクイズアプリを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでクイズアプリを作成する方法について現役エンジニアが解説しています。まずクイズの問題を配列に入れておきます。問題がなくなった場合には、最後に正解数を表示して終了します。今回は簡単に問題と回答を制御するアプリを作成してみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでクイズアプリを作成する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでクイズアプリを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

クイズアプリの作成に必要となる言語

クイズアプリの簡易版であれば、どの言語でも作成できるでしょう。
しかし、問題を外部(textやDB)に保存し、クライアント側には見せないような仕組みで実装する場合は、少し注意が必要です。

今回はJavaScriptでクイズアプリを作成します。
 

クイズアプリの仕組み

クイズの用意

クイズの問題を取り込んだ配列を用意します。
 

var Question = [
["JavaScriptで「Hello World」を正しく表示されないのはどれ?",
"1. document.write('Hello World');",
"2. document.write(Hello World);",
"3. document.write('Hello World')",
"1"],
["JavaScriptで【document.write(5 + 4);】を実行したらどうなる?",
"1. 5 + 4);",
"2. エラーになる",
"3. 9",
"3"],
["JavaScriptで余りを求めるのは?",
"1. /",
"2. %",
"3. @",
"2"]
];

 
中身は[問題][回答1][回答2][回答3][正解]で作成します。
 

問題の表示と回答入力

作成した配列をループで問題数分を回しながら、問題と回答を表示して、回答してもらいます。

 

正解の判断

入力された値と[正解]との比較を行い、下記の対応を行います。

  • 一致した場合 :正解のメッセージを表示し、正解数に1を加算
  • 一致しない場合:不正解のメッセージを表示

 

2と3を繰り返し

回答がされる毎に、現在の出題数を加算して、次を出題できるようにします
 

問題が最後まで完了した後の処理

正解数に合わせてメッセージを表示。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでクイズアプリを作る</title>
</head>
<body>
<!--タイトル-->
<h1>クイズアプリを作ってみよう!!!</h1>
<!--クイズのの表示-->
<h2 id=”_question”>ここに問題が表示されます。</h2>
<!--回答-->
<ul>
<li id="_ans1">回答1</li>
<li id="_ans2">回答2</li>
<li id="_ans3">回答3</li>
</ul>
<button type="button" id="_answer_1" onclick="Answer_Check(1)">回答1</button>
<button type="button" id="_answer_2" onclick="Answer_Check(2)">回答2</button>
<button type="button" id="_answer_3" onclick="Answer_Check(3)">回答3</button>
 

<script type="text/javascript">
// 初期画面起動時
var Question = [
["JavaScriptで「Hello World」を正しく表示されないのはどれ?",
"1. document.write('Hello World');",
"2. document.write(Hello World);",
"3. document.write('Hello World')",
"1"],
["JavaScriptで【document.write(5 + 4);】を実行したらどうなる?",
"1. 5 + 4);",
"2. エラーになる",
"3. 9",
"3"],
["JavaScriptで余りを求めるのは?",
"1. /",
"2. %",
"3. @",
"2"]
];

// 初期変数定義
// 問題を表示するオブジェクトを取得する
var Q = document.getElementById('_question');
// 問題を表示するオブジェクトを取得する
var A1 = document.getElementById('_ans1');
var A2 = document.getElementById('_ans2');
var A3 = document.getElementById('_ans3');
 

// 正解数を保持する値
var Correct = 0;

// 現在の問題数
var Qcnt = 0;

// 取得したテーブルに盤面生成
Q_Set();

// 問題を画面に表示する処理
function Q_Set() {
Q.textContent = Question[Qcnt][0];
A1.textContent = Question[Qcnt][1];
A2.textContent = Question[Qcnt][2];
A3.textContent = Question[Qcnt][3];
};

// 回答ボタンを押したときの処理
function Answer_Check(ans) {
if(ans == Question[Qcnt][4]) {
alert("正解");
Correct++;
} else {
alert("不正解");
}
Qcnt++;
if (Qcnt == Question.length) {
Q.textContent = "問題は以上です。正解数は" + Correct + "でした。";
A1.textContent = "";
A2.textContent = "";
A3.textContent = "";
} else {
Q_Set();
}
}

</script>
</body>
</html>

 

今回は簡単に問題と回答を制御するアプリを作成しました。しかし、作成したアプリの仕様では問題と答えがわかってしまうので、本来は回答をサーバに送信して制御するのが望ましいです。

また、問題の答えなどを画面表示させたくない場合は、Ajaxなどの利用が必要になります。
クイズの骨格は同じになりますので、サンプルを元に改良を加えてみて下さい
 

筆者プロフィール

この記事を監修してくれた方

小宮山晃史(こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。