こんにちは！
今回は、PHPで『月5万円』稼ぐためのロードマップ第9弾ということで、1つ目の課題である「3択クイズアプリの作成」を仕上げていきます！
前回の第8弾では「3択クイズアプリ」を作成するにあたって、PHPでの機能の実装を行っていましたね！
今回は「３択クイズアプリ」の作成のパート5となっていますので、まだこれまでの記事を読んでないと言う方は以下の記事から読み進めてもらうと良いと思います！
PHPで「月5万円」を稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。この第9弾を見る前に、PHPで『月5万円』稼ぐためのロードマップの使い方や、特長を分かってもらうためにも第1弾から是非お読みください！
というか必見です！この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に雲泥の差が出てくると思います。
また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。
- PHPでWebアプリを作りたい！
- 基礎はバッチリだけど案件はまだちょっと･･･
- 第8弾まで読んでくれた人
さて、３択クイズアプリの仕上げです。最後まで頑張りましょう！
Contents
PHPの実装
Freepik – jp.freepik.com によって作成された watercolor ベクトル
今回の第9弾では、「3択クイズアプリ」の結果を表示する部分である「result.php」にPHPで機能を追加し、仕上げをしていきます！
では、前回までに作成したPHPファイルに機能を書き加えていきましょう。
index.html
「index.html」は、HTMLファイルなので、PHPで機能を実装する箇所はありません。
次のファイルに進みましょう！
quiz.php
「quiz.php」は、前々回の第7弾で実装は完了していますね！そのため機能を追加する箇所はありません。
次のファイルに進みましょう！
quiz_result.php
「quiz_result.php」は、前回の第8弾で実装は完了していますね！
次のファイルに進みましょう！
result.php
「result.php」は、PHPファイルで「quiz_result.php」と同様に、PHPで機能を追加していく必要がありそうですね！
前回(第6弾)は、以下の画像のところまで作成を進めたと思います。
見た目は良い感じですが、もちろん「3問中2問正解」という部分のオレンジ色の数字は、ただのテキストで問題数や、正解数によって表示が変更されるという機能は追加していませんでしたよね。
今回は、その機能を以下で実装していきます。
まずは、確認のため現時点での「result.php」のソースコードを表示しておきます。
|
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 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>3択クイズ 結果</title> <link rel="stylesheet" type="text/css" href="result.css"> </head> <body> <div class="main"> <div class="site-logo"> <img src="img/quiz.png" alt="logo"> </div> <div class="question-title"> クイズタイトル：〇〇について </div> <div class="border-hedder"></div> <div class="question-instruction"> あなたは、3問中2問正解しました。 </div> <div class="end-button"> <a href= "index.php" > <img src="img/end-button.png" alt="logo"> </a> </div> </div> </body> </html> |
さて、プログラムの修正を始めていくのですが、正解数を表示させる機能を追加したいということで、前回までの「quiz.php」や「quiz_result.php」において、正解数を格納しておく変数を作成していたことを覚えていますか？
はい、すみません。。。笑
前回まで「正解数」を格納しておく変数として$num_correctという変数を各所で書いてきました。
その$num_correctを使用し、正解数に応じて表示を変更する処理を追加していきます。
ポストされた$num_correctを受け取る部分
まずは、このソースコードを「result.php」最上部に記載してください。説明は後述します。
|
1 2 3 |
<?php $num_correct = $_POST['num_correct']; ?> |
今まで何度か同じような記述をしてきたので、見覚えのある方も多いのではないでしょうか。
また、このように思われた方もいますでしょうか？
確かに、前回までに以下のような表記を目にしたことを覚えている方も多くいらっしゃると思います。
|
1 2 3 4 5 6 7 |
if(isset($_POST['times'])){ $times = $_POST['times']; } else{ //エラー $times= 0; } |
必ずPOSTされているモノに関しては、「POSTされていない場合」の条件分岐を考える必要はナシ！
ちなみに、必ずPOSTされない場合の代表例として、ユーザーが入力するフォームが挙げられます。お問い合わせなどが思い浮かぶでしょうか？
$num_correctはプログラム上でのみ、プラス１したりするだけなので、ユーザーの入力に関わらず処理が行われます。そのため、$num_correctについても「POSTされていない場合」の条件分岐を考える必要はナシ！です。
正解数を表示する部分
次に実際に正解数を表示する箇所の機能を実装していきます。まずは、以下の変更を加えてください。(説明後述)
|
1 2 3 4 5 6 7 8 |
(変更前) <div class="question-instruction"> あなたは、3問中2問正解しました。 </div> (変更後) <div class="question-result"> あなたは、3問中<?php echo "$num_correct";?>問正解しました。<br> </div> |
この変更点は分かりやすいのではないでしょうか！
単純に、正解数が格納されている変数$num_correctを、もともと「2」などの固定されていた数字の部分と置き換えてやるだけです。
ここでは問題数を「3」問と固定していますが、ここもカスタマイズのしどころではないでしょうか？用意した問題数に合わせて問題数が表示されるように、トライしてみてもいいかもしれませんね！
いよいよ･･･
３択クイズアプリの完成です！！
実際に動作させてみましょう。
３択クイズアプリの動作確認
この動画のように、動作すれば完成です！
最初の課題を終えて
やっと最初の課題である「３択クイズアプリ」の作成が終了しましたね！
やり終えてみてどのような感じがしましたか？
だいたいこの3種類の感想に分かれますかね？
1つ目の感想だった人は、この調子で次の課題に進みましょう！２，３つ目の感想だった人はごめんなさい。良かったらその点をお問い合わせページからお問い合わせいただけると嬉しく思います！
現段階では、「PHPでWebアプリ作成ってこんなに簡単だったんですね！」「早く次の課題出してくれません？」といった、ご意見がほとんどで、たいへんうれしく思っております。
上記のように思われている方は、きっと今後の課題もすんなり進んで、「月5万円」を稼ぐことのできるエンジニアになれると思います！
そのためにも、「『月5万円』を稼ぐためのロードマップ」が終了するころに、いいタイミングでエンジニアとしてのスタートが切れるように、以下のような案件紹介サイトに無料登録をしておくことをオススメします。
まとめ
今回は「３択クイズアプリ」を完成させました！
次回は、次の課題である「クーポン機能の作成」に入っていきましょう！
質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
また、『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
