jsWaffleでAndroidアプリを作ろう！クイズアプリ編⑮

サクウェブＴＶはコチラ↓↓↓

さて、operate関数の定義です。

function operate(xml){
		var list = new Array();//クイズデータ配列をここに格納する
		var para = 0;
		$(xml).find("quiz").each(function(){
			var question = $(this).find("question").text();
			var choices = $(this).find("selection").find("option");
			var selection = new Array();
			var answer = $(this).find("answer").text();
			var para2 = 0;
			choices.each(function(){
				selection[para2] = $(this).text();
				para2++;
			});
			list[para] = {"question":question,"selection":selection,"answer":answer};
			para++;
		});
		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);
		/********* クイズ開始　ここまで *********/
	}

まず、operate(xml)に注目しましょう。

operate関数は$.ajax()のsuccessに指定した関数です。

今回、$.ajax()ではＸＭＬを読み込んでいますから、読み込んだＸＭＬデータを受け取る場所が必要です。

その場所が、successに指定したfunstionの引数です。

つまり、今回はoperate(xml)のxmlの部分になります。

読み込みが成功すると、読み込んだＸＭＬデータはxmlに格納されます。

では、xmlを利用してこの後どのように処理が進むのかを見てみましょう。

		var list = new Array();//クイズデータ配列をここに格納する
		var para = 0;
		$(xml).find("quiz").each(function(){
			var question = $(this).find("question").text();
			var choices = $(this).find("selection").find("option");
			var selection = new Array();
			var answer = $(this).find("answer").text();
			var para2 = 0;
			choices.each(function(){
				selection[para2] = $(this).text();
				para2++;
			});
			list[para] = {"question":question,"selection":selection,"answer":answer};
			para++;
		});
		list = shaffle(list);

この部分は主に、読み込んだＸＭＬから配列を作る処理です。

listに配列を代入し、そこにクイズ問題の配列を格納していきます。

operate(xml)の引数xmlは$(xml)とすることで、jQueryオブジェクトとして扱うことができます。

あとは、findでquiz要素を探し、eachで配列格納処理を記述しているということです。

注意したいのは、通常要素の中身を抽出する場合に使用するhtml()は使用できない点です。

今回抽出したのはHTMLではなくXMLですから、HTML専用のhtml()は使用できないのです。

そこで、その代わりにtext()を使用して中身を抽出しています。

抽出したらあとはただの格納処理です。

さて、最後に

list = shaffle(list);

で配列の中身をシャッフルしていますが、これは以前に定義し説明した以下の関数を使用しています。

	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;
	}

はい。この後のクイズ出題処理はこれまでの記事で解説したものと同じです。

以下全文です。

$(function(){
	
	xmlLoad("xml/data.xml");
	
	function xmlLoad(path){
		$.ajax({
		    url: path,
		    async: true,
		    cache: false,
		    dataType:"xml",
		    error: function(){
		        alert('Error loading XML document');
		    },
		    success: operate
		});
	}
	
	function operate(xml){
		var list = new Array();//クイズデータ配列をここに格納する
		var para = 0;
		$(xml).find("quiz").each(function(){
			var question = $(this).find("question").text();
			var choices = $(this).find("selection").find("option");
			var selection = new Array();
			var answer = $(this).find("answer").text();
			var para2 = 0;
			choices.each(function(){
				selection[para2] = $(this).text();
				para2++;
			});
			list[para] = {"question":question,"selection":selection,"answer":answer};
			para++;
		});
		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;
	}
	
});

これで、ＸＭＬを編集することで出題される問題数や問題の内容を変更することができるようになりました。

編集や問題の追加は以下の部分を変えたり追加してください。

    <quiz>
        <question>クイズ問題内容</question>
        <selection>
            <option>選択肢１</option>
            <option>選択肢２</option>
            <option>選択肢３</option>
            <option>選択肢４</option>
            <option>選択肢５</option>
        </selection>
        <answer>フライパン</answer>
    </quiz> 

ちなみに<option>を増やせば選択肢はいくつにでもできます。

はい。お疲れ様でした。

とりあえず、ダイアログ式のクイズアプリ完成です。

ボタン式に改造するのはまた別の機会にしましょう。