生JavaScriptで「トリコ」クイズアプリ作成

HTML,CSS,JavaScriptの勉強がてら，簡単なクイズアプリを作ってみました．

⬇️⬇️以下のURLから遊べます⬇️⬇️

https://shimiharu1012.github.io/toriko_quiz/

概要　

　４択クイズ．ランディングページ（スタート画面），ゲーム画面，結果表示画面からなる．𝕏でスコア共有のインテント機能付き．

使用技術

工夫した点

  • デザイン
    • 原作のイメージを再現
      • 文字のフォント
      • 色使い
      • 丸かけ角のボックス（CSSがかなり複雑）
    • 共通のデザインを繰り返す→統一性
  • 機能
    • ⭕️❌をモーダルで表示
    • 𝕏で共有機能(WEBインテント）
      • jsのクイズ正解数を埋め込んだURL（文字列）をjs内で生成し,element.href="URL文字列"として渡す

今後の改善点

  • 優先度　高
    • 問題数の増加，
    • レスポンシブデザイン
  • 優先度　中
    •  ユーザの結果をバックエンドで保存し，偏差値を表示
    • SEの追加，およびON,OFFボタンの追加
  • 優先度　低
    • ゲーム体験を向上するための工夫
      • キャラクターの画像やアイコン
      • バックエンドで問題ごとのユーザ正当数を取得する（出題難易度や問題の見直しをこなうため）

 

　今後も定期的に改善していく予定．issue管理による開発をすると良さそうなので参考に．issue管理による継続的な開発の目的としては

  • Git/Githubの使い方に慣れる，
  • issueによってタスクを分解することで無理なく勧められる．
  • 作りっぱなしは❌．一度公開したプロダクトを運用，改修していくことが実際の業務においても重要．