Intro
Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.
This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.
Example
The first slide has three fields to fill. If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link
Setup
Variables
- v_one, v_two and v_three will be used witl be associated with the Interactions
- v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’‘
Scrolling Text Interactions
You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute. Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box.
Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).
Advanced Action
This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent | As you perhaps know, an advanced action will be converted to JavaScript on Runtime.
The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.
Conclusion
As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.