Is there a way to activate Next Button from a Javascript?

Mar 08, 2015

Hi,

Is there a way to activate Navigation Button <Prev Next> buttons using a javascript code? I'm thinking of embedding web object an HTML5 page then from there I will call a javascript to activate Next button of Articulate storyline player?

 

7 Replies
Steve Flowers

There is in a round-about way:

  1. Add a trigger to your master slide: When the timeline starts, change the state of the next button to disabled.
  2. Create a number variable called activateNext, default zero.
  3. Add another trigger to your master slide that changes the state of your next button to normal when the variable activateNext changes.
  4. Add a Javascript trigger to your master slide. Once you have this set, you can call the function nextOn() to activate your next button from JS outside the player.
var player=GetPlayer();
nextOn=function(){
var actNext=player.GetVar("activateNext");
actNext++;
player.SetVar("activateNext",actNext);
}
Leslie McKerchie

Hi Nitesh - this thread is a bit dated and I'm not sure that the users here are still subscribed. Looks like Steve shared the instructions on how to set this up. Not sure that there was a sample .story file for this example. Hopefully those instructions will be able to assist you as well or someone in the community will be able to chime in and assist. If you wish to reach out to the user directly, you may do so via the 'Contact Me' option on the user profile.

Daniel Servan

Hi Steve,

This method will only work if all triggers are within storyline.
What I want to happen is to embed a Web Object like plain HTML page and from that page, I can activate the Next Button by calling the function nextOn()

I tried embedding plain html using this html code below but next button is not activated.

I have also added a javascript code in Master Slide.

<html>
<script>
var player=GetPlayer();
nextOn=function(){
var actNext=player.GetVar("activateNext");
actNext++;
player.SetVar("activateNext",actNext);
}
</script>


<body>
<b>This is a sample html file</b><br>
<input type="button" value="Activate Next" onclick="nextOn();">

</body>
</html>

 

Any advice.

 

Thanks.

Steve Flowers

Hey, Rex - 

Reference the parent. In your HTML for the frame contents:

<html>
<script>
var player=parent.GetPlayer();
nextOn=function(){
var actNext=player.GetVar("activateNext");
actNext++;
player.SetVar("activateNext",actNext);
}
</script>


<body>
<b>This is a sample html file</b><br>
<input type="button" value="Activate Next" onclick="nextOn();">

</body>
</html>

 

Daniel Servan

Wow!!! You are Awesome Steve.

This is Perfect!!!

 

I'm almost did it because when I see GetPlayer function in story.js but I used _parent instead of parent.

function GetPlayer()
{
return document.getElementById("player");;
}

To summarize all.

I just do what Steve said in his first comment.

There is in a round-about way:

Add a trigger to your master slide: When the timeline starts, change the state of the next button to disabled.
Create a number variable called activateNext, default zero.
Add another trigger to your master slide that changes the state of your next button to normal when the variable activateNext changes.
Add a Javascript trigger to your master slide. Once you have this set, you can call the function nextOn() to activate your next button from JS outside the player.
var player=GetPlayer();
nextOn=function(){
var actNext=player.GetVar("activateNext");
actNext++;
player.SetVar("activateNext",actNext);
}

Then, embed this html as web Object

<html>
<script>
var player=parent.GetPlayer();
nextOn=function(){
var actNext=player.GetVar("activateNext");
actNext++;
player.SetVar("activateNext",actNext);
}
</script>


<body>
<b>This is a sample html file</b><br>
<input type="button" value="Activate Next" onclick="nextOn();">

</body>
</html>

 

BINGO.

 

Thanks a lot for helping.

~rex

This discussion is closed. You can start a new discussion or contact Articulate Support.