<!DOCTYPE html> <html> <head> <title>クイズ</title> <script> //出題と答えをセットで入れる配列 var quizzes = []; </script> </head> </html>
配列を用意したら、この配列に出題と答えのセットのオブジェクトを入れます。
var quizzes = [
{q : "日本の首都は？", a : "東京"},
{q : "アメリカの首都は？", a : "ワシントン"},
{q : "イギリスの首都は？", a : "ロンドン"}
];
これで、quizzes[1]の様に配列内のインデックスの指定でクイズのオブジェクトを取得できる様になりました。ちなみにquizzes[1]でアメリカの首都の問題が取得できます。次に出題表示用と回答用のフォームを用意します。
<!DOCTYPE html>
<html>
<head>
<title>クイズ</title>
<script>
//出題と答えをセットで入れる配列
var quizzes = [
{q : "日本の首都は？", a : "東京"},
{q : "アメリカの首都は？", a : "ワシントン"},
{q : "イギリスの首都は？", a : "ロンドン"}
];
</script>
</head>
<body>
問題:<input type="text" id="question" value=""><br>
<input type="text" id="answer" value="">
<input type="button" value="答える">
</body>
</html>
このコードを実行してみると、
出題用と回答用のフォームが表示されます。それでははじめに問題フォームに用意した出題オブジェクトを表示してみます。
始めに出題用のinit関数を用意します。
//出題と答えをセットで入れる配列
var quizzes = [
{q : "日本の首都は？", a : "東京"},
{q : "アメリカの首都は？", a : "ワシントン"},
{q : "イギリスの首都は？", a : "ロンドン"}
];
//出題前に取得するオブジェクトを入れておく変数
var quiz;
function init(){
var r = Math.floor(Math.random() * quizzes.length);
quiz = quizzes[r];
//問題用のフォームに表示する
var questionForm = document.querySelector("#question");
questionForm.value = quiz.q;
}
init関数で行っていることは、quizzes配列からランダムに出題用のオブジェクトを取得しておいて、その後にHTMLの問題のフォームの方に問題文を表示させています。init関数が用意できたら、ファイルを表示し終わった直後に実行されるwindow.onloadで実行してみましょう。
//出題と答えをセットで入れる配列
var quizzes = [
{q : "日本の首都は？", a : "東京"},
{q : "アメリカの首都は？", a : "ワシントン"},
{q : "イギリスの首都は？", a : "ロンドン"}
];
//出題前に取得するオブジェクトを入れておく変数
var quiz;
window.onload = function(){
init();
};
function init(){
var r = Math.floor(Math.random() * quizzes.length);
quiz = quizzes[r];
//問題用のフォームに表示する
var questionForm = document.querySelector("#question");
questionForm.value = quiz.q;
}
window.onload内でinit関数を実行することで、
問題文のフォームにクイズが表示されました。次は回答の処理を追加してみます。回答の処理は回答用のフォームに文字を入力した後、答えるボタンを押して入力した内容が正しいか調べるという流れで、はじめに回答するという処理を追加する為に、doAnswerという関数を追加して、処理を書いていくことにします。
var quizzes = [/** 出題用のオブジェクトは省略 **/];
var quiz;
window.onload = function(){
init();
};
function init(){
var r = Math.floor(Math.random() * quizzes.length);
quiz = quizzes[r];
//問題用のフォームに表示する
var questionForm = document.querySelector("#question");
questionForm.value = quiz.q;
}
function doAnswer(){
//回答用のフォームに入力した値を取得
var answerForm = document.querySelector("#answer");
var answer = answerForm.value;
//回答用フォームで入力した内容を削除する
answerForm.value = "";
//入力した内容が正しいか調べる
if (answer == quiz.a) {
//入力した内容が正解の時
} else {
//入力した内容が不正解の時
}
}
doAnswer関数では、回答用のフォームに入力した値を取得した後、if文で入力した内容が正解であるかを調べています。正解、不正解の時の処理は一旦置いといて、答えるボタンを押したらdoAnswer関数が実行するようにします。
問題:<input type="text" id="question" value=""><br> <input type="text" id="answer" value=""> <input type="button" value="答える" onclick="doAnswer();">
ボタンを押したら実行という処理を追加する時は、ボタンのタグにonclick="関数名"を追加すれば良いです。これで回答するという処理を追加することができました。後は正解、不正解の時の処理を追加して、クイズを完成させていきます。正解、不正解共にポップアップで表示して、次の問題を出題するという処理を追加してみます。
var quizzes = [/** 出題用のオブジェクトは省略 **/];
var quiz;
window.onload = function(){
init();
};
function init(){
var r = Math.floor(Math.random() * quizzes.length);
quiz = quizzes[r];
//問題用のフォームに表示する
var questionForm = document.querySelector("#question");
questionForm.value = quiz.q;
}
function doAnswer(){
//回答用のフォームに入力した値を取得
var answerForm = document.querySelector("#answer");
var answer = answerForm.value;
//回答用フォームで入力した内容を削除する
answerForm.value = "";
//入力した内容が正しいか調べる
if (answer == quiz.a) {
//入力した内容が正解の時
right();
} else {
//入力した内容が不正解の時
wrong();
}
}
//正解の時に実行する関数
function right(){
alert("正解です");
init();
}
//不正解の時に実行する関数
function wrong(){
alert("不正解です");
}
正解用と不正解用の関数を追加して、正解用では、正解の表示と次の問題の出題(init)、不正解用では、不正解の表示のみを行うようにし、doAnswer関数の回答判定に追加しています。ここまでできたら、このファイルを実行してみましょう。
出題と回答が実装され、クイズアプリができました。
0 件のコメント:
コメントを投稿