【Adalo】3択クイズを作ってみました

（なぜこれを書いたか）
ネットのNocode質問コーナーなどで必ずといっていいほど「択一クイズを作りたいんですけどやり方が分かりません。どなたか教えて下さい」という質問がされています。

データーベースの基本的な使い方が分かっていれば、3択でも4択でもいくらでも作れますが、Adaloを初めて触りだした頃は私も何をどうすればいいのか分かりませんでした。クイズ以外にもいろいろ応用が利くと思いますので備忘録の意味で要点をまとめてみました。

１．3択クイズのデータベースを作ります

クイズの作り方はいろいろな考え方があるので何通りもあると思います。ここでは最も基本的な3択クイズを例として作ってみたいと思います。3つ質問があって、3択のクイズです。世界の首都当てクイズとします。

（クイズ画面の構成）
クイズが問題1から表示され、下に選択肢のボタンがあります。三択クイズなので「１」、「２」、「３」のボタンがあり、どれかを選択すると回答に応じてモーダル画面に遷移し、「正解です！」、「ハズレです」という表示がされます。

モーダル画面の「戻る」ボタンを押すとクイズ問題画面に戻り、次の問題に進みたかったら、「次に進む」ボタンを押すと次の問題が表示されるといった内容にします。

1回答えたら次の問題に自動的に進むというやり方もありますが、間違った場合、何度もやり直せるようにしています。「次に進む」ボタンを押さない限り、その問題の画面に留まっているようにします。

（最終的なクイズ画面）
下記のイメージの3択クイズを作りました。やり方を以下で説明します。

①データベースを作ります

以下のようなデータベースを作ります。クイズの問題や正解、回答番号などすべての内容が「クイズ」という１つのデータベースに収まっています。

ポイントとしては「クイズ番号」（問題の番号：１～３まである）の他に「次の問題No.」というプロパティを設けました。「次の問題に進む」というボタンを押すと次の画面に進むための仕掛けです。

（データベースの内容１）
データベースを一覧で見ると以下のような内容になっています。

（データベースの内容２）
例えばDBの一番上の行には以下のようなデータが入っています。（クイズ問題は以下のような形で入っています）

２．カスタムリストとインプットで画面を作る

①クイズを1問ずつ表示させる設定
クイズ画面は以下のようなイメージです。カスタムリストとインプットで構成しています。
クイズ問題は3問ありますが、1問ずつしか表示しないので「インプット」にクイズ番号の数字を入れ、Filterで絞り込みをしてその番号のクイズだけを表示します。

②インプットの設定

インプットに入った番号でカスタムリストをFilterで絞り込みますが、クイズは問題1から始めたいのでインプットのデフォルト値として１を入力しておきます。

「次の問題に進む」ボタンを押すとクイズDBから「次の問題の番号」がインプットに入力されるようになっています。（Change Input Valueを設定）

③選択肢の番号の設定（「１」～「３」まで）

3択クイズなので回答ボタンは１～３の3つあります。それぞれのボタンを押すとデータベースの「回答番号」というプロパティにそのボタンの番号がUpdateによって入るようになっています。

ボタンが押されると回答番号をデータベースに転送し、次は正解、ハズレのモーダル画面に遷移するようにリンクの設定で行っています。

（選択肢ボタン２の設定）
ボタン「１」と同様の設定を行います。（ボタン「３」も同じです）

④モーダル画面の設定

回答の内容に応じ「正解」と「ハズレ」のモーダル画面に飛ぶように設定します。

⑤モーダル画面から前画面に戻る際の注意点

正解でもハズレでも「Homeに戻る」ボタンを押すと一旦は前のクイズ画面に戻るように設定します。画面遷移のリンクを設定すればいいのですが私は間違えてLink Homeとやってしまいました。そうしたら2番目のクイズ問題をやっているのに何故か1番目のクイズまで戻ってしまいました。

モーダルから前画面に戻るときはLink Backとして下さい。Link Homeだと戻り過ぎてしまいます。

⑥「次の問題に進む」ボタンの設定

クイズ問題を解き終えて次の問題に移るときは「次の問題に進む」ボタンを押して下さい。このボタンを押すとChange Input Valueによって画面上部のインプットに次の問題の番号が入ります。

①「データベースを作ります」で説明したようにデータベースの各行には「クイズ問題の番号」と「次の問題No.」というプロパティを作ってあります。

「次の問題に進む」ボタンを押すとこの「次の問題No」を読み込んでその値が「インプット」に転送されます。そうやってクイズの問題が1個1個切り替わっていきます。（私は、クイズ問題切り替えのロジックをどうしたらいいのかなかなか思いつかず、時間がかかりました）

３．画面を動かしてみます

①これがプレビュー画面です
一応設定は以上です。うまく動くかやってみましょう。
「日本の首都は？」という問題です。正解は「３．東京」ですが、「１．横浜」、「２．大阪」を選択すると「ハズレ」のモーダル画面に遷移します。

②不正解の場合のモーダル画面
「ハズレです」と表示されます。

③正解の場合のモーダル画面
「正解です！」と表示が出ます。

④「次の問題に進む」ボタンを押すと次の問題が表示される

（あとがき）
いかがだったでしょうか？簡単でしたか？難しかったですか？（他人のブログを読んでいる分には簡単ですよね。）

一番最初にAdaloで択一クイズを作ったのは1年位前でした。たしかその時はすんなりできたような記憶があるのですが、久しぶりにやってみると「次の問題に進む」のロジックをどうすればよかったのか忘れてしまい、いろいろなパターンを試してみました。

ボタンを押すと次の問題の番号が「インプット」に転送されて、その番号でカスタムリストをFilterするのが一番いいだろうという考えに至りました。そのためデータベースの各行には問題の番号とその隣に「次の問題の番号」というプロパティを作りました。（最終的な結果をイメージして逆算して作りました）

私は、たまにしか作らないアプリだとやり方を忘れてしまうことがしょっちゅうあります。こうやってnoteに書きとどめておくことで頭を整理したり、自分の備忘録としてやったことをまとめておくのはすごく大事だなと最近感じるようになってきました。（書くことで忘却のスピードが少し遅くなった気がします）

（過去の投稿はこちら）

shnd｜note

（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1