【Bubble】SDGs２択クイズアプリについて②

こんにちは、UGOK-5thメンバーのゆりあです。

前回から1か月ほど間が空いてしまいましたが、「SDGsを学べる２択クイズアプリ」の完成版を紹介します！

　 前回記事はこちら（企画のきっかけ・アプリの基本機能・問題点について）

アプリの追加機能

● 問題のランダム表示

このアプリを作るうえで「重複なしでランダム表示」が最も悩んだ部分です。

公式フォーラムに同じ質問をしている人がいて、無事解決することができました！その方法は、Sort byを「Random sorting」にするだけでよかったです😲

ただ、回答者によるとページを更新するたび100%違った表示になる保証はないので、乱数ジェネレータープラグインを使った方が確実らしいです。

また、問題番号も一緒にランダム化されるのを防ぐため、Repeating Group Quizから外し、inspectorで設定したものを表示するよう変更しました。

● ヒント機能

クイズの内容が想定より少し難しくなってしまったので、ヒント機能を付けました。

ヒントアイコンを押すと文章が表示され、選択肢ボタンを押すと非表示になります。

● 全問正解イベント

ログイン時のみ、全問正解すると木が成長します！

Current User内にログイン回数を記録するデータを作り、ログイン状態かつ結果発表ボタンを押したとき１増えるようにして、ユーザー別で何回全問正解したかわかるようにしました。必ず実現させたい部分だったので、結構時間はかかりましたが粘って完成させました！

● Twitterシェアボタンの設置

先ほどの全問正解イベント時、右下に表示されているのがTwitterシェアボタンです。

同じUGOK-5thメンバーのあすかさんのブログを参考にして作りました。Twitter PublishのShare ButtonのコードをHTMLエレメントにコピペする方法です。

　参考にした、あすかさんの記事はこちら（1．Twitter共有機能について）

工夫した点は、ボタンのサイズをlargeに変更し、ツイートに「@ユーザー名より」と記載されるように変更したことです。

まとめ

前回記事で挙げていた問題点をすべて解決することができ、非常に満足しています。振り返ると、時間をかけて解決方法を模索していたときが一番楽しかったです。

今回でSDGsクイズアプリブログについては終了します。今後もアプリ・サイト制作を続け、随時ブログも更新していきます！ありがとうございました☺