This post will describe how to use a Button to emulate a Checkbox in Thunkable X.
Checkbox is a simple menu item from Thunkable Classic that can select (or unselect) single items.
This function can be copied using a Button. We will demonstrate this by making a toy survey app.
This app will ask one question where there has to be one answer. The example app asks for the first letter of the user’s name.
This app will also ask one question where there can be many answers selected from a list. The example app asks for the user’s favourite foods.
Layout
For each question, our Layout will use:
A Label to ask the question
A Row containing a Button and a Label for each answer
For ease of understanding the blocks, we will call the Label that says A ‘A_Label’ and its corresponding Button ‘A_Button’, etc.
We will be toggling the colour of these Buttons to show the user what they have selected. You can also use Background Images to show the difference between selected and unselected answers.
This Screen will also have a Button that brings us to a Show Results page to review the answers and make sure the app is working.
Blocks
The first thing we’ll do is define our variables.
We will define a colour to denote checked ‘checkboxes’ and unchecked ‘checkboxes’.
Then we will create variables to store the results of our questions. Set the 1-answer variable to NULL and the multi-answer variable to a blank list.
We will define a Function called ‘clear checked boxes’.
This will save us some blocks in later functions.
We only need to define this function for the question with one answer allowed.
If you use multiple questions where only one answer can be selected, you will need to define a separate function like this for each question.
When Screen1 opens, we will set all of the Buttons to be unchecked. We can clear the 1-answer Buttons with our ‘clear checked boxes’ function. For multi-answer questions, we don’t need to make a function since this is the only time we will want to uncheck all of these Buttons.
We will also clear our variables. I have set the 1-answer variable to NULL and the multi-answer variable to a blank list.
1-answer Blocks
When the user selects an answer to a one-answer question, we want that answer to be selected and nothing else to be selected.
To make sure the selected answer is the only answer which is ‘checked’, we will use our ‘clear checked boxes’ function to make sure everything else is unchecked before checking the selected answer.
Then the 1-answer variable can be set to the selected answer. Easy!
Multi-answer Blocks
Toggling the colour of a multi-answer Button is easy: if it’s the checked colour, set it to the unchecked colour. Otherwise, it’s already the unchecked colour, so set it to the checked colour!
Then to create our list of answers, we will add every item whose ‘checkbox’ is checked to our list of answers.
We will do this with a Function. This function will only be executed when we are opening the next Screen.
Very simply, if an item is checked, that item is being added to the list of answers!
Reviewing Answers
(This part is not necessary, but it helps to review your work!)
Layout
The Layout for reviewing our answers is very easy.
We have two Labels for displaying our answers, and a Button for going back to Screen1.
Blocks
Setting a Label to display the results of a one-answer question is easy. Simply join a block of text explaining what the answer is (“First Letter of Name:”) with the variable representing that answer.
For a multi-answer question:
If no answers were submitted for that question, we can simply join a block of text explaining what the question was with the answer “none”. This isn’t a necessary block. Leaving it out would yield a Label that says “Favourite Food: “ when there are no answers given.
If the list of answers does have entries in it, we will use a COUNT WITH loop to iterate through the items of the answer list and append them to the Label text.
This screenshot has an ‘if’ block inside this COUNT WITH block to say that every answer after the first answer should be separated with a comma. This also isn’t necessary. Leaving it out would simply yield a Label saying eg. “Favourite food: Meat Bread” instead of “Favourite Food: Meat, Bread”.
NOTES
Instead of using a Button and a Label, you can just use a Button.
Set the Button text to the text of the answer (instead of using a Label) and use a ‘Button.text’ block instead of ‘Label.text’ blocks in the code.
This won’t give the same checkbox effect but it will otherwise work the same.
In the blocks of Screen1, for multi-answer questions you could also use blocks to update the list of answers every time the user checks or unchecks a box. This is particularly useful if the user is selecting answers that affect what they see on the Screen in front of them.
In displaying the answers, you can use a List Viewer to show the results of the multi-answer question. Play around with it!
Here is a link to a sample app that uses this method.
