JavaScript

Jan 26, 2017

Could someone please share some JavaScript code that I can embed in my HTML to save the StoryLine 2 score to my database.  I have my course developed.  All I need now is to save the results to my database.  KIS (Keep It Simple) would be great.  QAD (Quick And Dirty) is OK as long as it works.  I can always enhance it later. 

Thanks,

Bill

5 Replies
William Rupert

Leslie,

I would like to say thank you a million times. This info was posted a long time ago, and people are still asking for this info today. It would be nice to have this added as a StoryLine tutorial. Better yet, develop an interface tool that would guide us through interfacing with our local databases. This would make this product attractive to many more users. I don't know who to make this suggestion to But I think it is a good idea. On the other hand, it might be important to keep this info hard to get and keep this product hard to use in the interest of job security for the JavaScript elite. Just being cynical. I am very thankful to you and the other contributors that have shared this info. Thanks again a million times.

Best Regards,

Bill

(William CTR Rupert)

D10 CBI Distance Learning Programmer

Leslie McKerchie

Haha! We are not wanting to keep it hard to get, it's just a hard area to assist in when you technically do not support the JavaScript coding. I know it's out of my realm of knowledge for sure. I am glad that information in the other thread was helpful to you. You raise a valid point about a tool and you are welcome to share your thoughts with our product development team here.

c h

I needed to do this last week and I was not able to get it to work based on discussion in that previous thread so I tried to do it on my own over the weekend. Here is the step by step in which I was able to post score back to my web server using javascript.

There are 3 components to this whole thing. I will try my best to make this sample as simple and as generic as I can.

  1. The main website where the user logs into (think of this as your mini LMS). Let's call this myWebsite.com. The user logs in here and navigate to the section where elearning courses are listed. The user clicks on a link that will take me to an elearning course which is hosted on another web server (see step 2)
  2. The elearning web server. This myElearning.com. From previous step, I pulled up the elearning course and I also pass in some parameters. For example: myElearning.com/COURSE001/story.html?userid=12345. You can encrypt the information in the parameter as needed. Just be sure you can to decrypt it later. userid will remain there in the URL through out the entire course. this value will be retrieved by javascript
  3. The web service where the score will get posted to. For example, this could be myWebsite.com/save_score. Here, I set it up so that it receives POST from myElearning.com in step 2. In this step, you can save whatever information passed down from the elearning course into your database.

So now in your .story file, you need to find the appropriate slide to put this javascript in. I'd put this in my result slides. 

  1. in your result slide, add a trigger and the condition so that if the user passes the quiz, it executes javascript.
  2. in your javascript section, copy and paste following code. I freehanded some of it so you may get some minor syntax error but it should be mostly correct.

var vars = {};

var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
var userid = vars['userid'];

var player = GetPlayer();
var score = player.GetVar("ScorePercent"); // replace your variable here

var href = 'https://myWebsite.com/save_score/' + userid;

var iframe = document.createElement("iframe");
iframe.name = 'my_iframe';
iframe.style="width:0; height:0; border:0; border:none";

var form = document.createElement("form");

document.body.appendChild(iframe);
document.body.appendChild(form);

form.method = "POST";
form.action = href;
form.target = "my_iframe";

var element1 = document.createElement("INPUT");
element1.name="score";
element1.value = score; // save score here
element1.type = 'hidden';

form.appendChild(element1);
form.submit();

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