はじめに

今回はオーソドックスなクイズアプリを作りました。
https://friendly-lamport-2b360e.netlify.app/

デザインがもろに「アレ」ですが、チャットノベルっぽい感じで簡単に遊べるものを目指しました。

構造

フロントエンドだけで全部やってます。
メッセージ用のコンポーネントと選択肢用のコンポーネントを作ったあと、こんな感じのオブジェクトの配列を渡して、順々に処理させています。

  [{
    type: TYPE.Message,
    value: "ずばり、原子番号で二番目の元素はなんでしょう？",
  },
  {
    type: TYPE.Select,
    response: "ヘリウムとしかいいようがありません。",
    value: [
      {
        text: "ヘリウム",
        answer: true,
      },
      {
        text: "リチウム"
      },
      {
        text: "ベリリウム"
      },
      {
        text: "ホウ素"
      }
    ]
  }]

技術

• React
• Netlify

感想

割と2時間ぐらいで形になったので、意外と余裕だなーって思ってたんですけど、なんだかんだで調整したり問題考えたりで半日ぐらいかけてしまいました。

ほんとはもうちょっと、チャットがぽこ！　ぽこ！　って上がっていくみたいな、ふわふわ感をもっと出した楽しいイメージのアプリにしたかったんですが、機械的になっちゃいました。

この辺のインタラクション考えられる人すごいなって思います。

あと、かぶりました。（問題までかぶるとは）
https://crieit.net/boards/web1week-202009/2-NoCode