こんにちは！
今回は、PHPで『月5万円』稼ぐためのロードマップ第7弾ということで、1つ目の課題である「3択クイズアプリ」にいよいよPHPで機能を追加していきたいと思います。
前回の第6弾では「3択クイズアプリ」を作成するにあたって、まずはHTML&CSSで3択クイズアプリの枠組みを作っていくというところまで一緒にしていきましたね！
今回は「３択クイズアプリ」の作成のパート３となっていますので、まだこれまでの記事を読んでないと言う方は先に以下の２つを見てもらえるといいと思います！
PHPで「月5万円」を稼ぐためのロードマップでは、手順通りに一緒に勉強していけば、全員がPHPで案件を受注できるレベルになることを目標としています。この第7弾を見る前に、PHPで『月5万円』稼ぐためのロードマップの使い方や、特長を分かってもらうためにも第1弾から是非お読みください！
というか必見です。この先一緒に様々な制作物を作成していきますが、第1弾からの内容を読んでから取り組むのとそうでないのとでは、学習効率に雲泥の差が出てくると思います。
また、PHPで『月5万円』稼ぐためのロードマップで一体何が作れるようになるのか気になった方は、以下の第4弾をご覧ください。
- PHPでWebアプリを作りたい！
- まだ何もPHPで作ったことがない
- 第6弾まで読んでくれた人
それでは、「３択クイズアプリ」の作成の続きに入っていきましょう！
Contents
PHPの実装
Freepik – jp.freepik.com によって作成された watercolor ベクトル
今回の第7弾では、前回までに作った「3択クイズアプリ」の枠組みに、PHPで様々な機能を追加していきます！
では、以下では前回までに作成したそれぞれのファイルにPHPを書き加えていきましょう。
index.html
「index.html」は、HTMLファイルなので、PHPで機能を実装する箇所はありません。
次のファイルに進みましょう！
quiz.php
「quiz.php」は、PHPファイルなので、PHPで機能を追加していく必要がありそうですね！
前回は、以下の画像のところまで作成を進めたと思います。
完成版の画像を確認してみましょう。
比較してみると、次の2点を作成する必要がありそうですね。
- クイズの選択肢の実装
- 「決定する」のボタン
以下では、これらの2つを実装していきます。
クイズの選択肢の実装
ここでは以下の手順で実装を行っていきます。
- HTML&CSSを使って解答の内容となる部分の枠作りをする
- その枠内に表示する内容の設定
- 第〇問に合わせて表示内容を切り替える部分の設定
HTML&CSSを使って解答の内容となる部分の枠作りをする
まずは、①番から作っていきましょう！
ですが…
と思われた方がいたらすみません。
この部分はPHPで実装する内容が絡んでくるため、今回の第7弾で説明しようと思っていました。
では、気を取り直して、実装していきます！
前回までに作成している「quiz.php」を開いてください。
まずここでは、以下の画像のようにクラス名を設定します。
クイズの選択肢全体を表示する部分を「question-box」とし、それぞれの選択肢に左から「question-box-left」、「question-box-center」、「question-box-right」、決定するボタンを「send-button」のように、クラス名を付けました。
今回のクイズアプリは、選択肢のラジオボタンをクリックして決定ボタンで答えを送信するというような形で実装をしていくため、この選択肢を実装する部分はフォーム機能を使って実装していきます。
そのため、クイズの選択肢全体を表示する<div class=”question-box”>～</div>の中に、 <form method=”POST” class=”form” action=”quiz_result.php”>～</form>と記述します。
また、ここでaction=”quiz_result.php”としている理由については、第1弾から「PHPで『月5万円』稼ぐためのロードマップ」を読んできている方にとっては、基礎的なことで当たり前だと思いますが、クイズの選択肢を選択して送信ボタンを押すと、クイズの答え合わせの画面へと移す必要があるためです。
|
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 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" type="text/css" href="quiz.css"> </head> <body> <div class="main"> <div class="site-logo"> <img src="img/quiz.png" alt="logo"> </div> <div class="question-title"> 第1問 </div> <div class="border-hedder"></div> <div class="question-instruction"> 世界で2番目に高い山は？ </div> <div class="q-logo"> <img src="img/q.png" alt="logo"> </div> <div class="question-box"> <form method="POST" class="form" action="quiz_result.php"> </form> </div> </div> </body> </html> |
記述した後の「quiz.php」は上記のようになっていると思います。それでは、<form method=”POST” class=”form” action=”quiz_result.php”>～</form>の間にそれぞれの選択肢であったりといった部分を記述していきたいと思います。
まずは、前回の第6弾と同じように、それぞれの項目を<div>タグを使って枠作りをしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form method="POST" class="form" action="quiz_result.php"> <div class="question-box-left"> </div> <div class="question-box-center"> </div> <div class="question-box-right"> </div> <input id="send_button" type="submit" value="決定する" style="background-color:#FFFF99;"> </form> |
「決定するボタン」に関しては、フォームの送信するボタンにする必要があるため、<div>タグではなく<input>タグにしています。
それでは、各選択肢の内容を記述していく<div>タグ内に「問題番号」「選択肢テキスト」「選択肢画像」を設定していきましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
ここで追加した内容については、以下の表でまとめてありますので、ん？となった方は参考にしてください。
| question-text | 各選択肢の文字列を記述する枠 |
|---|---|
| question-image | 各選択肢の画像を記述する枠 |
| question-number1 | ①と表示させる箇所(※完成版の画像参照) |
| question-number2 | ②と表示させる箇所(※完成版の画像参照) |
| question-number3 | ③と表示させる箇所(※完成版の画像参照) |
| check-a | 選択肢①のラジオボタン |
| check-b | 選択肢②のラジオボタン |
| check-c | 選択肢③のラジオボタン |
また、追加したソースコードの随所に<?php echo $○○;?>といった形で、様々な変数が使われていると思います。「＄〇〇」の形で書かれた変数について、以下の表で説明しておきますので、参考にしてください。
| $response_left | 選択肢①の文字列 |
|---|---|
| $response_center | 選択肢②の文字列 |
| $response_right | 選択肢③の文字列 |
| $response_pic_left | 選択肢①の画像 |
| $response_pic_center | 選択肢②の画像 |
| $response_pic_right | 選択肢③の画像 |
もちろん変数に関しては、名前は変更してもらっても構いません！あくまで一例なので、適当に変えてやってください。
ここまでを記述し、実際にブラウザで見てみると以下のようになっていると思います。
それもそのはずです。
各変数になにも値を代入していないのですから…
それでは、ここからは各変数に出力する文字列や画像を設定していく処理「②その枠内に表示する内容の設定」を実装していきます。
その枠内に表示する内容の設定
まずは、「quiz.php」の一番上のところに以下のような、ソースコードを記述していきます。詳しい説明は後述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php $question0 = ["世界で2番目に高い山は？","富士山","K2","エベレスト", "img/huzi.jpg","img/k2.jpg","img/everest.jfif"]; $question1 = ["最初に桃太郎の仲間になったのは？","老夫婦","犬","サル", "img/grandpm.jpg","img/dog.jpg","img/monky.jpg"]; $question2 = ["円周率の5番目の数字は？","3","2","5", "img/3.png","img/2.png","img/5.png"]; ?> <?php $response_left =$question0[1]; $response_center =$question0[2]; $response_right =$question0[3]; $response_pic_left = $question0[4]; $response_pic_center = $question0[5]; $response_pic_right = $question0[6]; ?> |
何やら、$question[数字]のような配列が定義されていて、その中に様々な文字列などが定義されていることが分かりますね。
ここでは、各問題に必要な文字列（問題文、選択肢、画像等）を１つの配列に定義して、その後で、先ほど説明した$response_leftなどの各変数に代入して、使用しています。
そう思われた方がいたら、是非配列を使わずそれぞれ定義していってください！
そうです。
とっても長くなって、とっても面倒くさくなるんです笑
ここまでのソースコードの記述が終わると、以下のような感じになっていると思います。
ふ、富士山…。って感じで、レイアウトがだだ崩れなので、「quiz.css」を修正していきましょう。
もし、ここで、画像が表示されないよって方がいらっしゃいましたら、第5弾内の「各ファイルに必要な画像のダウンロード」から、画像をダウンロードしておいてください！
|
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 |
.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; } .question-box-left{ display: inline-block; width: 150px; height: 150px; margin: 0 10px 0 10px; background-color: #e0ffff; } .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-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-number3{ color:#800000; font-size: 150%; font-weight: bold; margin-left: 5px; } |
「PHPで『月5万円』稼ぐためのロードマップ」と書いているように、ここではCSSについての詳しい説明は、省かせて頂きます。自身で調整できるという方は、自身で取り組んだ方が、ソースコードの理解も深まると思うのでトライしてみてください！
もし、CSSやHTMLの勉強もしたい！って方は、以下の記事を読んでみることをお勧めします。
上記のCSSを「quiz.css」に追加すると以下のように表示されるようになると思います。
キレイに表示されるようになりましたね！
ここまでで、「quiz.php」の実装は終了…ではありません！
第1問については、ここまででキレイに表示できていますが、第2問と第3問のことはほったらかしになっていますよね？
次は、第〇問に合わせて表示内容を切り替える部分の設定に入っていきたいと思います。
第〇問に合わせて表示内容を切り替える部分の設定
第〇問に合わせて表示内容を切り替える方法として、以下の方法で表示を切り替えたいと思います。
「quiz.php」が表示されたら、$timesという変数にプラス１をして、$timesの値によって、表示内容を変える。
この指針を踏まえて、「quiz.php」に内容を追加していきましょう。
また、この作業と同時に、「正解数を記録しておく変数として『$num_correct』」も実装していきましょう。
まずは、「quiz.php」の最上部に以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php //入力された値の設定 if(isset($_POST['times'])){ $times = $_POST['times']; } else{ //エラー $times= 0; } if(isset($_POST['num_correct'])){ $num_correct = $_POST['num_correct']; } else{ //エラー $num_correct= 0; } ?> |
これは、どういうことかというと、$timesであれ$num_correctであれ、最初に「quiz.php」に飛んできたときは、何も値が設定されていませんよね？
そんな状況で、コンピュータに「$timesを表示しろ！(echo $times;)」なんて言っても、コンピュータさんは、「いや、$timesって何？無理です。」となり、エラーを出します。
それを防ぐために、まずisset($_POST[‘○○’])を使って、〇〇が前のページから渡されて(POST)いたら、その値を$〇〇に定義して、渡されていなかったら(初めて「quiz.php」に飛んできたとき)、＄〇〇に0を代入するという処理をしています。
次に、先ほど「$question0」だのといった配列を設定した箇所がありましたよね？
その部分を以下のように変更していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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]; ?> |
なんか、$question0たちが、さらに配列に入れられていますね。しかもその後のそれぞれの変数に、値を格納していくところが、なんか[]が２つ並んでいる？？みたいな状況になっていると思います。
ここで「？？？」となった人は、もう一度第3弾を見て、手順通りに基礎事項を学習しましょう！
ここでは、二次元配列という文法を使用しています！
そう思われた方がいたら、是非配列を使わずそれぞれ定義していってください！
そうです。
とっても長くなって、とってもとっても面倒くさくなるんです笑
どこかでこのくだり見ましたね。でも、「とってもとっても」と「とっても」が増えていることがポイントですよ笑
それぞれ定義しようと思うと、本当に面倒くさいです。
二次元配列の構造は以下の図に示しているので、理解の手助けに活用してください！
|
1 |
$response_left =$arr[$times][1]; |
この文であれば、$arrの配列の$times番目の配列の1番目の要素を指すことになるので、仮に$timesが0だったとすると、「”富士山”」を指していることになりますね！
配列内の要素の数え方は”０”から、始まるので注意！
次に、現在「第1問」と表示されている<div class=”question-title”>第1問</div>の内容を変更していきます。
|
1 2 3 4 5 6 |
<div class="question-title"> <?php $a = $times + 1; echo "第","$a","問"; ?> </div> |
$timesのカウントは0から始まるにもかかわらず、表示したい内容は1なので、$timesにプラス1したものを、第〇問として出力しています。
また、問題文の内容も第〇問によって変更したいので、<div class=”question-instruction”>～</div>の内容を以下のように変更していきます。
|
1 2 3 |
<div class="question-instruction"> <?php echo $arr[$times][0]; ?> </div> |
次に、「quiz_result.php」に、$timesや、$num_correctを渡す(POSTする)部分の処理を追加していきます。
先ほど、 <form method=”POST” class=”form” action=”quiz_result.php”>～</font>の最後に、決定するボタンを追加したと思いますが、その上部に、以下のようにソースコードを追加してください。
|
1 2 3 4 5 |
<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;"> |
typeがhiddenになっていると思いますが、これは$timesなどは表示する必要がなく、秘密裏に値が渡されればいいため、このような設定となっております。
quiz_result.php
ここからは次回の第8弾で、実装を行っていきましょう！
まとめ
今回は、PHPを使って「quiz.php」に様々な機能の実装を行っていきました。次回の第8弾では、「3択クイズアプリ」の解答を表示する部分の実装をPHPで行っていきます！
今回のPHP実装が上手くいった方なら問題なくサクッと進められると思うので、ご安心して楽しみにしていてください！
さてさて、みなさんどうでしょう？
なんとなくではあっても、Webアプリってこうやって作るんだ！という実感が湧いてきたのではないでしょうか！
PHPで『月5万円』稼ぐためのロードマップでは、最も効率よく案件をもらえるようになるように、以下のような無料案件紹介サービスに無料会員登録しておくこと進めています！
登録しておいて損はありません！是非プログラミングと並行して、案件獲得の下地を作っておきましょう。
今回は、以上になります！質問や疑問点などございましたら、ぜひぜひ「お問い合わせ」の方からご連絡ください！Twitterも是非フォローよろしくお願いします！
また、新たなPHPで『月5万円』稼ぐためのロードマップのシリーズとして「HTML&CSS」が追加されたのでぜひぜひ一度訪れてみてください！
その他、勉強法や就活、プログラミングに関する相談なども受け付けています！
