初心者向け。Progateの次にやるPHPで簡単なクイズアプリの作り方
3559 回閲覧されました
みなさんこんにちは、jonioです。
PHPの勉強を最近始めたのですがPHPでクイズアプリを作りアウトプットのための記事を書きました。
↓で勉強したのですがそれを少し改造しています。
私が改造した内容はクイズを始める前に名前を入力してからクイズをスタートします。
この時に名前を入力しないとクイズはスタートしません。
問題に解答すると答えが表示されて次の問題に移るのですがずーっと自分の名前が表示されます。
↓は名前に「山本 太郎」と入力した場合です。
クイズに答えていき最後に何問正解だったかが表示されてトップ画面に戻ると名前はリセットされて入力できるようになります。
↓がデモなので内容を見た方が早いと思います。
目次
必要なファイル
index.php・quiz.php・quiz_result.php・result.php・style.css・quiz.css・quiz_result.css・result.cssです。
私は↓の様にファイルを配置しています。
画像は↓からダウンロードしてください。
マルの画像は私が作ったので配布します。
マルの画像 (3002 ダウンロード )
アプリの内容
最初のページはindex.phpです。
index.phpで名前を入力してスタートボタンを押すとクイズのページ（quiz.php）に飛びます。
クイズのページ（quiz.php）で答えを選択して解答を見る時に解答のページ（quiz_result.php）に飛びます。
解答を見てからクイズのページに戻る時にquiz.phpに移動します。
クイズは3問あるのですが1問目から3問目まではquiz.phpとquiz_result.phpを行き来します。
クイズの解答が3問終わったら結果のページ（result.php）に移ってクイズが終了になります。
この流れを図にすると↓です。
それではアプリの実装の解説を始めますがcssの解説はしないので自分で理解してください。
index.php
まずはトップページのindex.phpです。
コードを↓にしますが名前を入力して複数ページにまたがって情報を保持するための記述は難しい（私には難しかった）ので最後に説明します。
ですので今の段階ではその部分の解説はしません。
index.phpで使うcssは下記になります。
今の段階ではPHPが混ざってないのでこのコードの解説はしなくても大丈夫だと思います。
次は問題のページ（quiz.php）です。
問題のページ（quiz.php）をまずはHTMLで書く
いきなりPHPで書くとやりにくいのでひとまず全てHTMLで書いてからPHPに書き換えます。
コードを↓にします。
quiz.phpで使うcssは↓です。
これで↓と表示されます。
第〜を自動的に変わるようにする
それではquiz.phpを書き換えます。
quiz.phpの11行目の「第1問」を「第1問目、第2問目、第3問目」と自動的に変わる設定をします。
↓の赤枠です。
コードを↓にします。
2行目〜8行目は「第1問目、第2問目、第3問目」に使う変数の設定で最初のページ（index.php）から変数（times）が送られてきたらそれを「$times」に代入して変数として使うけど最初のページから変数が送られて来なかったら$timesを0として使いますよという意味です。
index.phpの24行目のname属性はname=”times”となってなく$_POST[‘times’]は存在しないということなので$times = 0ということになります。
そして$times = 0を21行目で使います。
問題が変わるたびに$timesに1増やしていくことで第2問目、題3問目と切り替わっていきます。
issetは変数が存在するかの判定に使いますが関してはこの記事に解説があります。
次はクイズの問題と解答の選択肢の文章と画像が変わるようにします。
↓の赤枠と青枠と緑枠です。
問題と解答の選択肢の名前と画像を問題に応じて自動的に変わるようにする
quiz.phpのコードを↓にします。
16行目〜21行目は多次元配列です。
多次元配列に関してはこの記事を読めば理解できると思います。
コードを修正した所と10行目の配列の要素の対応は下記になります。
- 40行目:10行目の配列の最初の要素
- 50行目:10行目の配列の2つ目の要素
- 61行目:10行目の配列の3つ目の要素
- 72行目:10行目の配列の4つ目の要素
- 55行目の画像のパス:10行目の配列の5つ目の要素
- 66行目の画像のパス:10行目の配列の6つ目の要素
- 77行目の画像のパス:10行目の配列の7つ目の要素
11行目は第2問で使うための配列で12行目は第3問で使うための配列ですが今はまだ必要ではないのでひとまず置いておきます。
46行目にquiz_result.phpがあるのですがこれが解答を表示するページで今から中身を作ります。
解答を表示するページ（quiz_result.php）
解答を表示するページですが問題を表示するページ（quiz.php）と似ています。
違うのは正解・不正解が表示されるのと正解の選択肢の上に赤い丸が付いて他の選択肢が薄くなる部分です。
だからquiz.phpとコードが似てきますがquiz.phpでphpで書いてquiz.phpと同じ部分以外はまずHTMLで書きます。
quiz_result.phpのコードを↓にします。
これでとりあえず↓と表示されるはずです。
問題の正解・不正解の表示
では正解・不正解の表示が切り替わって問題に応じて正解のマルの場所が変わりバツの場合は薄い色が付く場所が変わるようにします。
まずは正解不正解の表示です。
まずはquiz.phpのコードを↓にしてください。
次は quiz_result.phpのコードを↓にします。
42行目〜46行目が正解・不正解の表示になります。
次はマルとバツの表示ですが1問目の場合が理解できれば2問目・3問目も理解できるので1問目で説明します。
マルとバツの表示
ifに条件を付けて正解・不正解の判定をします。
今変えたばかりのquiz_result.phpですが正解・不正解の行は下記になります。
- 選択肢の左が正解 : 65行目〜78行目
- 選択肢の左が不正解 : 80行目〜90行目
- 選択肢の真ん中が正解 : 97行目〜110行目
- 選択肢の真ん中が不正解 : 112行目〜122行目
- 選択肢の右が正解 : 129行目〜142行目
- 選択肢の右が不正解 : 144行目〜154行目
25行目の「$response = $_POST[‘response’];」の「response」ですが問題のページ（quiz.php）のinputタグの中にあります。
例として↓は問題のページ（quiz.php）の左の選択肢のinputタグのコードです。
次は問題のタイトル・選択肢・選択肢の画像の切り替わりの流れです。
問題のタイトル・選択肢・選択肢の画像の切り替わりの流れ
quiz.phpは75行目を追加していますが$timesは5行目の$timesのことです。
これを解答を表示するページ（quiz_result.php）に渡します。
そしてquiz_result.phpで解答を見てから次の問題（quiz.php）に移るときに$timesを持ったまま移動します。
最初に$timesを設定したときは$timesはindex.phpから引き継がれなかったので5行目の「$times = 0;」になりましたが今回は$timesを持っているので3行目になります。
$timesに関してのコードは↓です。
$timesを使って↓のコードで1問目の問題と選択肢のテキストと選択肢の画像を表示しました。
8行目が1問目の問題に関する情報ですが2問目・3問目の問題に関する情報と表示するコードは↓です。
解答が表示されるページ（quiz_result.php）から次の問題を表示するページ（quiz.php）に移る時に$timesの値が1ずつ増えれば次の問題が表示されますよね。
それをquiz_result.phpのコードに記述にすれば次の問題を表示することができます。
quiz_result.phpの一番最新のコードを載せるので↓を見てください。（必要な部分だけ載せます）
これで問題の解答選んで問題の解答を見て次の問題に移るたびに問題の問題と解答の選択肢と選択肢の画像が切り替わりますが3問目が終わったら結果の画面に移動しないと4問目の問題はないのでエラーになります。
3問目までは次の問題に移るけど3問目が終わったら結果のページに移動するためにquiz_result.phpのコードが↓になっています。（必要な部分だけ載せます）
次は結果のページで正解数の表示です。
結果のページ（result.php）
とりあえず↓と表示するようにします。
result.phpのコードを↓にしてください。
これで表示されるはずです。
それでは何問正解したかを表示します。
↓の赤の部分です。
何問正解したかを表示する
まずquiz.phpのコードを↓にしてください。
23行目〜27行目の設定は$timesの時と全く同じです。
初めてクイズに答える時は$_POST[‘num_correct’]はないので$num_correct = 0になります。
そして86行目があるので次の問題に移る時に$num_correctを渡すので2問目以降は$num_correctが存在することになります。
次はquiz_result.phpですがコードを↓にしてください。
36行目ですがクイズの問題が正解だった場合に$num_correctが+1されます。
3回のクイズが終わった段階で$num_correctの値をresult.phpに渡すことで正解の数を表示します。
最後は入力した名前を最後に表示します。
最初に入力した名前の表示
名前を入力して次のページだけ表示する場合は「$_POST[ ]」でできますが複数ページにまたがって情報を表示する場合はこれではできません。
今回は「$_SESSION[ ]」というのを使います。
$_SESSION[ ]に関してはこの記事を読めば理解できると思います。
index.phpのコードを↓にします。
quiz.phpのコードを↓にします。
quiz_result.phpのコードを↓にします。
result.phpのコードを↓にします。
result.phpの31行目は入力した名前を削除するためのコードです。
unset()はこの記事を読めば理解できると思います。
これで完成です。