Originally published Oct 2019
Revised & Updated Feb 2022
One pitfall that often catches out new Thunkers is creating more screens in their projects than they need to. Two classic examples of this are the Dictionary app and the Quiz app. As a new user, it’s easy to think that if you need 1 screen for 1 question then you need 50 screens for 50 questions. The knock on effect of this approach is that any future updates become more time consuming. This is especially true of UI changes since you will need to update every single screen.
In this tutorial we’re going to create an all-in-on Dictionary and Quiz app. In the first part, I’m building an “A to Z of Thunkable”. You might be a tempted to create 26 screens here - one for every of the alphabet - but please don’t! This is the most time consuming and difficult-to-maintain way of using the platform. Sure, you’ll get the app done, but the approach we’re going to cover below is more scalable, easier to maintain, and with a bit of practice is actually faster to build too so read on.
Try it out
Before we start, you can try the sample app out for yourself by clicking here
What we’re going to build
This sample app is an A - Z reference with some of the most popular blocks and components that are available in Thunkable. It tells you about a component and then quizzes you about what you’ve learned. and can also read the information back to you with the help of the Text-to-Speech component.
This is what the A - Z part looks like:
And here’s a quick preview of the Quiz section in action:
Components Used
Rather than 26 screens for 26 different letters, we can build a really nice looking Dictionary and Quiz app with just 2 or 3 screen to show everything we need.
To make it easier to navigate, I’ve added an introduction screen called scrIntro which welcomes users to the app. Everything after that is contained in the Bottom_Tab_Navigator
Intro Screen
Keeping this simple because it’s a demo app, but you might want to have your sign up/sign in screen here, or maybe you need to show your terms and conditions here? If it’s a more complex app, this is also a good place to show any onboarding screens to your user. This helps them get familiarised with your app before having to use it.
When the user clicks on the button it takes them to the scrList screen:
List Screen
The List Screen - scrList - is only slightly more complex than the Intro Screen we just saw. It contains a ListViewer with a Label at the top of the Screen and a Loading Icon which is toggled when data is fetched from our Google Sheet:
When the list screen opens we create a list of all the words from our Google Sheet and display them on the screen:
When the user clicks on a word we keep track of its position in the list/alphabet by creating variables called rowObject and letterIndex. Once this is done, we open the scrExplore screen
scrExplore
This is where a little bit of planning will save us a huge amount of time in our project.
Instead of creating one screen per item, or one screen per letter we are going to reduce this down to just creating one screen in total. We can reuse the same labels and images and button components, regardless of the word our user has chosen.
This makes it much easier to maintain, update and improve as we move forward. The screen itself should hopefully be fairly self-explanatory from the screenshot above, note the component tree on the left which contains just 7 components.
Data Sources
You can store you data anywhere you want with Thunkable. Out of the box we have support for Google Sheets, Airtable, Webflow or a local table. Since spreadsheets are so ubiquitous these days I’ve opted for Google Sheets. Each one of the columns below can be used in one of the labels or buttons on our Explore Screen.
Accessing the columns is pretty straightforward - all you need to know is the name of the column. When the screen opens, we use the rowObject from the previous screen to make everything load as fast as possible:
and forward and backward navigation is now easily achievable by incrementing the letterIndex variable and calling the updateScreen function:
The moreInfo button can open any page in the docs using just a handful of blocks:
65,000+ quizzes with 1 screen and less that 100 blocks
Quiz apps are another category where we see users unnecessarily creating screens in their projects and making things more difficult than they need to be. Using the exact same spreadsheet as we’ve used above I’ve added a simple 5 question quiz with scoreboard and answer checker in 94 blocks.
The user interface is similarly minimal - with just a handful of components to create the functionality:
Setting up the Quiz
Just to really quickly run through what the blocks do:
- Declare and initialise all the variables we need for the quiz.
- Each time the screen opens we reset these variables back to their “start” states.
- Generate a random list of 5 numbers between 1 and 26 (this is how we end up with 65,000+ combinations btw!)
- Call the
showQuestionfunction
Show Question
The next thing to do is show the questions to the user.
- Check if the game is over. If it is, tell the user their score…
- …if the game is not over then get the next number from the
selectedQuestionslist and grab that row from the sheet - Update the question label with the new question
Finally we check whether or not the user has entered the correct answer:
- If the user is right tell them they’re right, if not tell them they’re wrong
- Clear out the TextInput and call the
updateScorefunction - Wait a couple of seconds and load the next question.
- Show the user their current score in the score label.
Template Link
I really hope this will help you make more efficient apps and that you become more proficient at using Thunkable by using these techniques in your own projects.
If you want to take a closer look at my project, here’s the link
To use re-use the spreadsheet, there’s a link here
