You need following variables:

varTick =0 (Number)

varChecked1 = False (Boolean)

varChecked2 = False (Boolean)

varChecked3 = False (Boolean)

varChecked4= False (Boolean)

varChecked5 = False (Boolean)

varContent = Default (String)

You create a checkbox component and assign interaction to instances:

OnClick:

Conditional

If varChecked1 == False then

Set variable( varTick = varTick+1)

varSelected1 = True

varContent = “State” + varTick

Else

Set variable( varTick = varTick-1)

varSelected1 = False

varContent = “State” + varTick

This will be applied to all checkboxes to see if they are unchecked or not and take the action accordingly.

So varTick will decide which state of Content (sentence) to switch to.

Hello! First off thanks for your reply:)

I still having some questions maybe because i still don’t fully get the things run behind:

1. 
   

   I saw “varSelected1” in there, i need to create this variable beforehand in order to have it set in the conditional right?

   
   


2. 
   

   Also this::: “varTick will decide which state of Content (sentence) to switch to”
   
   Where do i set which state of content for varTick to switch in the beginning?

   
   

1. Yes, varSelected1 and others will be created beforehand.


2. varTick can be set to a blank variant to the beginning if you are not showing any content at first.
   
   So in Content component, First Variant/State will be ‘blank’, so no content is shown. And whenever you wanna hide content, switch it to Blank.

Okay…

But for question two, the changing of “state”, is not added on the conditional panel, but outside the frame when we creating variant, then we able to select the state inside the conditional panel? >>>varContent = “State” + varTick

Sorry, my bad. Yes I mixed selected and checked.

Conditional

If varChecked1 == False then

Set variable( varTick = varTick+1)

varChecked1 = True

varContent = “State” + varTick

Else

Set variable( varTick = varTick-1)

varChecked1 = False

varContent = “State” + varTick

This is the layout:

State0 is Blank

Selection box

Interaction on the selection instance

Content instance on Frame

Variables

Hi, Emma.

I’ll show you another solution but for this one, you won’t be able to reuse the checkbox component to another design since we will be prototyping it directly on the component. And instead of creating multiple items to show, I’ll just directly change the string of your text layer.

1. You just need to create a few variables.
   
   a. Total number of ticks/checked (Total)
   
   b. Text Determinate (Which is the connected string to the text layer)
   
   c. All your sentences as string variables (this is based on your #3 logic)

2. Prototype the unchecked variant.
   
   a. If total >= 0, set total to total + 1
   
   b. if total == 1, set the Text Determinate to the Sentence A… do it until if total==5

3. Prototype the checked variant.
   
   a. if total > 0, set total to total - 1
   
   b. if total == 4, set the Text Determinate to the Sentence E…do it until if total == 0 ( this is just the opposite of the unchecked variant)
   
   
   

That’s it. it should work like this:

Thank you, Raphael! May I know why we don’t need to set variable 5 for Unchecked status?

Hi, Emmaa.

Sorry for the late response, as I’m busy rn. We don’t need to set it because the total value won’t go to 5 for unchecked. The maximum will be 4, but at the same time you can set it if you want and it won’t break the condition but that condition will be useless.

The reason is because there’s only a total of 5 checked one and if you uncheck one it will decrease the total by 1

e.g.

5 (max), then we click uncheck and it will decrease the value by 1, the condition will trigger the uncheck conditions which is if total == 4, 3, 2, 1… but there will be no total == 5 because the uncheck will always be 4 unless we add a 6th checkbox.