Captivate 9 - HTML5 Output - Linking from outside

Report · Jan 23, 2017

Hello,

I'm trying to make e-learning project and i dont have too much experience on captivate.

One of my slide i have to use scrolling text and i used there external html file as using "HTML Animation"

But i have a problem because i need to use link in that external html file (which as i called with HTML animation) to another slide in my project.

Short of my question; how can i use a link in my external html to spesific slide of my project?

I realize this may be a simple question that's already been answered by the community, but I didn't have any luck searching for the topic within the forums.

Thanks in advance for any assistance!

Report · Jan 24, 2017

Here's a solution - If anyone was a better solution please post it - so i can learn from it .

It consists of a HTML page that just contains this text: "To go to slide 2 in Captivate you must click here."

(insert it as web object or html animation on slide 1 - need to ensure that slide 1 doesn't automatically play (go to) slide 2)

I'm using slide 2 as an example here (i know they could just click the Next button).

HTML Code:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function()

{

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

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

});

</script>

</head>

<body>

<p>To go to slide 2 in Captivate you must click <a id="link" href="">here</a><p>

</body>

</html>

Report · Jan 24, 2017

Hello donalall,

Thanks for your reply, i tried it there http://fatihdemir.org/test/

But didnt work, did i miss something ?

Report · Jan 24, 2017

This error appears in the Console page Developer Console (Ctrl + Shift + I in Chrome).

"SyntaxError: missing } after function body"

There is a "}" missing in the HTML code.

Did you paste it correctly?

Report · Jan 24, 2017

Yes i copied from your message but there is in your code its missing too.

Is that true ?

<!DOCTYPE html>

<html>

<head>

$(document).ready(function()

{

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

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

});

});

</script>

</head>

<body>

<p>To go to slide 2 in Captivate you must click <a id="link" href="">here</a><p>

</body>

</html>

Report · Jan 25, 2017

The code you have above is correct.

Mine was missing the }); after the click function.

Below is an example of a HTML page with a scrolling text box.

Let me know if it works.

HTML code (insert as web object)

<!DOCTYPE html>

<html>

<head>

<style>

#scrollTextBox

{

border:1px solid blue;

width:300px;

height:150px;

overflow:scroll;

}

</style>

$(document).ready(function()

{

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

{

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

});

</script>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa ligula eget dolor ligula eget dolor ligula eget dolor.</p>

<p>To go to slide 2 in Captivate you must click <a id="link" href="">here</a>.<p>

</div>

</body>

</html>

Report · Jan 25, 2017

Yeah thats work perfectly, thank you sooo much

Captivate 9 - HTML5 Output - Linking from outside

1 Correct answer