blog.waterlow.work

Ruby, Rails, js, etc...

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

今後は問題とその解説を用意するところを頑張ります!