Vue.js でクイズをつくる

結構前からやってたような気がするクイズの実装一旦できたので内容まとめようと思います。

GitHub Pages: https://yuheijotaki.github.io/vue-quiz/
GitHub: https://github.com/yuheijotaki/vue-quiz

機能

• JSONから設問情報（設問テキスト/選択肢/解答など）を取得して描画
• 回答形式は単数（ラジオボタン）と複数（チェックボックス）
• 答え合わせボタンでスコアと解答を表示

設問のJSON

READMEにも書きましたがこんな感じで調整しながら落ち着きました

[
  {
    "id": 1,                // [Number] question ID
    "queText": "text",      // [String] question text
    "ansType": "single",    // "single" or "multi"
    "ansCorrect": ["A"],    // [Array(String)] correct answer. If 'ansType' is "multi", specify like ["A","B"]
    "ansChoice": {          // [String] choice answer text
      "A": "answer A",
      "B": "answer B",
      "C": "answer C",
      "D": "answer D"
    },
    "ansCommentary": "text" // [String] answer commentary using HTML tags
  },
  {
    "id": 2,
    ...
  }
  ...
]

ハマったこと

いろいろあった気がしますが、コンポーネントの構成はあらかじめ紙に書いて進めても後で設計し直しがありました。

また設問の描画（components/Question.vue）、解答データの取得（components/Answer.vue）で一覧取得するのに同じメソッド使ってたりするのですが、うまくまとめたりできるんだろうなと思いつつ書き方わかんないなーと思って冗長なところが多々ある気がします。

残り課題

• リセットボタン（ページ最下部）の追加。全回答リセット機能がほしい
• 線 or 円形のプログレスバーの追加。回答状況の進捗を確かめられる要素を入れると親切な気がする
• LocalStorage で質問リストの解答を保存。リロードで一瞬で消えてしまうので
• 複数時 質問リスト 選択肢上限（jQuery） チェックボックス不具合（前選択していた上限が引き継がれてしまう）
• （そもそも）設問1問ずつでページ遷移する形のほうがよい？

とかですかね。基本の回答 → 答え合わせはできたのですが細かい所でちょくちょく改善したい点はあります。

これから

CLI使うとき、ビルドインにするとき、Router 使うときなどいろいろな導入の方法あると何がベストなのかが実際に触っている段階でも分からないので触れる機会を増やさなきゃなぁと思います。
SPAから逃げてきたので次回はページ遷移する要件もった何かを作りたいと思います。