質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

javascriptを使ったクイズで,不正解の時に正しい答えをフィードバックしたいです。

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,130

score 11

javascriptを使ったクイズを作りたいのですが,不正解の時に正しい答えをフィードバックしたいです。どのようにしたら良いか,ご教授いただけないでしょうか。

/*------------------------------------------------------------------------
 * Quiz Generator Script Ranking+ 設定ファイル
 * Copyright 2012 Sawa's Factory
 * http://sawa-s.com/quiz-generator-ranking.html
------------------------------------------------------------------------*/

/*---------- オープニング&クイズ設定 ----------*/
/* クイズボックスの横幅 縦幅*/
var q_w=450;        //横幅 px  min=400
var q_h=380;        //縦幅 px  選択数の増減によって調整してください。3択:330  4択:380   5択:430
/* タイトル */
var q_title="4択クイズ";
/* オープニングメッセージ ボタン */
var opening_msg=[
    "このクイズは4択形式のクイズです。",
    "全部で10問あり、満点は100点です。",
    "あなたは何点取れるでしょうか?",
    "",
    "お名前(ハンドルネーム可)を入力してください。",
    "ランクインするとランキングに登録する事ができます。"
];
var opening_start_button="START";
/* 出題数 */
var q_no=2;
/* 出題順 0-昇順 1-ランダム */
var q_rnd=0;
/* 正解・不正解の表示 0-しない 1-する */
var q_dsp=1;
/* 正解・不正解を表示する場合、表示する秒数 */
var q_dtime=2;
/* 正解・不正解を表示する場合、サウンドを使用  0-しない 1-する */
var q_sound=0;
/* 制限時間(秒) 0-設定なし  */
var q_timer=0;
/* 選択岐をシャッフル 0-しない 1-する */
var q_sfl=1;
/* 正解・不正解を表示する 画像ファイル(入れ替える場合のみ) 不正解画像,正解画像の順 */
var img_file=["image/0a.png","image/1a.png"];
/* サウンドを鳴らす場合のサウンドファイル (入れ替える場合のみ) 不正解サウンド,正解サウンドの順 */
var sound_file=["sound/0.wav","sound/1.wav"];

/*---------- 問    題 ----------*/
var questions = [
 ["問題1", ["選択1-1", "選択1-2", "選択1-3", "選択1-4"], 1, 5]
,["問題2", ["選択2-1", "選択2-2", "選択2-3", "選択2-4"], 1, 6]
,["問題3", ["選択3-1", "選択3-2", "選択3-3", "選択3-4"], 1, 7]
,["問題4", ["選択4-1", "選択4-2", "選択4-3", "選択4-4"], 1, 8]
,["問題5", ["選択5-1", "選択5-2", "選択5-3", "選択5-4"], 1, 9]
,["問題6", ["選択6-1", "選択6-2", "選択6-3", "選択6-4"], 1, 10]
,["問題7", ["選択7-1", "選択7-2", "選択7-3", "選択7-4"], 1, 11]
,["問題8", ["選択8-1", "選択8-2", "選択8-3", "選択8-4"], 1, 12]
,["問題9", ["選択9-1", "選択9-2", "選択9-3", "選択9-4"], 1, 15]
,["問題10", ["選択10-1", "選択10-2", "選択10-3", "選択10-4"], 1, 20]
];

/*---------- エンディング設定 ----------*/
/* 一覧に登録する点数 これを0にするとクイズ参加者全員の得点を登録する。 */
var quiz_clear = 80;
/* 得点振り分けメッセージ*/
var endings = [
     [100, [
        "<span class='msg_tokuten'> う~ん、お見事!!</span>"
        ,"<span class='msg_tokuten'> !name!!name_keishou! の得点は <strong>満点</strong>でした。</span>"
        ,"",
        ,"正解数は!seikai_num!問、正解率は!percent!%です。"
    ]]
    ,[80, [
        "<span class='msg_tokuten'>う~ん。さすがですね。</span>"
        ,"<span class='msg_tokuten'>!name!!name_keishou!の得点は <strong>!tokuten!点</strong> でした。</span>"
        ,""
        ,"正解数は!seikai_num!問、正解率は!percent!%です。"
        ,"再挑戦をお待ちしています。"
    ]]
    ,[50, [
        "<span class='msg_tokuten'>なかなかやりますね。</span>"
        ,"<span class='msg_tokuten'>!name!!name_keishou!の得点は <strong>!tokuten!点</strong> でした。</span>"
        ,""
        ,"正解数は!seikai_num!問、正解率は!percent!%です。"
        ,"再挑戦をお待ちしています。"
    ]]
    ,[30, [
        "<span class='msg_tokuten'>もうちょっとです。がんばりましょう</span>"
        ,"<span class='msg_tokuten'>!name!!name_keishou!の得点は <strong>!tokuten!点</strong> でした。</span>"
        ,""
        ,"正解数は!seikai_num!問、正解率は!percent!%です。"
        ,"再挑戦をお待ちしています。"
    ]]
    ,[0, [
        "<span class='msg_tokuten'>あれ、わざと間違えたのかな。</span>"
        ,"<span class='msg_tokuten'>!name!!name_keishou!の得点は <strong>!tokuten!点</strong> でした。</span>"
        ,""
        ,"正解数は!seikai_num!問、正解率は!percent!%です。"
        ,"再挑戦をお待ちしています。"
    ]]
];
/* リスタートのボタン名 */
var restart_button_name="RESTART";
/*---------- 管理モード ----------*/
var pw="0123";
/*------------------------------------------------------------------------
 * Quiz Generator Script Ranking+
 * Copyright 2012 Sawa's Factory
 * http://sawa-s.com/quiz-generator-ranking.html
------------------------------------------------------------------------*/

var q_now=0, tokuten=0, q_tok=0, tsum=0, percent=0,seikai_num=0;
var name, dname, save_html;
var cgi_rank=0, result=0, not_list=0, listing_cache=0, ranking_cache=0;
var ranking_data = new Array();
var listing_data = new Array();
var credit="<div id='quiz_credit'>Created by <a href='http://sawa-s.com/' target='_blank'>Sawa's Factory</a></div>";
var tag_p="</p><p>",tag_br="&nbsp;<br/>";
var q_l_button="<div class='quzi_lr_open_button' onclick='cgi_read(0);'>" + listing_title + "</div>";
var q_r_button="<div class='quzi_lr_open_button' onclick='cgi_read(1);'>" + ranking_title + "</div>";
var ques = new Array();
for (i=0;  i<q_no ; i++){ques[i] = 0;}
var qs_len = questions.length;
if (qs_len < q_no){alert("エラー:出題数" + q_no + "問ですが、問題数が" + qs_len + "問しかありません。\n問題数を増やすか、出題数を減らしてください。");throw new Error(0, "");}
var seq = new Array();
for (i=0; i<qs_len; i++){seq[i] = i;}
if (q_rnd){shuffle(seq);}
$(function(){
    name =  $.cookie("quiz");
    if (name == null || name == "null"){name="";}
    var name_skip=["<span style='font-size:10px;color:blue;letter-spacing:0px;'>省略可</span>","<span style='font-size:10px;color:red;letter-spacing:0px;'>省略不可</span>"]
    var name_form="<div class='name_form'><form name='form1'>お名前<span style='font-size:11px;letter-spacing:0px;'>(HN)(最大" + name_length + "文字)</span>:" + name_skip[name_input] 
            + "&nbsp;<input type='text' name='name' class='name_form_in' size='20' maxlength='" + name_length + "' value='"+ name + "' /></form></div>";
    if (q_dsp){var q_img_div="<div id='dsp0'><img src='" + img_file[0] + "' /></div><div id='dsp1'><img src='" + img_file[1] + "' /></div>";}else{var q_img_div="";}
    if (q_dsp && q_sound){var sound_msg="<span style='font-size:11px;'>※注:音が出ます。</span><embed src='" + sound_file[0] + "' hidden='true' autostart='false' /><embed src='" + sound_file[1] + "' hidden='true' autostart='false' />";}else{var sound_msg="";}
    if (q_timer){var q_timer_div="<div id='quiz_timer'></div>";}else{var q_timer_div="";}
    var quiz_box_html="<div id='quiz_title'>" + q_title + "</div>" + "<div id='quiz_wrap'></div>" + credit  + q_img_div + q_timer_div
        + "<div id='quiz_msg'><p>"
        + opening_msg.join(tag_p) + "</p>" + sound_msg
        + name_form + "<div id='quiz_start' onclick='quiz_start();'>" + opening_start_button + "</div>" + q_l_button+ q_r_button;
    $("#quiz_box").html(quiz_box_html).width(q_w).height(q_h);
    $("#quiz_wrap").height(q_h - 75);
});

function quiz_start() {
    ranking_data=[],listing_data=[];
    name=document.form1.name.value;
    if (name_input == 1 && name == ""){
        alert("お名前を入力してください。");
    }
    else if (name == pw){admin();}
    else{
        dname=name;
        if (name != ""){$.cookie("quiz",name,{path:cookiePath,expires:cookieExpires});}
        else {dname = tokumei;}
        $("#quiz_msg").hide();
        var a_seq = new Array();
        go_question();
    }
}

function next_question(){
    q_now ++;
    if (q_now >= q_no){
        if (tokuten < 1){q_tok=0;}
        else {q_tok=Math.round(tokuten / tsum * 100);}
        percent =  Math.round(seikai_num / q_no *100);

        if (q_tok >= quiz_clear){n = setTimeout(listing_regist,1000);}
        else {n = setTimeout(ending,1000);}
    }
    else {go_question();}
}

function go_question(){
        var list_html="<div id='quiz_answer'>";
        a_seq = [];
        for (i=0; i<questions[seq[q_now]][1].length; i++){a_seq[i] = i;}
        if (q_sfl){shuffle(a_seq);}
        for (i=0; i < a_seq.length; i++){
            j = a_seq[i] + 1;
            list_html = list_html + "<div id='qan" + j + "' class='qan_list' onclick='q_answer(" + j + ");'>" + questions[seq[q_now]][1][a_seq[i]] + "</div>";
        }
        list_html += "</div>";
        $("#quiz_wrap").html("<div id='quiz_question'>" + questions[seq[q_now]][0] + "</div>" + list_html).slideDown("slow");
        if (q_timer){
            tm_count=q_timer;
            qt_interval=setInterval(quiz_timer,1000);
        }
}

function q_answer(ans){
    if (ques[q_now] == 0){
        if (q_timer){clearInterval(qt_interval);}
        ques[q_now] = 1;
        for (i=0; i < questions[seq[q_now]][1].length; i++){
            j = i + 1;
            if (ans == j){$("#qan" + j).css("background","#FFE").css("border","2px inset #eee").css("cursor","wait");}
            else{$("#qan" + j).css("background","#cfc").css("border","2px outset #6c6").css("cursor","wait");}
        }
        if (questions[seq[q_now]][2] == ans){
            tokuten = tokuten + questions[seq[q_now]][3];
            seikai_num ++;
            qa = 1;
        }
        else{qa = 0;}
        if (q_dsp){
            if (q_sound){$("#quiz_question").append("<embed src='"  + sound_file[qa] + "' autostart='true' hidden='true' loop='false' />");}
            $("#dsp" + qa ).fadeIn();
            nl=setTimeout(q_answer_close,q_dtime*1000);}
        else {nl=setTimeout(q_answer_close,500);}
    }
}

function q_answer_close(){
    tsum = tsum + questions[seq[q_now]][3];
    $("#dsp0,#dsp1").hide();
    $("#quiz_wrap").slideUp("slow");
    if (q_timer){
        $("#quiz_timer").html("");
    }
    n = setTimeout(next_question,1000);
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jm1156

    2016/08/02 08:40

    HPからそのままコピーしたようですが、、、

    「不正解のときに正しい答えを表示」を行うのは、
    答えを選択したタイミングでしょうか?

    それならば、答えを選択する部分のコードを貼ってくれませんか?

    キャンセル

  • kei344

    2016/08/02 10:43

    「正しい答えをフィードバック」とはどういう挙動でしょうか。

    キャンセル

  • oshibuchiryo5

    2016/08/02 10:56

    正しい答えの選択肢を強調表示(赤にするなど)できたら良いと考えています。

    キャンセル

  • 退会済みユーザー

    2016/08/03 13:19

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

+1

function q_answer(ans)の中の、
else{qa = 0;}
の部分の中に書けばOKです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 09:43

    ありがとうございます。「書く」というのは正答の番号を書く,ということでしょうか。

    キャンセル

  • 2016/08/03 12:55

    いえ、あなたのおっしゃる「正しい答えの選択肢を強調表示(赤にするなど)」のコードを書けばOKです。

    キャンセル

0

そのスクリプトの掲載されていたサイトで、有償カスタマイズを受けたらどうですか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 09:20

    サイトが更新されていないようで連絡もつかず困っていたところでした。申しわけありません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る