コード感チェック

OVERVIEW

4つのコードから1つをランダムに鳴らし、選択肢から選ぶ。 音を使ってるだけで、中身はシンプルなクイズです。 (友人用)

YEAR 2019

備忘録として。


PHPでの初制作。 2019-04-17

連続正解数の表示機能追加。 2019-04-20


経緯

コード感を鍛えたいので、4つの音源をシャッフルしてクイズ的に聴けるようにしたいという友人の悩みを見て制作。

個人用なのでネイティブアプリの方が良いのでしょうが、たまたまレンタルサーバーを借りていたので、webアプリとして制作し片隅に設置。



仕様

ユーザーが見るのは start.php check.php answer.php の3ページのみ。


start.php

  • check.phpへのリンクがあるだけ。
  • 連続正解数に使う変数に0を入れている。


check.php

  • 配列に音声ファイル`.mp3`を用意。
  • array_rand(配列,1) で、シャッフルして1つを取得。 ---①
  • ①をボタンで鳴らす。
  • 選択肢ごとの value に配列の0~3を入れる。
  • input hidden で①を answer.php に送る。 ---②


answer.php

  • $_POST で回答と②を取得。
  • if文で正誤判定。
  • 不正解の場合、取得した②を elseif文で表示する。
  • 連続正解数を表示する。


工夫

  • スマートフォンでの使用も考えてボタンを押しやすく
  • 常に4択なので、わかりやすいように選択肢の位置を固定
  • 選択肢は田の形に。
  • 不正解の場合に正解をフィードバックする



課題

  • 結果ページから戻ったとき、たまにボタンを押しても鳴らないことがある。原因不明。制作途中にテストとして別の音声ファイルを入れていたときは無かった。

2019-04-19 追記 

配列に用意した音声ファイルの名前が間違っていた。初歩的すぎる。

制作途中では無かったことがわかっていたのだから、そのあたりを確認すべきだった。


  • 連続正解数カウントのための試行錯誤で、どうしてもNoticeエラーが表示されてしまう。これを解決するのではなく、非表示にすることで体裁を整えた。


  • 問題と結果のページを繰り返すので、ブラウザの「戻る」「進む」が埋め尽くされてしまう。



コード感チェック