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++){
/*
* 配列の全要素から２つを取り出し、
* その二つを入れ替える処理を配列の要素の個数回
* 繰り返すことでシャッフルする。
*/
var num = Math.floor(Math.random()*arr.length);
var temp = arr[num];
arr[num] = arr[i];
arr[i] = temp;
}
return arr;
}
});
これで、結果まで確認できるクイズアプリになりました。
次回、この実行結果と最後の結果をダイアログではなく
画面に表示させる改造を施します。
