Skip to main content
ACrosby
ACrosby
Known Participant
September 24, 2020
Question

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

  • September 24, 2020
  • 2 replies
  • 497 views

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.

 

    This topic has been closed for replies.

    2 replies

    Lilybiri
    Lilybiri
    Legend
    September 25, 2020

    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
    ACrosbyAuthor
    Known Participant
    September 25, 2020

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

    Lilybiri
    Lilybiri
    Legend
    September 25, 2020

    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

     

    Stagprime2687219
    Stagprime2687219
    Legend
    September 24, 2020

    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
    ACrosbyAuthor
    Known Participant
    September 24, 2020

    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.

    Stagprime2687219
    Stagprime2687219
    Legend
    September 24, 2020

    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?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices