WordPressで使える読み込み速度の速い簡易クイズプログラムを作成#2 仕様書の作成

クイズの設計要件

ブロックでプログラムを入れ込めるようにする、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メソッドの設定
    • 回答後はアンクリッカブルにする

  • クイズ回答用領域の作成
    • 表示/非表示の切り替えを選択肢を選んだ時にできる
      • jQueryでtoggleClassメソッドの設定
      • scriptタグをウィジットで本文上にカスタムHTMLとして挿入
      • CSSで表示と非表示のClass決め
      • HTMLで非表示時のClass決め
    • クイズの回答と解説
  • DBでクイズの問題と解答を管理できるようにする
  • プラグイン化する

クイズのプログラム調査

コメント

タイトルとURLをコピーしました