【js】【json】Ruby資格対策サイト
お友達にjsonなる物があるということをきいて勉強してみました。なんとも超便利です。
jsonはJavascriptにデータをわたすための形式で、ハッシュ、配列を使って階層構造を作ることができます。
// 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:デザインと採点。