PHP実践_単問のクイズ

コチラを参考に。感謝!

目次(クリックでジャンプ)

原バージョン

概要

固定の問題が１問だけある問題画面(index00.html)と結果表示画面(result01.php)の２ファイル構成。

コード

index00.html

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>Quiz(20191023)</title>
</head>
<body>
<p>これはクイズプログラムの練習です</p>

<form method=”post” action=”result01.php”>
<p>薔薇の読み方は？</p>
<input type=”radio” name=”q1″ value=”ばら”>ばら<br>
<input type=”radio” name=”q1″ value=”きく” checked=”checked”>きく<br>
<input type=”radio” name=”q1″ value=”ひまわり”>ひまわり<br>
<input type=”submit” value=”答え合わせ”>
</form>
</body>
</html>

result01.php

<?php
$q1 = $_POST[“q1″];
if($q1 == ‘ばら’){
$msg=”すばらしい！正解です！(+10point)”;
$txtCol=”#000″;
$bgCol=”#ff0″;
}else{
$msg=”残念！不正解です…(+0point)”;
$txtCol=”#066″;
$bgCol=”#000″;
}
?>

<div style=”width:30vw;margin:1em auto;font-size:1.5em;padding:1em;
background:<?=$bgCol?>;color:<?=$txtCol?>;”>結果:<?=$msg?></div>

疑問点

色々と改造してみて生じた疑問点
①ラジオボタンが空白のまま、結果表示画面に行こうとするとエラーが出る。どうするんだ？(たぶんphpの問題)
→if(isset(変数))がtrueの時のみ解答表示
またはif(!isset(変数))がfalseの時は解答表示をスキップすれば良い

②ラジオボタンむき出しでなく、ボタンのようにするにはどうするんだ？(たぶんhtmlの問題)

改バージョン

全体構成の気付き

スタート画面のファイル(index.phpとかstart.php)
スタートボタン入力で遷移
↓
クイズ画面(main.phpとかquiz.phpとか)
問題文・選択肢・正答・回答・正誤・解説を要素に持つ多次元配列を作成し、選択肢・正答・解説を格納(場合によってはランダムで選択)
出題数、回答数、正答数を要素に持つ配列を作成・格納
foreachかforのループで全問題の問題文・選択肢と送信ボタン(フォーム。送り先は自分自身)表示・回答の正誤判定の結果・解説・総合結果を表示。
初期状態では回答・正誤・解説・総合結果は値がないので判定・表示がスキップされて表示されないようにする
送信ボタンが押されたら、自身が値を受け取ってページが再読み込み(更新)されてまた全問題を表示(正誤判定と解説が表示されて、回答数++)？
出題数＝回答数になるまでループ←これが気付き

問題数＝回答数になったら、ループから抜けて総合結果・再テストボタンを表示。ボタンが押されたら、スタート画面に遷移
↓
初めに戻る

実装

一問構成で練習(コチラ)。

コード(index21.php)

<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>Quiz(20191023)</title>
</head>
<body>
<h2>クイズプログラムの練習<br>
(一画面にまとめ中)</h2>
<?php
//問題文等を配列に収納
$qst=[“薔薇の読み方は？”,”ばら”,”きく”,”ひまわり”];
$ansR=$qst[1];//正答を格納
$opt=[$qst[1],$qst[2],$qst[3]];//選択肢を格納
shuffle($opt);//選択肢をシャッフル
$msg=”肢を選んで回答して下さい”;//メッセージ初期値
?>

<h3>第一問:<?=$qst[0]?></h3>
<div>
<form method=”post”>
<input type=”radio” name=<?=”ansU”?> value=”<?=$opt[0]?>”><?=$opt[0]?>
<input type=”radio” name=<?=”ansU”?> value=”<?=$opt[1]?>”><?=$opt[1]?>
<input type=”radio” name=<?=”ansU”?> value=”<?=$opt[2]?>”><?=$opt[2]?>
<input type=”submit” value=”回答する” >
</form>
</div>

<?php
//回答の正誤判定とメッセージ決定
if(isset($_POST[“ansU”])){//回答が入力された時のみ実行
$ansU = $_POST[“ansU”];
if($ansU == $ansR){
$msg=”正解！”.”10″.”ポイントゲット”;
}else{
$msg=”不正解…正解は「”.$ansR.”」”;
}
}else{
$msg=”肢を選んで回答して下さい”;
}
?>

</body>
</html>

課題

同じ画面で更新されるのは出来たけれど、変数がリセットされるので、「セッション」を使わないとダメなんだろう。

そう考えると、問題は一問だけ表示して、「現在の問題番号」と「結果(これは配列)」のみをセッションに保持していくのが簡単だと分かる。