クイズアプリを作ってみよう

サンプルアプリの動作

問題を示し、選択肢から正解を選ばせる。用意した問題の数だけ出題・回答を繰り返す。正解の数を得点として計算し、終了時に総得点を示す。

そんな動作をするクイズアプリの例を示します。例題として、情報Ⅰに関係する問題を10問付けてみました。

アプリの動作

以下の画面で、アプリの動作を確認することができます。

アプリとソースコードのインポート

以下のボタンをクリックすると、Monaca Educationにプロジェクトをインポートできます。
Monaca Educationにインポートする(要ログイン)

ソースコードのポイント①「問題（問題文、回答の選択肢、正解）」の配列

このサンプルプログラムでは、クイズ問題の1問分に当たる「問題文、回答の選択肢、正解」を、JavaScriptのオブジェクトとして表現しています。そのオブジェクトを１０個含む配列が、クイズの問題集になります。
該当部分は、プロジェクトのフォルダjsの中にある、JavaScriptファイルmain.jsの、2行目の最後から始まり、63行目の先頭で終わる、大カッコ[　]で囲まれた、大きな枠です。


const quizData = [
...
];

ソースコードのポイント②「問題（問題文、回答の選択肢、正解）」オブジェクト

問題集を表す大カッコの枠の中には、中カッコ{ }で囲まれた要素が10個含まれています。なお、中カッコ{ }と{ }が並ぶ部分には、間にカンマ（ , ）が入り、要素間の区切りになっています。

JavaScriptプログラムの中では、いろいろな用途で中カッコが使われますが、この場合は、「オブジェクト」を作っています。

具体例として、同じくフォルダjsのJavaScriptファイルmain.jsの４行目から８行目を見てみましょう。


{
    question: "2進数で表される '1010' は10進数で何に相当しますか？",
    choices: ["10", "8", "12", "5"],
    answer: "10"
}

オブジェクトは、直訳すると「モノ（物）」です。

プログラム言語におけるオブジェクトとは

「人」という「モノ」に、「体重」や「身長」という要素があり、またそれぞれの要素には「70kg」とか「174cm」とかの値があるように、「モノ」には物を構成する要素と、その要素の値があります。

上のコードは、「クイズ問題」という１つの「物」に、「問題文（question）」、「選択肢（choices）」、「正解（answer）」という要素があり、それぞれに値があるということを実現しているのです。
なお、問題を構成する要素の１つ「選択肢（choices）」の値は、配列（["10", "8", "12", "5"],）になっています。