blog.waterlow.work

Ruby, Rails, js, etc...

【js】【json】Ruby資格対策サイト

お友達にjsonなる物があるということをきいて勉強してみました。なんとも超便利です。
jsonJavascriptにデータをわたすための形式で、ハッシュ、配列を使って階層構造を作ることができます。

// statement,choiceの内容は省略
var qestions = [
    {
        "statement":statement1,
        "choice":{
            "sentence":[choice11, choice12, choice13, choice14],
            "answer":[false, true, false, false]
        },
        "comment":comment1
    },
    {
        "statement":statement2,
        "choice":{
            "sentence":[choice21, choice22, choice23, choice24],
            "answer":[false, true, false, false]
        },
        "comment":comment2
    }
]

こんなかんじです。少ないデータで、かつ参照や検索のみできればいいということであればjsonを使うのが良いかもですね!以下参考サイトです。
» 簡単にコンテンツの一元管理が出来るJSON形式ファイル その1 | Webnoborder
FOR SE
これのおかげでだいぶソースが短くなりました。汚いですが。

<script type="text/javascript">
//初期設定
setReady();
q_size = Object.keys(qestions).length;

function setReady() {
	count = 0; //問題番号
	choice_size = 0;
	//最初の問題
	quiz();
	//最初の答え合わせ
	document.getElementById("text_a").innerHTML = "";
}
//問題表示
function quiz() {
	//問題
	document.getElementById("text_q").innerHTML = (count + 1) + "問目:" + qestions[count].statement;
	//選択肢
	console.log(choice_size)
	choice_size = qestions[count].choice.sentence.length;
	s = '<form name="myForm">';
	for (var i = 0; i < choice_size; i++) {
		tmp_sts = qestions[count].choice.sentence[i];
		s += '<input type="checkbox" name=' + tmp_sts
		s += 'id=' + tmp_sts
		s += 'value=' + tmp_sts + '>'
		s += tmp_sts + "<br>"
	}
	s += '<br><input type="button" onclick="myCheck()" value="答え合わせ"><br></form>';
	document.getElementById("text_s").innerHTML = s;
}

function myCheck(){
	var s = ""
	console.log(choice_size);
	for (var i = 0; i < choice_size; i++ ){
		if (qestions[count].choice.answer[i]){
			s += '<font color="#CF355D">  ◯ ' + qestions[count].choice.sentence[i] + "  </font>";
			console.log(s);
		}else{
			s += "  " + qestions[count].choice.sentence[i] + ", ";
		}
	}
	console.log(s);
	document.getElementById("text_a").innerHTML = s;
	count++;
	if (count < q_size) {
		quiz();
	} else {
		s = "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
		document.getElementById("text_s").innerHTML = s;
	}
}
</script>

手探りでまだまだ汚いですが、欲しい機能は揃いました。どこかのサーバに載せよう!!
TODO:デザインと採点。