Known Participant

Answered

Order for Click Boxes- or other methods of clicking through an image in order.

Forum|Forum|9 years ago
July 25, 2016
3 replies
2580 views

I'm using Captivate 8.0.3.290.

I have an image which has a series of numbers (1-60) scattered across the page. The idea is for the user to click on each number in order as they find it. I thought I could do this with click boxes by having On Success set to "Enable" with it enabling the next box which is over the next number. At first glance this was working correctly, in reality it is allowing any box to be clicked on in any order. Anyone have any ideas on how to set this up correctly? I'm relatively new to Captivate so any tips are welcome.

Thanks.

This topic has been closed for replies.

Correct answer Lilybiri

Ok. I think I'm just getting confused now and seem to be going in circles...

The problem that exist is that I have multiple click boxes on a slide. I want the user to only be able to click on them one box at a time in a specific order. What is your recommendation for the best method to accomplish this?

Disable all the click boxes (you need one command for each of them, unless you would purchase the CpExtra widget from InfoSemantics) except the first one. Create a shared action that disables a click box (parameter 1) and enables the next click box (parameter 2). Apply that shared action to each click box, and define the proper parameters.

Paul Wilson CTDP

Community Expert

Lilybiri is right. You will need to stagger the pauses of all these objects so as to not have the project continue. I’m sorry I just assumed that that would be known. I guess that’s why she's the MVP around here.

I would also use a shared action but some people still have trouble wrapping their brains around them. I know I did for a while.

As always I recommend what I would do given a certain challenge. I use shapes because that’s what I always use. There is no reason other than I can predict how it will respond but it really just comes down to personal preference.

Paul Wilson, CTDP

Lilybiri

Legend

But you don't have a reason to use shapes instead of click boxes! That is what I suspected. It was much more important to emphasize the staggering on the timeline IMO because that is what is really causing the problem to the OP, it doesn't matter which interactive object is used: with a simple action the playhead will be released in CP8.

As I told: there is a drawback to Shapes for HTML output: you have to hide and disable them, a Click box has only to be hidden.

Paul Wilson CTDP

Community Expert

You only need to address the OP. There is really no reason to argue with me about what I’m suggesting. I use shapes as buttons because I’ve never liked click boxes. Some people reach for a pencil, others reach for a pen. For me personal preference is enough of a reason and the OP can decide for themselves who is offering the best information and act on it.

Paul Wilson, CTDP

Paul Wilson CTDP

Community Expert

This could be rather tedious but I think it could be done. I’d like to emphasise that this is just what I would do. It doesn’t mean that this is the only way to achieve this but here is my take.

1. I would create 60 shapes and label them so it’s clear which one is shape 1, 2 and so on.

2. Place the shapes over each of the numbers on your image in the proper order.

3. Select all of the shapes and make them transparent (no fill, no outline)

4. Check off ‘Use as Button’ so that all the shapes are now clickable buttons that can trigger an action.

5. Select all the shapes except shape #1 and click on the eyeball icon in your Properties panel (this will make all but the first one hidden from your output)

6. One by one set the actions for each shape to ‘Show’ the next shape used as a button. In other words, the action for shape#1 will be to show Shape#2 and so on. This will have the effect of only enabling the next shape as a clickable item. All the shapes covering the higher numbers will not appear until their previous counterpart has been clicked.

If you wanted to get into Advanced Actions you could take a step further and have another 60 objects like an X or a checkmark and have the advanced action not only make the next shape visible (and clickable) but also ‘Show’ the x or checkmark.

Paul Wilson, CTDP

Lilybiri

Legend

I am sorry, but Paul forgot that his work flow will only be valid if you stagger all the shape buttons on the timeline. Using a simple action like 'Show' in Captivate 8 will release the playhead and you'll not be able at all to click the other shape buttons, if their pausing time is all at the same moment. Creating a timeline with 60 staggered shape buttons is quite a hassle and increases not only the slide duration but also the file size. You need a standard advanced action if you have all shape buttons timed at the same moment. Have a look at this video:

Simple vs Standard actions

Having 60 advanced actions on one slide will bloat your project. At least you should use a shared action.

It can be done with click boxes as well, there is no specific reason why a shape button would be better, maybe Paul can explain? You'll need a standard (shared) action as well. Difference is that a click box is invisible to the user by default, that its pausing point is always at the end of its timeline and that Hiding is exactly the same as Disabling (you should use Hide). However with shape buttons, for HTML output you have to be careful: Showing will not always enable the button and Hiding will not always disable the button. To be careful you have always to use both actions (unless you only use SWF output, which is more reliable).

Since you need an advanced or shared action anyway and if you want to offer a visual clue when a number has been clicked, this could be a possible work flow (screenshots from small example with three clickable regions):

Create the visual clue in/on the image; in this screenshot you'll see the numbers have a 'strike through' attribute
Cover each number with a shape button, that has the number, no stroke and fill with same color. I used an On Enter action for the slide to Disable (not Hide) all shape buttons except the first one (which is selected here, I grouped the shape buttons, hence the big bounding box). When published no borders are visible.
For shape buttons: choose Infinite attempts, there will never be a Failure action in that case
Create a shared action that
1. Disables the present shape button
2. Hides the present shape button this will result in showing the strike through version on the image
3. Enables the next shape button

L

lmdenton10Author

Known Participant

Disable all the click boxes (you need one command for each of them, unless you would purchase the CpExtra widget from InfoSemantics) except the first one. Create a shared action that disables a click box (parameter 1) and enables the next click box (parameter 2). Apply that shared action to each click box, and define the proper parameters.

Great thanks! A lot simpler than I thought it would be. The only issue left regarding this is to set for the first one. Is there a way to only have the first click box clickable when you get on the screen?

Paul Wilson CTDP

Community Expert

Visually, what would you like to have happen if the user clicks correctly and what would you like it do if they click on the wrong spot?

Paul Wilson, CTDP

L

lmdenton10Author

Known Participant

I was ok with nothing visually, but if there were a way strike out the number once it's been clicked, that would be even better. I've currently got it set to make a sound but a mark threw would be more effective. If they click on the wrong spot, the preference would be for nothing to happen at all.

In the non virtual setting of this activity you just cross out each number as you find it on the sheet and see how many you can get in an allotted time frame.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded