Rollover in Fluid Boxes?

Intro

One of the type of objects that is indicated by the tracker as not compatible with HTML output are rollovers: rollover caption, rollover image, rollover slidelet, rollover shape. However if you ignore that warning for a non-responsive project, the rolloverrs will work fine when used with a mouse on a desktop or laptop screen (with the exception or the slidelet, which you should avoid at all times). Its functionality will not work on a mobile device, even not when using a stylus. But the 'mouse' users have that functionality.

However when you create a responsive project using Fluid Boxes, the options for inserting a rollover are greyed out. There is no way to add them. Is there a workaround to have rollovers for desktop/laptop users? That question appears once in a while in forums or social medai. In this post I will talk about my tentavies to mimick a rollover..

Example Movie

I cannot insert a responsive movie in a blog post. Use this link to have access to it. Try it out on a laptop or desktop screen: roll over the buttons in the left and in the right most Fluid box. You'll see rollovers for the big Blue buttons which do not have a real button functionality. The red buttons on the right are active, a hint message appears when rolling over the buttons. You can click those red buttons. This is a static screenshot of that slide (which appears after the poster image and the first slide):

If you try this on a tablet or a smartphone, rollovers will not appear. I tested on iPad and on an Android (HTC) phone.

First Mimick: Hint Messages

You did see the Hint messages for the red buttons when hovering over them. If you use a tablet or a phone they will not show up. Those buttons have the InBuilt States 'Rollover' and 'Down', but only the Down state will be visible on those mobile devices. This is the Object state panel for the second button:

For interactive objects it is possible to check the option 'Hint message' in the Actions tab. In all themes included with Captivate those messages are no longer in a caption but in a shape. The hint message appears wh

There are some problems with this solution:

  • Buttons and Hint messages will share the real estate in the (normal) Fluid Box.
    That is a waste of space especially for mobile screens where those hints never appear. and the buttons may shrink too much as you can see here:
  • I tried to use a static fluid box for each button+hint to be able to stack the Hint message over the button but that leads to very ugly flickering and is excluded.
  • You don't have control over the exact size of the buttons, and certainly not over the HInt messages (look at the screenshots above). This may be not so important since you'll only watch on a big screen, but nevertheless.

Second Mimick: Rollover State

With the blue shape buttons I demonstrated that you can fill the Rollover state with Text (mimicking a rollover caption), with an image (mimicking a Rollover Image) and with both. Here is a screenshot of the second shape button, having an image and text:

The effect is quite nice, provided you use rather big shape buttons as was the case here:

There is a possible problem when using images: they can be distorted if the option 'Maintain Aspect ratio' is unchecked. That was the case in the example, and can lead to distortion:

Shared Action for Red buttons

The active red buttons trigger a shared action which will change the state of a shape (showing explanations), add a star to a progress indicator and have it animated. If you have read blog posts written by me, you know that I am a big fan of Shared Actions.


Custom Failure Messages/Attempts - Drag&Drop

Intro

This article is written as an answer to a question on the forums: Drag&Drop with Advanced Action

For quiz slides you have the option to show more than one Failure message, linked to the attempts. That functionality is not available for Drag&Drop slides. As you can read in the thread, another user posted a solution using the Object actions which are executed after each drag action.  The solution I describe here is more similar to what happens on other quiz slides: the messages will appear after clicking the Submit button. This work flow is only valid for Knowledge Check slides, which was the goal of the user on the forum. As you can read in one of my former blog posts, a D&D slide which is not scored, is reset automatically when leaving the slide. This functionality is used here. You'll also see that I used the InBuilt states for the drop target, which i described in this post.

Example 

Watch this interactive movie to see the result. It is Flash-based, do not watch from a mobile device, please.

Setup D&D Slide

The Drag&Drop slide's Timeline looks like this screenshot:

From Bottom to Top you find these object timelines:

  • DragOne, DragTwo and DragThree which are the 3 Drag sources. Those objects have only one extra InBuilt state: the transparent DragOver State. D&D is set up so that the drag sources disappear behind the drop target.

  • DropContainer which is the unique Drop Target. It has 3 states as you see in this State panel
  • Text Tx_Question which has the Question

  •  Gr_Feedback with several objects; the whole group is hidden in Output
    • I_Fail and I_Success are the two sticky images
    • Shape button SB_Continue with a pausing point at 2 secs, which is later than the (default) pause of the D&D (1,5secs)
    • FB_One, FB_Two and FB_Three are the failure feedback messages for the 3 possible failures. The first two have an inserted variable v_attempt.

You don't see a Success feedback on the timeline, because I kept the default Success message for the D&D slide (unchecked the Failure message)? That Success message has just be edited (freeform shape).

The D&D panel, tab Actions has been set up as visible in this screenshot. Although the user provides 3 attempts, you see that I set the attempts to 1 in this panel:

Variable, Events and Actions

I used only one variable: v_attempt, with a starting value of 3. If you want to have more attempts than 3, just change that starting value. You can see its value in the example movie, center of the bottom bar. That variable is also inserted in the first two Failure messages.

SubmitAct, triggered by the Failure event of the D&D (see panel above)

This conditional action has 4 decisions, can easily be edited to have more than 3 attempts

  1. Decision 'Always' is a mimicked standard action, decrements the value of v_attempt by 1
  2. Decision 'First' checks if v_attempt is equal to 2, which means the first attempt (because the original value has been decremented in the first decision). If that is the case 3 objects out of the feedback group are shown: the first feedback message (FB_One), the image I_Fail and the continue button SB_Continue
  3. Decision 'Second' checks if v_attempt is equal to 1, which means the second attempt. The actions are identical to 'First', with the exception of the feedback message (now FB_Two)
  4. Decision 'Third' checks if v_attempt is equal to 0, which means the third and last attempt. It has similar actions to the previous two decisions. 

Here is a screenshot of the complete action:

SuccessAct, triggered by the Success event of the D&D (see panel above)

This standard action will set the variable v_attempt to 0 (necessary to have the last action ContAct executed correctly), shows the image I_Success and the Continue button. The success message appears automatically, since it is de original embedded message.

ContAct, triggered by the Success event of the Continue button

Here is the 'trick'! After each attempt I want the D&D slide to reset automatically. This is only possible when you leave and re-enter the slide. To achieve this, I used a similar (but easier) approach as explained in the blog post ReplaySlide. I inserted a dummy slide before the D&D slide, with a very short duration (0,1secs). Have a look at the script triggered by the Continue button, which is a one-decision conditional action:

When there are attempts left (v_attempt > 0), these commands are executed:

  • Expression cpCmndGotoSlide = cpInfoCurrentSlide - 2
    The first system variable cpCmndGotoSlide has an index starting with 0, whereas cpInfoCurrentSlide starts with 1. That is the reason why 2 is subtracted. In human language this command means Go to Previous Slide.You can replace it by 'Go to Previous slide' as well, but I like to repeat explanations like this. Sorry!
    Alternative: Go to Previous Slide

  • Continue: is necessary so that the playhead is released. It will quickly speed over that dummy slide (0,1 sec) and you'll see the D&D slide almost immediately, freshly reset because it was re-entered and not scored.

When no attempts are left the user is navigated to the last 'End' slide.

Tips

If you want to allow the same scenario for this slide, when the user revisits the slide, you have to reset the variable v_attempt to its original value, which can be done with the ELSE part of the action ContAct. It will have 2 commands in that scenario:

  • Assign v_attempt with 3
  • Go to Next Slide

To change the number of attempts, for example from 3 to 4:

  • Change the default value of v_attempt to the new literal
  • Create an extra Feedback message FB_Four and include it in Gr_Feedback (select both new message and group, followed by CTRL-G)
  • in SubmitAct
    • Duplicate the last decision 'Three', and label it 'Four'
    • Edit 'Four', replace 'FB_Three' by 'FB_Four'
    • Edit 'Three': replace the literal '0' in the condition by '1'
    • Edit 'Two': replace the literal '1' in the condition by '2'
    • Edit 'One': replace the literal '2' in the condition by '3'

No other changes are necessary.