Need Help Creating a "Hint" Box That Is Not A Roll-Over

[ACrosby]

I am in the middle of a big project for a client wherein I need to remove anything that is not up to HTML5 specifications - and anything that is using FLASH technology.

Presently, when a user rolls over a text area that reads something like "Move your mouse HERE for a hint" (the 'hot spot' being the bold/all caps word "Here"), the code displays a box elsewhere on the screen the gives the learner a 'hint' about what to do next.

Obviously, to be free of Flash and totally HTML5 compliant, there can be no roll-over (hover) interactions.

If I change the text to "Click or touch HERE for a Hint", how can I create an invisible object/button that - when clicked - displays another box that contains a hint such as "Right-click on the same menu as before"

So - this is the same as a hint, but is triggered by a click or touch rather than a roll-over.

Any help is greatly appreicated.

[Stagprime]

You can create a smartShape and place the text inside the shape.

Set the properties for the shape to 0 for the stroke and 0% for the opacity.

Then you can click the box that says to use it as a button.

Hope that helps get you started.

Let me know if you need any more on that idea.

[ACrosby]

Thank you, but I'm not sure where the interaction is with this.

When the learner clicks on an object word ("HERE"), a new box 'pops-up" to display a hint.

[Stagprime]

So basically you will need to create two boxes.

Box 1: This is the text button that says 'Click HERE for a hint'

Box 2: This is the pop-up.

Box 2 will need to be hidden.

Box 1 will have an onSuccess action that will show the hidden box. This is the "what will happen when I am clicked" information. This can be found in the Actions tab when the button is highlighted.

My action says 'Continue' but you can change yours as appropriate.

If you plan to have a ton of boxes with corresponding hints - I would recommend creating multiple states for the pop-up box.

Does that help clear things up?

[ACrosby]

Yes, thank you, this was a step in the right direction!

A couple clarifications that may help others needing this same technique.

The way to hide the hint "Object" box (the box that contains the hint text) is to use the eye icon by the object's name in the inspector. (You should se the diagonal red line crossing the icon of the eye)

Regarding the invisible box over the text that triggers the display of the hint text box, specify this as a button and delete the "Rollover" and "Down" states.

While the invisible box is highlighted (box 1 in the above description), go to the "Actions" panel in the properties inspector, and for 'on success', specify "show". Then, use the drop-down menu to show the hint box (box 2 in the above descritpion).

You will have to preview this using "play from this slide" or "HTML5 in browser'. Simply clicking the "Play Slide" option will not work.

Thanks again to Stagprime!

[Lilybiri]

Hmmm... the sentence '...there can be no rollover' is not totally correct.

Rollover Caption and Rollover Image work perfectly on devices whcih use a trackpad or mouse, but not on mobile devices with touch screen.

For that reason, when you create a Fluid Boxes project which is essentially meant to be used by all devices, the Rollover objects are dimmed. Not very fair, since the project could be used on desktop/laptops. Hence I created a blog to explain a workaround:

http://blog.lilybiri.com/rollover-in-fluid-boxes

The easiest way to have such replacement for a rollover is explained step-by-step in this blog:

http://blog.lilybiri.com/click-slash-reveal-interactions-back-to-basics

It is perfectly possible to have an 'invisible' button. If you are on 11.5 that can be a transparent svg, bitmap image or a shape button (bit more work). The Normal state of a button can be invisible, but do not forget to delete the Rollover and Down states!

[ACrosby]

The target audience is using tablets, so roll-over is not an option.

[Lilybiri]

OK,  was not mentioned in the original question. Will you use a responsive project? In that case hope you are aware of the fact that you cannot have 'stacked' objects in a normal fluid box. Which means that the proposed solution by StagPrime could cause problems. If you do not use a responsive project, no problems but would be bit astonishing since your audience is using tablets and smartphones.

I offered you the replacement by a very simple Click/Reveal workflow, using a multistate object (second link).  Apparently you didn't see that link? You can have the 'Click here' in the Normal state and the Popup in a custom state. Take out Rollover and Down states, and a toggle button will just need the command 'Go to next state', Continue Playing the project disabled.  Both for showing and hiding the popup. 

http://blog.lilybiri.com/click-slash-reveal-interactions-back-to-basics