ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble で作る「4択クイズアプリ」4:ワークフローの設定

今回は、4択クイズアプリ の最終回です。設定するワークフローについて解説したいと思います。なお「Set state」となるワークフローの設定については、前回の記事をご参考ください。

関連記事

選択肢ボタンをクリックした時のワークフロー

選択肢ボタンをクリックした時に必要なワークフローは以下の2つです。

  • 正解の場合は「〇」を表示する
  • 不正解の場合は「×」を表示する

では、設定していきましょう。「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ボタンにも行います。

f:id:yksmt:20190820111123p:plain

次の問題へボタンをクリックした時のワークフロー

次の問題へボタンをクリックした時に必要なワークフローは以下の5つです。

  • 「〇」を非表示にする
  • 「×」を非表示にする
  • 最終問題の場合は、次の問題へボタンを非表示にする
  • 最終問題の場合は、成績表ボタンを表示する
  • 次の問題を表示する

正解アイコン、不正解アイコンを非表示にするのは、「Element Actions」で「Hide」を選択すれば良いですね。また「最終問題の場合」という条件を追加するには「RepeatingGroup Quiz's List of Quizs:count is index's QuestionNo」とします。「QuestionNo」は前回設定した「今何問目か」の Custom state です。RepeatingGroup で取得したデータ件数と、現在の問題数が一致する場合は最終問題であると判定します。

f:id:yksmt:20190820123802p:plain

次の問題を表示するには、「Element Actions」の「Repeating Group」で「Show next」を選択します。「Element」で「RepeatingGroup Quiz」とすると、次の問題へボタンをクリックすることで、データベースから取得したデータのカーソルを進めることができます。

f:id:yksmt:20190820125046p:plain

成績表ボタンをクリックした時のワークフロー

  • 「〇」を非表示にする
  • 「×」を非表示にする
  • 成績表グループを表示する

正解アイコン、不正解アイコンを非表示にするのは前項で解説しているので、ここでは割愛しますが、成績表グループも表示するのは同じ要領です。「Element Actions」で「Show」を選択し、「Element」で「Group Score」とすれば設定完了です。

f:id:yksmt:20190820133925p:plain

まとめ

以上で「4択クイズアプリ」が完成です!本シリーズでは、以下3つをポイントとしてご紹介しました。

  • Repeating Group でデータベースから取得したデータを表示させる
  • ボタンの有効・無効の設定などは、エレメントのプロパティウィンドウ「Conditional」を利用する
  • Custom state を使いこなすことで条件を判定するための値を保持する

ここまでお読みいただき、ありがとうございました!