jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑪
サクウェブＴＶはコチラ↓↓↓
さて、実行結果です。
はい。これで正答数と正解率が表示されるようになりました。
次は正答数と正解率の表示をダイアログを使用せずに行いましょう。
最後に画面に結果が直接表示されて終わるほうが、なんだかすっきりしますので。
では、
alert("お疲れ様でした。結果が表示されます。");
より下を以下のように書きかえてください。
var str = "<p>合計スコア：" + score + "点</p>";
str += "<p>（正解率：" + par + "％）</p>";
$("#result").html(str);
変数strに、結果を整形した文字列を代入し、html()メソッドでHTMLに挿入しているだけですね。
これで結果が最後に直接画面に表示されるはずです。
ここまでの全文を表示します。
$(function(){
var list = [
{
"question":"日本一高い山は？",
"selection":["父山","富士山","高山","下山"],
"answer":"富士山"
},
{
"question":"世界一小さい国は？",
"selection":["日本","アメリカ","ロシア","バチカン市国"],
"answer":"バチカン市国"
},
{
"question":"日本の初代総理大臣は？",
"selection":["森鴎外","伊藤博文","日下部陽一","坂本竜馬","斉藤一"],
"answer":"伊藤博文"
},
];
list = shaffle(list);
var score = 0;
for(var i=0;i<list.length;i++){
var quiz = list[i];
var title = "第" + (i+1) + "問：" + quiz["question"];
var ok = false;
while(ok==false){
var a = droid.dialogList(title,quiz["selection"]);
ok = droid.dialogYesNo("回答の確認","回答は「" + a + "」でよろしいですか？");
if(ok){
if(a == quiz["answer"]){
score++;
alert("正解です！現在のスコア：" + score + "点！");
}else{
alert("残念！不正解です。正解は「" + quiz["answer"] + "」でした。");
}
}
}
}
var temp_par = Math.round(score/list.length*1000);
var par = temp_par/10;
alert("お疲れ様でした。結果が表示されます。");
var str = "<p>合計スコア：" + score + "点</p>";
str += "<p>（正解率：" + par + "％）</p>";
$("#result").html(str);
function shaffle(arr){
for(var i=0;i<arr.length;i++){
/*
* 配列の全要素から２つを取り出し、
* その二つを入れ替える処理を配列の要素の個数回
* 繰り返すことでシャッフルする。
*/
var num = Math.floor(Math.random()*arr.length);
var temp = arr[num];
arr[num] = arr[i];
arr[i] = temp;
}
return arr;
}
});
実行結果は次回にまわします。
これまで、クイズの問題データをJavaScriptで直接記述していました。
しかし、これではクイズデータと処理が同じファイルに存在し、見た目もきれいではないですし、問題数を増やしたり問題を変えたり選択肢を編集したり、クイズ自体に手を加えにくい構造にあります。
そこで、次回、問題データをXMLで管理し、そこからデータを抽出する形をとることでクイズデータと処理部分の分離をはかります。
