クイズサイト『QuizKnock10000』概要
JavaScriptによるインタラクティブ性を備えたクイズサイトを制作しました。
【使用言語】
- HTML5/CSS3
- PHP
- JavaScript(jQuery)
- データベース(MySQL)
【使用技術】
- Ajax(jQuery)
- PHP Data Objects(PDO)
【開発環境】
- Eclipse
- Visual Studio Code
- XAMPP
【制作人員・期間】
- 1名(個人制作)
- 1ヵ月
サイト紹介
タイトル
『PRESS START』ボタンより、サイトに入ります。
クイズに関連する単語をjQueryにより移動させて装飾しています。
ログイン
ログイン画面では、ユーザーの新規登録・ログイン・ログインなしのゲストでの参加が可能です。
ゲストでログインした場合は、スコアの記録・ランキングへの登録や、難易度解禁状況などが保存されなくなります。
モード選択
難易度の選択が可能で、上級になるほど問題の難易度や、制限時間が短くなっていきます。
難易度『Ex』『SUPER』は、一定のスコアを達成すると解禁されます。
解禁状況は、ユーザー登録をしていると記録され、次回からもプレイ可能です。
クイズ画面
クイズがスタートすると、10秒のカウントダウンが始まり、その時間内で解答ボタンを押さなければ時間切れとなります。
解答までの時間が早いほど、基礎点が高くなり、高得点になります。
残り時間が少ない状態で正解すると、基礎点が低くなり、点数が低くなります。
連続で正解すると、現在の連続正解数に応じた倍率が基礎点に掛かり、点数がアップします。
リザルト
リザルト画面では、設問ごとの点数の詳細や、総合点、順位などを確認することができます。
一定の解禁条件を満たすと、新モードの解禁画面が表示されます。
ランキング
ランキング画面では、自分の順位や、ほかのユーザーのスコアを見ることができます。
※ゲストでのプレイ時は反映されません。
マイページ
マイページでは、ログアウトのほか、マイデータの閲覧、ユーザーネームの変更や、パスワード変更、アカウント削除などが行えます。
ニックネームを変更するとランキング上の名前も変更されます。
管理画面
※管理画面のデモはありません
管理画面では、問題の追加や編集などを行えるようにしています。
下部の問題一覧の『編集』ボタンをクリックすると、編集フォームに情報が表示され編集が可能になります。