PHP初心者向けのクイズプログラムの作り方の解説ページ

PHP初心者向けのクイズプログラムの作り方の解説ページ

PHPを使った漢字クイズの作り方解説 その1 POST送信

#30 POST送信

WEB制作

【初心者向け】PHPプログラムを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。 なるべくわかりやすく、難しいことは省いてPHPで何かを作る楽しさを伝えていきたいと思います。

公開日:
最終更新日:

サイトマップサイトマップ

クイズや診断コンテンツのPHPプログラムの作り方教えます

このサイトのコンテンツの中心である、クイズや診断コンテンツのPHPプログラムの作り方を教えます。作り方はいたって簡単。むしろアイデアのほうが重要です。何回かに分けて詳しく解説します。
第1回目は基礎の基礎で、作り方の概要を簡単にまとめます。

PHPを使って作ります。全体設計は、設問ページ → 答え合わせのページという2ページ構成です。
HTMLのformタグを使って、送信された内容をPHPを使って受け取り、答え合わせと採点を行うという流れです。

デザインにかかわるところは省きますので、CSSやカッコいい画像なんかをうまいこと組み合わせて面白いものを作ってみてください!

実践の前に簡単な座学から。理解して作ってみましょう

いきなりコードを書いてもいいのですが、せっかくですのでどういった流れでプログラムが動いているのかを簡単に解説します。わかりやすく説明するために、本来の意味とは少し違う説明をするかもしれませんが、細かいことは多めに見てください。

GETとPOSTの違いと役割

formタグで情報を送信する方法にはGETとPOSTという2種類の方法があります。GETはURLにパラメータをくっつけて送信する方法です。

PHP GETとPOSTの違い
GETとPOST

使い方が簡単なGET送信とパラメータ

よくURLの後ろのほうに「http://www.start-point.net/blog/?page=2」というように「?」で区切られて、「=」でつながれた文字があるのをご存知でしょうか。

これがGET送信という方法で、「=」の左と右で1セットになっています。このセットをパラメーターと呼び、左側を変数名、右側を値、と呼びます。

指定の変数名と値の組み合わせで、表示するページの内容を変更したりするのに使います。
ここまで言えば、page=2 が意味するものが分かりますよね。

pageはページ、2は2ページ目を指しているわけです。
ただし、page=2と名付ければ自動で2ページ目を表示するわけではなく、「page」という変数名の値が「2」だったときは、2ページの内容を表示せよと、という命令文が裏側で仕込まれているわけです。ページ送りに限らず、いろいろな識別子としても使われます。

GETはURLにくっつけて送信される

GETの特徴として、URLの後ろにくっつけて送信するので、目に見えても差し支えのない情報のやりとりに使います。間違ってもパスワードやメールアドレスをGETで送信してはいけません。だって、見えてしまいますから。

パラメーターは1つではなく、2つでも3つでも送れるのですが、あまり多くのパラメータをくっつけるとURLが長くなるのと、文字数制限があるので、そんなに多くのパラメータを使うことはあまりありません。複数をつなげるときは ?page=2&category=img のように「&」でつなぎます。
1つめの変数は「?」でつなぎ、2個目以降は「&」でつなぎます。

GET送信はformタグをつかわなくても情報を送れるので、ページ送りなどに使われます。<a>タグにそのまま <a href="http://www.start-point.net/blog/?page=2">2ページ目</a>という具合に使います。

手軽にいろいろと判別できるので、ページ送り以外にもいろいろな使われ方をしています。

重要な情報や送信する項目が多いときはPOST送信を使う

POST送信の場合、表面上はなにもわからない状態で情報を送信します。ログインや問い合わせフォームなどで使われる方法です。

表側からはどんな情報をどんな変数名で送信しているかはわかりません。ソース見ればわかるんですけどね。formタグの中身に使われる <input type="radio" name="性別" value="男性">この name属性が変数名になります。value="男性" これが値になります。

GETと同様、変数名と値が1セットになっているわけです。ここ重要なので覚えておいてください。

GETだろうとPOSTだろうと、変数名にセットされた値を取り扱っていろいろな処理を行います。

ここから本番。実際に簡単な問題を作ってみましょう

「GET」か「POST」と「変数」と「値」これさえあればクイズでも診断でも占いでも作れます。

漢字の読み方を答えるクイズを作ってみましょう。
問題「薔薇」の正しい読み方を答えてください。
1.ばら 2.きく 3.ひまわり

こういう問題を作るとして、情報を分解して考えます。1問目の漢字クイズの問題が「薔薇」。
回答が3つ。そのうち1つは正解、のこりの2つは不正解。「ばら」が正解。
これをフォームにするとこうなります。

問題を構成するHTML

<form method="post" action="kaitou.php">
<p>薔薇</p>
<input type="radio" name="q1" value="ばら" checked="checked">ばら<br>
<input type="radio" name="q1" value="きく">きく<br>
<input type="radio" name="q1" value="ひまわり">ひまわり<br>
<input type="submit" value="答え合わせ">
</form>

変数名は「q1」、その値がvalueで指定されたいずれか。ばら、きく、ひまわりのどれか1つの回答になりますので、radioボタンを使って回答を作ります。
ちなみに変数名はなんでもOKなので、わかりやすい名前を付けてください。私は1問目とわかりやすいように「q1」と名付けました。

それを送信するための <input type="submit" value="答え合わせ"> submit属性を使うと自動で送信ボタンを作ってくれます。

HTMLのレンダリングデモ(ボタンをおしても動きません)

薔薇

   

submitボタンが押されると、formタグの中に actionで指定されたURLのページに遷移します。
送信方法はmethodで指定されたpost送信です。
勘の言い方はお気づきかと思いますが、ここまではPHPは使われておりません。HTMLだけです。

PHPが出てくるのは遷移先のkaitou.phpの中身になります。

PHPを使ってpostで送られた情報を受け取る方法

送信された情報を受け取るのは超簡単です。

<?php
$q1 = $_POST["q1"];
?>

1行書くだけ。これだけ。
$q1 はPHP側の変数名で、= の右側の $_POST["q1"];、[ ]の中身がformタグで指定した <input radio name="q1">のq1。つまり変数名です。

ちなみにGET送信の場合は $_GET["q1"]; で受け取ります。

radioで作った変数名をPHPで受け取って、$q1という変数名にいれてあります。で、これに対して正解か不正解かをジャッジして、正解だったら正解と表示して、間違いだったら不正解と表示してみます。

クイズの採点プログラム kaitou.php のPHP

<?php
$q1 = $_POST["q1"];
if($q1 == 'ばら'){
	echo '正解';
}else{
	echo '不正解';
}
?>

$_POST["q1"]で送られてきた回答を $q1に受け取ります。この中身は回答者によって様々なので、何が入ってくるかはこの時点ではわかりません。

受け取った内容を格納した $q1 の中身を if文で判定します。
今回は、正解か否かの二択の判別なので、単純に正解の「ばら」と一致しているかどうかを判別します。

if($q1 == 'ばら') これだけ。超簡単ですね。 $q1が「ばら」かどうか。
1つ目の{ } 中に正解($q1がばら)だった時の処理を書きます。
echo で表示したい文字を書くだけ。今回は「正解」と表示させます。

で次にelse{ }でくくられた中に、不正解($q1が「ばら」でないとき)の処理を書きます。
正解と同じやり方で echo で「不正解」と表示しましょう。

if文の考え方はエクセルのif文とほぼ同じです。書き方が若干違うだけで、正しいときの処理と、間違いだった時の処理を書くだけ。

これで漢字クイズのコアな部分は完成です。
あとはこれを設問の数だけ増やせば良いわけです。

このサイトの漢字クイズはこんな感じ

設問数を増やすとなると考え方が変わってくる

設問数が1問のみのクイズを作るにはこんな感じで作れます。ただし、設問数を増やすといろいろな追加処理をしたくなります。
クイズに限らずたいていの処理に関して、1つだけ表示するのは簡単、2つ表示するのはちょっと難しい、3つ以上作るとなかなか難しくなる。という法則があります。

1つだけの場合は、作り方も考え方もシンプルなので簡単なんです。
処理が2つになると、YES or No、2通りの処理を考えなくてはならないので、少し面倒になります。
処理が3つになると、どうやったら楽に制作できるか、頭の使い方を変える必要が出てくるとともに、もっとこうしたい、ああしたいという欲がでてくるんです。ちなみに3つより上はだいたい同じ考えでできます。

例えば、1つ場合は正解か不正解の2択なので、あまり深く考えなくてよいのですが、問題数を2つ以上にすると、得点をつけたくなりませんか?そうすると、正解数に応じて採点をする処理を考える必要ができます。

さらに、正解不正解のジャッジをひとつづつif文で構築していくが面倒になるので、使いまわしの効く方法をとりたくなってくるわけです。

プログラミングの巧拙は、こういった繰り返し処理をいかにシンプルに、簡単に、汎用性が高く作れるかが腕の見せ所です。私はここがあまりうまくないんですけどね。

次回、複数問題の作りかたを解説したいと思います。

複数問題のクイズプログラムの作り方を作りました!

連想配列の多次元配列を使うことで、複数問題の管理が簡単にできます!

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

誰もがあきらめずにすむPHP超入門

1,848円(税込)

誰もがあきらめずにすむPHP超入門

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

2,750円(税込)

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

スッキリわかるSQL入門 第2版 ドリル222問付き! (スッキリわかる入門シリーズ)

4,300円(税込)

スッキリわかるSQL入門 第2版 ドリル222問付き! (スッキリわかる入門シリーズ)

SQL 第2版 ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

2,068円(税込)

SQL 第2版 ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

3ステップでしっかり学ぶ MySQL入門 [改訂2版]

2,728円(税込)

3ステップでしっかり学ぶ MySQL入門 [改訂2版]

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉

2,640円(税込)

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉

詳細! PHP 8 + MySQL入門ノート XAMPP + MAMP 対応

3,520円(税込)

詳細! PHP 8 + MySQL入門ノート XAMPP + MAMP 対応

POST送信の関連ページ

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

アイキャッチの作り方
1位

アイキャッチの作り方

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

bookblock
2位

bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

MusicBeeのレイアウト変更方法
3位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ノートPCスタンド
4位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

Bluetoothイヤホンの使い方
5位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

今治タオル
6位

今治タオル

高級タオルの代名詞「今治タオル」を購入してみました。毎日使うバスタオルを1ランク上の物に変えるだけで使うたびに幸せな気持ちになれます。

ウルトラブースト
7位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

アンズテック
8位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

ツタヤディスカス
9位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

SDカード
10位

SDカード

SDカードのせいかイマイチ不明なのですが、撮影した写真データが破損するという事象が発生しまして、新しくソニーの純正SDカードを購入しました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

誰もがあきらめずにすむPHP超入門

1,848
(税込)