flaskでTechクイズアプリを作ってみた!

んじょも！りなです(`·⊝·´)
私はオーストラリアでとあるITスクールに通っているのですが、今回プロジェクト週間ということでWebアプリの個人製作をするという課題がありました。
ちょうどプロジェクト週間が終わったのでその記録。

---

アプリの概要

https://project2-flask.herokuapp.com/

概要

• テクノロジーに関するクイズをカテゴリーごとに出題
• APIサーバーを作成しクイズデータはそっちに保存（Node.js/MongoDB）
• 過去のゲーム記録を保存し正答率を見返せる機能

---

プロジェクトの条件, etc

プロジェクトの条件

• Python(Flask)を使うこと
• Postgresqlを使うこと
• 期限は１週間

実際に使用した技術、言語

• Flask
• Postgresql
• Psycopg2
• Node.js
• MongoDB
• Mongoose
• bcrypt
• Heroku
• JavaScript

---

詰んだところ

環境変数問題

• Flask内でのクイズ問題管理に環境変数を使用
  
  
  → Herokuにデプロイした瞬間にクイズ問題の管理に環境変数が使えないことに気づき死亡(°°)
  → ユーザーが答えるごとに１問ずつAPIから取得してくる仕様にしてみた
  → 予想はしてたがあまりにも取得に時間がかかりすぎてUI的にゴミへと化す
  → １０問ずつ取得しflaskに繋がってるpostgresqlに一時的に保存することにした
  
  
  ...長い道のりでした(°_°)

FlaskからJSに変数を渡す方法が分からない

→ Jinja2で渡す方法をググりまくる
→ 出てきたサイトに書かれてる方法がなぜか動かない

<script type="text/javascript">
  let list_data = {{ 変数名 | tojson }};
</script>

結局こうなった ↓

<script type="text/javascript">
  let answer = JSON.parse('{{ correct_answer|tojson }}')
</script>

ここに関してはいまだに何故ダメだったのかが分かっていないので、分かる方いらっしゃいましたら教えていただけるとないて喜びます( ᐪᐤᐪ )
なぜ私の場合はJSON.parseが必要だったんだろう...

---

これからやりたいこと

• クイズ問題の追加
• 解答ボタン(四択)がボタンに見えないのでボタンだと分かるように改善
• ゲームの説明画面
• レスポンシブ対応(今はゴミ)

---

ソースコード

https://project2-flask.herokuapp.com/

---

ついでに簡単な自己紹介

プロフィール

ITの勉強を始めて１年弱。
オーストラリア在住。
現在General AssemblyのSEIコース受講中。
コース内容よりも英語に苦戦中( ˘ω˘ )ｽﾔｧ…
趣味はピアノ。歴15年とちょっと。
好きな作曲家はショパン、ベートーヴェン、ドビュッシー。
最近やってるゲームは十三機兵防衛圏。サイコー★
好きな言語はJavaScript♥