Popups on Quiz slides?

Intro

This question appeared recently in the Adobe forums from a user wanting to use (shape) buttons to show popups: “….instruction pop-up is appearing under the question content…”. That is indeed a problem: all embedded quizzing objects (those without an individual timeline) have absolute priority in the stacking (z-order). They are always on top.  I have posted an answer to similar questions in the SWF-past years ago. In this short post, you’ll find a new example output, for HTML5  based on the same trick used before: use an object created on a slide before the quiz slides, time it for the rest of the project with the option ‘always on top’. That object will cover the embedded quiz objects. In the past I used Show/Hide to make it visible, but now of course I took advantage of multistate objects and my favorite shared actions.

Example project

Watch this published project. on any device (rescalable), or the embedded one below (fixed resolution). On the quiz slides you’ll find two extra toggle buttons ‘Info’ and ‘Score’ which can be used to open and close a popup (in reality I change the state of an object).


I used some ready-to-go slides from the project ‘Earth’. I didn’t allow Review, and the score slide is not included. As usual, needed to edit the embedded slides. Several slides have a Pause On Enter, which is never a good idea IMO.

Setup

Multistate objects

Both popups triggered by the extra shape buttons labeled ‘Info’ and ‘Score’ are multistate objects with 2 states:

  1. Normal state is a shape with Alpha = 0 and Stroke = 0. This means it is invisible to the user
  2. State popup exists for both buttons, and has the necessary information to pop up. I used only text, but you can also add images or even event video.. For the Score button I used inserted system variables (cpQuizInfoPointsscored and cpQuizInfoPointsPerQuestionSlide). That way popup will have different values on each quiz slide.

The  multistate content shape objects (SS_Info and SS_Score) are inserted on the second slide ‘Instructions’ which is the slide preceding the first question slide.  This is very important, don't try to do it on the first question slide itself. I added a button Continue to that slide to replace the Pause On Enter. The multistate object timelines start after the pausing point of the button. They are timed for the rest of the project with the option ‘Place object on top’. Since their Normal state makes them invisible to the learner, no need to mess with Show/Hide.

Variables (Boolean)

Two Boolean variables were created, labeled v_info and v_score.  Their default value = 0, corresponding with the Normal state of the two mulitstate content shapes SS_Info and SS_Score.

Shape buttons

On the first quiz slide I created two shape buttons, which have exactly the same look as the Transparent buttons used on the quiz slide (Submit button). These buttons SB_Info and SB_Score are also timed for the rest of the project with the option ‘Place object on top’. In this example Review is not allowed, which avoids the possible overlapping by the Review navigation buttons. Of course it is possible to hide the shape buttons in review mode if necessary. I did take out the pausing point for both Info and Score button. As you can see in the timeline, I moved the slide pausing point towards the end of the quiz slide to avoid waiting after the second step in the Submit process.

Actions and events

Hide buttons On Enter for Exit slide

The buttons SB_Info and SB_Score - timed for the rest of the project -  have to be hidden on that slide, which can be done with a simple action (if you group the buttons) or with a two-command advanced action. It is not necessary to hide the multistate objects. They will always return to their Normal state on each slide, which means they are invisible to the learner.

Success action buttons SB_Info and SB_Score

A conditional action is needed. I preferred a shared action with 4 parameters. I suppose this is an action which can be used in many projects. If you import the shared action into a new project (from an External Library or with the Import functionality), you do not have to create the variables, only multistate content objects. The shared action is derived from this advanced action:

Each of the four parameters is marked  with a color. One of the big advantages of shared actions over advanced actions are the descriptions which explain clearly what you have to choose, see this screenshot which is for the second button SB_Score:


More?

Here are some possible changes or extensions of the idea, which is basically that you need the popups present on the slide BEFORE the first quiz slide and timed for the rest of the project.

  • I used only text in a shape, but the popups can be anything, you can add images, video....
  • With the present setup both popups can be visible at the same time. If you don't like that, add an extra command to the shared action (and a parameter) where you change the state for the 'other' popup back to Normal.
  • You do not like the way popups have to be closed with the same toggle button? It is not possible to add interactive objects to a state, except to the Normal state. You can also insert a hyperlink like an X to the normal state. But that means you have to switch the content filled state (which is Popup at this moment) and the empty state. Bit more work but doable. About using Hyperlinks to trigger actions, have a look at More is in a Hyperlink
  • If you want individual content in the popup, different for each quiz slide, remember you can use a variable to store content. Insert the variable in the content popup and populate it with the On Enter action of the quiz slide.
  • ....