ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

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

f:id:yksmt:20200417154329p:plain

今回は、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:20200306140327p:plain

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」という具合に、選択肢にあわせて設定してくださいね。

また、あわせてエディタも公開しますので、参考にしてみてください!

bubble.io

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

次の問題へボタンをクリックした時に必要なワークフローは以下の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 を使いこなすことで条件を判定するための値を保持する

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

4択クイズアプリ コンテンツ一覧(全4回)

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp