プログラミング

【第9弾】「3択クイズ」Webアプリを完成させよう!|PHPで5万円稼ぐためのロードマップ

「3択クイズ」Webアプリを完成させよう!|PHPで5万円稼ぐためのロードマップ

こんにちは!

今回は、PHPで『月5万円』稼ぐためのロードマップ第9弾ということで、1つ目の課題である「3択クイズアプリの作成」を仕上げていきます!

前回の第8弾では「3択クイズアプリ」を作成するにあたって、PHPでの機能の実装を行っていましたね!

今回は「3択クイズアプリ」の作成のパート5となっていますので、まだこれまでの記事を読んでないと言う方は以下の記事から読み進めてもらうと良いと思います!

PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!
【第5弾】PHP初心者でも簡単!『3択クイズ』Webアプリを作ってみよう!こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップの第5弾ということで、1つ目の課題である「3択クイズアプリの作成」...

PHPで「月5万円」を稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。この第9弾を見る前に、PHPで『月5万円』稼ぐためのロードマップの使い方や、特長を分かってもらうためにも第1弾から是非お読みください!

というか必見です!この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に雲泥の差が出てくると思います。

【第1弾】PHP初心者の80%が間違えている5つの注意点を解説今回から定期的に投稿する「PHPで『月5万円』稼ぐためのロードマップ」は実際に、ゼロからPHP学習を始めて、仕事をもらい、Webアプリを...

また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。

【第4弾】月5万円稼ぐためのロードマップで何が作れるようになるの?こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップの第4弾ということで、このPHPで『月5万円』稼ぐためのロードマッ...

 

こんな方におすすめ
  • PHPでWebアプリを作りたい!
  • 基礎はバッチリだけど案件はまだちょっと・・・
  • 第8弾まで読んでくれた人

さて、3択クイズアプリの仕上げです。最後まで頑張りましょう!

 

PHPの実装

プログラミングを学ぶツールFreepik – jp.freepik.com によって作成された watercolor ベクトル 

今回の第9弾では、「3択クイズアプリ」の結果を表示する部分である「result.php」にPHPで機能を追加し、仕上げをしていきます!

では、前回までに作成したPHPファイルに機能を書き加えていきましょう。

index.html

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」のソースコードを表示しておきます。

 

さて、プログラムの修正を始めていくのですが、正解数を表示させる機能を追加したいということで、前回までの「quiz.php」や「quiz_result.php」において、正解数を格納しておく変数を作成していたことを覚えていますか?

ライアン
ライアン
そんなんいちいち覚えとるかい!

はい、すみません。。。笑

前回まで「正解数」を格納しておく変数として$num_correctという変数を各所で書いてきました。

その$num_correctを使用し、正解数に応じて表示を変更する処理を追加していきます。

ポストされた$num_correctを受け取る部分

まずは、このソースコードを「result.php」最上部に記載してください。説明は後述します。

今まで何度か同じような記述をしてきたので、見覚えのある方も多いのではないでしょうか。

また、このように思われた方もいますでしょうか?

ライアン
ライアン
ポストされてなかったらゼロを代入みたいな文言はどこや。

確かに、前回までに以下のような表記を目にしたことを覚えている方も多くいらっしゃると思います。

必ずPOSTされているモノに関しては、「POSTされていない場合」の条件分岐を考える必要はナシ!

ちなみに、必ずPOSTされない場合の代表例として、ユーザーが入力するフォームが挙げられます。お問い合わせなどが思い浮かぶでしょうか?

$num_correctプログラム上でのみ、プラス1したりするだけなので、ユーザーの入力に関わらず処理が行われます。そのため、$num_correctについても「POSTされていない場合」の条件分岐を考える必要はナシ!です。

正解数を表示する部分

次に実際に正解数を表示する箇所の機能を実装していきます。まずは、以下の変更を加えてください。(説明後述)

この変更点は分かりやすいのではないでしょうか!

単純に、正解数が格納されている変数$num_correctを、もともと「2」などの固定されていた数字の部分と置き換えてやるだけです。

ここでは問題数を「3」問と固定していますが、ここもカスタマイズのしどころではないでしょうか?用意した問題数に合わせて問題数が表示されるように、トライしてみてもいいかもしれませんね!

 

いよいよ・・・

3択クイズアプリの完成です!!

実際に動作させてみましょう。

3択クイズアプリの動作確認

 

この動画のように、動作すれば完成です!

 

最初の課題を終えて

やっと最初の課題である「3択クイズアプリ」の作成が終了しましたね!

やり終えてみてどのような感じがしましたか?

ライアン
ライアン
意外と簡単やん!
ライアン
ライアン
むずいわ!
ライアン
ライアン
おい、言われた通りにやったけど上手くいかんぞ。

だいたいこの3種類の感想に分かれますかね?

1つ目の感想だった人は、この調子で次の課題に進みましょう!2,3つ目の感想だった人はごめんなさい。良かったらその点をお問い合わせページからお問い合わせいただけると嬉しく思います!

現段階では、「PHPでWebアプリ作成ってこんなに簡単だったんですね!」「早く次の課題出してくれません?」といった、ご意見がほとんどで、たいへんうれしく思っております。

上記のように思われている方は、きっと今後の課題もすんなり進んで、「月5万円」を稼ぐことのできるエンジニアになれると思います!

そのためにも、「『月5万円』を稼ぐためのロードマップ」が終了するころに、いいタイミングでエンジニアとしてのスタートが切れるように、以下のような案件紹介サイトに無料登録をしておくことをオススメします。

 

まとめ

今回は「3択クイズアプリ」を完成させました!

次回は、次の課題である「クーポン機能の作成」に入っていきましょう!

【第10弾】PHP初心者でも簡単なクーポン機能の実装こんにちは! 今回は、PHPで『月5万円』稼ぐためのロードマップの第10弾ということで、2つ目の課題である「クーポン機能の実装」を...

質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください!Twitterも是非フォローよろしくお願いします!

 

また、『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください!

【第1弾】PHP初心者の80%が間違えている5つの注意点を解説今回から定期的に投稿する「PHPで『月5万円』稼ぐためのロードマップ」は実際に、ゼロからPHP学習を始めて、仕事をもらい、Webアプリを...

 

その他、勉強法や就活、プログラミングに関する相談なども受け付けています!