Articulate Storyline 2 provides the flexibility to customize interactivity to the max with minimal efforts. This web based authoring tool gives feasibility to add JavaScript which can be of great help to take your eLearning courses to the next level. It’s fairly easy to extend and enhance the functionality of the built-in features in Storyline that come by default.
We came across a challenge in one of our courses developed for a Registered Training Organization (RTO). The course content was presently in simple form without voice-over. The audience were between the age group of 20-30 years and to keep the content attractive client wanted to add a background music.
If we embed the music in individual screens then upon every next click, the music starts from beginning. Even the audio in Master slide didn’t solve the issue.
We have overcome this limitation and customized it with the help of JavaScript. After following the below instructions you can play single audio file throughout the course.
Here are the steps to be followed:
1. Created a file called index.html in text editor (Notepad) and add the code <audio src=”___”></audio>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Music</title>
</head>
<body>
<audio src=”Feel_Good.mp3″></audio>
<audio src=”My_Presentation.mp3″></audio>
<script>
var audio = null;
parent.window.playAudio = function (name) {
audio = new Audio(name);
audio.play();
}
parent.window.stopAudio = function(){
if(audio != null){
audio.pause();
}
}
</script>
</body>
2. Place the audio files in the same folder.
3. Open Articulate Storyline 2. Click on “INSERT” tab and select “Web Object”. Browse the folder location and click “Ok”.
4. Create a new trigger. You will see a “Trigger Wizard” pop-up appearing. Click on “Action” dropdown icon and select “Execute JavaScript”.
5. From “Script” just below “Action”, write the JavaScript in the given whitespace and click “Ok”. In “When” field select “Timeline starts”.
var cl = $(‘iframe.item.webobject:eq(0)’).clone();
$(cl[0]).css({
‘postion’:’absloute’,
‘z-index’:0
})
$(‘body’).append(cl[0]);
$(‘.framewrap’).css({
‘postion’:’relative’,
‘z-index’:1
});
6. Create new trigger and set action, jump to next slide when timeline starts.
7. Now select the “SLIDE MASTER” and insert buttons.
8. Select button and create a new trigger. In “Script” field write the code and click “Ok”. In “When” field, select “Timeline starts”. You can do the same for second button.
Button 1
stopAudio();
playAudio(‘Feel_Good.mp3’);
Button 2
stopAudio();
playAudio(‘ My_Presentation.mp3’);
Note:
1)This does not work in preview mode
2)This does not work in offline mode for chrome
3)This functionality works only when you host the course on a server
