四択クイズを作成するJavaScriptコード・選択肢も作成するバージョン
＊＊＊変更＊＊＊とコメントアウトされている部分を変更して使って下さい。全部で三箇所あります。 全問題数の部分には、全部で何問の問題があるか入力して下さい。 出題数は、その問題の中から、実際に何問出題するのかを入力します。 出題する問題は、ifの部分に下の例のように入力して下さい。
if(order[q_number]==1){
question="<u><strong>use(ユーズ)</strong></u>の意味は何でしょうか?";
select1="使う";
select2="作る";
select3="頼む";
select4="話す";
correct="1";
questionは、strongタグで囲まれた部分以外も変更して大丈夫です。 デフォルトでは、「の意味は何でしょうか?」という問いかけになっていますが、この部分も変更できます。 select1～4に選択肢を入力します。 correctには正解の番号を半角で入力します。 else ifの部分が足りなくなったらコピペして足し、余ったら余分を消して下さい。 ↓↓↓以下コードです
<div id="sentence"></div>
<script>
//＊＊＊変更＊＊＊全問題数を入力
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="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==2){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==3){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==4){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==5){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==6){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==7){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==8){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==9){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==10){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==11){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==12){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==13){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==14){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==15){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==16){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==17){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==18){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==19){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==20){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==21){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==22){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==23){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==24){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==25){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==26){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="2";
}
else if(order[q_number]==27){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="3";
}
else if(order[q_number]==28){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="4";
}
else if(order[q_number]==29){
question="<u><strong>()</strong></u>の意味は何でしょうか?";
select1="";
select2="";
select3="";
select4="";
correct="1";
}
else if(order[q_number]==30){
question="<u><strong>()</strong></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 = "<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><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>";
}
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<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>