enchant.jsで四択問題

enchant.jsを使って四択問題を出題するサンプルプログラムを作った。
ただし、古いバージョン（v0.4.5）のenchant.jsでのみの動作となる。（enchant.jsのラベルクラスの仕様が最新バージョンでは変わっているため。）

問題をランダムに出題することと、四択の表示位置をランダムに表示するためにJavaScriptプログラムでシャッフルしている。

// 問題データをシャッフル
var shaffleData = function(){
	for(var i=0; i<mondai_data.length; i++){
		new_mondai_data[i] = mondai_data[i];
		new_sentaku_data[i] = sentaku_data[i];
	}
	for(var i=0; i<100; i++){
		var work = "";
		var r1 = rnd(mondai_data.length);
		var r2 = rnd(mondai_data.length);
		// 問題
		work = new_mondai_data[r1];
		new_mondai_data[r1] = new_mondai_data[r2];
		new_mondai_data[r2] = work;
		// 選択肢
		work = new_sentaku_data[r1];
		new_sentaku_data[r1] = new_sentaku_data[r2];
		new_sentaku_data[r2] = work;
	}
};

// 選択肢をシャッフル
var shaffleSentakusi = function(){
	kotae = 0;
	for(var i=0; i<20; i++){
		// シャッフル
		var work = "";
		var r1 = rnd(4);
		var r2 = rnd(4);
		console.log(r1 + " " + r2);
		work = new_sentaku_data[mondaiNo-1][r1];
		new_sentaku_data[mondaiNo-1][r1] = new_sentaku_data[mondaiNo-1][r2];
		new_sentaku_data[mondaiNo-1][r2] = work;
		// 正しい答えをチェックしておく
		if(r1 == kotae || r2 == kotae){
			if(r1 == kotae) kotae = r2;
			else if(r2 == kotae) kotae = r1;
		}
		console.log("kotae = " + kotae);
		for(var j=0; j<4; j++) sentaku[j].kotae = false;
		sentaku[kotae].kotae = true;
	}
};

enchant.jsのラベルクラスの表示にただのCSSを使ってボタンらしく見せているだけの力技プログラムだ。CSSの調整で表示の融通がきくもののかなり強引な仕様だ。

CSS部分

body{
	margin:0;
}
/* 選択ボタン */
#sentaku{
	padding-top: 12px;	/* 上下の中央ぞろえ苦肉の策 */
	text-align: center;
	text-valign: middle;
	color: #000;
	background: #fff;
	width: 158px;
	height: 36px;
	border: solid 1px #000;
	border-radius: 10px;
}
/* aタグ */
#sentaku:hover{
	background: pink;
}