JavaScript入門講座｜クイズを作ってみよう【サンプルあり】 | ページ 2

三択クイズを作ってみよう
1. 正解・不正解の判定と次の問題の表示
  1. 回答ボタンとリスト引数
  2. function関数とif分岐で当たりハズレを判別する
    1. if分岐と引数を使って正解か判別する
    2. 文字を表示する
2. 全体のコードの確認

三択クイズを作ってみよう

正解・不正解の判定と次の問題の表示

うさタブ

次は正解・不正解の判定機を作るッピ！

ここは一気にコードを公開するッピよ～

JavaScript

//次の問題を表示するためのプログラムです
function Q_(oxq) {

	if (oxq === 0){
	
	 r_1 = Q.length / 5;
	 r_2 = Math.floor( Math.random() * r_1 );
	 R = (r_2 * 5);

 	 document.getElementById("ox").innerHTML = '';
	 document.getElementById("quiz").innerHTML = '';

	 quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');

	} else if (oxq === 1) {//正解時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';

	} else if (oxq === 2) {//失敗時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>不正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';
	}
}

HTML

<script>
document.write('<p id="ox"></p>');

document.write('<p id="quiz">');
document.write(Q[R+0] +'<br/>');
document.write('<button'+ Q[R+1] +'</button><br/>');
document.write('<button'+ Q[R+2] +'</button><br/>');
document.write('<button'+ Q[R+3] +'</button><br/>');
document.write('</p>');

document.write('<p id="next"><button onClick="Q_(0);">次の問題へ</button></p>');
</script>

ユウキ

お！　できた～！

全体のコード

<html>
<head>
<script>
let Q = [//クイズ
'Q.日本で一番高い山は？',
' onclick="Q_(1);" >富士山',
' onclick="Q_(2);" >北岳', 
' onclick="Q_(2);" >奥穂高岳', 
'日本で一番高い山は富士山。なんと3,776Mもあります。',

'Q.アメリカ合衆国の首都はどこでしょう？', 
' onclick="Q_(1);" >ワシントンDC',
' onclick="Q_(2);" >ニューヨーク',
' onclick="Q_(2);" >ロサンゼルス',
'常識といえば常識ですが、意外と間違いやすいのがこのクイズ。<br/>正解はワシントンDC。ニューヨークではりませんよ。',

'Q.世界三大珍味は何？', 
' onclick="Q_(2);" >うに、からすみ、このわた',
' onclick="Q_(2);" >すし、らーめん、てんぷら',
' onclick="Q_(1);" >フォアグラ、キャビア、トリュフ',
'世界三大珍味は一般的にキャビア・フォアグラ・トリュフと言われています。',

'Q.次のうち、イタリアにないものなーんだ？', 
' onclick="Q_(2);" >ピザ',
' onclick="Q_(2);" >アクアパッツァ',
' onclick="Q_(1);" >ナポリタン',
'正解はナポリタン。ナポリにナポリタンはありません！',

'Q.日本で初めてノーベル賞を取った人は誰でしょう？', 
' onclick="Q_(2);" >川端康成',
' onclick="Q_(1);" >湯川秀樹',
' onclick="Q_(2);" >佐藤栄作',
'日本初のノーベル賞を受賞したのは湯川秀樹さん。',

'Q.ハロウィンで子供がお菓子を貰うお馴染みのセリフはなーんだ？', 
' onclick="Q_(2);" >ハッピーハロウィーン',
' onclick="Q_(1);" >トリック・オア・トリート ',
' onclick="Q_(2);" >メリークリスマス',
'「お菓子をくれなきゃイタズラするよ」でおなじみのこのフレーズ。<br/>ハロウィーンは、もともと古代ケルト民族でのサウィン祭りが起源といわれています。',
];

let r_1 = Q.length / 5;//クイズを出すための変数
let r_2 = Math.floor( Math.random() * r_1 ) ;
let R = (r_2 * 5) ;//クイズを出すための変数


//次の問題を表示するためのプログラムです
function Q_(oxq) {

	if (oxq === 0){
	
	 r_1 = Q.length / 5;
	 r_2 = Math.floor( Math.random() * r_1 );
	 R = (r_2 * 5);

 	 document.getElementById("ox").innerHTML = '';
	 document.getElementById("quiz").innerHTML = '';

	 quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');

	} else if (oxq === 1) {//正解時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';

	} else if (oxq === 2) {//失敗時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>不正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';
	}
}

</script>
</head>
<body>

<script>
document.write('<p id="ox"></p>');

document.write('<p id="quiz">');
document.write(Q[R+0] +'<br/>');
document.write('<button'+ Q[R+1] +'</button><br/>');
document.write('<button'+ Q[R+2] +'</button><br/>');
document.write('<button'+ Q[R+3] +'</button><br/>');
document.write('</p>');

document.write('<p id="next"><button onClick="Q_(0);">次の問題へ</button></p>');
</script>

</body>
</html>

うさタブ

今度はこのコードをじっくり解説するッピよ～！

回答ボタンとリスト引数

うさタブ

まずは問題文を表示するプログラムッピ！

ユウキ

問題文の表示？

さっきやらなかったっけ？？

うさタブ

さっきの

document.write(Q[R+0] +'<br/>');
document.write(Q[R+1] +'<br/>');
document.write(Q[R+2] +'<br/>');
document.write(Q[R+3] +'<br/>');

これだけでは選択肢のボタンを追加できないッピ！

うさタブ

ボタンとは

という、押すと新しいアクションをするものッピ！

うさタブ

これを使って当たりハズレを決めるプログラムを勉強していくッピよ～

ユウキ

オッケー！

うさタブ

上の

document.write(Q[R+0] +'<br/>');
document.write(Q[R+1] +'<br/>');
document.write(Q[R+2] +'<br/>');
document.write(Q[R+3] +'<br/>');

コードを消して、新しく書いたコードがこれッピ！

document.write('<p id="ox"></p>');

document.write('<p id="quiz">');
document.write(Q[R+0] +'<br/>');
document.write('<button'+ Q[R+1] +'</button><br/>');
document.write('<button'+ Q[R+2] +'</button><br/>');
document.write('<button'+ Q[R+3] +'</button><br/>');
document.write('</p>');

document.write('<p id="next"><button onClick="Q_(0);">次の問題へ</button></p>');

うさタブ

↑のコードをざっくり説明すると

<p id段落を作ります=“ox“></p>住所(id)はoxです //当たりハズレを表示

<p id段落を作ります=“quiz“>住所(id)はquizです//問題文とボタンを表示
★問題文を表示★<br/>改行してください
<buttonボタンを作って>回答ボタン１</button>ボタンを終了して <br/>改行してください
<button>回答ボタン２</button> <br/>
<button>回答ボタン３</button> <br/>
</p>段落を終了して

<p id=段落を作って“next“　住所(id)はnextです><button onClickこのボタンをクリックしたら=“Q_(0);“このプログラムを実行してね> 次の問題へ </button></p>段落を終了してください

という意味ッピ！

うさタブ

document.write(Q[R+1] +'<br/>');

元のコードにボタン<button>を加えて

document.write('<button'+ Q[R+1] +'</button><br/>');

にしたのが大幅に変わった点ッピ！

うさタブ

そして問題文にも

let Q = [//クイズ
'Q.日本で一番高い山は？',
' onclick="Q_(1);" >富士山',
' onclick="Q_(2);" >北岳', 
' onclick="Q_(2);" >奥穂高岳', 
'日本で一番高い山は富士山。なんと3,776Mもあります。',
];

と、答えの中に

 onclick="Q_(1);" >

 onclick="Q_(2);" >

と引数を付け加えたッピ！

うさタブ

この document.write (); の <button> と onclick=”Q_(1);” >を組み合わせることによって

document.write('<button'+ Q[R+1] +'</button><br/>');

が

<buttonボタンを作ってください onclick　クリックしたら=”Q_関数 Q_ を実行　(1引数は１です);” > 回答ボタン１ </button>ボタンを終了してください<br/>　改行してください

という意味になるッピ！

ユウキ

んん？

引数ってなんだ～？？

うさタブ

良い質問ッピ！

引数というのは、

プログラムセットfunction関数で使われる仮の変数ッピ！

ユウキ

仮の変数～？

うさタブ

ふふふふふ

詳しくは次のfunctionの項目で説明するッピよ～

function関数とif分岐で当たりハズレを判別する

うさタブ

ひとまずここでfunction関数について説明するッピ！

うさタブ

function関数とは

function 関数名( 引数 ) { 命令文 ;}

でプログラムセットをつくることッピ！

そしてこの引数に入力した、数字や文字などで、正解や不正解・・・プログラムを実行するかしないかを決めることができるッピよ～

JavaScript入門講座｜命令文のセット【関数】ついて学ぼう

JavaScript入門｜命令文のセット【関数】ついて学ぼう｜会話形式で楽しく学べる｜関数functionについて学ぼう

if分岐と引数を使って正解か判別する

うさタブ

このfanction関数にさらにif文を使って、正解かどうか判別するプログラムをつくることができるッピ！

うさタブ

こんな感じに判別プログラムをつくるッピよ～

function Q_(oxq) { 
        if (oxq === 0){ 次の問題を表示するプログラム }
        if (oxq === 1){ 【当たり】のプログラム } 
        if (oxq === 2){ 『ハズレ』 のプログラム  } 
}

うさタブ

これは

functionプログラムセット Q_(oxq引数oxq) {
ifもしも (oxq引数が === 00なら){ 次の問題を表示するプログラムを実行 }
else ifもしもそれ以外で (oxq === 1１なら){ 【当たり】のプログラム を実行 }
else if もしもそれ以外で(oxq === 2２なら){ 『ハズレ』のプログラム を実行 }
}

っていう意味ッピ！

うさタブ

実際のプログラムはこんなコードになっているッピ

//次の問題を表示するためのプログラムです
function Q_(oxq) {

	if (oxq === 0){//次の問題を表示するプログラムを実行
	
	 r_1 = Q.length / 5;
	 r_2 = Math.floor( Math.random() * r_1 );
	 R = (r_2 * 5);

 	 document.getElementById("ox").innerHTML = '';
	 document.getElementById("quiz").innerHTML = '';

	 quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');

	} else if (oxq === 1) {//正解時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';

	} else if (oxq === 2) {//失敗時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>不正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';
	}
}

うさタブ

さきほどもいったように

<button oncClick=”関数名( 引数 );”> 回答ボタン </button>

で functionプログラムセット 関数名(引数) を実行することができるッピ！

これは

<button‘+Q[R+1]引数と回答ボタン+'</button>

というところがそれに当たるッピよ～

うさタブ

最終的に

<button onClick=”Q_(1引数);”> 回答ボタン </button>

else ifもしもそれ以外で (oxqボタンに入力されたもの === 1引数) { 正解時のプログラムが実行 }

という流れになるッピ！

ユウキ

やっぱりなんだか難しいな～

うさタブ

ユウキくんがこんがらがるのもムリないッピ・・・・

例えていうなら

a = b = c

c = a みたいなものッピね！

文字を表示する

うさタブ

次は文字を表示するためのプログラムッピね

うさタブ

else if (oxq === 1) {//正解時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';
}

がそれに当たるッピ！

うさタブ

正解時のプログラム・・・これは

else ifもしもそれ以外で (oxq引数が === 11のとき) {
documentプログラムを実行してください.getElement指定したById(“ox“)　id(住所)oxという場所で.innerHTMLHTMLを書き換えて = ‘<p>段落をつくって正解！</p>段落を終了して‘;

document.プログラムを実行してくださいgetElementById(“quiz“).id(住所)quizという場所でinnerHTML = ‘<p>段落をつくって‘ + Q[R+4]問題の回答と説明を表示 + ‘</p>段落を終了してください‘;

document.getElementById(“next“)id(住所)nextという場所で.innerHTML = ‘<p>段落をつくって<buttonボタンをつくって onclickクリックしたら=”Q_(0);問題表示プログラムを実行“> 次の問題へ </button>　ボタンを終了して　</p>段落を終了してください‘;
}

という意味ッピ！

うさタブ

最初の

if (oxq === 0){//次の問題を表示するプログラムを実行
	 document.getElementById("ox").innerHTML = '';
	 document.getElementById("quiz").innerHTML = '';

	 quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');
}

うさタブ

この

quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');

は

quiz変数quizをつくります = document.プログラムを実行して　getElement指定する場所はById(‘quiz‘)　id(住所)はquizです;

quiz.insertid=”quiz”を中心としてAdjacentHTML　HTMLを書き換えてください(‘afterbeginid=”quizu”のタグの中のすぐ後‘, ‘<p>’+Q[R]問題文を表示+'</p>’);

quiz.insertAdjacentHTML(‘beforeend‘id=”quiz”の中の後ろに追加, ‘<button‘+Q[R+1]回答1+'</button><br/>’);
quiz.insertAdjacentHTML(‘beforeend‘, ‘<button‘+Q[R+2]回答２+'</button><br/>’);
quiz.insertAdjacentHTML(‘beforeend‘, ‘<button‘+Q[R+3]回答３+'</button><br/>’);

という意味になるッピ！

全体のコードの確認

<html>
<head>
<script>
let Q = [//クイズ
'Q.日本で一番高い山は？',
' onclick="Q_(1);" >富士山',
' onclick="Q_(2);" >北岳', 
' onclick="Q_(2);" >奥穂高岳', 
'日本で一番高い山は富士山。なんと3,776Mもあります。',

'Q.アメリカ合衆国の首都はどこでしょう？', 
' onclick="Q_(1);" >ワシントンDC',
' onclick="Q_(2);" >ニューヨーク',
' onclick="Q_(2);" >ロサンゼルス',
'常識といえば常識ですが、意外と間違いやすいのがこのクイズ。<br/>正解はワシントンDC。ニューヨークではりませんよ。',

'Q.世界三大珍味は何？', 
' onclick="Q_(2);" >うに、からすみ、このわた',
' onclick="Q_(2);" >すし、らーめん、てんぷら',
' onclick="Q_(1);" >フォアグラ、キャビア、トリュフ',
'世界三大珍味は一般的にキャビア・フォアグラ・トリュフと言われています。',

'Q.次のうち、イタリアにないものなーんだ？', 
' onclick="Q_(2);" >ピザ',
' onclick="Q_(2);" >アクアパッツァ',
' onclick="Q_(1);" >ナポリタン',
'正解はナポリタン。ナポリにナポリタンはありません！',

'Q.日本で初めてノーベル賞を取った人は誰でしょう？', 
' onclick="Q_(2);" >川端康成',
' onclick="Q_(1);" >湯川秀樹',
' onclick="Q_(2);" >佐藤栄作',
'日本初のノーベル賞を受賞したのは湯川秀樹さん。',

'Q.ハロウィンで子供がお菓子を貰うお馴染みのセリフはなーんだ？', 
' onclick="Q_(2);" >ハッピーハロウィーン',
' onclick="Q_(1);" >トリック・オア・トリート ',
' onclick="Q_(2);" >メリークリスマス',
'「お菓子をくれなきゃイタズラするよ」でおなじみのこのフレーズ。<br/>ハロウィーンは、もともと古代ケルト民族でのサウィン祭りが起源といわれています。',
];

let r_1 = Q.length / 5;//クイズを出すための変数
let r_2 = Math.floor( Math.random() * r_1 ) ;
let R = (r_2 * 5) ;//クイズを出すための変数


//次の問題を表示するためのプログラムです
function Q_(oxq) {

	if (oxq === 0){
	
	 r_1 = Q.length / 5;
	 r_2 = Math.floor( Math.random() * r_1 );
	 R = (r_2 * 5);

 	 document.getElementById("ox").innerHTML = '';
	 document.getElementById("quiz").innerHTML = '';

	 quiz = document.getElementById('quiz');
	 quiz.insertAdjacentHTML('afterbegin', '<p>'+Q[R]+'</p>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+1]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+2]+'</button><br/>');
	 quiz.insertAdjacentHTML('beforeend', '<button'+Q[R+3]+'</button><br/>');

	} else if (oxq === 1) {//正解時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';

	} else if (oxq === 2) {//失敗時の実行プログラムです
 	 document.getElementById("ox").innerHTML = '<p>不正解！</p>';
	 document.getElementById("quiz").innerHTML = '<p>'+Q[R+4]+'</p>';
 	 document.getElementById("next").innerHTML = '<p><button onClick="Q_(0);">次の問題へ</button></p>';
	}
}

</script>
</head>
<body>
<script>
document.write('<p id="ox"></p>');

document.write('<p id="quiz">');
document.write(Q[R+0] +'<br/>');
document.write('<button'+ Q[R+1] +'</button><br/>');
document.write('<button'+ Q[R+2] +'</button><br/>');
document.write('<button'+ Q[R+3] +'</button><br/>');
document.write('</p>');

document.write('<p id="next"><button onClick="Q_(0);">次の問題へ</button></p>');
</script>
</body>
</html>

学習のまとめ