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択を表示するんだな?

うさタブ
うさタブ

その通りッピ!

うさタブ
うさタブ

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

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

ユウキ
ユウキ

うーん、大丈夫かな?

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

うさタブ
うさタブ

任せるッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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