めざせ一発合格！！Glideでクイズアプリ作成

金融業界で働いている事務員兼主婦です。
いつもは職場の業務効率UPのため、ノーコードツールのGlideで管理簿アプリ作成などにチャレンジしています。

Let's一発合格！Glideでクイズアプリ作成

今回は、自動車免許取得へ向けて息子たちが頑張っているところだったので、Glideを使用して試験勉強用にクイズアプリを作成してみることにしました。

完成品

使用ツール

• Glide
  https://www.glideapps.com/
• Googleスプレッドシート

製作開始

１. Glideに使用するGoogleスプレッドシートを作成

今回は標識問題と学科問題の２つのシートを準備しました。
➀標識問題

➁学科問題

２. Glideの設定

基本的な使い方は下記を参考にしています。

＋New appを押して新規作成します。

名前を付けて、今回はモバイル版を選択します。

連携させるソースはGoogle Sheetsを選択します。

➀標識問題

• 標識問題については画像imageを元に問題を出題するようにするため、はじめに標識問題のData画面でimage欄を１つずつダブルクリックし画像をアップロードしていきます。
  
  
  ※スプレッドシートの方を確認するとURLで登録されていきます。
  

• SCREENのSourceを標識問題シートからに選択し、Labelを「標識問題」と表示させiconを選択します。LayoutはGridスタイルにして画像から問題を出題させるようにします。
  

• 画像を選択して詳細設定をしていきます。問題文章はTextコンポーネントを選択し「この標識は？」と問題文を入力し表示させます。デザインスタイルはHeadline Largeを選択して少し文字を大きめにして見やすくし、Alignで左側に寄せて表示させます。
  

• imageコンポーネントを選択し画像imageをFullで大きめに中心に表示させるよう設定します。
  

• 答えはSwitchコンポーネントを選択し、Labelに「答え」と入力し表示させます。
  

• 答えの表示はHintコンポーネントで設定し、オプションでModeをDagerに選択して赤字で表示させます。
  

• オプションの＋Add ConditionでSwichが入れば答えを赤字表示させるようにisとtrueの設定をして完成です。
  

➁学科問題

• 続いてSCREENのSourceを学科問題シートからに選択、Labelを「学科問題」と表示させiconを鉛筆マークにしてみました。問題を一覧表示させるようにCheacklistスタイルに選択します。
  

• Textを選択し学科問題から１問ずつ問題を表示させます。Styleは丁度良い大きさのHeadline Mediumを選択し、Alineで左側表示にしています。
  

• 答えはSwitchを選択し、Labelに「答え」と入力し表示させます。
  

• 回答の表示はHintコンポーネントで設定し、オプションでModeをDagerに選択して赤字で表示させます。
  

• オプションの＋Add Conditionで答えSwichが入れば回答を赤字表示させるようにisとtrueを選択して設定します。
  

• 詳細説明も同じくHintコンポーネントで設定、オプションのModeをDagerに選択して赤字で表示させます。
  

• オプションの＋Add Conditionで答えSwichが入れば詳細説明も一緒に赤字表示させるようにisとtrueを選択し設定したら完成です。
  

周囲からの評判

ママ友や息子の友人たちからは「コレ使える～！」と好評でしたが、ウチの息子だけが「問題数が全然足りないよ。」との辛口コメントでした。

感想

今回は試しにひっかけ問題を参考に作成してみたので、圧倒的に問題数が足りませんでした。これから増やしていきます
他にも〇✖形式や四択式問題にも応用できそうなので、職場や自分の試験問題にも復習を兼ねながら作成できそうです。あらためてGlideは幅広いな～と感じました。どこまで活用できるのか、また引き続き色々とチャレンジしていきたいと思います。

参考資料

ここまでお付き合い頂きまして、ありがとうございました。