How to create a toggle button with 3 states?

Feb 17, 2016

Hello! I followed the instructions at this location to create toggle buttons with two states. They work well. However, I now need to create a toggle button with three states. Because I am using the True/False variable, which only has two options (true and false), I assume this won't work for three states. How would I go about getting a three-state toggle button to work?

My file is attached if anyone cares to take a look. :-)

6 Replies
Nick S

Hi Shannon,

How will you be using this button in your project?  Will it need to stay switched on one direction or the other or would it be more of a momentary switch?  I wasn't able to find a way to do this using 3 states either and maybe someone else can help chime in on that part.

I was playing around with this however and came up with a quick basic way of making a switch like this work using layers.  I attached the file here if you want to take a look.  There are blank rectangles drawn over the top and bottom of the button graphic to act as the hotspot trigger locations.  

This may not work for your project but was something I found interesting to test so wanted to share it here.  There very well may be easier methods to put something like this together that others here will know off hand and provide as well.  If nothing else this will help with ideas.

Scott Thacher

Hi Shannon!

This was an interesting question, and I think I’ve figured out a way to accomplish this. There may be a more elegant way of doing it, but this seems to work and can hopefully be a starting point that you can build upon. I’ll describe it here, and I’ve re-attached your file with my example contained within for reference.

  • First, I created a Number variable called “test” with a Default Value of “0”
  • Next, I created a button with these triggers that are linked to the “test” variable:

Add 1.00 to test

When the user clicks

Set test equal to 0.00

When the user clicks

If test is equal to 3.00

These Triggers create the 3 states of the variable by toggling the value of “test” 0,1,2,0,1,2… as the button is clicked. This can scale up as high as you want it - 100 state toggle perhaps?

From this point, you could use the value of the “test” variable to set the states of your graphical buttons to show Normal, Up, Down, upon user click.

To prove to myself that this worked, I created a new text variable called “State” which has a value that’s directly dependent on the value of the “test” variable. “State” simply displays text on the screen depending on the value of “test” -- 0=Normal, 1=Up, 2=Down… The text keeps cycling as the button is pressed.

I hope this helps. As I said, there may be a more elegant method, but hopefully it’s a start for you.

This discussion is closed. You can start a new discussion or contact Articulate Support.