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

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.

Michael, very nice and comprehensive guide!

As for tabletop.js, it's a great and easy library as long as you're aware of some of the potential issues. See more here: https://gist.github.com/jsvine/3295633

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:)

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.

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);

I am very grateful to all! I will try everything and I will report the
results.

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?

Matt, this is a long thread now :) Which source files? The examples of JS http://bit.ly/1IjNEKs or the sending data to the server http://bit.ly/1girNbj ?

Can anyone post some of their projects where they've implemented JavaScript so we can see these awesome techniques in action?

Thank you! @Matt, the JS side of the code is actually on the page, http://bit.ly/1girNbj. The server side depends on the type of language you use on your server. In our case, it was PHP.

@Matt (Lee), here's a demo with downloadable source files. http://bit.ly/1IjNEKs. Let me know if that helps.

Thanks Zsolt for the quick response!

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.

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?

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.

I have been trying to use the print window code and I keep getting a blank screen. 

Which browser are you using?

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. 

Kristin or anyone else: care to give a quick demo on how to create the autoscroll behavior from Broken Coworker example? I've been thinking about doing something similar in one of the scenarios I'm creating.

Howdy Daniel!

I detail my process in this blog post: http://www.knanthony.com/blog/a-medical-demo-and-a-bit-of-coding-too/

At the time, I used this jQuery plugin: https://github.com/flesler/jquery.scrollTo

And the actual code to execute was put on a button:

$.scrollTo({top:'someNumpx', left:'someNumpx'}, speedInMilliseconds);

Thanks, Kristin. Much appreciated!

Hi everyone, 

I have used Javascript code to create a stopwatch that appears in the top left corner of the player. On the last slide of the course, I want to reference the time that appears on the stop watch to show the user how long they took. Is this possible? I can't work it out. 

Code that I used is attached.