Extending Storyline With Javascript and Variables
May 24, 2012
By
Peter Brown
Hi group
I've been working with several authoring tools over a few years (Flash, Toolbook ...) and love the power that the scriping languages in them give me.
I've just started having a look at Storyline and it looks like a lot of fun and quite powerful. The triggers, variables and layers give a lot of flexibility - but I want MORE!
If it was possible to pass variables into javascript for processing and then back from the javascript back into the variable it would open up a whole world of possibilities.
That's my question, really. Is this possible, and if so, are there any simple examples available?
Thanks
91 Replies
So I took out the second call to the player and, after a lot of testing, found another error--I had initialized the proofCode variable two times. Duh. Those were the only changes in the end. But it was also true that it wouldn't work at all on the local machine. I had to upload to the server to see the javascript functioning. Now it works like a charm.
Thanks again, Steve, for your suggestions!
Hi All,
We currently use an internal LMS that has been created in-house by our iT team and have a .story file of well over 800mb.
Due to the size and complexity of the .story file we are having problems working/publishing the file despite having a machine of the specification below:
Processot : i7
RAM: 16GB
OS: Windows 64 bit.
Due to these problems we are looking into spiltting our .story files into two parts.
The problem we have is that we are reporting variables to our LRS and some information needs to be passed from 'Part 1' to 'Part 2' of the program. We were under the assumption that should both parts of the program have the same 'Course ID' then then data would pass from 'Part 1' to 'Part 2'. However when testing this this has not worked.
Has anyone been able to successfully transfer data from one course to another via TIN CAN API. If so please could they assist us, any help would be much appreciated.
Should anyone need more information please let me know and I will be happy to explain further,
Many Thanks
Neil Chandarana
Hello,
i have a problem in java scripts,
Inthis step, view the list of words selected / added by learners. Alsolearner will able to sort the list of words by using “up” &“down moving” buttons or drag list.
please tell me what is solution ?
Thanks for all the tips in this thread...I've executed some javascript and I'm not even a programmer!
Many thanks to all the heroes!
Hi all, I'll be honest and admit i have very little Javascript experience and i've been through this thread andand it doesn't really mean much to me i'm afraid.
What i'd like to know is that is there any way i can use say the variable data generated on a results slide to automatically populate the fields on a google form/survey monkey inserted as a web object using javascript?
Hi I have a project with a quiz and I want to recover the result of the quiz, to create this outcome variable, but not as rescue THROUGH javascript and send to a database or Web data, please can someone help please
HI David can u please let me know how to add Pass/fail, condiotion in JS to send it to LMS
will it work??? Please Help
//hazards is the Total score in my question
var player = GetPlayer();
var lmsAPI = parent;
lmsAPI.SetScore(player.GetVar(“hazards”), 70, 0);
if(player.GetVar(“hazards”)>=60)
SetStatus = "Passed";
if(player.GetVar(“hazards”)
SetStatus = "Failed";
Hi All,
Great thread and I have nbeen using some fo the examples of Java with great success.
I am creating a Footy ledder predictor/calculator and am trying to have the ladder display once user enters points for and against.
I have everything working except the final ladder slide in which I want to have the points sorted and displayed vertically and have the corresponding team sorted via the points.
I am in no way a Java expert and have managed to peice together the below script from examples and trial and error.
Any advice is appreciated as the below script at the moment will create a document with the correct output (points listed vertically and sorted from highest to lowest) but when I use the player.SetVar("AFLPoints",AFLPoints[i] + "
"); instead of the document.write(AFLPoints[i] + "
"); I only get the one points variable and no others. Is this becuse of the text box in Storyline eg. wrapping etc.
Thanks
Andrew
Script below:
var player = GetPlayer();
var AFLBluesPoints = player.GetVar("AFLBluesPoints");
var AFLBombPoints = player.GetVar("AFLBombPoints");
var AFLCatsPoints = player.GetVar("AFLCatsPoints");
var AFLCrowsPoints = player.GetVar("AFLCrowsPoints");
var AFLDockPoints = player.GetVar("AFLDockPoints");
var AFLDogsPoints = player.GetVar("AFLDogsPoints");
var AFLEaglePoints = player.GetVar("AFLEaglePoints");
var AFLGWSPoints = player.GetVar("AFLGWSPoints");
var AFLHawksPoints = player.GetVar("AFLHawksPoints");
var AFLLionsPoints = player.GetVar("AFLLionsPoints");
var AFLMelbPoints = player.GetVar("AFLMelbPoints");
var AFLPiesPoints = player.GetVar("AFLPiesPoints");
var AFLPortPoints = player.GetVar("AFLPortPoints");
var AFLRoosPoints = player.GetVar("AFLRoosPoints");
var AFLStKPoints = player.GetVar("AFLStKPoints");
var AFLSunsPoints = player.GetVar("AFLSunsPoints");
var AFLSwanPoints = player.GetVar("AFLSwanPoints");
var AFLTigesPoints = player.GetVar("AFLTigesPoints");
var AFLPoints = [AFLBluesPoints, AFLBombPoints, AFLCatsPoints, AFLCrowsPoints, AFLDockPoints, AFLDogsPoints, AFLEaglePoints, AFLGWSPoints, AFLHawksPoints, AFLLionsPoints, AFLMelbPoints, AFLPiesPoints, AFLPortPoints, AFLRoosPoints, AFLStKPoints, AFLSunsPoints, AFLSwanPoints, AFLTigesPoints];
AFLPoints.sort(function(a, b){return b-a});
for (i=0;i
document.write(AFLPoints[i] + "
");
// player.SetVar("AFLPoints",AFLPoints[i] + "
");
Update to above post as the script did not display properly.
UPDATE: I have this working now. Thanks.
Hi all,
Ive been trying to get a simple script to work as above to open up a mail client and auto fill the To: Subject and Body: fields..
The body will be filled with some notes that the learner typed in (variables Unit1Notes and Unit2Notes). Learneremail variable is the learner's email address that they entered in the course. I also wanted to have link breaks in the email body between Unit1Notes and Unit2Notes. Ive tried some many bits of code that Ive found and launched my course in multiple browsers, but have never been able to even get my email client (Outlook 2010) to open. Im starting to think its not the code but something else... Any ideas?
Sample Code:
var email=player.GetVar("learneremail");
var subject="Course Notes for "+learneremail;
var player = GetPlayer();
var body_start=new Array();
body_start[0]=player.GetVar("Unit1Notes");
body_start[1]=player.GetVar("Unit2Notes");
body_text=encodeURIComponent(body_start[0]+"
"+body_start[1]);
var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_text;
win=window.open(mailto_link,'emailWin');
ANOTHER SAMPLE CODE:
var player=GetPlayer();
var notes1=player.GetVar("Unit1Notes");
//notes1 = notes1.replace(/\r\n?/g, '%0D%0A');
var notes2=player.GetVar("Unit2Notes");
var notes3=player.GetVar("Unit3Notes");
var email=player.GetVar("learneremail");
var subject="Course Notes for "+learneremail;
var body="Unit 1 Notes: "+notes1+"%0D%0AUnit 2 Notes: "+notes2+"%0D%0AUnit 3 Notes: "+notes3;
//NEW LINE
body = body.replace(/\r\n?/g, '%0D%0A');
var link='mailto:'+email+
'?subject='+subject+
'&body='+body;
window.open(link);
Hi John,
When you launch and test this are you testing locally or from a web host? The Flash Player has a security feature that prevents interaction between the plug-in and the browser locally by default. You can get around this by testing with a Publish to CD, uploading to a Web host, or by adding your publish folder to the Flash Player Security Manager whitelist.
hi guys I'm having a ton more success with articulate than I ever did with Captivate, I've got my own homegrown LMS setup with certificate printing and submission via ajax to a mysql database on results and interfaced it with another login system, really great!
HOWEVER, HTML5 seems to be quite a pain, javascript that works fine in standard story.html doesn't work specifically the part that pulls variables OUT of the player via javascript dont seem to work on browsers, mobile devices or anytime story_html5.html is used.
What am I missing?
var player=window.opener.GetPlayer();
//now we pull a field value. You can pull as many as you like. That replace jumble lets you bring over text fields with multiple lines.
var StudentID=player.GetVar("StudentID").replace(/(\r\n|\r|\n)/g, '
');
var CourseID=player.GetVar("CourseID").replace(/(\r\n|\r|\n)/g, '
');
var coursename=player.GetVar("CourseName").replace(/(\r\n|\r|\n)/g, '
');
var learnerName=player.GetVar("learner").replace(/(\r\n|\r|\n)/g, '
');
var score=player.GetVar("MyScore").replace(/(\r\n|\r|\n)/g, '
');
why are my variables blank in HTML5 but not standard versions?
David
Old post but still helping
Thanks @David Burton
Hi David. The player variable methods should work fine in HTML5. Try isolating to a single player.GetVar() call and alert the value. Chances are, something else is going awry.
By the way, what release of Storyline are you using? I believe the functionality of the player methods improved in newer releases. Newest is 1.5.
Steve
Would it be possible to use javascript to open a PDF contained with the Storyline file?
For example a Trigger that runs the following JavaScript when learner clicks?
window.open ("../story_content/external_files/MYFILE.pdf",
"mywindow","menubar=1,resizable=1,width=350,height=600");
I know I would need to manualy add the PDF into the xternal_files
You can do this pretty easily. And you wouldn't need to add your files manually (post-publish surgery). Check out this recording:
https://player.vimeo.com/video/149071494
I have a few things I'd change in the steps to make it easier:
1. Create a folder to contain your "carry-on".
2. Add an index.html file to this folder. The HTML file doesn't need to contain anything. Your folder can contain anything you want - 1000 pdf's if you want.
3. In Storyline, import a WebObject and target your new carry-on folder.
4. Right-click the Web Object and select Open.
5. In the address bar of the launched window, you'll see a unique ID before index.html
6. Copy the unique folder string for the folder that contains your new carry-on. You'll need this to complete the relative link chain.
7. Back in Storyline, employ the folder structure. For example: "story_content/WebObjects/5nM8Oqq62Th/yourfile.pdf" You can use this to launch with a jump to URL / file or with a hyperlink on text.
Nows that's great and it worked for me right away
So using that method and the script below you can link to included file and set the size of window it opens in !
window.open ("story_content/WebObjects/6o67wH06z7l/MYFILE.pdf",
"mywindow","menubar=1,resizable=1,width=350,height=250");
Grand
Thanks again !
I know this is from 2012, but I was hoping for a little assistance/advice around this topic. Does this apply to external stuff as well? Could JavaScript be used to tap into data from an external website/API? I'm getting a mixed feeling about the different things I am reading on this forum. Have you done anything like this before or know of others that have?
Hi Becky,
Anything you can do with JavaScript in a regular page you can execute within a Storyline page. The biggest limiting factor is the way various browsers behave and, of course, cross-domain security issues.
A couple of ways I've used JavaScript in the past:
The Storyline part is pretty simple. It will only communicate variables out and populate variables that already exist. Once you get that mechanism and have a good handle on making JavaScript dance, everything else tends to fall into place.
Hi Steve... Thank you, thank you, thank you for your reply. You have given me hope!
I have a very good handle on Storyline, now I need to find someone that can (or I need learn how to) "make JavaScript dance".
Hi,
I want to display current date and time using Java Script. Can anyone help in this regard?
Old post but i finally figured out the problem, after revisiting this project today. The code
.replace(/(\r\n|\r|\n)/g,'
in javascript does not work with HTML5
When i remove that code everything works in HTML5 javascript just as it does in standard browsers, this allows the content to work on android as well! HOWEVER, now i have all those wierd special characters like David%20Richmond in the name of the certificate in firefox and safari (IE removes them) how can i get rid of those special encoding space characters without using the .replace function of javascript.
Also my projects work well on all platforms (which is amazing to me) EXCEPT IOS. I cant use IOS because the player plays the video and never progresses to the next slide. Its like it plays the video in another player and never returns to my project any thoughts on that?
David
Hi Group,
about the possibility of using javascript in storyline, I would understand if and how you can use the function in the trigger.
I tried inserting the function at the beginning of the trigger before all the procedures, but does not work!
Do you have any examples? Don't tell me to Check out the following link?
http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg
Thanks
@Stefano: Are you testing locally (on your harddrive)? In that case, the JavaScript may be blocked by your browser`s security settings. Upload the published content to some web server or publish to CD and test again. If it still doesn`t work, you can post your file here, so that we can have a closer look.
This discussion is closed. You can start a new discussion or contact Articulate Support.