シェルスクリプトマガジン

香川大学SLPからお届け!(Vol.92掲載)

著者:池内稜來斗

各都道府県の都道府県庁所在地を尋ねるクイズを出題するWebサイトをPHPで作成しました。今回は、そのWebサイトの概要や作成手順などを紹介します。PHPの実行環境や、各種サーバーソフトウエアは、「XAMPP」(https://www.apachefriends.org/)を使ってインストールします。

シェルスクリプトマガジン Vol.92は以下のリンク先でご購入できます。

図2 「db.sql」ファイルに記述するSQL文

use pref_capitals_quiz;
insert into pref_capitals
  (id, name_p, name_c, image_p) values
(1, '北海道', '札幌市', 'img/hokkaidou.png'),
(2, '青森県', '青森市', 'img/aomori.png'),
(3, '岩手県', '盛岡市', 'img/iwate.png'),
(4, '秋田県', '秋田市', 'img/akita.png'),
(5, '宮城県', '仙台市', 'img/miyagi.png'),
(6, '山形県', '山形市', 'img/yamagata.png'),
(7, '福島県', '福島市', 'img/fukushima.png'),
(8, '茨城県', '水戸市', 'img/ibaraki.png'),
(9, '栃木県', '宇都宮市', 'img/tochigi.png'),
(10, '群馬県', '前橋市', 'img/gunma.png'),
(11, '埼玉県', 'さいたま市', 'img/saitama.png'),
(12, '千葉県', '千葉市', 'img/chiba.png'),
(13, '東京都', '東京', 'img/tokyo.png'),
(略)
(47, '沖縄県', '那覇市', 'img/okinawa.png');
commit;

図3 「index.html」ファイルに記述するコード

<html lang=ja>
<head>
  <meta charset="utf-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>
  <h1>都道府県庁所在地クイズ!!</h1>
  <p>表示された都道府県の都道府県庁所在地を回答してください。<br>
  東京都の場合は、区名と地域名のどちらで回答しても構いません。<br>
  すべての都道府県について回答したら終了です。
  </p>
  <button type="button"
          onclick="location.href='question.php'">
  クイズを始める
  </button>
</body>
</html>

図4 「question.php」ファイルに記述するコード

<?php
  session_start();
  if (!isset($_SESSION['times'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
  }
  if ($_SESSION['times'] == 0) {
    $r = new \Random\Randomizer();
    $order = $r->shuffleArray(range(1, 47));
    $_SESSION['order'] = $order;
  }
  $order = $_SESSION['order'];
  $times = $_SESSION['times'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  $path = $row['image_p'];
  echo "<br>";
  echo "問題", $times + 1;
  echo '<img src="' . $path .
       '" alt="' . $row['name_p'] . 'の地図">';
  print('  '.$row['name_p']);
?>

<form method="POST" class="form" action="answer.php">
  <input type="text" name="Answer" class="input">
  <p>
    <input type="submit" value="回答" class="submit">
  </p>
</form>
</body>
</html>

図5 「answer.php」ファイルに記述するコード

<?php
  session_start();
  $times = $_SESSION['times'];
  $order = $_SESSION['order'];
  $right = $_SESSION['right'];
  $pref = $order[$times];
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  $received_Answer = $_POST['Answer'];
  $link = mysqli_connect('localhost','root','',
                         'pref_capitals_quiz');
  mysqli_set_charset($link,'utf8');
  $sql = "SELECT id, name_p, name_c, image_p " .
         "FROM pref_capitals WHERE id = $pref";
  $result = mysqli_query($link, $sql);
  $row = mysqli_fetch_assoc($result);
  // 東京都かどうか
  if ($row['id'] == 13) {
    if (($received_Answer == $row['name_c']) ||
      ($received_Answer == '新宿区')) {
      echo "正解\n";
      $right++;
    }
  } else if (($received_Answer == $row['name_c']) ||
    (($received_Answer . "市") == $row['name_c'])) {
    echo "正解\n";
    $right++;
  } else {
    echo "不正解\n";
  }
  $_SESSION['times'] = ++$times;
  $_SESSION['right'] = $right;
  echo "<br>";
  echo "問題{$times} {$row['name_p']} の答え";
  echo "<br>";
  echo $row['name_c'];

  if ($times != 47) {
    echo '
    <form method="POST" class="form" action="question.php">
      <button type="submit">次の問題</button>
    </form>';
  }
?>

  <form method="POST" class="form" action="result.php">
    <button type="submit">回答終了</button>
  </form>
</body>
</html>

図6 「result.php」ファイルに記述するコード

<?php
  session_start();
  if (isset($_POST['reset'])) {
    $_SESSION['times'] = 0;
    $_SESSION['right'] = 0;
    header("Location: index.html");
  }
?>

<html lang=ja>
<head>
  <meta charset="UTF-8">
  <title>都道府県庁所在地クイズ!!</title>
</head>
<body>

<?php
  echo "今回の正答数は<br>";
  echo $_SESSION['times'], "問中",
       $_SESSION['right'], "問";
  echo "<br>";
  echo "お疲れさまでした<br>";
?>

  <form method="POST" action="result.php">
    <input type="submit"
           value="トップページに戻る"
           name="reset">
  </form>
</body>
</html>