Skip to main content
Inspiring
January 23, 2017
Answered

Captivate 9 - HTML5 Output - Linking from outside

  • January 23, 2017
  • 1 reply
  • 917 views

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!

This topic has been closed for replies.
Correct answer donalall

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

Is that true ?

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(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>


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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>

  #scrollTextBox

    {

    border:1px solid blue;

    width:300px;

    height:150px;

    overflow:scroll;

    }

</style>  

   

<script>

  $(document).ready(function()

  {

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

       {

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

       });

  });

</script>

</head>

<body>

  <div id="scrollTextBox">

  <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>

1 reply

Inspiring
January 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>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(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>

hurricanAuthor
Inspiring
January 24, 2017

Hello donalall,

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

But didnt work, did i miss something ?

Inspiring
January 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?