概要




このページのような英単語専用の四択クイズを作成するJavaScriptコードを紹介します。 入力した問題と答えの中から、ランダムに問題と選択肢を出力します。 完全に答えと選択肢をすべて自分で作るバージョンの四択クイズコードもあります。







四択クイズを作成するJavaScriptコード・選択肢はランダム表示バージョン




***変更***とコメントアウトされている部分を変更して使って下さい。全部で二箇所あります。 出題数は、全問題の中から実際に何問出題するかを入力します。 出題する問題と答えについては、中が空欄になっているカッコの部分に、下の例のように入力して下さい。

["use(ユーズ)","使う"],
["()",""],

当サイトで掲載している英単語問題では、()の前に単語を入れ、カッコの中にカタカナで読み方を入れています。 読み方を入れない場合は最初の()を消してください。 後ろの""で囲まれている中には、正解の選択肢を入力します。 出題時には、入力されている全ての選択肢から、ランダムで3つの間違いの選択肢が選ばれます。

["()",""],

が足りなくなったらコピペで追加し、余ったら余分を消して下さい。 ↓↓↓以下コードです



<div id="sentence"></div>
<script>
<script language="javascript" type="text/javascript">
var ratio;
var time;
var q_number=0;
var question;
var select1;
var select2;
var select3;
var select4;
var correct;
var answer;
var compliment;
var c_number=0;
var q_order=Array(4);
var qr_order=Array(4);
var qr_order2=Array(4);
var k=0;

//***変更***選択肢と答え
var q_array=[
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
["()",""],
];
let total_q_number=q_array.length;
//***変更***問題全体から何問出題するか
let total_number=15;
var order=Array(total_number);
//問題の順番決め
k=0;
i=0;
j=0;
while(order[total_number-1] == null && k<100){
    r=Math.floor(Math.random() * total_q_number + 1);
    for(let j=0; j<total_number; j++){
        if(order[j]==r-1){
            break;
        }
        if(order[j]==null){
            order[j]=r-1;
            break;
        }
    }
    k=k+1;
}
if(k==100){
    for(let i=0; i<total_number; i++){
        order[i]=i+1;
    }
}
function select_question(){
    //問題の順番決定
    q_order=Array(4);
    qr_order=Array(4);
    qr_order2=Array(4);
    k=0;
    j=0;
    i=0;
    while(q_order[3] == null && k<100){
        r=Math.floor(Math.random() * 4 + 1);
        for(let j=0; j<4; j++){
            if(q_order[j]==r){
                break;
            }
            if(q_order[j]==null){
                q_order[j]=r;
                break;
            }
        }
        k=k+1;
    }
    if(k==100){
        for(let i=0; i<4; i++){
            q_order[i]=i+1;
        }
    }
    //全問題数から配列生成
    qr_order[0]=order[q_number];
    k=0;
    j=0;
    i=0;
    while(qr_order[3] == null && k<100){
        r=Math.floor(Math.random() * total_q_number +1);
        for(let j=0; j<4; j++){
            if(qr_order[j]==r-1){
                break;
            }
            if(qr_order[j]==null){
                qr_order[j]=r-1;
                break;
            }
        }
        k=k+1;
    }
    if(k==100){
        for(let i=1; i<4; i++){
            qr_order[i]=i+1;
        }
    }
    for(let i=0; i<4; i++){
        qr_order2[q_order[i]-1]=qr_order[i];
    }
    question=String(q_array[Number(qr_order[0])][0]);
    select1=String(q_array[Number(qr_order2[0])][1]);
    select2=String(q_array[Number(qr_order2[1])][1]);
    select3=String(q_array[Number(qr_order2[2])][1]);
    select4=String(q_array[Number(qr_order2[3])][1]);
    correct=String(q_order[0]);
}

function cor1(){
    answer="1";
    discri_answer();
}
function cor2(){
    answer="2";
    discri_answer();
}
function cor3(){
    answer="3";
    discri_answer();
}
function cor4(){
    answer="4";
    discri_answer();
}

function discri_answer() {
    column = document.getElementById("output");
    if(correct == answer && q_number != total_number-1){
        column.innerHTML = "<strong><font size='5' color='#ff0000'>選択肢[" + correct + "] 正解!!</font></strong> <input id='next_but' type='button' value='クリックして次へ進もう' onclick='next();'/><br><br>";
        c_number++;
        columnq = document.getElementById("c_num");
        columnq.innerHTML = c_number;
    }
    else if(correct != answer && q_number != total_number-1){
        column.innerHTML = "<strong><font size='5' color='#0000ff'>残念!!正解は[" + correct + "]</font></strong> <input id='next_but' type='button' value='クリックして次へ進もう' onclick='next();'/><br><br>";
    }
    else if(correct == answer && q_number == total_number-1){
        c_number++;
        ratio=c_number/total_number*100;
        ratio=ratio.toFixed();
        time=(Date.now()-time)/1000;
        compliment="";
        if(ratio<=25){
            compliment="<font color='#000077' size='10'><i>try hard ...</i></font>";
        }
        else if(ratio>25 && ratio<=70){
            compliment="<font color='#005500' size='10'><i>way to go</i></font>";
        }
        else if(ratio>70 && ratio<=99){
            compliment="<font color='#ff4500' size='10'><i>*better luck next time*</i></font>";
        }
        else if(ratio>99){
            compliment="<font color='#880000' size='10'><i>excellent!!</i></font>";
        }
        else{
            compliment="さらに研鑽を積もう";
        }
        column.innerHTML = "<strong><font size='5' color='#ff0000'>選択肢[" + correct + "] 正解!!</font> <font size='5'>全問終了!!お疲れさまでした。</font></strong><br><br><font size='5'>かかった時間は<strong>" + time + "秒</strong> 正答率は" + c_number + "/" + total_number + "=<strong>" + ratio + "%</strong>でした</font><br><br><strong>" + compliment + "</strong><br><br><input id='next_but' type='button' value='もう一度挑戦する' onclick='reflesh();'/><br><br><input id='next_but' type='button' value='前のページに戻る' onclick='last();'/><br><br>";
        columnq = document.getElementById("c_num");
        columnq.innerHTML = c_number;
    }
    else if(correct != answer && q_number == total_number-1){
        ratio=c_number/total_number*100;
        ratio=ratio.toFixed(2)
        time=(Date.now()-time)/1000;
        compliment="";
        if(ratio<=25){
            compliment="<font color='#000077' size='10'><i>try hard ...</i></font>";
        }
        else if(ratio>25 && ratio<=70){
            compliment="<font color='#005500' size='10'><i>way to go</i></font>";
        }
        else if(ratio>70 && ratio<=99){
            compliment="<font color='#ff4500' size='10'><i>*better luck next time*</i></font>";
        }
        else if(ratio>99){
            compliment="<font color='#880000' size='10'><i>excellent!!</i></font>";
        }
        else{
            compliment="さらに研鑽を積もう";
        }
        column.innerHTML = "<strong><font size='5' color='#0000ff'>残念!!正解は[" + correct + "]</font> <font size='5'>全問終了!!お疲れさまでした。</font></strong><br><strong>かかった時間は" + time + "秒 正答率は" + c_number + "/" + total_number + "=" + ratio + "%でした</strong> <br><strong>" + compliment + "</strong><br><br><input id='next_but' type='button' value='もう一度挑戦する' onclick='reflesh();'/><br><br><input id='next_but' type='button' value='前のページに戻る' onclick='last();'/><br><br>";
    }
    document.getElementById("but1").disabled = true;
    document.getElementById("but2").disabled = true;
    document.getElementById("but3").disabled = true;
    document.getElementById("but4").disabled = true;
}

function reflesh(){
    window.location.reload();
}
function last(){
    window.history.back();
}

function next() {
    q_number++;
    column = document.getElementById("output");
    column.innerHTML = "";
    document.getElementById("but1").disabled = false;
    document.getElementById("but2").disabled = false;
    document.getElementById("but3").disabled = false;
    document.getElementById("but4").disabled = false;
    select_question()
    if(q_number!=total_number){
        columnq = document.getElementById("q_num");
        columnq.innerHTML = q_number+1;
    }
    columnq = document.getElementById("quest");
    columnq.innerHTML = question;
    column1 = document.getElementById("quest1");
    column1.innerHTML = " " + select1;
    column2 = document.getElementById("quest2");
    column2.innerHTML = " " + select2;
    column3 = document.getElementById("quest3");
    column3.innerHTML = " " + select3;
    column4 = document.getElementById("quest4");
    column4.innerHTML = " " + select4;
}
while(order[total_number-1] == 0 && k<100){
    r=Math.floor(Math.random() * total_q_number + 1);
    for(let j=0; j<total_number; j++){
        if(order[j]==r){
            break;
        }
        if(order[j]==0){
            order[j]=r;
            break;
        }
    }
    k=k+1;
}
if(k==100){
    for(let i=0; i<total_number; i++){
        order[i]=i+1;
    }
}
qu_number=q_number+1;
select_question();
var text = ""
text = total_number + "問中 <span id='q_num'>" + qu_number + "</span>問目 正解数<span id='c_num'>" + c_number + "</span>";
text = text + "<p><div id='quest'>" + question + "</div><br>の意味は何でしょうか?選択肢をクリックしてください</p><br>";
text = text + "<div id='output'></div>";
text = text + "<input id='but1' type='button' style='text-align: left; width:8%;font-size:15px;' value='[1]' onclick='cor1();'/><span id='quest1'> " + select1 + "</span><br><br>";
text = text + "<input id='but2' type='button' style='text-align: left; width:8%;font-size:15px;' value='[2]' onclick='cor2();'/><span id='quest2'> " + select2 + "</span><br><br>";
text = text + "<input id='but3' type='button' style='text-align: left; width:8%;font-size:15px;' value='[3]' onclick='cor3();'/><span id='quest3'> " + select3 + "</span><br><br>";
text = text + "<input id='but4' type='button' style='text-align: left; width:8%;font-size:15px;' value='[4]' onclick='cor4();'/><span id='quest4'> " + select4 + "</span><br><br>";
document.getElementById("sentence").innerHTML = text;
time=Date.now();
</script>

↑↑↑コードここまで







関連ページと広告