Skip to main content
Solved

How to create multi-checkbox that shows different result using Variable?

E

Hi all! I would like to create a multi-select checkbox that show user different results depending on their choices.
*Eg. user will get sentence A if they check any of the two boxes out of the five checkboxes. If they select 1/5, show another sentence; If they select 3/5, show another sentence.
Applies to other amount of selection: 0(None),4,5(All)

What I think: Create number variable and link to component variant, write condition to control when to show respective sentence following by the amount of boxes selected

How I did:

  1. I created a base number variable 0

  2. Apply the variable to all the checkbox
    But it doesn’t work/link, why?

    image

  3. Set variable interaction on checkbox to let it show respective sentence/text
    If number =0>shows sentence A
    If number 0+1>show sentence B
    If number 0+2> show sentence C
    If number 0+3> show sentence D
    If number 0+4> show sentence E
    If number 0+5> show sentence F

I’m new to Variable, please correct me if i’m anywhere wrong. I’m keen to know its answer🔥

Best answer by Raphael_M

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)

image

  1. 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

image

  1. 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)
    image

That’s it. it should work like this:

View original
This topic has been closed for replies.

10 replies

Vishal_Ramawat

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.

E
  • Emmaa_Ho
  • Author
  • 6 replies
  • April 22, 2024

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?

Vishal_Ramawat
  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.
E
  • Emmaa_Ho
  • Author
  • 6 replies
  • April 22, 2024

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

E
  • Emmaa_Ho
  • Author
  • 6 replies
  • April 22, 2024

image

I try to analyse the flow, could you tell me where it goes wrong, as I don’t understand why we should have varChecked and varSelected, I thought checked means selected?🤔

Vishal_Ramawat

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

Vishal_Ramawat

This is the layout:
State0 is Blank

image

Selection box

image

Interaction on the selection instance

image

Content instance on Frame

image

Variables
image

E
1 person likes this
  • E
    Emmaa_Ho
Raphael_M
  • Raphael_M
  • Power Member
  • 394 replies
  • Answer
  • April 22, 2024

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)

image

  1. 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

image

  1. 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)
    image

That’s it. it should work like this:

1 Attachments
Jared_Rauh1
E
2 people like this
  • Jared_Rauh1
    Jared_Rauh1
  • E
    Emmaa_Ho
E
  • Emmaa_Ho
  • Author
  • 6 replies
  • April 26, 2024

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

Raphael_M
  • Raphael_M
  • Power Member
  • 394 replies
  • April 30, 2024

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.

E
1 person likes this
  • E
    Emmaa_Ho
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings