【PHP】簡単に4択クイズプログラムを作ってみよう

今回は簡単にクイズを作ってみようのコーナーです。

使用するプログラム言語は「PHP」のみ！

多分PHPを使って作ったクイズの種類なら、日本の中でも上位に入る自信があります。つまりは暇人です。

なお、今回の解説は、簡単なPHPプログラム、HTMLのformの仕組みが分かっている方向けです。

本当の基礎の基礎を学びたい方はドットインストールをオススメします。ドットインストールについてはこちら

逆に言えば、基礎が分かれば簡単に作れます。

まずはPHPファイルを準備しよう

まずは、PHPのフォーマットを準備しましょう。

下記のような簡単なもので構いません。なんならコピーしちゃってください。

<?php
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム</title>
</head>
<body>
</body>
</html>

問題文と選択肢を設定しよう

さて、上部の<?php ?>に、プログラムを書いていきましょう。

まずは、問題文を書いていきましょう。

問題文は分かりやすいように、変数に代入して使っていきましょうか。

<?php

$title = 'スマブラに参戦しているポケモンはどれ？';

?>

そして、4択問題の設定です。

4択問題は、配列にすると管理がしやすくなるので、配列の変数を作り代入していきます。

そして、正解の回答となる変数も用意しておきましょう。

<?php

$title = 'スマブラに参戦しているポケモンはどれ？';

$question = array(); //この変数は配列ですよという宣言
$question = array('リザードン','カメックス','フシギバナ','カビゴン'); //4択の選択肢を設定

$answer = 'リザードン'; //正解の問題を設定

?>

こう書いてもいいですが、$question変数の一番最初の配列を予め正解というルールにしておくと後々管理しやすいです。

その場合はこうなります。

<?php

$title = 'スマブラに参戦しているポケモンはどれ？';

$question = array(); //この変数は配列ですよという宣言
$question = array('リザードン','カメックス','フシギバナ','カビゴン'); //4択の選択肢を設定

$answer = $question[0]; //正解の問題を設定

?>

とりあえず問題の設定はこれでいいですね。

では、問題の表示を行っていきましょう。

問題文と選択肢を表示しよう

PHPで設定した変数は、HTML上に表示させることができます。

formを使用し、ラジオボタンでクイズのように表示させてみましょう。

正解の回答も送る必要がありますが、見えないようにinput type=”hidden”を使用しています。

<?php

$title = 'スマブラに参戦しているポケモンはどれ？';

$question = array(); //この変数は配列ですよという宣言
$question = array('リザードン','カメックス','フシギバナ','カビゴン'); //4択の選択肢を設定

$answer = $question[0]; //正解の問題を設定

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム</title>
</head>
<body>

<h2><?php echo $title ?></h2>
<form method="POST" action="answer.php">
   <input type="radio" name="question" value="<?php echo $question[0]; ?>" /> <?php echo $question[0]; ?><br>
   <input type="radio" name="question" value="<?php echo $question[1]; ?>" /> <?php echo $question[1]; ?><br>
   <input type="radio" name="question" value="<?php echo $question[2]; ?>" /> <?php echo $question[2]; ?><br>
   <input type="radio" name="question" value="<?php echo $question[3]; ?>" /> <?php echo $question[3]; ?><br>
   <input type="hidden" name="answer" value="<?php echo $answer ?>">
   <input type="submit" value="回答する">
</form>

</body>
</html>

ブラウザ上ではこうなります。

1

ただ、この

<input type="radio" name="question" value="<?php echo $question[0]; ?>" /> <?php echo $question[0]; ?>

を4回繰り返す書き方は非常に効率が悪いです。

もし選択肢の数が３になったり５になったりした時はわざわざ書き直さなくてはいけません。

なので、ここは配列の中身をすべて繰り返すforeach文で表示しましょう。

PHPのforeachを徹底解説【サンプルコード有】
PHPで配列の繰り返し処理を行うforeach文の記述についてまとめました。ループ内で使えるcontinue文やbreak文など、様々なケースをサンプルコード付きで詳しく解説しております。
kinocolog.com
 
<?php
 
$title = 'スマブラに参戦しているポケモンはどれ？';
 
$question = array(); //この変数は配列ですよという宣言
$question = array('リザードン','カメックス','フシギバナ','カビゴン'); //4択の選択肢を設定
 
$answer = $question[0]; //正解の問題を設定
 
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム</title>
</head>
<body>
 
<h2><?php echo $title ?></h2>
<form method="POST" action="answer.php">
   <?php foreach($question as $value){ ?>
   <input type="radio" name="question" value="<?php echo $value; ?>" /> <?php echo $value; ?><br>
   <?php } ?>
   <input type="hidden" name="answer" value="<?php echo $answer ?>">
   <input type="submit" value="回答する">
</form>
 
</body>
</html>

すっきりしましたね。

これで表示部分は問題ないでしょうか。

 

いいえまだです。

 

配列の最初の選択肢が正解というルールで$answerに代入していますが、これをそのまま表示してしまっては選択肢１がすべて正解になってしまいます。

$answerを代入したら、配列の中のランダムに振り分けましょう。

便利な命令がshuffle関数です。$answerで正解の設定したら、shuffle関数を使用し配列の中身をシャッフルしましょう。

<?php
 
$title = 'スマブラに参戦しているポケモンはどれ？';
 
$question = array(); //この変数は配列ですよという宣言
$question = array('リザードン','カメックス','フシギバナ','カビゴン'); //4択の選択肢を設定
 
$answer = $question[0]; //正解の問題を設定

shuffle($question); //配列の中身をシャッフル
 
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム</title>
</head>
<body>
 
<h2><?php echo $title ?></h2>
<form method="POST" action="answer.php">
   <?php foreach($question as $value){ ?>
   <input type="radio" name="question" value="<?php echo $value; ?>" /> <?php echo $value; ?><br>
   <?php } ?>
   <input type="hidden" name="answer" value="<?php echo $answer ?>">
   <input type="submit" value="回答する">
</form>
 
</body>
</html>

こうすることで、選択肢の表示が毎回変わるようになります。

1

これで表示部分は一通り完成としましょう。

結果を送信し、結果表示画面を作ろう

先ほどは、

<form method="POST" action="answer.php">

で、answer.phpにフォームの値を送るように設定していました。

answer.phpを同じフォルダに作成しましょう。

今作っているPHPファイルをコピーし、不要な部分を削除することですぐ用意できます。

<?php
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム - 結果</title>
</head>
<body>
</body>
</html>

送信内容の受信は、$_POSTで受け取りができます。

受け取りから結果判定までの画面を作っていきましょう。

ラジオボタンで選択した選択肢と、hiddenで送られてくる正解を$_POSTで受け取り、if文で判定し、結果を画面に表示させたらもう出来上がりです。

<?php

//answer.php
 
$question = $_POST['question']; //ラジオボタンの内容を受け取る
$answer = $_POST['answer'];   //hiddenで送られた正解を受け取る

//結果の判定
if($question == $answer){
	$result = "正解！";
}else{
	$result = "不正解･･･";
}
 
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡易クイズプログラム - 結果</title>
</head>
<body>
 
<h2>クイズの結果</h2>
<?php echo $result ?>
 
</body>
</html>

こちらが結果の画面です。

1

以上が、簡単な4択クイズの作り方でした。

覚えたては、簡単なプログラムでも大丈夫。ここから調べてアレンジしていくやる気が大事！

僕がPHP覚えたてのころは、こんな感じで簡単なクイズプログラムをつくっていました。

今記事を書いてて、「ああ、懐かしいなぁ」としみじみしたりもしました笑。

まぁ、当時はこの記事よりもぐちゃぐちゃで効率の悪いプログラムでしたが･･･foreachとか知らなかった時期です。

こんなスタートから始まった僕でも、最終的にはサイトとして公開できるレベルにまで仕上げていきました。

しっかりしたクイズサイトにしたくて、いろいろ考えては調べて、プログラム及びデザインを勉強していきました。

「ここの問題のデザイン･･･もっと綺麗に表示できないかな？黒板とかおしゃれかも？」

「クイズ一式を10問で、1回正解ごとに10点とかにしたほうが楽しいよね！」

「クイズの結果をツイートできるようにしたらいっぱい拡散されるかな？」

こんな考えから、上記のようなプログラムをどんどんカスタマイズかけていき、以下のようなクイズの画面になりました。

僕が管理している「ポケモンクイズ学園」の移転前の「ポケモンクイズスクール」のクイズ画面です。

1

1

現時点でこの4択クイズだけで150000回挑戦されるほど利用されました。

 

プログラミングは、自分がやりたいことが明確なほど、覚えが早くなります。

目標に対し、どうしたらいいかを自ら考えて調べることが出来る上に、モチベーションが落ちないからです。

僕は「ポケモンのクイズサイトが作りたい！そのためにはこうゆう知識が必要だから調べよう！」と、公開まで必死で勉強していきました。

 

プログラミングは、やらされでは上達しません。

「何を作りたいか」がしっかりしている人ほど、ぐんぐん上達していくものだと僕は思います。

プログラミングに興味を持っている方は、漠然とただ覚えるのではなく、覚えて何が作りたいかをまず考えてみましょう。

そう考えると、プログラミングも楽しく勉強できると思いますよ！

【追記】

サーバーサイドではなく、クライアントサイドの処理JavaScript(jQuery)でクイズを出題するプログラムについてもまとめました。

jQueryでクイズプログラムを作成【サンプル有】
JavascriptのJqueryを使用してクイズプログラムを作る方法についてまとめました。スマホ対応のシンプルな作りに仕上げましたので、クイズを作りたい方は是非ご確認ください。
kinocolog.com

1つのブラウザで画面遷移もなく、複数問題設定できたり等、ユーザーに優しい仕様に仕上げましたので、ぜひこちらもご確認ください。

以上、簡単に4択クイズプログラムを作ってみよう、でした。

コメント

  1. クイズアプリ作成のリンク – WordPressでフリーオリジナルフォント より:
    2016年10月16日 23:33

    […] 【PHP】簡単に4択クイズプログラムを作ってみよう　2016/2/23 2016/8/30http://kinocolog.com/quizprogram/ […]

    返信
  2. taka より:
    2018年6月19日 18:43

    初めまして。私もphpでクイズサイトを作成している途中でして大変参考になりました。

    いきなり質問で申し訳ございません。私の場合は、ワードプレスの固定ページにphpで作成したファイルを呼び込んで表示させようとしていました。ところが、フォームの送信時に「htmlspecialchars($s, ENT_QUOTES,’UTF-8′)」を設定すると、ページに表示されなくなってしまいます。Wordpressでは、そのような仕様なのでしょうか？

    返信
    • のちょう nocho より:
      2018年6月20日 00:00

      コメントありがとうございます。
      PHPのクイズ作成、頑張ってください！
      htmlspecialcharsが悪さしている訳ではないと思うので、もう少し情報頂けると嬉しいです。
      ちなみにwordpressで使用しているname属性と同じものを使用してしまうと、うまく動作しないみたいなので、独自性の強いname属性に変えることをお勧めします。
      参考　https://quartet-communications.com/info/topics/10110

      返信
  3. taka より:
    2018年6月20日 09:52

    回答いただきありがとうございます。nameの名前がかぶっているとエラーが発生するということで、nameや関数名、変数なども変えて試してみましたが解決しませんでした。
    いろいろ試行錯誤したところ、独自関数である h（$s） を使わなければ　画面が表示されることだけ分かりました。

    もう少し詳しく環境を書かせていただきます。
    現在、Wordpressでは、テーマにハミングバードを使用しています。
    phpの呼び出しに関しては、「http://kawatama.net/web/428」を参考に、ショートコードでphpのファイルをページに呼び出しています。

    以下のように独自関数を同一ページ内に記述して

    function h($s) {
    return htmlspecialchars($s, ENT_QUOTES, ‘UTF-8’);
    }

    フォーム送信時に、関数を使っています。

    <input type="submit" name="answer" value="”>

    ドメインのサブディレクトリを作り別サイトでクイズサイトを作るほうが手っ取り早いでしょうかね・・・。

    返信
    • のちょう nocho より:
      2018年6月21日 20:33

      ご丁寧にありがとうございます。
      一日遅れちゃったのでもう解決されたかもしれませんが、第三引数のUTF-8の囲いがバッククオートになっているため、それがエラーの原因となっています。
      “や’などのダブルクオートやシングルクオートで試してみてください。

      返信
  4. taka より:
    2018年6月22日 19:56

    忙しい中ご丁寧に返信ありがとうございます。第三引数の囲いを直しても表示されませんでした。諦めて、サブディレクトリを作成して別サイトで試してみたいと思います。

    いろいろ勉強になりました。ありがとうございました。

    返信
  5. アロマ より:
    2019年8月30日 20:09

    大変参考になりました。ありがとうございます。
    現在ドットインストールにてクイズアプリを作成しました。ランダムで10問出題して、結果を表示したいのですが、うまい具合に参考ページが見つかりません。参考にしたページ等、アドバイス頂けたらと思います。

    返信
    • のちょう nocho より:
      2019年9月1日 14:48

      コメントありがとうございます。
      PHPで〇問クイズをランダムで出題したい場合は、
      最初の問題の時に10問分出題するクイズ（のID等）を配列で定義して、
      input hiddenで決めた設問を毎回渡すなどがいいと思います。
      value値に配列は渡せないので、implodeで文字列にして渡して、受け取りはexplode関数など。

      ただ、PHPで一問ごとに問題を行うのは、毎回ページの読み込みがかかるので、サーバーにもユーザーにも優しくないです。
      全10問を1ページで行うか、jQueryなどを使用してクライアント側で処理する方がオススメです。
      こちらの記事ではjavascript(jQuery)で同じような流れのクイズを作る解説をしておりますので是非ご確認ください。
      https://kinocolog.com/jquery_quiz/

      返信
  6. うさっち より:
    2019年11月11日 10:25

    はじめまして。初心者の質問ですみません。点数を決めておいて、（合格ライン）クリアになったら合格証のような画像または特別なメッセージを出すことはできますか？

    返信
  7. TK より:
    2020年2月8日 20:40

    大変参考になりました。有意義な情報ありがとうございます。

    PHPで以下のようなスタンドアロンなクイズサイトを作ることができたのですが、これをWordpressの固定記事に埋め込む？／読み込ませるようなやり方は何かできないのか悩んでいます。

    https://simple-was-best.com/mcpc/mcpc_index.php

    WordPress側の処理にあまり詳しくなく、Wordpress初心者な質問ですみません。

    返信
    • のちょう nocho より:
      2020年2月8日 21:35

      ありがとうございます。
      Wordpress内でPHPのプログラムを組み込むのも出来なくはないですが、ちょっとここで説明し切るのは難しいです。
      iframeで使用するか、フロント側でクイズの処理を行うのをオススメします。（1問解くごとにページ遷移が必要なのも今思うと不便なので）
      フロント側は、jQueryで作る方法をまとめた記事があるのでこちらもご確認ください。
      https://kinocolog.com/jquery_quiz/
      これはWordpressの記事内に埋め込みが容易です。実際に埋め込んだものを使用していますし、他サイトでの導入も見たことがあります。

      返信
  8. TK より:
    2020年2月8日 22:05

    返信ありがとうございます。やはりPHPでこの形式は限界がありそうな感じでしたか。
    JS系はあまりよくわからなかったので手を出していなかったんですが、頂いたnochoさんの記事でまた勉強したいと思います。

    返信
タイトルとURLをコピーしました