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

こんにちは！

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

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

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

【第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弾まで読んでくれた人

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

Contents

PHPの実装
３択クイズアプリの動作確認
最初の課題を終えて
まとめ

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

<!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>

<!DOCTYPE html>

<head>

<title>3択クイズ結果</title>

</head>

<body>

</div>

クイズタイトル：〇〇について

</div>

あなたは、3問中2問正解しました。

</div>

</a>

</div>

</body>

</html>

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

ライアン

そんなんいちいち覚えとるかい！

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

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

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

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

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

<?php
  $num_correct = $_POST['num_correct'];
?>

<?php

$num_correct = $_POST['num_correct'];

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

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

ライアン

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

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

 if(isset($_POST['times'])){
   $times = $_POST['times'];
 }
 else{
   //エラー
   $times= 0;
 }

if(isset($_POST['times'])){

$times = $_POST['times'];

}

else{

//エラー

$times= 0;

}

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

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

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

正解数を表示する部分

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

(変更前)
    <div class="question-instruction">
      あなたは、3問中2問正解しました。
    </div>
(変更後)
    <div class="question-result">
      あなたは、3問中<?php echo "$num_correct";?>問正解しました。<br>
    </div>