うさタブ
JavaScript今回はクイズを作ってみるッピ！
ユウキ
クイズ？？
って問題をとくアレのこと？
うさタブ
その通りッピ！
３つの選択肢の中から正解選ぶクイズプログラムをつくるッピよ～！
この記事で学べること
- リスト配列でクイズをつくる
- 乱数（ランダム）で問題を選ぶ
- クリックで 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.日本で一番高い山は？’,//問題文
‘富士山’, //答え１
‘北岳’, //答え２
‘奥穂高岳’, //答え３
‘日本で一番高い山は富士山。なんと3,776Mもあります。’
,];
という意味になるッピね～！
問題文をランダム表示するための変数づくり
うさタブ
上の問題文のリストは
- 問題
- 答え１
- 答え２
- 答え３
- 説明
の５つで１つの組み合わせになっているッピ！
うさタブ
だから
let r_1 = Q.length / 5;
let r_2 = Math.floor( Math.random() * r_1 ) ;
let R = (r_2 * 5) ;
という変数を作って問題文を表示する必要があるッピ！
ユウキ
なんだか複雑だなぁ～
うさタブ
一度まとめたグループを問題文表示のためにバラしてるッピ！
なかなか難しいッピが、頑張るッピよ～
問題文を表示する
うさタブ
変数の用意ができたら、さっそく問題文を提示するッピ！
うさタブ
先程の問題文を表示するためのコードは
document.write(Q[R+0] +’
<br/>‘);
document.write(Q[R+1] +’
<br/> ‘);
document.write(Q[R+2] +’
<br/> ‘);
document.write(Q[R+3] +’
<br/> ‘);
という意味になるッピ！
ユウキ
これはわかるぜ！
問題を表示して、その答えの３択を表示するんだな？
うさタブ
その通りッピ！
うさタブ
ここで少し休憩するッピネ！
次は【正解・不正解の判定機】を作るッピよ～
ユウキ
うーん、大丈夫かな？
ついていけるか不安・・・
うさタブ
任せるッピ！
うさタブは、ユウキくんをスーパープログラマーにしてみせるッピね～！
