今回の目標
前回で画面に問題が表示される所までは完成しているので今回は１問ずつ画面に表示し、正誤判定できる所まで作成したいと思います。
一問一答画面の作成
一覧表示から一問ずつの表示へ
早速一覧表示を一問ずつ表示できるように変更していきます。
まず、画面に表示する問題番号を管理するための「Local Variable」を定義します。
画面上で右クリック→Add Local Variableを選択し、任意の変数名、型をLongInteger、DefaultValueを1に設定して確定します。主は変数名を「DisplayQuestionNum」としました。
次にWidgetTreeからList配下のContainerを探し選択します。
すると下記画像のような画面になっていると思います。
今現在Containerの設定のなかの「Visible」がTrueになっているため、いついかなる時も全問題が表示されている状況です。
Visibleを先ほど作成した問題番号を管理するための変数を使用して今解いている問題のみ表示されるように設定変更していきます。具体的には、AggregateのCurrentの問題番号と問題管理番号が一意した場合のみ表示されるようにします。主の場合を例として画像を貼っておきます。
ここまでで一度Publishして画面を開くと一問だけの表示になっているはずです。
正誤判定の実施
次に正誤判定を実施し、正解なら正解、間違いなら残念と画面に表示するようにします。
上記画像を参考にRadioGroupが入っているContainerと同じ階層ににさらにContainerを配置し、その中にIFウィジェットを配置します。
このIFウィジェットで正誤判定のチェックを行いたいので、IFの条件はユーザーが選んだ解答が、Answerと一致しているかを確認する必要があるので下記条件を設定します。
RadioGroupで使用している解答格納用変数 = [Aggregate名].List.Current.[Entity名].Answer
これでユーザーが選んだ解答が正解ならTrue、違うならFalseに処理が流れるようになります。
参考までに主の場合は下記コードを記載しています。
ChoiceAnswer = GetArchitectureSpecialists.List.Current.ArchitectureSpecialist.Answer
ではTrueの中には「正解」と表示させて、Falseでは「残念」と表示させるように処理を書いていきましょう。下記のような状態になっていれば大丈夫です。
ここまでで一度Publishして確認してみましょう。
すると画面読み込み時点で”残念”と表示されてしまっていると思います。
解答格納用の変数の初期状態がAnswerと一致していないがために起こっている現象ですので下記画像のように先ほど作成したIFの上に新たにIFを追加し正誤判定のIFウィジェットを新たに作成したIFのTrue配下に入れて、初期状態でない場合に解答が一致しているか確認するように変更しましょう。
再度パブリッシュして直っていることを確認してみてください。
次の問題へ進む機能の追加
だいぶ長くなりましたが第3回の最後の内容になりますのでもう少しお付き合いください。
現在正誤判定まで完了しているので、正解した場合に次の問題へ進めるようにしようと思います。
先ほど作成した「正解」の文言の横に「次の問題へ」と記載したLinkを配置し、場所を整えます。
下記のようになっていればOKです。
もう一息です。
「次の問題へ」を押下した際に、今回（第3回）の最初に作成した画面に表示する問題番号を管理するための「Local Variable」（DispleyQuestionNum）をインクリメントしてあげる処理を作成してあげましょう。
先ほど配置した「Link」が赤くなっていると思うのでダブルクリックすると新たにアクションが作成できます。任意の名前をアクションにつけたらAssignでDisplayQuestionNumをインクリメントしてあげましょう。また、問題が変わるごとにユーザーが選択した選択肢をリセットもしてあげましょう。
ここまできたらPublishして確認してみてください。
次の問題に進めましたし、選択肢もリセットされていることを確認できました！
次回は
一旦ここまでで一問一答の画面は完成しましたので、残る必須要件の全問一覧表示（解答表示有無選択可能）を次回は作成していきたいと思います。だいぶ長くなってしまいましたがお疲れ様でした！
コメント