Creating a 'Checkbox' in Thunkable X using Buttons


#1

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.


Multiple Choice Survey App with Checkbox
#2

Love your tutorial😍
And it doesn’t take a month for a new one! Ever thought of doing them on youtube?:wink:
Keep up the good work!
Dinto


#3

Thank you!

Right now I am simply posting some sample apps/tutorials that I made based on questions that we get a lot from users.

Maybe some of them will go on YouTube in 2019!


#4

I think, I followed everything in the tutorial but could not find a result. Could you please check my code blocks !
https://x.thunkable.com/copy/e1eebb42476d6e5b7c7302802d50f786
Thanks


#5

Hi there,

This looks great! The only issue was that your blocks for setting the text of the Label in your second Screen weren’t broken into an ‘if’ and an ‘else’, so all of your blocks describing what to do with the elements of the list were trapped in a if-block that only allowed them to be accessed when the list of elements was empty.

I just broke that into an if-else block, and I also set it so that all of the boxes were unchecked when the user opens the app - it makes more sense to get an empty checklist that you fill in rather than a full checklist that you have to delete elements from.

Here is the app with my little tweaks, let me know if you have any other questions!

Thanks,
Jane