Change graphic based on variables?

Jul 04, 2013

Mike Hua
By Mike Hua

Hi,

I was just wondering what code would I use if I want to implement the following:

I have 4 buttons on the Menu screen;

The learner will select one of those buttons and be taken to that chapter;

After completing that chapter they will click a 'Menu' button on the last slide of that chapter to be taken back to the menu;

The menu will now show that menu but the graphic of that menu has changed to notify the learner that they've completed that chapter.

After the learner has completed all chapters, I would like to include a "Clear" button that resets the states of the buttons to what it was initially if the learner wants to review the content again.

Solution?

6 Replies
Nicole Legault
almost 11 years ago07/04/13 at 11:58 am (UTC)

Hi Mike!

One way to achieve what you've described above is by using states, triggers, and variables. The steps I would follow to create this type of interaction would be:

  • Create button on the menu slide that has a "Completed" state with a checkmark on it
  • Create a True/False variable with default value of false for each slide (or "chapter") you need to track. 
  • Create trigger on those slides that makes variable become true when slide is visited
  • Create trigger on Menu slide to make buttons show "completed" state when variables are true
  • created a Clear button that is hidden, but becomes visible when all variables are true. 
  • When you click on the clear button, it resets the buttons to normal states and resets the variables to false. 

I've created a simple example .story file for you that I've attached to this reply, which you can use as a starting point. Also, you might want to check out a few tutorials on using states, triggers, and variables in Storyline. 

Hope this helps get you on your way!! =)

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