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

クイズの設計要件

ブロックでプログラムを入れ込めるようにする、PHP　解説を添える　設計仕様書のテンプレートを作成する

• プレーンなコードで簡易設計して、読み込み速度を早くする
• DBでクイズの問題と解答を管理できるようにする
• プラグイン化する

• クイズ選択肢BOXの作成
  • BOXの大枠をレイアウト
    • divタグ設定
    • 背景色：　#fdfdf9
  • タイトルを常に表示（ここでクイズです or Qマーク）
    • pタグ設定
    • フォントサイズ：大
    • 文字色：#584836
  • 難易度を右上に常に表示する（マイスターのあなたには難問出題、確率でランダム出題）
  • 問題文を常に表示
  • 選択肢を常に表示
    • divタグの設定（４つ）
    • 白色#fff
    • border: 2px solid #bbb;
  • 画像を右側に配置する
    • HTML: imgタグでstyle=display inlineにする
  • 間違った選択肢を選んだら、その選択肢を赤にして、正解を緑にする
    • jQueryでtoggleClassメソッドの設定
  • 正解の選択肢を選んだら、その選択肢を緑にする
    • jQueryでtoggleClassメソッドの設定
  • 回答後はアンクリッカブルにする

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

クイズのプログラム調査