Highlighted

Use HTML to launch a slide:

Explorer ,
May 13, 2019

Copy link to clipboard

Copied

Situation:

Looking to see if it is possible for a user to click on an html link that will open a captivate slide.

For example:

A  single html document that has 30 study subjects on it. When the user clicks on a subject they want to study, it should open up a captivate slide that holds the study material.

Not too concerned with the cosmetics, just looking to see what javascript and/or html code is needed to make it happen.

After deep thought process, positive feedback from here, some nights & days with "hot mocha" & trial/error, this approach works perfectly for me and hopefully be helpful for others.

*Note this approach is for those wanting to take an external html file and link it to a specific slide within captivate, if you are building within captivate, then use the provided features within the program.

tested on:

CP2019

We execute this in a custom html just above the header tag:

<!-- Custom slide jumper -->

<script>

  $(document).ready(function()

  {

  $("#link").click(function(event)

  {

  window.parent.window.cpAPIInterface.setVariableValue( 'cpCmndGotoSlide',0);

  });

  });

</script>

</head>

then add this inside the body tag:

<body>

<a id="link" href=""><img src="../img/back.png" alt="home" class="nj-home"></a>

.... your other inputs........

</body>

You can customize the image source link to include class as well.

for me, inside the javascript ( 'cpCmndGotoSlide',0);

The 0 refers to the slide number, so basically when the user clicks on a custom image, it takes them back to the starting point. I have used this approach for other areas in my project by changing the 0 to any slide I want the user to go to and it works

flawlessly.

Cheers,

Scott

Views

112

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Use HTML to launch a slide:

Explorer ,
May 13, 2019

Copy link to clipboard

Copied

Situation:

Looking to see if it is possible for a user to click on an html link that will open a captivate slide.

For example:

A  single html document that has 30 study subjects on it. When the user clicks on a subject they want to study, it should open up a captivate slide that holds the study material.

Not too concerned with the cosmetics, just looking to see what javascript and/or html code is needed to make it happen.

After deep thought process, positive feedback from here, some nights & days with "hot mocha" & trial/error, this approach works perfectly for me and hopefully be helpful for others.

*Note this approach is for those wanting to take an external html file and link it to a specific slide within captivate, if you are building within captivate, then use the provided features within the program.

tested on:

CP2019

We execute this in a custom html just above the header tag:

<!-- Custom slide jumper -->

<script>

  $(document).ready(function()

  {

  $("#link").click(function(event)

  {

  window.parent.window.cpAPIInterface.setVariableValue( 'cpCmndGotoSlide',0);

  });

  });

</script>

</head>

then add this inside the body tag:

<body>

<a id="link" href=""><img src="../img/back.png" alt="home" class="nj-home"></a>

.... your other inputs........

</body>

You can customize the image source link to include class as well.

for me, inside the javascript ( 'cpCmndGotoSlide',0);

The 0 refers to the slide number, so basically when the user clicks on a custom image, it takes them back to the starting point. I have used this approach for other areas in my project by changing the 0 to any slide I want the user to go to and it works

flawlessly.

Cheers,

Scott

Views

113

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 13, 2019 0
Most Valuable Participant ,
May 14, 2019

Copy link to clipboard

Copied

Bit confusing question.  You have one slide Captivate files that you want to run from an HTML page? If yes, publish the Captivate files to a webserver, and call their index.html file in an iFrame. That is not a real Captivate question or I can misunderstand of course.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Adobe Community Professional ,
May 14, 2019

Copy link to clipboard

Copied

I've done something similar in the past when I had to offer copies of my elearning courses to volunteers who did not have employee logins and passwords to access the learning management system. Essentially I published a bunch of my elearning courses with reporting turned off so what you had when completed was a bunch of folders containing more folders and files and an index.html file for launching the course. I put them all in a folder and uploaded the single folder to my web server. In the root folder I placed a hand written main index.html file that included links to all the elearning index.html files in the subfolders (the courses). My main launch page included code for each course similar to what I highlighted here:

2019-05-14_8-23-52.png

This is just one example, but I could duplicate this line dozens of times with the updated links and proper titles for each module and people would be able to launch any one of the modules they wished. You could even have the course return to this page when they completed the module. Again, remember that there is no tracking or reporting with this sort of solution but essentially elearning is just one big web page.

Paul Wilson, CTDP | https://captivateteacher.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Explorer ,
May 14, 2019

Copy link to clipboard

Copied

Both feedbacks are important and wanted to provide an illustration to help generate the thought process even more. Below is a screenshot of an independent html accordion format displaying options to the user. When the user clicks on the item identified in red, there should be a "code" that will take the user to the assigned captivate slide #. That is what I chasing after.

I found this link and wondering if this is the route to take or if there is a more efficient of way accomplishing my objective.

https://forums.adobe.com/thread/1339949

shot1b.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Most Valuable Participant ,
May 14, 2019

Copy link to clipboard

Copied

Why not realiae this in one project? I don't understand, must be me.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2019 0
Explorer ,
May 23, 2019

Copy link to clipboard

Copied

After deep thought process, positive feedback from here, some nights & days with "hot mocha" & trial/error, this approach works perfectly for me and hopefully be helpful for others.

*Note this approach is for those wanting to take an external html file and link it to a specific slide within captivate, if you are building within captivate, then use the provided features within the program.

tested on:

CP2019

We execute this in a custom html just above the header tag:

<!-- Custom slide jumper -->

<script>

  $(document).ready(function()

  {

  $("#link").click(function(event)

  {

  window.parent.window.cpAPIInterface.setVariableValue( 'cpCmndGotoSlide',0);

  });

  });

</script>

</head>

then add this inside the body tag:

<body>

<a id="link" href=""><img src="../img/back.png" alt="home" class="nj-home"></a>

.... your other inputs........

</body>

You can customize the image source link to include class as well.

for me, inside the javascript ( 'cpCmndGotoSlide',0);

The 0 refers to the slide number, so basically when the user clicks on a custom image, it takes them back to the starting point. I have used this approach for other areas in my project by changing the 0 to any slide I want the user to go to and it works

flawlessly.

Cheers,

Scott

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 0