diff --git a/public/sample/php/quiz/exercise1/quiz.html b/public/sample/php/quiz/exercise1/quiz.html new file mode 100644 index 0000000..0938ea4 --- /dev/null +++ b/public/sample/php/quiz/exercise1/quiz.html @@ -0,0 +1,84 @@ + + + + + + クイズ - 演習1 + + + +
+

クイズに挑戦！

+ +
+
+ 問題: 日本の首都はどこでしょう？ +
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + diff --git a/public/sample/php/quiz/exercise1/submit.php b/public/sample/php/quiz/exercise1/submit.php new file mode 100644 index 0000000..1c3d4d8 --- /dev/null +++ b/public/sample/php/quiz/exercise1/submit.php @@ -0,0 +1,94 @@ + + + + + + 結果 - 演習1 + + + +
+ '; + echo '

エラー

'; + echo '

不正なアクセスです。

'; + echo 'クイズに戻る'; + echo '
'; + exit; + } + + // 送信された答えを取得 + $userAnswer = $_POST["answer"] ?? ""; + + // 正解 + $correctAnswer = "tokyo"; + + // 正誤判定 + if ($userAnswer === $correctAnswer) { + // 正解の場合 + echo '
🎉
'; + echo '
正解です！
'; + echo '
日本の首都は東京です。
'; + } else { + // 不正解の場合 + echo '
😢
'; + echo '
残念！不正解です。
'; + echo '
正解は「東京」でした。
'; + } + ?> + + もう一度挑戦する + + + diff --git a/public/sample/php/quiz/exercise3/quiz.php b/public/sample/php/quiz/exercise3/quiz.php new file mode 100644 index 0000000..6af015d --- /dev/null +++ b/public/sample/php/quiz/exercise3/quiz.php @@ -0,0 +1,125 @@ + "世界で一番高い山は？", + "options" => ["富士山", "エベレスト", "キリマンジャロ"], + "answer" => "エベレスト" + ], + [ + "question" => "光の速さはおよそ秒速何km？", + "options" => ["30万km", "3万km", "300万km"], + "answer" => "30万km" + ], + [ + "question" => "1年は何日？（うるう年を除く）", + "options" => ["365日", "364日", "366日"], + "answer" => "365日" + ], + [ + "question" => "日本で一番大きい湖は？", + "options" => ["琵琶湖", "霞ヶ浦", "サロマ湖"], + "answer" => "琵琶湖" + ], + [ + "question" => "太陽系で一番大きい惑星は？", + "options" => ["木星", "土星", "地球"], + "answer" => "木星" + ] +]; + +// ランダムに1問選択 +$randomIndex = array_rand($questions); +$selectedQuestion = $questions[$randomIndex]; +?> + + + + + + ランダムクイズ - 演習3 + + + +
+

ランダムクイズに挑戦！

+ +
+
+ 問題: +
+ +
+ $option): ?> +
+ +
+ +
+ + + "> + + +
+ +
+ 💡 ポイント: + このクイズでは、問題がランダムに出題されます。 + ブラウザの開発者ツールを開いて、HTMLソースを見てみましょう。 + 正解が隠されていることが確認できます。 +
+
+ + diff --git a/public/workspace/.gitkeep b/public/workspace/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/public/workspace/.gitkeep diff --git a/public/workspace/php/quiz.html b/public/workspace/php/quiz.html new file mode 100644 index 0000000..12cf1c5 --- /dev/null +++ b/public/workspace/php/quiz.html @@ -0,0 +1,40 @@ + + + + + + クイズ + + +

クイズに挑戦！

+ +
+
+

問題: ここに問題を書きましょう

+
+ +
+
+ +
+
+ +
+
+ +
+
+ + +
+ + diff --git a/public/workspace/php/submit.php b/public/workspace/php/submit.php new file mode 100644 index 0000000..8e85726 --- /dev/null +++ b/public/workspace/php/submit.php @@ -0,0 +1,26 @@ + + + + + + 結果 + + + + + もう一度挑戦する + + diff --git a/src/pages/php/040-work.mdx b/src/pages/php/040-work.mdx new file mode 100644 index 0000000..3e90bce --- /dev/null +++ b/src/pages/php/040-work.mdx @@ -0,0 +1,232 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +import Toc from "../../components/Toc.astro"; +import Details from "@/components/Details.astro"; + +export const title = "クイズを作ってみよう"; + +import DockerLink from "@/components/DockerLink.astro"; + +# {title} + +これまで学んだPHPの知識を使って、クイズアプリを作ってみましょう。 + +## TOC + +## 演習の目的 + +この演習では、以下のPHPの機能を実践的に学びます。 + +- フォームデータの受け取り（`$_POST`） +- 条件分岐（`if`文） +- 変数の使い方 +- `htmlspecialchars()`によるセキュリティ対策 + +## 課題 + +`/workspace/php/`ディレクトリにテンプレートファイルが用意されています。 +これを編集して、オリジナルのクイズを作成してください。 + +### 必要なファイル + +- `quiz.html` - クイズ問題を表示するHTMLファイル（そのまま使えます） +- `submit.php` - 答えを判定するPHPファイル（**TODOを実装してください**） + +### 実装する内容 + +`submit.php`には4つのTODOが書かれています。順番に実装していきましょう。 + +#### TODO 1: フォームから送信されたかチェックする + +直接このページにアクセスされた場合にエラーを表示します。 + +
+ +`$_SERVER["REQUEST_METHOD"]`という特別な変数を使います。 +フォームが`method="post"`で送信された場合、この値は`"POST"`になります。 + +
+ +
+ +```php +if ($_SERVER["REQUEST_METHOD"] !== "POST") { + echo '

エラー

'; + echo '

不正なアクセスです。

'; + exit; // ここで処理を終了 +} +``` + +`!==`は「等しくない」という意味です。POSTメソッド以外でアクセスされた場合はエラーを表示して終了します。 + +
+ +#### TODO 2: 送信された答えを取得する + +フォームから送信されたユーザーの答えを変数に保存します。 + +
+ +`$_POST`という特別な配列を使います。 +`quiz.html`のinputタグの`name="answer"`に対応して、`$_POST["answer"]`で値を取得できます。 + +
+ +
+ +```php +$userAnswer = $_POST["answer"] ?? ""; +``` + +`??`は「左側の値が存在しない場合は右側の値を使う」という意味です。 +これにより、値が送信されなかった場合でもエラーにならず、空文字列が入ります。 + +
+ +#### TODO 3: 正解を設定する + +正解の値を変数に保存します。 + +
+ +`quiz.html`の正解の選択肢の`value`属性の値を設定します。 +例えば、``が正解なら`"option1"`です。 + +
+ +
+ +```php +$correctAnswer = "option1"; +``` + +もちろん、`quiz.html`を編集して問題を変更した場合は、それに合わせて変更してください。 + +
+ +#### TODO 4: 正誤判定をする + +ユーザーの答えと正解を比較して、結果を表示します。 + +
+ +`if`文を使って、`$userAnswer`と`$correctAnswer`が等しいかをチェックします。 +等しい場合は正解、そうでない場合は不正解のメッセージを表示します。 + +
+ +
+ +```php +if ($userAnswer === $correctAnswer) { + echo '

正解です！

'; + echo '

よくできました。

'; +} else { + echo '

不正解です

'; + echo '

残念！もう一度考えてみましょう。

'; +} +``` + +`===`は「完全に等しい」という意味です。メッセージの内容は自由に変更できます。 + +
+ +## quiz.htmlの編集 + +`quiz.html`は問題文と選択肢を自由に編集できます。 + +```html + +

問題: ここに問題を書きましょう

+ + + +``` + +**重要なポイント:** +- `value`属性の値が`submit.php`に送信されます +- `name`属性は全ての選択肢で同じ（`"answer"`）にする必要があります +- 正解の選択肢の`value`を覚えておいて、`submit.php`のTODO 3で使います + +## 発展課題 + +基本的なクイズができたら、以下の機能を追加してみましょう。 + +### 1. スタイルを追加する + +`quiz.html`と`submit.php`にCSSを追加して、見た目を良くしてみましょう。 + +```html + +``` + +### 2. 複数の問題に対応する + +配列を使って複数の問題を管理してみましょう。 + +```php +// quiz.phpとして作成 + "問題1", + "options" => ["選択肢1", "選択肢2", "選択肢3"], + "answer" => "選択肢1" + ], + // 問題を追加 +]; + +// ランダムに1問選ぶ +$randomIndex = array_rand($questions); +$selectedQuestion = $questions[$randomIndex]; +?> +``` + +### 3. 解説を追加する + +不正解の場合に、なぜその答えが正解なのかを説明する機能を追加してみましょう。 + +```php +if ($userAnswer === $correctAnswer) { + echo '

正解です！

'; + echo '

解説: 正解の理由を書きます

'; +} else { + echo '

不正解です

'; + echo '

解説: 不正解の理由と正しい知識を書きます

'; +} +``` + +## 確認方法 + +作成したクイズは以下の方法で確認できます。 + + + +1. リンクをクリックしてクイズページを開く +2. 問題を読んで答えを選択する +3. 「答えを送信」ボタンをクリック +4. 正誤判定の結果が表示されることを確認する + +## まとめ + +この演習では、PHPの基本的な機能を使ってインタラクティブなウェブアプリケーションを作成しました。 + +- フォームからのデータ受け取り +- 条件分岐による処理の切り替え +- エラーハンドリング + +これらはウェブアプリケーション開発の基礎となる重要な概念です。 +ぜひ自分なりにアレンジして、さまざまなクイズを作ってみてください。