JavaScript入門講座|クイズを作ってみよう

JavaScript
うさタブ
うさタブ

JavaScript今回はクイズを作ってみるッピ!

ユウキ
ユウキ

クイズ??

って問題をとくアレのこと?

うさタブ
うさタブ

その通りッピ!

3つの選択肢せんたくしの中から正解選ぶクイズプログラムをつくるッピよ~!

この記事で学べること
  • リスト配列でクイズをつくる
  • 乱数(ランダム)で問題を選ぶ
  • クリックで id場所を変化させる
  • 関数でプログラムセットを作る
  • プログラムを動かすボタンの設置
  • 引数で当たりハズレを判定する

サンプルゲーム

全体のコード

<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>

 

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

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->

<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

このコードを元にプログラミングをしていくッピ!

問題文をつくる

うさタブ
うさタブ

まずは問題文をつくるッピ~

<script>
let Q = [//クイズ
'Q.日本で一番高い山は?',
'富士山',
'北岳', 
'奥穂高岳', 
'日本で一番高い山は富士山。なんと3,776Mもあります。',

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

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

'Q.次のうち、イタリアにないものなーんだ?', 
'ピザ',
'アクアパッツァ',
'ナポリタン',
'正解はナポリタン。ナポリにナポリタンはありません!',

'Q.日本で初めてノーベル賞を取った人は誰でしょう?', 
'川端康成',
'湯川秀樹',
'佐藤栄作',
'日本初のノーベル賞を受賞したのは湯川秀樹さん。',

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

<head></head>の間に<script></script>を入れて

↑のコードをコピーするッピ!

無地
ユウキ
ユウキ

何も変わらないな

うさタブ
うさタブ

まだ問題文の設定をしただけッピ!

これからランダムで問題分を表示するプログラムを追加するッピよ~

うさタブ
うさタブ

<head></head><sprict></script>の間に

let r_1 = Q.length / 5;
let r_2 = Math.floor( Math.random() * r_1 ) ;
let R = (r_2 * 5);

<body></body><sprict></script> 中に

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

と入力するッピよ~

ユウキ
ユウキ

できた~!

うさタブ
うさタブ

更新ボタン、またはF5キーを押すと問題文が変わるッピよ~

読み込みマーク
ユウキ
ユウキ

すげえ! 更新するたびに問題文が変わってる!

うさタブ
うさタブ

ふふふ、これがプログラミングのちからッピ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head>
<script>
let Q = [//クイズ
'Q.日本で一番高い山は?',
'富士山',
'北岳', 
'奥穂高岳', 
'日本で一番高い山は富士山。なんと3,776Mもあります。',

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

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

'Q.次のうち、イタリアにないものなーんだ?', 
'ピザ',
'アクアパッツァ',
'ナポリタン',
'正解はナポリタン。ナポリにナポリタンはありません!',

'Q.日本で初めてノーベル賞を取った人は誰でしょう?', 
'川端康成',
'湯川秀樹',
'佐藤栄作',
'日本初のノーベル賞を受賞したのは湯川秀樹さん。',

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

let r_1 = Q.length / 5;
let r_2 = Math.floor( Math.random() * r_1 );
let R = (r_2 * 5);


</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
document.write(Q[R+0] +'<br/>');
document.write(Q[R+1] +'<br/>');
document.write(Q[R+2] +'<br/>');
document.write(Q[R+3] +'<br/>');
</script>
<!-- ここまで! -->
</body>
</html>

問題文を作る配列リスト

うさタブ
うさタブ

問題文を作るには配列リストを利用するッピ!

うさタブ
うさタブ

let リスト名 = [];

でリストを作るッピ!

うさタブ
うさタブ

先程の問題文は

let QリストQを = [作って
‘Q.日本で一番高い山は?’,//問題文
‘富士山’, //答え1
‘北岳’, //答え2

奥穂高岳’, //答え3
‘日本で一番高い山は富士山。なんと3,776Mもあります。’
,];リスト終了

という意味になるッピね~!

問題文をランダム表示するための変数づくり

うさタブ
うさタブ

上の問題文のリストは

  • 問題
  • 答え1
  • 答え2
  • 答え3
  • 説明

5つで1つの組み合わせになっているッピ!

うさタブ
うさタブ

だから

let r_1問題文グループを作ります = Q.length / 55つで1つのグループにします;
let r_2問題文を乱数で選びます = Math.floor小数点を切り捨て整数へ( Math.randomランダムで数字をつくります() * r_15つで1つの問題文から ) ;
let R結果を表示する変数R = (r_2乱数で選んだ問題の * 5) ; 本来のリスト番号[n]を取得 

という変数を作って問題文を表示する必要があるッピ!

ユウキ
ユウキ

なんだか複雑だなぁ~

うさタブ
うさタブ

一度まとめたグループを問題文表示のためにバラしてるッピ!

なかなか難しいッピが、頑張るッピよ~

問題文を表示する

うさタブ
うさタブ

変数の用意ができたら、さっそく問題文を提示するッピ!

うさタブ
うさタブ

先程の問題文を表示するためのコードは

document.問題文をwrite表示してください (Q問題文の中から[R ランダムで選んだ+0 問題を] +’
<br/>改行してください‘);
document.write(Q[
R+1問題の答え1] +’
<br/> ‘);
document.write(Q[
R+2問題の答え2] +’
<br/> ‘);
document.write(Q[
R+3問題の答え3] +’
<br/> ‘);

という意味になるッピ!

ユウキ
ユウキ

これはわかるぜ!

問題を表示して、その答えの3択を表示するんだな?

うさタブ
うさタブ

その通りッピ!

うさタブ
うさタブ

ここで少し休憩するッピネ!

次は【正解・不正解の判定機】を作るッピよ~

ユウキ
ユウキ

うーん、大丈夫かな?

ついていけるか不安・・・

うさタブ
うさタブ

任せるッピ!

うさタブは、ユウキくんをスーパープログラマーにしてみせるッピね~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました