jsWaffleでAndroidアプリを作ろう!クイズアプリ編②
さて、表示と使用するファイルの準備ができたのでJavaScriptを記述していきましょう。
これから作るクイズアプリは初めは簡単な作りのものから作成していき、徐々にグレードアップ改造を施していきます。
最終的に出来上がるのは、機能としては簡単なクイズアプリですが、できるだけ色々なことを盛り込んでいきますので、JavaScriptに不慣れな方はステップバイステップで勉強していく目的でも、読んで頂けるかと思います。(途中にxmlやAjaxも使用して改造を施していきますので)
では、クイズアプリの原型としてダイアログを使用した簡単なプログラムから始めましょう。
script.jsに以下を記述して下さい。
$(function(){ var list = [ { "question":"日本一高い山は?", "selection":["父山","富士山","高山","下山"], "answer":"富士山" }, { "question":"世界一小さい国は?", "selection":["日本","アメリカ","ロシア","バチカン市国"], "answer":"バチカン市国" }, { "question":"日本の初代総理大臣は?", "selection":["森鴎外","伊藤博文","日下部陽一","坂本竜馬","斉藤一"], "answer":"伊藤博文" }, ];
});
これは、クイズのもとデータとなる配列です。
変数listに[ ]で配列を指定し、その配列に{ }で連想配列を定義しています。
さらに、連想配列の"selection"では[ ]で選択肢となる配列を定義しています。
"selection"まで見れば3次元配列を定義したことになりますね。
だいたいわかるかと思いますが、
"question"はクイズの問題文、"selection"はクイズの選択肢、"answer"はクイズの答えを指定するものです。
配列で定義したのは、for文やjQueryのeachメソッドを使用することで、配列の中身(つまり定義したクイズ)を全て順に処理していける(クイズとして出題していける)からです。
今回は、for文を使用してクイズとして出題してみましょう。