March 28, 2019
Creating Interactive Fingering Charts via Captivate-Part 2
Comments
(2)
March 28, 2019
Creating Interactive Fingering Charts via Captivate-Part 2
Newbie 4 posts
Followers: 0 people
(2)
Play

This project successfully utilizes advanced actions, conditional statements, and a little JavaScript to allow the user to:

  • Interact with two independent finger holes (not a very exciting instrument )
  • Change the state of a text box to display the current configuration (Both Closed, Both Open, Left Closed/Right Open, Left Open/Right Closed).

I’m considering this a reasonable proof-of-concept.

Here’s the workflow:

  1. I used a Circle as a button, giving it two possible states: Normal (Covered) and Open (a custom state). Delete the other states.
  2. Create a variable for each Circle, and assign each the value = 1.
  3. Create a display (a text box in my case) with enough states to cover each possible outcome. In my case: One circle, two possible outcomes. Two circles, four possible outcomes.
  4. Create Advanced Action for CheckStateOfAllCircles
    1. A tab will be used for each possible combination of Circles. For each one:
      1. A conditional statement checks the value of the variable for each circle
      2. Change the state of display to reflect each possible permutation.
  5. Create a restart_box
    1. Have the restart_box execute the CheckStateOfAllCircles advanced action created earlier
    2. This can be hidden off-screen if you like.
  6. Clicking a Circle executes an advanced action (you will need one for each Circle) with these parameters:
    1. if value (upon pressing) is 1–>
      1. Change state of the Circle (Open)
      2. Assign the Circle’s variable the value = 0
      3. execute JavaScript:
        • var box = $(‘#restart_box‘)[0];
          cp.clickHandler(box);
    2. else–>
      1. Change state of the Circle (Normal which is closed)
      2. Assign the Circle’s variable the value = 1
      3. execute the same JavaScript. It’s best to just copy and paste it

So:

A fingering is changed–>this state changes, this variable assigned new value, click box via JavaScript.

box activated–>executes advanced action that checks the state of all possible combinations via conditional statements –>changes report based upon successful result

I am indebted to the resources, comments and help including these:

http://blog.lilybiri.com/advanced-actions-dialog-box-in-captivate-2017
https://elearningbrothers.com/blog/trigger-captivate-advanced-actions-javascript/
https://elearningbrothers.com/blog/making-adobe-captivate-2017-while-loop/
https://www.youtube.com/watch?v=bJ5HN2Q6G9k

2 Comments
2019-03-29 14:17:26
2019-03-29 14:17:26

Just a heads-up:

I’ve attempted to cut & pate the JavaScript from the blog above into a project. Notice the curvy apostrophe-style single-quote marks:

var box = $(‘#restart_box‘)[0];
cp.clickHandler(box);

The code will not run unless you use straight single-quote marks.

I’ve attempted to paste a corrected version here (and they look straight as I’m typing them):

var box = $(‘#restart_box’)[0];
cp.clickHandler(box);

I’m pretty curious if this will show up properly in the comments. I copied and pasted them from the original project with straight single-quote marks the first time and they came out looking curvy (perhaps a font/style choice imposed by the blog template).

 

Like
(1)
>
Shawn Keech
's comment
2019-03-29 14:19:27
2019-03-29 14:19:27
>
Shawn Keech
's comment

Well, they look the same on the blog. If you paste the code into your own project, be sure to check that the the single quotes look and behave correctly.

If you type it in manually, it seems to work fine. After that, you can cut and paste from your own project.

Like
Add Comment