【Ruby】【js】資格対策サイトプロトタイプ
資格サイトで問題を解く部分のプロトタイプを作ってみました。
Javascriptのほうはほとんどコピペですが…。
rails版
js版
railsのほうはscaffordで問題、選択肢、正解となる選択肢の3テーブルを作ってデータベースと連携する機能を作ってます。おそらく問題と正解を保持しておくだけならrailsは使わなくとも良さそうです。まだまだ勉強不足が否めません!!
※questionの順番の付け方を間違えて消したため、questionIdの順番がおかしくなってしまいました。
class StudyController < ApplicationController def result if request.post? then @result = [] Choice.find_all_by_question_id(params['question_id']).each do |choice| condition1 = params[choice.id.to_s] condition2 = !Answer.where(:question_id => params['question_id'], :choice_id => choice.id).empty? if (condition1 && condition2) then @result << "ok" elsif !(condition1 || condition2) then @result << "ok" else @result << "ng" end end p @result end end def index arr = [0, 1, 3] @tmp_question_id = arr[rand(3)] + 1 @tmp_question = Question.find(@tmp_question_id) @tmp_choice = Choice.find_all_by_question_id(@tmp_question_id) end end
Javascriptは以下のサイトを参考にしました。わかりやすかった!!
「三択クイズ」のソースと解説
JavaScriptで配列をシャッフル - Weblog - Hail2u.net
あと問題の解説をどこかに格納したいのですが、どこに格納するにせよコードが汚くなりますね。
あと今後はrailsのほうではできている複数選択の問題もJavascriptで作ります。
//Arrayをshuffleする関数を定義 Array.prototype.shuffle = function () { var list = this.concat(); var i = list.length; while (--i) { var j = parseInt(Math.random() * (i + 1)); if (i == j) continue; var k = list[i]; var l = list[j]; list[i] = l; list[j] = k; } return list; } //問題と解答 //["question sentence", "choice1", "choice2", "choice3", answer_number] qa = new Array(); qa[0] = ["イルカを漢字で書くとどれ?","海豚","海牛","河豚",1]; qa[1] = ["クラゲを漢字で書くとどれ?","水浮","水母","水星",2]; qa[2] = ["カタツムリを漢字で書くとどれ?","禍牛","鍋牛","蝸牛",3]; qa[3] = ["バッタを漢字で書くとどれ?","飛蝗","飛蟻","飛脚",1]; qa[4] = ["タツノオトシゴを英語にするとどれ?","sea fish","sea horse","sea dragon",2]; qa[5] = ["マグロを英語にするとどれ?","funa","suna","tuna",3]; qa[6] = ["トンボを英語にするとどれ?","fly","dragonfly","butterfly",2]; qa[7] = ["ヒトデを英語にするとどれ?","starfish","starshell","starmine",1]; qa[8] = ["恒星の中で最も明るい星は?","デネブ","スピカ","シリウス",3]; qa[9] = ["惑星の中で最も重たいのはどれ?","太陽","木星","天王星",2]; //初期設定 q_sel = 3; //選択肢の数 q_max = 10; //出題数 q_pos = 0; //配列qaの中で問題文の書いてある箇所 setReady(); function setReady() { qa = qa.shuffle(); //出題順をランダムに count = 0; //問題番号 ansers = new Array(); //解答記録 //最初の問題 quiz(); //最初の答え合わせ document.getElementById("text_a").innerHTML = ""; } //問題表示 function quiz() { //問題 document.getElementById("text_q").innerHTML = (count + 1) + "問目:" + qa[count][q_pos]; //選択肢 var s, n; s = ""; for (n=1;n<=q_sel;n++) { if (qa[count][n] != "") { s += "【<a href='javascript:anser(" + n + ")'>" + n + ":" + qa[count][n] + "</a>】"; } } document.getElementById("text_s").innerHTML = s; } //解答表示 function anser(num) { var s; s = (count + 1) + "問目:"; //答え合わせ if (num == qa[count][q_sel + 1]) { //正解 ansers[count] = "○"; } else { ansers[count] = "×"; } s += ansers[count] + qa[count][num]; document.getElementById("text_a").innerHTML = s; //次の問題を表示 count++; if (count < qa.length) { quiz(); } else { //終了 s = "<table border='2'><caption>成績発表</caption>"; //1行目 s += "<tr><th>問題</th>"; for (n=0;n<qa.length;n++) { s += "<th>" + (n+1) + "</th>"; } s += "</tr>"; //2行目 s += "<tr><th>成績</th>"; for (n=0;n<qa.length;n++) { s += "<td>" + ansers[n] + "</td>"; } s += "</tr>"; s += "</table>"; document.getElementById("text_q").innerHTML = s; //次の選択肢 s = "【<a href='javascript:setReady()'>同じ問題を最初から</a>】"; document.getElementById("text_s").innerHTML = s; } }
今後は問題とその解説を用意するところを頑張ります!