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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
HTMLタグに複数のクラスを設定...
-
javascriptテキストBOX色を元に...
-
変数名をどのようにつけるのが...
-
HTMLとJavaScriptで作ったタイ...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
jQueryで同じid属性が複数あっ...
-
表示・非表示のスクリプトで、...
-
動的にHTMLコンテンツを吹き出...
-
IEの半角スペースの連続とinner...
-
401エラードキュメントを401.ht...
-
javascriptでURLにマウスオーバー
-
複数のリンク画像を一定時間で...
-
javascriptでオブジェクトの重...
-
VBScriptでXMLのデータを取得す...
-
HTMLとJavaScriptで作ったタイ...
-
多次元配列を連想配列へ変換したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
変数名をどのようにつけるのが...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
【HP作成】クリックすると下...
-
jQueryで同じid属性が複数あっ...
-
jqueryを使って無駄なspanタグ...
-
jQueryでクリックされた要素のi...
-
バッチファイルでカウントアッ...
-
[急ぎ] videoタグで埋め込んだm...
-
getElementByIdの戻り値がnull...
-
javascriptでpostした値が取得...
-
jqueryで要素の中身を要素の外...
-
IFRAMEの表示/非表示を切り替え...
おすすめ情報