今回は、4択クイズアプリ の最終回です。設定するワークフローについて解説したいと思います。なお「Set state」となるワークフローの設定については、前回の記事をご参考ください。
関連記事
- Bubble で作る「4択クイズアプリ」１：アプリ概要とデータベース作成
- Bubble で作る「4択クイズアプリ」２：エレメントの配置と設定
- Bubble で作る「4択クイズアプリ」３：Custom state の使い方
選択肢ボタンをクリックした時のワークフロー
選択肢ボタンをクリックした時に必要なワークフローは以下の２つです。
- 正解の場合は「〇」を表示する
- 不正解の場合は「×」を表示する
では、設定していきましょう。「When 選択肢Aボタン is clicked」のイベントで「Click here to add an action...」から、「Element Actions」で「Show」を選択し、正解の場合は「Element」で正解アイコン、「Only when」で「Current cell's Quiz's answer is A」とします。不正解の場合は、「Element」で不正解アイコン、「Only when」で「Current cell's Quiz's answer is not A」とすればOKです。これで、選択肢Aボタンのワークフローが完成しました。同じ設定を選択肢BからDボタンにも行います。
2020/03/06 記事を修正しました。
上記の設定で、スクリーンショットでは「Current cell's Quiz's answer is "A"」となっている画像を投稿していましたが、現在のBubble では「"（ダブルクォーテーション）」は条件を確定した時点で表示されなくなった為、スクリーンショットの画像を差し替えました！「Only when」では「Current cell's Quiz's answer is A」または「Current cell's Quiz's answer is not A」と入力します。また、本項の設定は、選択肢Bボタンでは「Current cell's Quiz's answer is B」となり、選択肢Cボタンでは「Current cell's Quiz's answer is C」という具合に、選択肢にあわせて設定してくださいね。
また、あわせてエディタも公開しますので、参考にしてみてください！
次の問題へボタンをクリックした時のワークフロー
次の問題へボタンをクリックした時に必要なワークフローは以下の５つです。
- 「〇」を非表示にする
- 「×」を非表示にする
- 最終問題の場合は、次の問題へボタンを非表示にする
- 最終問題の場合は、成績表ボタンを表示する
- 次の問題を表示する
正解アイコン、不正解アイコンを非表示にするのは、「Element Actions」で「Hide」を選択すれば良いですね。また「最終問題の場合」という条件を追加するには「RepeatingGroup Quiz's List of Quizs:count is index's QuestionNo」とします。「QuestionNo」は前回設定した「今何問目か」の Custom state です。RepeatingGroup で取得したデータ件数と、現在の問題数が一致する場合は最終問題であると判定します。
次の問題を表示するには、「Element Actions」の「Repeating Group」で「Show next」を選択します。「Element」で「RepeatingGroup Quiz」とすると、次の問題へボタンをクリックすることで、データベースから取得したデータのカーソルを進めることができます。
成績表ボタンをクリックした時のワークフロー
- 「〇」を非表示にする
- 「×」を非表示にする
- 成績表グループを表示する
正解アイコン、不正解アイコンを非表示にするのは前項で解説しているので、ここでは割愛しますが、成績表グループも表示するのは同じ要領です。「Element Actions」で「Show」を選択し、「Element」で「Group Score」とすれば設定完了です。
まとめ
以上で「4択クイズアプリ」が完成です！本シリーズでは、以下３つをポイントとしてご紹介しました。
- Repeating Group でデータベースから取得したデータを表示させる
- ボタンの有効・無効の設定などは、エレメントのプロパティウィンドウ「Conditional」を利用する
- Custom state を使いこなすことで条件を判定するための値を保持する
ここまでお読みいただき、ありがとうございました！
