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!
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.
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'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?
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.
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?
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.
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.
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.
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.
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.
72 Replies
Helen,thank you very much,
i was thtinking about such solution, but i am searching solution with Javascript by defining 'x' and 'y' values, of course, if it is possible...
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.
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:
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.