こんにちは！
今回は、PHPで『月5万円』稼ぐためのロードマップ第8弾ということで、1つ目の課題である「3択クイズアプリの作成」の続きを実装していきます！
前回の第7弾では「3択クイズアプリ」を作成するにあたって、PHPでの機能の実装を開始しましたね！
今回は「３択クイズアプリ」の作成のパート4となっていますので、まだこれまでの記事を読んでないと言う方は以下の記事から読み進めてもらうと良いと思います！
PHPで「月5万円」を稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。この第8弾を見る前に、PHPで『月5万円』稼ぐためのロードマップの使い方や、特長を分かってもらうためにも第1弾から是非お読みください！
というか必見です！この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に雲泥の差が出てくると思います。
また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。
- PHPでWebアプリを作りたい！
- 基礎はバッチリだけど案件はまだちょっと･･･
- 第7弾まで読んでくれた人
それでは、「３択クイズアプリ」の作成の続きに入っていきましょう！
Contents
PHPの実装
Freepik – jp.freepik.com によって作成された watercolor ベクトル
今回の第8弾では、「3択クイズアプリ」に、PHPで様々な機能を追加して、完成に近づけていきます！
では、以下では前回までに作成したそれぞれのファイルにPHPを書き加えていきましょう。
index.html
「index.html」は、HTMLファイルなので、PHPで機能を実装する箇所はありません。
次のファイルに進みましょう！
quiz.php
「quiz.php」は、前回の第7弾で実装は完了していますね！そのため機能を追加する箇所はありません。
次のファイルに進みましょう！
quiz_result.php
「quiz_result.php」は、PHPファイルなので、「quiz.php」と同様に、PHPで機能を追加していく必要がありそうですね！
前回(第6弾)は、以下の画像のところまで作成を進めたと思います。
ただ、第5弾で確認してほしのですが「3択クイズアプリ」の完成版を見てみると、前回の第7弾で作成した「quiz.php」の方が「quiz_result.php」の完成形の見た目に近いように思いませんか？いや、思いますよね？
ということで、「quiz.php」の内容を「quiz_result.php」にコピーしてしまいましょう！
もちろん、「quiz.php」と内容は同じなので、この画像のようになるはずですよね！
では、ここからは以下のような手順でPHPの実装を行っていきます。
- 渡された結果が正解か不正解かを判断する設定
- 正解の選択肢に〇をつける設定
- クイズが終了すると結果表示に飛ばす設定
渡された結果が正解か不正解かを判断する設定
まず、「quiz.php」のときに実装した以下のようなソースコード（配列の定義の部分）を探してください。「quiz_result.php」内から探してくださいね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $arr =[$question0,$question1,$question2]; $response_left =$arr[$times][1]; $response_center =$arr[$times][2]; $response_right =$arr[$times][3]; $response_pic_left = $arr[$times][4]; $response_pic_center = $arr[$times][5]; $response_pic_right = $arr[$times][6]; ?> |
この下に、「渡された結果が正解か不正解かを判断する設定」を実装していきます。
以下のようにソースコードを記述してください。各パートの説明は後述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php $response = $_POST['response']; //答えが正解のときの順番 $answer=["center","left","right"]; if($response == $answer[$times]){ $t_or_f = 1; $num_correct = $num_correct + 1; } else{ $t_or_f = 0; } if($t_or_f == 1){ ?> <div class="true"> 正解 </div> <?php }else{ ?> <div class="false"> 不正解 </div> <?php } ?> |
まず、初めにポストされたクイズの結果を$responseと定義しています。
って思われた方は、第7弾で作成した「quiz.php」のソースコードをもう一度見直してみてください。
ラジオボタンを作成したときに、 <input id=”check-c” type=”radio” name=”response” value=”right”>のように書いているところはありませんでしたか？
もし上記の<input>文にチェックをつけたまま、クイズの結果を送信（POST）したとすると、$responseにはvalue=”right”のrightが格納されますね！つまり、$responseには、「quiz.php」(問題表示部)で選んだ選択肢(leftか centerか right)が格納されています。
次にその下では、各問題における正解の選択肢の並びを配列$answerに格納しています。
日本で最初の2番目に高い山は？の正解の選択肢を左側に配置していたなら、$answerの0番目の要素は”left”となりますね。2番目や3番目の質問も同様に、正解の選択肢がそれぞれ、「右・右」と配置しているなら、先ほどの1番目の質問の選択肢と合わせて、$answer=[“left”,”right”,”right”]となることは分かるでしょうか？
さらにその下部では、回答者が選んだ選択肢の答えである$responseと、$times番目の問題における正解の選択肢である$answer[$times]が等しいとき、変数$t_or_f(true or falseの意)を1に，そうでなければ0を格納します。
また、変数$t_or_fが1であるときとは，回答者が正解の選択肢を選んだということなので、正解数を表す変数$num_correctに1をプラスしておきます。
その後のif文は至って単純です。
正解なら($t_or_fが1なら)「正解」と表示し、不正解なら「不正解」と表示するというだけです！
正解の選択肢に〇をつける部分
ここでは、「quiz.php」で実装した<div class=”question-box”></div>の内容を修正していきます。まず、ソースコードは以下のようになっていると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div class="question-box"> <form method="POST" class="form" action="quiz_result.php"> <div class="question-box-left"> <div class="question-number1">①</div> <div class="question-text"><?php echo $response_left;?> <input id="check-a" type="radio" name="response" value="left" checked><label for="check-a"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_left;?>" alt="logo"></div> </div> <div class="question-box-center"> <div class="question-number2">②</div> <div class="question-text"><?php echo $response_center;?> <input id="check-b" type="radio" name="response" value="center"><label for="check-b"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_center;?>" alt="logo"></div> </div> <div class="question-box-right"> <div class="question-number3">③</div> <div class="question-text"><?php echo $response_right;?> <input id="check-c" type="radio" name="response" value="right"><label for="check-c"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_right;?>" alt="logo"></div> </div> <br> <input type="hidden" name="times" value=<?php echo $times;?>> <input type="hidden" name="num_correct" value=<?php echo $num_correct;?>> <input id="send_button" type="submit" value="決定する" style="background-color:#FFFF99;"> </form> </div> |
このとき「quiz.php」を編集するのではなく、「quiz.php」をコピーして作成した「quiz_result.php」を編集するようにしてください。
では、内容を修正していきましょう！
まずは、この図を見てください。
今回作成する３択クイズアプリの結果の表示は、正解であれば図のように〇が表示されて、不正解であれば、白く半透明になるような仕様としています。
この機能をPHPで実装していきましょう。
初めに、「quiz_result.php」では、結果を表示する部分であるため、「quiz.php」でラジオボタンを追加しましたが、必要ありませんよね。
<form method=”POST” class=”form” action=”quiz_result.php”>と</form>を削除しておきましょう！
ここからは、少し複雑になるので、一度第5弾で３択クイズアプリの完成版の動画を確認して、「どのような機能を実装するべきなのか」を確認しておくと良いかもしれません！
まずは、正解と不正解とで、条件分岐が２つに分かれるので<div class=”question-box-left”>～</div>をコピペして、同じquestion-box-leftが２つ並ぶようにしてください。
次に、<div class=”question-box-left“>は左側に配置されている選択肢なので、先ほど作成した$answer[$times](答えとなる解答の位置(左etc)が格納されている)に格納されている文字列が、”left”($answerには、leftかcenterかrightが格納されているため)の時、１度目のquestion-box-leftに、そうでない場合(else{})は、２度目のuestion-box-leftに条件分岐するように設定しましょう。
さらに、正解のときの表示である１度目のquestion-box-left内の最上部に、<div class=”c-mark”>～</div> と要素を作りその中に、〇を表示するためのsvgを表示させます。svgについて詳しく知りたい方は、検索して調べてもらうといいと思いますが、〇の画像を表示するんだなあ。くらいに思っていてもらって大丈夫です。（が、画像とは表示する方法が違うので、以下のソースコードを参考にしてください。）
<div class=”c-mark”>～</div> 内は以下のようになります。
|
1 2 3 4 5 |
<div class="c-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="#f31414" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> </svg> </div> |
次に、2度目のdiv class=”question-box-left”>～</div>に関しては、その要素のクラス名をdiv class=”question-box-left-white”>～</div>という形に変更してください。クラス名がwhiteとあるように、これは不正解の場合に白い半透明の背景にするための設定です。
ここまでの修正を、div class=”question-box-center”>～</div>、div class=”question-box-right”>～</div>に関しても、変更していきましょう。
ほとんど同じですが、各所でクラス名などcenterのところがleftになったり、rightのところがleftになったりとしないように、コピペではなくそれぞれの作業を確認しながら行うことをオススメします！
一応、なぜまた「quiz.php」に戻るような設定をするのかを説明しておくと、再度第6弾のファイル作成における注意点を見ていただくと分かると思うのですが、「quiz.php(1問目の質問)」→「quiz_result.php(1問目の解答)」→「quiz.php(2問目の質問)」と設定する必要があるため、そのように設定します。
ここまでの修正を完了すると以下のようになっていると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<div class="question-box"> <?php if($answer[$times] == "left"){ ?> <div class="question-box-left"> <div class="c-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="#f31414" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> </svg> </div> <div class="question-number1">①</div> <div class="question-text"><?php echo $response_left;?> <input id="check-a" type="radio" name="response" value="left" checked><label for="check-a"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_left;?>" alt="logo"></div> </div> <?php }else{ ?> <div class="question-box-left-white"> <div class="question-number1">①</div> <div class="question-text"><?php echo $response_left;?> <input id="check-a" type="radio" name="response" value="left" checked><label for="check-a"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_left;?>" alt="logo"></div> </div> <?php } ?> <?php if($answer[$times] == "center"){ ?> <div class="question-box-center"> <div class="c-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="#f31414" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> </svg> </div> <div class="question-number2">②</div> <div class="question-text"><?php echo $response_center;?> <input id="check-b" type="radio" name="response" value="center"><label for="check-b"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_center;?>" alt="logo"></div> </div> <?php }else{ ?> <div class="question-box-center-white"> <div class="question-number2">②</div> <div class="question-text"><?php echo $response_center;?> <input id="check-b" type="radio" name="response" value="center"><label for="check-b"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_center;?>" alt="logo"></div> </div> <?php } ?> <?php if($answer[$times] == "right"){ ?> <div class="question-box-right"> <div class="c-mark"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="#f31414" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> </svg> </div> <div class="question-number3">③</div> <div class="question-text"><?php echo $response_right;?> <input id="check-c" type="radio" name="response" value="right"><label for="check-c"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_right;?>" alt="logo"></div> </div> <?php }else{ ?> <div class="question-box-right-white"> <div class="question-number3">③</div> <div class="question-text"><?php echo $response_right;?> <input id="check-c" type="radio" name="response" value="right"><label for="check-c"></label> </div> <div class="question-image"><img src="<?php echo $response_pic_right;?>" alt="logo"></div> </div> <?php } ?> <br> <input type="hidden" name="times" value=<?php echo $times;?>> <input type="hidden" name="num_correct" value=<?php echo $num_correct;?>> <input id="send_button" type="submit" value="決定する" style="background-color:#FFFF99;"> </div> |
結構大規模なソースコードの改修工事を行ったので、細かくチェックしていってください！
では、次の工程に移ります！
クイズが終了すると結果表示に飛ばす設定
ここでは、以下のようにソースコードを記述します。説明は後述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
(変更前) <input type="hidden" name="times" value=<?php echo $times;?>> <input type="hidden" name="num_correct" value=<?php echo $num_correct;?>> <input id="send_button" type="submit" value="決定する" style="background-color:#FFFF99;"> </form> (変更後) <?php $times = $times + 1;?> <?php if($times != 3){ ?> <form method="POST" class="form" action="quiz.php"> <input type="hidden" name="times" value=<?php echo $times;?>> <input id="send_button" type="submit" value="次の問題へ" style="background-color:#FFFF99;"> <input type="hidden" name="num_correct" value=<?php echo $num_correct;?>> <?php }else{ ?> <form method="POST" class="form" action="result.php"> <input id="send_button" type="submit" value="結果を表示" style="background-color:#FFFF99;"> <input type="hidden" name="num_correct" value=<?php echo $num_correct;?>> </form> <?php } ?> |
まずは、「quiz.php」に渡した(POST)後、2問目の表示を行わさせるために、$timesの値をインクリメント(＋１)しておきます。
$timesの値は０から開始され、3問目が終了時に結果を表示する「result.php」に飛ぶ(POST)設定としたいため、$timesが3となったとき(インクリメント後の$times)になったときに「result.php」に、そうでない場合は、「quiz.php」に飛ぶように設定しています。
そして、先ほど削除した<form>タグですが、「quiz.php」に戻るボタンなどを実装するために必要なので、追加します。
また、それぞれ飛ぶ(POST)ためのボタンの表示を「次の問題へ」と「結果を表示」としています。
そして、結果を表示するボタンを押すときに、正解数を示す「$num_correct」を渡すように設定しています。
ここまでの実装が終了すると以下のようになっていると思います。
画像を見てもらうと分かると思うのですが、レイアウトがだだ崩れなので、「quiz_result.css」を編集していきましょう。
quiz_result.css
まず、phpファイルでも行ったように、「quiz.css」を「quiz_result.css」にコピペしましょう！
そして、このとき、「quiz_result.php」は「quiz.php」をコピペして作成し始めたので、リンクしているcssも「quiz.css」のままになっているはずです。「quiz_result.css」に変更しておきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(変更前) <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" type="text/css" href="quiz.css"> </head> (変更後) <head> <meta charset="utf-8"> <title>Quiz Result</title> <link rel="stylesheet" type="text/css" href="quiz_result.css"> </head> |
ついでに、タイトルも変更しておきました。
「quiz.css」同様、PHPで『月5万円』稼ぐためのロードマップでは、PHP中心にしたいので、cssファイルについては、詳しく述べませんが、変更点は以下の2点です。
- 「question-box-〇〇-white」の記述
- 「正解(.true)および不正解(.false)の位置調整」
変更後のcssファイルを載せておきます。PHPを重点的に学習したい方は、全てコピペしてもいいかもしれません。
CSSもがっつり勉強したいよって方で、今回のCSSの実装がちょっと難しいと感じた方は、「『月5万円』稼ぐためのロードマップ」シリーズのHTML&CSS版にもチャレンジしてみるといいかもしれませんよ！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
body { font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; background-color: #FFFFFF; width: 80%; margin-left: 10%; } .true{ position: absolute; margin: 30px 0 0 500px; font-size: 200%; width: 200px; color: red; font-weight: bold; } .false{ position: absolute; margin: 30px 0 0 500px; font-size: 200%; width: 200px; color: blue; font-weight: bold; } .main{ width: 600px; height: 400px; margin: 100px 0 0 10%; background-color: #FFFFFF; border: groove #CCCCCC; } .site-logo img{ height: 100px; } .question-title{ position: absolute; margin: -70px 0 0 200px; font-size: 150%; font-weight: bold; } .border-hedder{ width: 100%; height: 3px; margin-top: -10px; background-color: #00ced1; } .question-instruction{ margin-top: 50px; margin-left: 150px; font-size: 150%; font-weight: bold; } .q-logo img{ position: absolute; width: 50px; margin: -50px 0 0 30px; } .question-box{ margin: 10px 0 0 5%; } .question-text{ position: absolute; font-size: 110%; margin: -30px 0 0 35px; } .question-image{ max-width: 150px; max-height: 120px; overflow: hidden; } .question-image img{ width: 150px; height: 120px; overflow: hidden; } .c-mark svg{ position: absolute; margin: -20px 0 0 -20px; } .question-box-left{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #e0ffff; } .question-box-left-white{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #e0ffff; opacity: 0.3; } .question-number1{ font-size: 150%; color: #00008b; font-weight: bold; margin-left: 5px; } .question-box-center{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #fffacd; } .question-box-center-white{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #fffacd; opacity: 0.3; } .question-number2{ color:#d2691e; font-size: 150%; font-weight: bold; margin-left: 5px; } .question-box-right{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #ffc0cb; } .question-box-right-white{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #ffc0cb; opacity: 0.3; } .question-number3{ color:#800000; font-size: 150%; font-weight: bold; margin-left: 5px; } |
ここまでの実装が終了すると晴れて以下のような状態になっていると思います。
おめでとうございます！
「quiz_result.php」の実装は終了です！
result.php
「result.php」は結果を表示する部分。つまり、最終工程ってことですね！
最後の山を登る前にひと休みしましょう。
ということで、ここからは次回の第9弾で説明していくこととします！
たしかにプログラミングは地道な作業が多く、時間もかかりますが、自分で考えてソースコードを打てるようになれば、時間を忘れるほど楽しいものです！
みなさんは、今回の記事中にカスタマイズしてやろう！という機会をうかがいながら、この第8弾プログラミングをしていましたか？
もちろん３択クイズアプリが完成してからカスタマイズしよう！と思っている方も多いでしょうし、それでも全く問題ありません！が、ただ、プログラミングを打つだけではなく、「ここをこうしたらどうなるのかな？」といった好奇心を持ちながら、プログラミングを学習すると、不思議なことに上達がグンッと早くなるので、是非お試しください！
まとめ
「quiz_result.php」におけるPHPの実装を中心に、「３択クイズアプリ」の作成を進めてきました。
次回は、いよいよ「result.php」でのPHPの実装をして、終了となります！
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
また、『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
