Hi everyone,
I’m building my first ever app (super excited!). Just to get going, I chose a seemingly simple idea — a 10-question capital city quiz.
I have a Google Sheet with my questions (Country, Capital, Fake Cities 1-3).
I’ve successfully created a “Welcome” tab. My next tab is called “Quiz” and is sourced from my Questions
Google Sheet.
My problem is: This “Quiz” tab currently displays a list of all the countries, rather than showing one question at a time. I need it to function as a single-question-per-screen quiz where users answer one question, then move to the next.
At the end , there is a scorecard (out of 10).
I understand that the solution for this is to set the “Quiz” screen’s layout/style to “Details” (this is what Gemini and Chatgpt suggested me to check!)
However, when I go into the Layout editor, select my “Quiz” screen on the left, and then look at the right-hand configuration panel, I cannot find a “Details” option under “General”, “Options”, or “Actions.”
Could someone please guide me on the exact steps or location to change the overall screen layout/style of my “Quiz” tab to “Details” so it displays one question at a time? Screenshots of the current UI would be very helpful if the steps are different from what I’m expecting.
thanks and regards
Sandeep
Quiz apps are usually complex in the past, mostly because we have to use a choice component that can only read choices vertically, whilst you usually have those answers horizontally (database-wise).
However, with an AI custom component, you might be able to build this quicker.
Assuming a 10-question quiz like this.
Question ID |
Question |
Choices |
Answer |
1 |
What is the capital of France? |
Paris, Lyon, Marseille, Bordeaux |
Paris |
2 |
What is the capital of Japan? |
Tokyo, Osaka, Kyoto, Sapporo |
Tokyo |
3 |
What is the capital of Canada? |
Ottawa, Toronto, Vancouver, Montreal |
Ottawa |
4 |
What is the capital of Australia? |
Canberra, Sydney, Melbourne, Brisbane |
Canberra |
5 |
What is the capital of Brazil? |
Brasília, Rio de Janeiro, São Paulo, Recife |
Brasília |
6 |
What is the capital of Egypt? |
Cairo, Alexandria, Giza, Luxor |
Cairo |
7 |
What is the capital of South Korea? |
Seoul, Busan, Incheon, Daegu |
Seoul |
8 |
What is the capital of Italy? |
Rome, Milan, Florence, Venice |
Rome |
9 |
What is the capital of Kenya? |
Nairobi, Mombasa, Kisumu, Eldoret |
Nairobi |
10 |
What is the capital of Turkey? |
Ankara, Istanbul, Izmir, Antalya |
Ankara |
- Add a user-specific column to the table above, called “User’s answer”.
- Add an if-then-else column called “Correct”?". If “Users’ answer” is “Answer”, return true (correct), else return nothing or false.
- In your users table, assuming your users do log in, add a column for “Current question”.
- For your tabs, the Welcome tab will show when “Current question” is empty. On that tab, add a button called “Start quiz”. This button will increment the “Current question” by 1 and then navigate you to the “Quiz” tab.
- On the “Quiz” tab, add a custom collection targetting the Quiz table. Filter it to only display one question, “Current question” from signed-in user’s row equals “Question ID”. Delete the “item click” action (so users don’t actually go to the details view of the Question).
- On the custom collection, add the question variable with a text column, maybe set it to be a big header.
- Add an AI custom component, assign the Choices variable to it, and also the “User’s answer” variable tell it to generate a choice component that reads from a comma-delimited list of choices, and write to “User’s answer”.
- Add a text component telling the user’s answer is correct or not, show it only when “User’s answer” is not empty.
- Add a button block to allow users to move back and forth (decrement and increment the “Current question” variable). Allow decrement only when “Current question” > 1, and Increment only when “Current question” < max no of questions that you have, in this case 10).
- Determine when you show the scorecard, maybe you still allow increment when “Current question” is 10, but you call it “Finish quiz”, and then show the scorecard when “Current question” is 11.
- Use a rollup on top of the “Correct?” column and count true, so you know how many are correct.
2 Likes
@ThinhDinh, Many thanks so much for this detailed suggestion!
I really appreciate you breaking it down for me. I’ll be trying this out soon and I’m hopeful this will solve my issue.
I’ll let you know how it goes!
1 Like