Javascript: Have you used it with Storyline & what for?

Hey peeps, 

We're going to have a short session about using Javascript with Storyline at our Toronto event this week (community member Kristian Chartier will be delivering it!).

In that vein, I was hoping some community members might share insights into if and how they have extended Storyline's use with Javascript in the past. Just looking for a list of potential reasons one would use JS! Thanks for sharing!

Nicole

77 Replies
Michael Burns

Didn't see this here yet, so thought I'd add it - attached is my "guide" for sending and receiving info to/from Storyline. I've been using the "post" action for a while, but just recently started fetching data using tabletop.js. It's a great library, and the sky is the limit.

In our team we've already used JS to get user data (i.e., which options they select, how much time spent on a particular section, real time feedback), and now we're going to use the tabletop script to use Storyline-native leaderboards and other data. Really exciting!

If you're interested in this, or having any issues with your .story file, please let me know and I'd be happy to jump in - I got a lot of help along the way here as a newbie to JS.

Steve Flowers

I've been using tabletop.js and justgage for a neat dashboard effect. Have had good luck so far with the Google retrieval. Pretty consistent. But, yeah. It's a potential problem 5 to 10 years out. 

I've been considering a switch over to xAPI and LRS for more flexibility, better security scoping, and more. That's not without problems but it's not that much more complicated than the Google Spreadsheet option if you have access to an LRS:)

Michael Burns

Thank you Zsolt! And excellent point - I love Google Sheets, and use so many features, so I'll have to come up with a "real" programming solution should they ever change their SpreadsheetApp scripts or API.

There's also the worry of "overloading" the calls, which I (thankfully) haven't run into yet. Specifically because of that I try to limit the amount of times I have the user post to a sheet.

Steve Flowers

Nice set of instructions:) I used to use the Martin Hawkseye's script-based Post method. Switched almost exclusively over to using a Google Form as the catcher. A little less setup and relatively simple.

  • Create the form
  • Set the destination
  • View the form.
  • Inspect the form fields and grab the entry.xxxx ID's.
  • Construct the URL in a trigger
  • Setup a simple xhr (this is not 100% cross browser especially for older browsers - but for my application, I simply don't care about older IE versions) to send a GET request. Since we can't get a return on the request anyway, this does the trick for my purposes.
var team = player.GetVar("team");
var category = player.GetVar("category");
var score = player.GetVar("resultsScoreChange");
var question=player.GetVar("questionNumber");
var choice=player.GetVar("choice");
var goURL="https://docs.google.com/forms/d/FORMID/formResponse?entry.xxx="+team+"&entry.xxx=results&entry.xxx="+score+"&entry.xxx="+question+"&entry.xxx="+choice;
var xhReq = new XMLHttpRequest();
xhReq.open("GET", goURL, false);
xhReq.send(null);
John Wagner

I've just had my first experience using JavaScript in one of my courses. I got the JS snippet on one of Hero boards to insert the current date in a certificate of completion that the student can print out after successfully completing the course. It's really cool the way it works.

I would really like to know how to make a web object (a jotform course evaluation) a required part of the course. Right now students can just pass the form without completing it. Can JavaScript do that?

Matthew Bibby

You can use JavaScript to check if the course is being run from a particular domain.

First, set up  a T/F variable in Storyline called Domain and make it False by default.

Then when the below code runs it will change the variable to True if the course is running from yourdomain.com

var DomainName = false;

if(location.hostname == "yourdomain.com"){
DomainName = true;
}

var player = GetPlayer();

player.SetVar("Domain",DomainName);
Toby Poulsom

Hi Zsolt - I use Joomla and would be interested in seeing how I can store variables in a MySQL table on the server.  I can see the script you've included here but would be interested to know what the php file on your server looks like. As suggested can you provide the source files.

Can this method be used simultaneously with other methodslike storing on a google spreadsheet?

Thanks.

Zsolt Olah

Hi, Toby! 

We actually created a joomla component to receive the Json data. 

$.post(“http://rabbitoreg.com/demo/index.php?option=com_zsolt&view=storyline&format=raw”, { data: dataString}, receiveData, “json”);
}

This is the prototype, calling the view "storyline" straight with format=raw. (If you want to build a real component you would have model, view and controller but to make it work as a prototype, I called the view directly.) 

The format=raw makes you that nothing is loading from the Joomla template. This storyline view will not display anything, just reads the json data, processes it, saves it to the database and sends back a message to the calling javascript.

In the component:

You need to create a view.raw.php within the storyline view.

<?php
/**
* @package Joomla.Tutorials
* @subpackage Components
* @link http://docs.joomla.org/Developing_a_Model-View-Controller_Component_-_Part_1
* @license GNU/GPL
*/

// no direct access

defined( '_JEXEC' ) or die( 'Restricted access' );

jimport( 'joomla.application.component.view');

class ZsoltViewStoryline extends JViewLegacy
{
function display($tpl = null)
{

parent::display($tpl);
}
}

Then in the tmpl folder within this view, you have a default.php (this is just partial to give you an idea what looks like):

<?php defined('_JEXEC') or die('Restricted access');
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Pragma: no-cache");
header("Vary: Accept-Encoding");


$live_site = JURI::base();
$data = '';
$res= array();

// Here's the data we're receiving from the javascript
$res = json_decode(JRequest::getVar('data'), true);

// I always use an action, so I can process what needs to be done

$action = $res[0]['action'];

// Here's the actual data

$mydata=$res[0]['data'];

[...this is where you can save the data to the database...]

// Finally, you can send back any message to the javascript in json

echo json_encode(array("result"=>$result,"response"=>$response));

I assume you're familiar with Joomla components and mySQL, so once you have the data in the $mydata variable, you can slice and dice and save as you wish.

 The headers are there to make sure we're not using cache. 

Does this make sense?

Toby Poulsom

Hi Zsolt

I don't really code anything, I do a little tweaking, so it's a bit beyond my capability. I had hoped I'd be able to use a php file to process the data, a bit like in this tutorial: http://www.kodingmadesimple.com/2014/12/how-to-insert-json-data-into-mysql-php.html 

But I wasn't sure how secure that would be.  Basically I need to capture all of the variables from a survey and store them so I can process offline. But then I'll use Joomla to communicate with respondents.

The Storyline to Google Spreadsheet looked promising, then from comments it looked not so stable.

Then the Storyloine to Googlesheet via Google Form seemed to remove some of the hassle.

But then I saw your mention of Storyline to Joomla table and that seemed likely most stable of all. Plus I can share the data with my members data once it's there.

My brother in law is a coder and I suggested he gets into developing components, maybe I'll ask him to take a look.

Thanks for the pointers.

 

 

Helena Smith

I am using Chrome and the code is

 

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var dateString=month + "/" + day + "/" + year
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

 

 

Even though I keep adding the print() code, once its published it doesn't show.