今回の目標
前回問題データを取り込むところまで実施したのでそれらを使用して一問一答形式のページを作成し、問題を表示できるところまでを目標にしていきます。
データ構造および実装方法
前提として今回使用する問題データは以下の様な構造になっております。
Question：問題文が格納されている
Answer：解答となる選択肢が格納されている
ImageId：問題に画像が使用されている際に使う画像の番号を格納（画像自体は別テーブルで管理）
A~J：選択肢の内容がそれぞれ格納されている
参考までに主の作成Entityの画像を下記に貼ります。
問題自体はラジオボタンで実装をして
ユーザーが解答した選択肢がAnswerと一致していれば「正解」と表示し「次の問題へ」を表示
誤答の場合は「残念」と表示する想定で進めていきます。
ユーザー登録機能はまだ作成していないので正解するまでは次の問題に進めない様にしようと思います。
問題用画面の作成
それでは早速一問一答画面を作成していきます。まずは画面の作成から実施していきます。
CreateScreen
上記画像を参考に「Interface」タブの「MainFlow」上で右クリックして表示されるメニューの「Add Screen」を選択します
次に上記ポップアップが表示されるので「Empty」を選択し、「Screen name」を入力して「Create Screen」を押下し画面を作成します。（Screen nameは後で変更ができます。）
問題を画面で取得
次に作成した画面に表示する問題を取得します。
先ほど作成した画面を右クリックして表示されるメニューの「Fetch Data from Database」を選択。
次に表示される上記画像の画面に取得する問題集用のEntityをドラッグ&ドロップで追加します。
追加に成功すると下記画像のように画面の配下に「Get＋エンティティ名」で追加されています。
※作成途中で記載しているので様々なLocal変数がありますが今は気にしないでください。
ここまでで画面でのデータ取得が完了したので次にListとRadioGroupを使用して一問一答コンテンツを作成していきます。
問題画面作成
作成した画面に「List」を配置し、「Source」を上手順で作成したEntityのListに設定します。
ここにエンティティを直接置いてしまうと表形式での一覧画面になってしまうので今回はまず、問題文表示用の「Container」「Expression」を配置し、画面の「Aggregate」の問題文にあたるアトリビュートの「Current」を設定します。（参考までに主の設定は下記画像のとおりです）
次に選択肢用の「Container」およびその中に「RadioGroupe」を配置します。
さらにユーザーが選択した解答を格納するための「Local Variable」を作成しRadioGroupe」のVariableに設定します。これでユーザーがどの選択肢を選んだのかが保持できる様になりました。
一応画像で現状を添付しておきます。
次に「Wodget Tree」から「RadioButton1」を選びダブルクリックし、出てきたポップアップに、”A”を設定してCloseします。
また、「RadioButton1」の「Properties」を下記のように変更します。
Name：A
Value：A (既にポップアップで設定済み)
Enable：True
Visible：[Aggregate名].List.Current.[Entity名(結合テーブルがある場合)].A <> “”
Visibleの設定に条件を設定するとその条件を満たすとき以外は画面にWidgetが表示されない様になります。ここでは選択肢Aが空でない場合にRadioButton1を表示するという意味になります。
次に「A」の配下のテキスト「Option1」を右クリックし「Convert to Expression」で変数に変え、表示されるポップアップに
[Aggregate名].List.Current.[Entity名(結合テーブルがある場合)].A
と入力してCloseします。
ここまで完了したら「RadioGroup1」の「A」を選択した状態で「CTRL＋C」または右クリックからコピーを選択し、「RadioGroup1」上で「CTRL＋V」または右クリックからペーストを選択します。
成功すると下記画像のように「A2」ができているはずです。
では次は「A2」の「Properties」を下記内容に変更していきます。
Name：B
Value：B (既にポップアップで設定済み)
Enable：True
Visible：[Aggregate名].List.Current.[Entity名(結合テーブルがある場合)].B <> “”
また、Expressionを[Aggregate名].List.Current.[Entity名(結合テーブルがある場合)].Bに変更
選択肢の数だけ上記手順を繰り返します。(主はVisibleの変更めちゃ忘れたので注意してください)
ここまでできたら不要な「RadioButton2および3」は削除します。
ここまででエラーが消えたはずですので参考までに現状の画像を添付します。
※Widget TreeのListに黄色い波線が出ている場合は下記画像の様にList直下にContainerを追加しその中に先ほどまで作っていた問題文と選択肢を格納してください。黄色い線が消えるはずです。
ここまで完了したらPublishしてブラウザで開いてみましょう
問題は表示されていますね。だいぶ長くなってしまったので途中ですが今回はここまでにしようと思います。
次回は
現状問題が全て一覧になってしまっているので一問ずつ画面に表示、そして一問ずつ正誤判定し次の問題へ進めるようにしたいと思います。
コメント