クイズの設計要件
ブロックでプログラムを入れ込めるようにする、PHP 解説を添える 設計仕様書のテンプレートを作成する
- プレーンなコードで簡易設計して、読み込み速度を早くする
- DBでクイズの問題と解答を管理できるようにする
- プラグイン化する
- クイズ選択肢BOXの作成
- BOXの大枠をレイアウト
- divタグ設定
- 背景色: #fdfdf9
- タイトルを常に表示(ここでクイズです or Qマーク)
- pタグ設定
- フォントサイズ:大
- 文字色:#584836
- 難易度を右上に常に表示する(マイスターのあなたには難問出題、確率でランダム出題)
- 問題文を常に表示
- 選択肢を常に表示
- divタグの設定(4つ)
- 白色#fff
- border: 2px solid #bbb;
- 画像を右側に配置する
- HTML: imgタグでstyle=display inlineにする
- 間違った選択肢を選んだら、その選択肢を赤にして、正解を緑にする
- jQueryでtoggleClassメソッドの設定
- 正解の選択肢を選んだら、その選択肢を緑にする
- jQueryでtoggleClassメソッドの設定
- 回答後はアンクリッカブルにする
- BOXの大枠をレイアウト
- クイズ回答用領域の作成
- 表示/非表示の切り替えを選択肢を選んだ時にできる
- jQueryでtoggleClassメソッドの設定
- scriptタグをウィジットで本文上にカスタムHTMLとして挿入
- CSSで表示と非表示のClass決め
- HTMLで非表示時のClass決め
- クイズの回答と解説
- 表示/非表示の切り替えを選択肢を選んだ時にできる
- DBでクイズの問題と解答を管理できるようにする
- プラグイン化する
クイズのプログラム調査
コメント