How can I simplify this relatively complex page?

Hello everyone,


I have a number of pages that have quite a few interactions.


Example:


A graphic with 4 click-able regions. When the learner clicks on a region 1 the following occurs:

- On click of transparent button, toggle visibility state of text box (make it appear) with text content describing this region;

- The text box has the following actions:

> on show, hide region 2

> on show, hide region 3

> on show, hide region 4

> on show toggle visibility of highlight box (show yellow rectangle around currently selected region)

> on show hide rectangle for region 2

> on show hide rectangle for region 3

> on show hide rectangle for region 4

> on show, play audio associated with text

> on click, close text box


Additionally, when the user enters this page.... I automate the process by cycling through each of the 4 regions.

So... to do so I,

On show (page), show text box for region 1

On show (delayed 26 seconds) show box for region 2

On show (delayed 46 seconds) show box for region 3

On show (delayed 63 seconds) show box for region 4


There are a whole bunch of problems with the above, such as:


- It is terribly unwieldy... complex... is there an easier way to accomplish this?


- It currently doesn't take into account if the learner decides to click on a region different from the one that is currently playing

I must take into account that any click will stop the currently playing audio.


- The automated mode, for some reason, does not close the other text boxes nor does it show the rectangle highlight box.



In trying to find a way to simplify the above....


I created an invisible box (not initially visible) called clear everything with the following actions:

On show (multiple commands), hide all rectangles, hide all text boxes, stop all sounds


When I click on one of the regions now, the first action is to make that clear everything text box appear... followed by a 1 second delay, then the following actions: hide the clear everything box, show the appropriate rectangle, text box, and audio.


This seems simpler but I value others opinions!


Thank you

Discussions have been disabled for this post