SVGs for custom Hotspot question

Intro

About 5 years ago I published this blog explaining the workflow for such a question using shape buttons. The embedded example in that blog was of course a SWF output.  With release 11.5 the possibility to use SVG’s as buttons, and to control the clickable area, combined with multistate object made me feel it is time to update this old post.

Why a custom Hotspot Question?

The default hotspot question slide has several limitations. To me the most frustrating limitations are:
  • hotspots have to be rectangular
  • partial scoring is impossible
With a custom question you can have
  • hotspots with any shape
  • partial scoring, which still can be reported to a LMS
  • full control

Limitations of custom questions

  • developing custom question slides always takes more time
  • although the total score will be correct when using partial scoring, some quizzing system variables will consider each correct hotspot as separate question. You need to keep that in mind for the fields in the score slide (number of questions/correct questions not correct)
  • to the full functionality (Retake/Review) takes a lot of time.

In this post I will show a pretty simple example, no retake/review but with the possibility of having the score stored in the quizzing system variable cpQuizInfoPointsscored.

Example

Have a look at this two-slide file (rescalable HTML5). On the first slide you will be asked to click 4 West-European countries. On a correct click, the country flag appears bottom left. You will not be able to click that country anymore. Move to the second slide (Next button) to see the final score.

Please be a bit patient when you see a ‘pink’ feedback (which is the correct style). It may be due to the amount of SVG’s on the slide, but it takes time to hear the audio and see the flag appear and animated.
If the embedded movie is too small for your device, you click this link.

Setup

Look at the screenshot, which shows the Timeline and the Properties, Actions tab for one of the non-correct SVG-buttons  (Luxemburg). In the Style tab, the option ‘Enable Click in Bounding Box’ is disabled to limit the clickable area to the shape of the SVG itself (see recent post). In the screenshot both groups (countries/flags) are expanded. 

For the SVG buttons (countries) Success message is activated and used to display feedback. Those messages have two different styles: grey for the wrong clicks, and pink for the correct ones. After the correct message, an audio clip sounds and the flag of that country will appear at the bottom left. Both for correct and incorrect SVG’s the state will change to the Visited state when clicked: That visited state is grayscale for incorrect clicks. No advanced actions needed so far.


Actions

The on enter event of the question slide triggers the simple action ‘Hide Gr_Flags’

Success event for the correct countries, needs an Advanced action. In this case a user variable will store the score. It is not really necessary because the clicks are reported and have a score, the system variable cpQuizInfoPointsscored will have the correct scoe as well. Have a look at the action for Belgium:

The first three commands are self-explanatory. Why did first apply the effect (line 4) to the group, and wait 0,1 sec before showing the flag? Because that will avoid flickering, a trick I learned from another user many months ago.

Duplicate that action, and edit it for the three other correct SVG’s.

Why did I not use a Shared Action?

If you are a fan, you know that I mostly use Shared actions when possible. This was also the case for this example.Of course, I created first a shared action. But a strange phenomenon appeared: the Effect was not applied for each instance of the shared action, only for the first one. I wanted the whole group to be animated after a correct answer. Yes, I could have ungrouped and changed the action, but then that meant another advanced action On Enter for the slide (where I now hide the group). Moreover I like to have the effect emphasize the whole group instead of one flag.

Still looking out for the reason of this non-consistent behavior. Really this is the first time I encounter a difference between an advanced and shared action behavior. Be sure, will update this post when I have an answer.

Power of SVG Buttons

§Intro

In previous posts I have talked about the advantages and disadvantages of the 6 button types, and how you can edit the colors of SVG’s, even in states and when they are used as buttons. SVG’s, being vector images are excellent for use in projects to be viewed on multiple devices, whether it is a scalable non-responsive or a responsive project (fluid boxes or breakpoint views).

Unique about SVG’s used as buttons, is the fact that you have control over the clickable area, which is not the case for other  button types. In the example below you’ll see buttons which would have been impossible to realize with any other button type.

Example file

Watch this two-slide project. The Title slide is taken from the QSP ‘Legacy’ (non-responsive), but I have changed fonts (not fan of Arial). The second slide uses an edited master slide from that same QSP. Click the buttons in circular image in any sequence, and you can also reset the slide (used the Scenario 2 technique described in Replay Slide)

Setup Clickable Area

Six Buttons

The 6 buttons in the circular arrangement have overlapping bounding boxes. Have a look at this screenshot:


By unchecking the option ‘Enable Click in Bounding Box’ the clickable area will be limited to the space within the colored shapes, and those do not overlap. 

I kept only the Normal and Visited InBuilt states of the buttons . In the Visited state I added an icon (also SVG) from the Assets panel,  colored in the same color of the button (which was dimmed). That icon also covered up the number, which was part of the button SVG. Here is the Object state panel for button 6:

Reset Button

For this button I used an icon from the Assets panel. and added a text caption close to this button. The bounding box of the SVG is encreased so that the Reset text looks to be inside of the box. In this case The default option under the Style tab ‘Enable Click in Bounding Box’ remained checked. It now looks as if the learner can click both text and icon. I didn't use the padding option, which would make the icon smaller inside the bounding box.

Other Items

The information is stored in a multistate shape, where the Normal state is invisible (Alpha and Stroke set to 0). A two state shape is used for the final image, which is in a custom state of a circular shape. That circular shape also has an invisible Normal state. 

For the multistate objects the option ‘Retain State on Slide Revisit’ remains unchecked. Since the Reset button is re-entering the slide, all multistate objects will automatically revert to their Normal states.

Actions and variables were custom made, I didn’t use any of the click-reveal interactions from the QSP’s. Sorry about that, but I’m so used to create that type of interactivity that it comes almost naturally. One tracking variable for each buttons was needed to have the final image appear after all buttons have been clicked. 

Edit SVG in Captivate 11.5

Intro

If you have read my first blog about this major update, you will know that the extended functionality of SVG’s for use as buttons is one of my favorites. I didn' t mention that you get some editing features within Captivate. Thisat means that you don’t have to do a roundtripping with Illustrator (or use another vector editing application) if you just want to change some colors. This post is meant for those who are rather new to vector images, and the way paths are used.  Next post will be about roundtripping with Illustrator for more complicated editing.

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

Remember: SVG used as button is only possible for HTML5 output, not for SWF output

.

Example slide

The example uses only included  assets from the Assets panel, to be found in the Audio and Icons part. All icons have edited colors (not meant as a design example) to illustrate the workflow I will explain in this post (and later on in an interactive video). The biggest SVG in the center of the slide is configured as a button. You can click it as many times as you want, you’ll be able to listen to some of the audio assets. There is no poster image in this example, just the default Play button.



Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

As I explained in the intro, this SVG is one of the Icons in the new Assets panel. Insert it from that panel (name ‘Cover’). You can resize either by using the Options tab of the Properties panel for the SVG, or by dragging a corner with the mouse while keepoing SHIFT pressed to preserve the width-height Ratio. Since this is a vector image, you’ll see that it remains crisp even when enlarged considerably.  The original icon uses a uniform dark grey. I check the option to use it as a button, and uncheck the option to make the whole bounding box clickable (Enable Click in Bounding box). You can see that the bounding box extends above the image. There is an option to ‘Fit to Bounding box’ but it would have distorted the SVG.

Step 2: Edit mode

To enter edit mode for the SVG double click the SVG. You find the tooltip when hovering over the Fill in the Properties panel. Do not use the button ‘Edit SVG’, which would let you choose an editing application on your system, nor the option Edit with Illustrator.

Step 3: Select a ‘path’

A vector image is composed mostly from several paths, which can have a width (may be variable) and/or a Fill. The image I used as example has 3 paths, all closed and with a fill. You select a path by clicking it. Selected path will have a blue surrounding line as you can see in this screenshot:

Step 4: change color

Click the Fill icon in the Properties panel to open the Color dialog box. For this simple demo slide I used the color wheel to select a color. In a normal project I would have used the Theme Colors palette of course. Click OK to confirm the color change. Repeat that workflow to the remaining shapes.

SVG button states

When you convert a SVG to a button, the InBuilt states Rollover and Down are added automatically. You can use the edit workflow described above for each of those states. I added also the Visited state (with a speech bubble) and the custom state ‘Done’ which appears after you have listened to the 5 available audio clips. Here is the Object state panel of the big SVG button:

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

Main topic is finished, you may stop reading if you want. But for the curious fans,  the audio clips are attached to a state in a second multistate object, which is a shape to which I added an icon in the Normal state (no audio) and an audio clip with its name to the other states.

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.