著者:池内稜來斗
各都道府県の都道府県庁所在地を尋ねるクイズを出題する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>
