I selected the freeform question and picked "Pick Many". I added a little check box on the corner so that wehn the user clicks the shape they know when it is picked. I triggered it to be selected when they click on the shape, but I can not figure out how to to deselect the check box when I click the shape.
I would remove the checkbox and just add an image of a tick or an outline on the shape.
You can change the state of the check box to unselected (normal), but I just think this is bad UI design to use a check box. You are giving the user an object that they have preconceptions on how it should work but are using it differently.
One way to create a toggle effect is to use a variable and use this variable in a condition to check what state the check box should display. I threw together a brief outline for this setup below.
1. Create a variable with the following format by selecting the X on the trigger panel.
Name: Check
Type: Numeric
Value: 0
2. Now add a trigger to your shape that increments the 'Check' variable by 1 when clicked.
Trigger Wizard when your shape is selected:
Action: Adjust variable
Variable: Check
Operation : + Add
Value: Value 1
When: User clicks
Object: (Your Shape)
3. Now we need to add some slide triggers (Add trigger with nothing selected) to toggle the check box state.
Trigger Wizard:
Action: Change state of
On Object: Button 1 - "Check Box 1" (or any object with states)
To State: Selected
When: Variable changes
Variable: Check
On Condition (Green Plus to add Condition):
AND/OR: And
List:: Variables
If: Check
Operator: == Equal to
Value: 1
4. Duplicate the above trigger by selecting the copy then paste icons from the Triggers Panel. Once duplicated, just change the following statements:
To State: Normal
On Condition: If check is equal to 2.00
5. Finally, add one last slide trigger (Add trigger with nothing selected) to reset the Check variable back to 0.
Trigger Wizard:
Action: Adjust variable
Variable: Check
Operation : = Assignment
Value: Value 0
When: Variable changes
Variable: Check
On Condition (Green Plus to add Condition):
AND/OR: And
List:: Variables
If: Check
Operator: == Equal to
Value: 2
The above steps or the attached story file below is just one example of how to setup a toggle type switch. I hope this helps!
I agree with your comments and believe Joshua's structure might be confusing to the student. I wanted to demonstrate how a toggle could be used and not necessarily for a check box or for use in all scenarios.
6 Replies
I would remove the checkbox and just add an image of a tick or an outline on the shape.
You can change the state of the check box to unselected (normal), but I just think this is bad UI design to use a check box. You are giving the user an object that they have preconceptions on how it should work but are using it differently.
Joshua,
One way to create a toggle effect is to use a variable and use this variable in a condition to check what state the check box should display. I threw together a brief outline for this setup below.
1. Create a variable with the following format by selecting the X on the trigger panel.
Name: Check
Type: Numeric
Value: 0
2. Now add a trigger to your shape that increments the 'Check' variable by 1 when clicked.
Trigger Wizard when your shape is selected:
Action: Adjust variable
Variable: Check
Operation : + Add
Value: Value 1
When: User clicks
Object: (Your Shape)
3. Now we need to add some slide triggers (Add trigger with nothing selected) to toggle the check box state.
Trigger Wizard:
Action: Change state of
On Object: Button 1 - "Check Box 1" (or any object with states)
To State: Selected
When: Variable changes
Variable: Check
On Condition (Green Plus to add Condition):
AND/OR: And
List:: Variables
If: Check
Operator: == Equal to
Value: 1
4. Duplicate the above trigger by selecting the copy then paste icons from the Triggers Panel. Once duplicated, just change the following statements:
To State: Normal
On Condition: If check is equal to 2.00
5. Finally, add one last slide trigger (Add trigger with nothing selected) to reset the Check variable back to 0.
Trigger Wizard:
Action: Adjust variable
Variable: Check
Operation : = Assignment
Value: Value 0
When: Variable changes
Variable: Check
On Condition (Green Plus to add Condition):
AND/OR: And
List:: Variables
If: Check
Operator: == Equal to
Value: 2
The above steps or the attached story file below is just one example of how to setup a toggle type switch. I hope this helps!
ToggleTrigger.story
Thanks David for taking the time to show me. That really helped. Thanks again!
David nice explainantion, maybe I am missing something but isnt this is a bit overkill to select or deselect a checkbox.
Phil,
I agree with your comments and believe Joshua's structure might be confusing to the student. I wanted to demonstrate how a toggle could be used and not necessarily for a check box or for use in all scenarios.
I like the idea and have downloaded the file, just confused (it happens ).
This discussion is closed. You can start a new discussion or contact Articulate Support.