プロが教えるわが家の防犯対策術!

Javascriptでクイズ問題を作成したのですが、今の状態に正解した時の説明文を加えたいのですが、
わかる方がいらっしゃいましたら教えていただけますでしょうか。
よろしくお願いします。
<h1>
水のなるほどクイズ
</h1>

<hr />

<div style="height:500px;">
<div style="background-image : url(); background-repeat:no-repeat; -moz-background-size:100% auto; background-size:100% auto;">
<br />

<div style="margin-left:60px; margin-top:10px;">
<h2>
問 題
</h2>

<div id="text_q">
</div>

<h2>
選 択
</h2>

<div id="text_s">
</div>

<h2>
解 答
</h2>

<div id="text_a">
</div>
<script type="text/javascript">
//<![CDATA[
//問題と解答
qa = new Array();
qa[0] = ["人間の体重のうち、水はどのくらいあるでしょう?"," 15% "," 35% "," 65% ",3];
qa[1] = ["私たちの体が1日に必要な水の量はどのくらいでしょう?"," コップ1杯分 "," ジュース7本分 "," ペットボトル(500cc)10本分 ",2]
//初期設定

q_sel = 3; //選択肢の数
setReady();

//初期設定
function setReady() {
count = 0; //問題番号
ansers = new Array(); //解答記録

//最初の問題
quiz();
}

//問題表示
function quiz() {
//問題
document.getElementById("text_q").innerHTML = (count + 1) + "問目: " + qa[count][0];
//選択肢
s = "";
for (n=1;n<=q_sel;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]) {
//正解
s += "○".fontsize(6) .fontcolor("red") + qa[count][num];
ansers[count] = "○".fontsize(6) .fontcolor("red");
} else {
s += "×".fontsize(6) .fontcolor("blue") + qa[count][num];
ansers[count] = "×".fontsize(6) .fontcolor("blue");
}
document.getElementById("text_a").innerHTML = s;
//次の問題を表示
count++;
if (count < qa.length) {
quiz();
} else {
//終了
s = "<table border='2' width='3'><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 = "【<a href='javascript:history.back()'>前のページに戻る<\/a>】";
s += "【<a href='javascript:setReady()'>同じ問題を最初から<\/a>】";
s += "【<a href=''>次の問題に進む<\/a>】";
document.getElementById("text_s").innerHTML = s;
}
}
//]]>
</script>

</div>
</div>
</div>

A 回答 (1件)

qa配列を拡張して解説文をつけておき、


正解時にそれを表示するだけでは?
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!