JavaScriptでは何かと登場回数の多いif文。そんな必須な知識であるif文ですが、プログラムを書く際には色々な条件やパターンを考えたうえでの実装が必要です。
逆にif文のコツを掴んでしまえば、さまざまなプログラムを実装できるようになります。

そこで今回は、if文を駆使してミニクイズの作り方を解説していきます。

デモ

javascript-miniquiz

3つの問題を用意し、すべての回答が終了したら、合計得点とメッセージを表示させてみましょう。

HTMLとCSSの準備

まずはHTMLとCSSの準備をしていきます。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<div class="quizzes-container">
  <h1>クイズ  </h1>
  <div class="quiz-container">
    <h2>第1問</h2>
    <div>
      <p>枕草子の作者はだれ？</p>
    </div>
    <form id="quiz-1">
      <input name="answer" type="radio" value="a">紫式部</input>
      <input name="answer" type="radio" value="b">清少納言</input>
      <input name="answer" type="radio" value="c">小野小町</input>
    </form>
    <button class="btn" type="button" onclick="answerQuiz1();">回答する</button>
  </div>
  <div class="quiz-container">
    <h2>第2問</h2>
    <div>
      <p>国旗に5つの星がある国は？</p>
    </div>
    <form id="quiz-2">
      <input name="answer" type="radio" value="a">中国</input>
      <input  name="answer" type="radio" value="b">ニュージーランド</input>
      <input name="answer" type="radio" value="c">オーストラリア</input>
    </form>
    <button class="btn" type="button" onclick="answerQuiz2();">回答する</button>
  </div>
  <div class="quiz-container">
    <h2>第3問</h2>
    <div>
      <p>世界で一番長い川は？</p>
    </div>
    <form id="quiz-3">
      <input name="answer" type="radio" value="a">アマゾン</input>
      <input name="answer" type="radio" value="b">ミシシッピ</input>
      <input name="answer" type="radio" value="c">ナイル</input>
    </form>
    <button class="btn" type="button" onclick="answerQuiz3();">回答する</button>  
  </div>
  <div id="score-container">
    <p id="score-message"></p>
  </div>
  <button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button>
</div>
</body>

各問題に対して3つの選択肢を用意するため、ラジオボタンを3つずつ設置します。
inputタグのname属性に”answer”、type属性に”radio”、そしてvalue属性には回答を区別するために”a”, “b”, “c”の値を付与します。

また、各問題に対して「回答する」ボタンも3つ設置します。
button class ="btn"のonclick属性には、answerQuiz1()、answerQuiz2()、answerQuiz3()と、回答した結果を表示させるための関数と紐付けます。

さらに、回答が終了したあとに合計得点を確認するための「合計得点を見る」ボタンの用意も必要です。
button class ="btn-score"のonclick属性には、showScore()とし、得点とメッセージを表示させるための関数と紐付けます。

CSS

body {
  font-family: serif;
  text-align: center;
}

.quizzes-container {
  width: 400px;
  margin: 50px auto;
}

.quiz-container {
  border-bottom:1px solid black;
  padding-bottom: 20px;
}

.btn {
  margin-top: 20px;
  font-family: serif;
  background-color: white;
}

#score-container {
  border: 1px solid black;
  height: 50px;
}

.btn-score {
  display: block;
  margin: 20px auto;
  font-family: serif;
  background-color: white;
}

CSSは詳しく解説はしませんが、好みに合わせてサイズや色を調整してください。

HTML・CSSの記述で以下のように表示されることが確認できます。
javascript-miniquiz

JavaScriptでミニクイズを実装

ここからはJavaScriptの実装に移ります。

全体のコード

let score = 0;

function showScore(){
  const totalScore = document.getElementById('score-message');
    
  if(score === 3) {
    totalScore.innerHTML = score + "点：満点！おめでとう！"
  } else if(score === 2) {
    totalScore.innerHTML = score + "点：あともう一息！";
  } else if(score === 1) {
    totalScore.innerHTML = score + "点：まあまあ";
  } else {
    totalScore.innerHTML = score + "点：残念";
  }   
}

/**
1問目の正解はBの清少納言
2問目の正解はAの中国
3問目の正解はCのナイル
**/

const correct = '正解です';
const incorrect = '不正解です';

function answerQuiz1() {
  const quiz_1 = document.getElementById('quiz-1');
  const select = '1問目：' + quiz_1.answer.value + 'を選択しました';

  if (quiz_1.answer.value == 'a') {
    console.log(select);
    console.log(incorrect);
  // 正解はB
  } else if (quiz_1.answer.value == 'b') {
    score++;
    console.log(select);
    console.log(correct);
  } else if (quiz_1.answer.value == 'c') {
    console.log(select);
    console.log(incorrect);
  } else {
    alert('1問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

function answerQuiz2(){
  const quiz_2 = document.getElementById('quiz-2');
  const select = '2問目：' + quiz_2.answer.value + 'を選択しました';

  // 正解はA
  if (quiz_2.answer.value == 'a') {
    score++;
    console.log(select);
    console.log(correct);
  } else if (quiz_2.answer.value == 'b') {    
    console.log(select);
    console.log(incorrect);
  } else if (quiz_2.answer.value == 'c') {
    console.log(select);
    console.log(incorrect);
  } else {
    alert('2問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

function answerQuiz3(){
  const quiz_3 = document.getElementById('quiz-3');
  const select = '3問目：' + quiz_3.answer.value + 'を選択しました';

  if (quiz_3.answer.value == 'a') {
    console.log(select);
    console.log(incorrect);
  } else if (quiz_3.answer.value == 'b') {        
    console.log(select);
    console.log(incorrect);
  // 正解はC
  } else if (quiz_3.answer.value == 'c') {
    score++;
    console.log(select);
    console.log(correct);
  } else {
    alert('3問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

以下がJavaScriptの実装ポイントです。

  • 点数をカウントする：score変数
  • 獲得した合計得点によって別々のメッセージを表示させる：showScore関数
  • 回答が正解であれば点数を加算させる：answerQuiz1, 2, 3関数

一見長めのコードに見えますが、やっていることは至ってシンプルです。
それでは上から順番にコードを解説していきます。

点数をカウントする

score変数を作り、値を0に設定します。

let score = 0;

問題に正解したら点数を加算するためにこの変数を使用します。

獲得した得点によって別々のメッセージを表示させる

獲得した合計得点を表示するためと、点数によって表示させるメッセージを分けるための関数を記述します。

function showScore(){
  const totalScore = document.getElementById('score-message');
    
  if(score === 3) {
    totalScore.innerHTML = score + "点：満点！おめでとう！"
  } else if(score === 2) {
    totalScore.innerHTML = score + "点：あともう一息！";
  } else if(score === 1) {
    totalScore.innerHTML = score + "点：まあまあ";
  } else {
    totalScore.innerHTML = score + "点：残念";
  }   
}

showScore関数では、獲得した点数が「3」「2」「1」「その他（0）」の場合に、その点数と表示させたいメッセージを用意しています。
獲得した点数を表示するためには、先ほど記述したscore変数を使います。

最終的には以下の4つのメッセージパターンが出来上がります。

0点獲得時（全問不正解）

javascript-miniquiz

1点獲得時

javascript-miniquiz

2点獲得時

javascript-miniquiz

3点獲得時（全問正解）

javascript-miniquiz

回答が正解であれば点数を加算させる

このパートが今回のミニクイズのメイン部分になります。
ここでは、3つの問題用にそれぞれ関数を用意し、正解であれば点数を加算するための記述を行なっていきます。

また、「選んだ回答」「正解/不正解の結果」「現在の点数」もコンソールで確認できるようにしてみましょう。

const correct = '正解です';
const incorrect = '不正解です';

function answerQuiz1() {
  // 問題1の処理をここに記述
  const quiz_1 = document.getElementById('quiz-1');
  const select = '1問目：' + quiz_1.answer.value + 'を選択しました';

  if (quiz_1.answer.value == 'a') {
    console.log(select);
    console.log(incorrect);
  // 正解はB
  } else if (quiz_1.answer.value == 'b') {
    score++;
    console.log(select);
    console.log(correct);
  } else if (quiz_1.answer.value == 'c') {
    console.log(select);
    console.log(incorrect);
  } else {
    alert('1問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

function answerQuiz2(){
  // 問題2の処理をここに記述
  const quiz_2 = document.getElementById('quiz-2');
  const select = '2問目：' + quiz_2.answer.value + 'を選択しました';

  // 正解はA
  if (quiz_2.answer.value == 'a') {
    score++;
    console.log(select);
    console.log(correct);
  } else if (quiz_2.answer.value == 'b') {    
    console.log(select);
    console.log(incorrect);
  } else if (quiz_2.answer.value == 'c') {
    console.log(select);
    console.log(incorrect);
  } else {
    alert('2問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

function answerQuiz3(){
  // 問題3の処理をここに記述
  const quiz_3 = document.getElementById('quiz-3');
  const select = '3問目：' + quiz_3.answer.value + 'を選択しました';

  if (quiz_3.answer.value == 'a') {
    console.log(select);
    console.log(incorrect);
  } else if (quiz_3.answer.value == 'b') {        
    console.log(select);
    console.log(incorrect);
  // 正解はC
  } else if (quiz_3.answer.value == 'c') {
    score++;
    console.log(select);
    console.log(correct);
  } else {
    alert('3問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

まずは、正解か不正解か表示するための文字列を変数に代入します。

const correct = '正解です';
const incorrect = '不正解です';

次に、answerQuiz1関数を見ていきましょう。

function answerQuiz1() {
  // 問題1の処理をここに記述
  const quiz_1 = document.getElementById('quiz-1');
  const select = '1問目：' + quiz_1.answer.value + 'を選択しました';

  if (quiz_1.answer.value == 'a') {
    console.log(select);
    console.log(incorrect);
  // 正解はB
  } else if (quiz_1.answer.value == 'b') {
    score++;
    console.log(select);
    console.log(correct);
  } else if (quiz_1.answer.value == 'c') {
    console.log(select);
    console.log(incorrect);
  } else {
    alert('1問目の答えを入力してください');
  }
  console.log('現在の点数：' + score); 
}

関数の冒頭では以下の2つの変数を用意しています。

  • DOM操作でformタグを取得する：quiz_1変数
  • ユーザーがどの回答を選択したか表示させる：select変数
const quiz_1 = document.getElementById('quiz-1');
const select = '1問目：' + quiz_1.answer.value + 'を選択しました';

quiz_1.answer.valueは、formタグで囲まれているラジオボタンのname属性とvalue属性を取得しています。この記述により、ユーザーがどの回答を選択したか、すなわち、どのラジオボタンを選択したか区別できるようになります。

さいごに、if文です。
回答には3つの選択肢があるように、if文には「a, b, cを選んだ場合、または何も選ばなかった場合」と、4つの条件を用意します。

if (quiz_1.answer.value == 'a') {
  console.log(select);
  console.log(incorrect);
// 正解はB
} else if (quiz_1.answer.value == 'b') {
  score++;
  console.log(select);
  console.log(correct);
} else if (quiz_1.answer.value == 'c') {
  console.log(select);
  console.log(incorrect);
} else {
  alert('1問目の答えを入力してください');
}
console.log('現在の点数：' + score);

条件にかかわらず、どの回答を選択したのか分かるように、console.log(select)を記述します。
何も選択しなかった場合には、alert('1問目の答えを入力してください')を記述しておきましょう。

第1問の正解はBとなるため、2番目の条件の中でelse if (quiz_1.answer.value == 'b')、console.log(correct)と記述します。
また、正解したのでscore++で点数を加算することも必要です。

その他の条件では不正解になるため、console.log(iccorrect)とします。

コードの最下部にあるconsole.log('現在の点数：' + score)は、回答を終えたあとに現在の点数を表示するための役割があります。

では、選択した結果がどうコンソールに現れるか確認しましょう。

不正解だった場合

javascript-miniquiz

正解だった場合

javascript-miniquiz

何も回答しなかった場合

javascript-miniquiz

これでうまく実装ができました。
answerQuiz2と3関数も同じようできたら完成です。

まとめ

今回は、if文を使ってミニクイズを実装しました。

if文をswitch文で書き換えると、自分にとってどちらの方が使いやすいか知ることもできます。

ぜひこれを機にオリジナルのクイズを実装してみてください。

ミニクイズの関連記事

・DOMの仕組みと構造
・条件分岐 -if文
・条件分岐 -switch文