jsWaffleでAndroidアプリを作ろう!クイズアプリ編⑩
では実行結果を確認しましょう。
うん。採点機能も加わり、ますますクイズアプリらしくなってきました。
では次に、採点結果や正答率が最後に表示されるようにしてみましょう。
for文の後に以下を追加して下さい。
var temp_par = Math.round(score/list.length*1000); var par = temp_par/10; alert("お疲れ様でした。結果が表示されます。"); alert("合計スコア:" + score + "点\n(正解率:" + par + "%)");
説明します。
まず、
score/list.lengthで正答数を問題数で割って割合の小数を求めています。
通常はそれに100を掛ければ%表示にすることができますが、
今回は%表示にするときに小数第一位まで表示したいので1000を掛けています。
どうして1000を掛けるかというと、四捨五入をするMath.round()が必ず小数第一位を四捨五入し、整数値を返す関数だからです。
ということは例えばscore/list.length*100が66.666・・・・だった場合、
返ってくるのは67という整数です。
となると、小数第一位まで表示できませんので、まずは
score/list.length*1000で666.666・・・・としてからMath.round()します。
すると、返ってくるのは667という整数ですので、temp_parに代入しておきます。
そしてそれを
var par = temp_par/10;
として66.7という小数を作っているわけです。
あとは、正答数と正解率を表示用に整形して
alert()で表示しているだけですね。
はい。ここまでの全文を表示しておきます。
$(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("お疲れ様でした。結果が表示されます。"); alert("合計スコア:" + score + "点\n(正解率:" + par + "%)"); function shaffle(arr){ for(var i=0;i<arr.length;i++){ /* * 配列の全要素から2つを取り出し、 * その二つを入れ替える処理を配列の要素の個数回 * 繰り返すことでシャッフルする。 */ var num = Math.floor(Math.random()*arr.length); var temp = arr[num]; arr[num] = arr[i]; arr[i] = temp; } return arr; } });
これで、結果まで確認できるクイズアプリになりました。
次回、この実行結果と最後の結果をダイアログではなく
画面に表示させる改造を施します。