四択クイズを作成するJavaScriptコード・選択肢も作成するバージョン

2017.06.28
ーパソコン関係四択クイズで中学英単語などを勉強全ページ

このページのような四択クイズを作成するJavaScriptコードです。

 

出題ごとに自分で選択肢も作るタイプです。

 

もっと簡単に四択クイズを作れる、選択肢をランダムに作成するタイプの四択クイズのJavaScriptコードもあります。

 


前書き

＊＊＊変更＊＊＊とコメントアウトされている部分を変更して使って下さい。全部で三箇所あります。

また、「&lt」となっている部分を「<」に置換してください。

 

全問題数の部分には、全部で何問の問題があるか入力して下さい。

 

出題数は、その問題の中から、実際に何問出題するのかを入力します。

 

出題する問題は、ifの部分に下の例のように入力して下さい。


if(order[q_number]==1){
  question="&ltu>&ltstrong>use(ユーズ)&lt/strong>&lt/u>の意味は何でしょうか?";
  select1="使う";
  select2="作る";
  select3="頼む";
  select4="話す";
  correct="1";

questionは、strongタグで囲まれた部分以外も変更して大丈夫です。

 

デフォルトでは、「の意味は何でしょうか?」という問いかけになっていますが、この部分も変更できます。

 

select1～4に選択肢を入力します。

correctには正解の番号を半角で入力します。

 

else ifの部分が足りなくなったらコピペして足し、余ったら余分を消して下さい。

 







四択クイズを作成するJavaScriptコード・選択肢も作成するバージョン

 

↓↓↓以下コードです



&ltdiv id="sentence">&lt/div>
&ltscript>
//＊＊＊変更＊＊＊全問題数を入力
let total_q_number=30;
//＊＊＊変更＊＊＊全問題数中、何問出題するか入力
let total_number=10;
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 order=Array(total_number);
order.fill(0);
var k=0;
//＊＊＊変更＊＊＊例のように問題・選択肢・正解番号を入力
function select_question(){
  if(order[q_number]==1){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==2){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==3){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==4){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==5){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==6){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==7){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==8){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==9){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==10){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==11){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==12){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==13){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==14){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==15){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==16){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==17){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==18){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==19){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==20){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==21){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==22){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==23){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==24){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==25){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==26){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
  else if(order[q_number]==27){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="3";
  }
  else if(order[q_number]==28){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="4";
  }
  else if(order[q_number]==29){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="1";
  }
  else if(order[q_number]==30){
    question="&ltu>&ltstrong>()&lt/strong>&lt/u>の意味は何でしょうか?";
    select1="";
    select2="";
    select3="";
    select4="";
    correct="2";
  }
}
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 = "&ltstrong>&ltfont size='5' color='#ff0000'>選択肢[" + correct + "]　正解！！&lt/font>&lt/strong>　　&ltinput id='next_but' type='button' value='クリックして次へ進もう' onclick='next();'/>&ltbr>&ltbr>";
        c_number++;
        columnq = document.getElementById("c_num");
        columnq.innerHTML = c_number;
    }
    else if(correct != answer && q_number != total_number-1){
        column.innerHTML = "&ltstrong>&ltfont size='5' color='#0000ff'>残念！！正解は[" + correct + "]&lt/font>&lt/strong>　　&ltinput id='next_but' type='button' value='クリックして次へ進もう' onclick='next();'/>&ltbr>&ltbr>";
    }
    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&lt=25){
            compliment="&ltfont color='#000077' size='10'>&lti>try hard ...&lt/i>&lt/font>";
        }
        else if(ratio>25 && ratio&lt=70){
            compliment="&ltfont color='#005500' size='10'>&lti>way to go&lt/i>&lt/font>";
        }
        else if(ratio>70 && ratio&lt=99){
            compliment="&ltfont color='#ff4500' size='10'>&lti>＊better luck next time＊&lt/i>&lt/font>";
        }
        else if(ratio>99){
            compliment="&ltfont color='#880000' size='10'>&lti>excellent!!&lt/i>&lt/font>";
        }
        else{
            compliment="さらに研鑽を積もう";
        }
        column.innerHTML = "&ltstrong>&ltfont size='5' color='#ff0000'>選択肢[" + correct + "]　正解！！&lt/font> &ltfont size='5'>全問終了!!お疲れさまでした。&lt/font>&lt/strong>&ltbr>&ltbr>&ltfont size='5'>かかった時間は&ltstrong>" + time + "秒&lt/strong>　正答率は" + c_number + "/" + total_number + "=&ltstrong>" + ratio + "％&lt/strong>でした&lt/font>&ltbr>&ltbr>&ltstrong>" + compliment + "&lt/strong>&ltbr>&ltbr>&ltinput id='next_but' type='button' value='もう一度挑戦する' onclick='reflesh();'/>&ltbr>&ltbr>&ltinput id='next_but' type='button' value='前のページに戻る' onclick='last();'/>&ltbr>&ltbr>";
        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&lt=25){
            compliment="&ltfont color='#000077' size='10'>&lti>try hard ...&lt/i>&lt/font>";
        }
        else if(ratio>25 && ratio&lt=70){
            compliment="&ltfont color='#005500' size='10'>&lti>way to go&lt/i>&lt/font>";
        }
        else if(ratio>70 && ratio&lt=99){
            compliment="&ltfont color='#ff4500' size='10'>&lti>＊better luck next time＊&lt/i>&lt/font>";
        }
        else if(ratio>99){
            compliment="&ltfont color='#880000' size='10'>&lti>excellent!!&lt/i>&lt/font>";
        }
        else{
            compliment="さらに研鑽を積もう";
        }
        column.innerHTML = "&ltstrong>&ltfont size='5' color='#0000ff'>残念！！正解は[" + correct + "]&lt/font>　&ltfont size='5'>全問終了!!お疲れさまでした。&lt/font>&lt/strong>&ltbr>&ltbr>&ltfont size='5'>かかった時間は&ltstrong>" + time + "秒&lt/strong>　正答率は" + c_number + "/" + total_number + "=&ltstrong>" + ratio + "％&lt/strong>でした&lt/font>&ltbr>&ltbr>&ltstrong>" + compliment + "&lt/strong>&ltbr>&ltbr>&ltinput id='next_but' type='button' value='もう一度挑戦する' onclick='reflesh();'/>&ltbr>&ltbr>&ltinput id='next_but' type='button' value='前のページに戻る' onclick='last();'/>&ltbr>&ltbr>";
    }
    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("but1");
    column1.value = "[1]　" + select1;
    column2 = document.getElementById("but2");
    column2.value = "[2]　" + select2;
    column3 = document.getElementById("but3");
    column3.value = "[3]　" + select3;
    column4 = document.getElementById("but4");
    column4.value = "[4]　" + select4;
}
while(order[total_number-1] == 0 && k&lt100){
    r=Math.floor(Math.random() * total_q_number + 1);
    for(let j=0; j&lttotal_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&lttotal_number; i++){
        order[i]=i+1;
    }
}
qu_number=q_number+1;
select_question();
var text = ""
text = total_number + "問中　&ltspan id='q_num'>" + qu_number + "&lt/span>問目　正解数&ltspan id='c_num'>" + c_number + "&lt/span>";
text = text + "&ltp>&ltdiv id='quest'>" + question + "&lt/div>&ltbr>選択肢をクリックしてください&lt/p>&ltbr>";
text = text + "&ltdiv id='output'>&lt/div>";
text = text + "&ltinput id='but1' type='button' style='text-align: left; width:8%;font-size:15px;' value='[1]' onclick='cor1();'/>&ltspan id='quest1'>　" + select1 + "&lt/span>&ltbr>&ltbr>";
text = text + "&ltinput id='but2' type='button' style='text-align: left; width:8%;font-size:15px;' value='[2]' onclick='cor2();'/>&ltspan id='quest2'>　" + select2 + "&lt/span>&ltbr>&ltbr>";
text = text + "&ltinput id='but3' type='button' style='text-align: left; width:8%;font-size:15px;' value='[3]' onclick='cor3();'/>&ltspan id='quest3'>　" + select3 + "&lt/span>&ltbr>&ltbr>";
text = text + "&ltinput id='but4' type='button' style='text-align: left; width:8%;font-size:15px;' value='[4]' onclick='cor4();'/>&ltspan id='quest4'>　" + select4 + "&lt/span>&ltbr>&ltbr>";
document.getElementById("sentence").innerHTML = text;
time=Date.now();
&lt/script>

↑↑↑コードここまで

 




四択クイズで勉強の関連ページ

タイトルとURLをコピーしました