Exporting Variables into a Google Spreadsheet

Thanks Kate for sharing your steps here - I know it's a common question so it's always great to be able to point users to another example. :-)

Hi Kate..this is so awesome. Once it is in place, though, how will it be used? What are you doing with the Google Sheet containing these data?

Hi Bonnie, in my course I ask my learners to rate their understanding against 4 statements before and after the course. The ratings are variables that get exported to a google spreadsheet so I can analyse the data and how learners feel they have developed over the course. Hope that makes sense!

Perfect! This is the first valid alternative I've seen to Articulate Online for actually collecting valuable analytics. Well done!

Bonnie

Thanks! I was very pleased when I got it to work because it is going to be very useful. 

Heya Kate - 

I've used the method you show here as well and it works pretty well to setup a Google Spreadsheet as an endpoint. This method is handy for capturing inline survey results, to grab choices for choice analysis, and for double capturing completions if your LMS happens to be temperamental.  One of the cool things about the Google Spreadsheet is the notification / subscription feature. Subscribing to updates on a per-addition or digest basis is great for infrequent submissions. It's also handy to use formulas and linked sheets to create public dashboards. The original data can be locked away while the linked data (filtered and sanitized) can be exposed in a published location.

Here's an alternate method that uses a Google Form as the intermediary to submit the fields from Storyline. A little less setup using a form to process the submissions and I've had fewer issues with permissions (if your Google Apps instance is corporate or government, using GAPPS script is potentially problematic).

Add this to a trigger when the slide loads. This will write the JQuery library to your header so you won't need to do any post-publish surgery. This will load Jquery for both the HTML and HTML5 versions. This can also be used for other libraries. I've successfully used this method to load up the soundmanager.js library for persistent background music.

function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);}

//only want to add these once!

if(document.getElementById('jquery')==null){
add_script("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js","jquery");
}

After you've built your form and viewed the live form, inspect the form elements or explore the source to find the field references for your form. These will be something like entry.156531987. Write these down or copy them into another reference document. While you're at it, grab the form ID from the URL.

var player=GetPlayer();
var vRate=player.GetVar("slider1");
var vSuggestion=player.GetVar("TextEntry");

var fTarget="https://docs.google.com/a/nara.gov/forms/d/YOURFORMID/formResponse";

function submit_form(){$.ajax({
url: fTarget,
type: "POST",
data: {"entry.156531987" :vRate,"entry.1547132205":vSuggestion},
success: function(data) {
//won't return anything since it's cross domain
}
});

return false;

}

setTimeout(submit_form(), 2000);

Edit: Left off a little bit. I delay the submission of data for a couple of seconds for some reason. Must have fixed an issue in testing. Probably will work find without the delay.

Thanks Steve!

Bonnie

Thanks for that - I get asked for this all the time. Kate I loved your step by step instructions. Steve I loved your idea of using a javascript trigger instead of having to put something in the published folder and being able to put variables into a google form would be awesome - but I think I would need a few more step by step instructions to be able to make it work.  Do you think you could explain how to do it, for say, the variable scorepercent and a variable for name?  I do get asked for this all the time.

Thanks, Kate, for sharing this solution. If anyone wants to see an example in action, I've posted it here: 

http://erichrenken.com/SaveResultsToGoogleSpreadsheet/story.html

Thank's Steve - I will try your javascript to automatically add the jquery line into my files.

Great example, thanks Erich!

Jacinta - you need to set up a spreadsheet where the columns are 'scorepercent' and 'name', follw the instructions above to add code to the google spreadsheet, then in the javascript you add to the articulate trigger you would put (just make sure the column titles and the variables are spelt exactly the same and in the same case):

var player = GetPlayer();

$.ajax({

url:
"Current web app URL",

type: "POST",

data: {"name": player.GetVar("name")
, "scorepercent": player.GetVar("scorepercent")},

success: function(data)

{

alert(data);

},

error: function(err) {
console.log(err);
}

});

return false;

Hope that helps!

Thanks so much Kate, will try it over the holidays. If I can get it to work,
I'll have a great new tracking option for all the small businesses who can't
afford LMS systems. My country is over 90% small businesses so that's a big
market.

Jacinta Penn

Workbright eLearning

Has anyone done this with Chrome lately? The method works beautifully in Firefox, but if you try it in Chrome, it blocks the javascript elements loading on the page by default (you'll get an alert in the browser bar, with the option to load the scripts. Without doing this, none of the scripts will run).

Any way to get around this? It'd be nice and easy if we could limit everyone to one browser, but that won't happen.

Steve,

This is wonderful code. I've used this technique and it works for one of my columns of data.  I'm sure I'll figure it why the other columns are not saved eventually.  

My main questions though is "How do I load the variables I've saved to the Google Spreadsheet back into Storyline?"  I want to do this in order to save the progress of videos that a user has viewed in Storyline.  There are three videos and I'd like to record which ones they have watched.  I mark these with a checkmark in the story.  Your routine allows me to do this.

If the user leaves before watching all three videos, the variables in the Google spreadsheet will track that.  When they return to the story, I'd like them to know which videos they have watched and which ones they haven't, again, by checking (using states) those that they've watched.  The data from the Google spreadsheet, once loaded, will provide this capability.

Of course, I'm a script kiddie with little knowledge of JavaScript.  Any help you can provide will be most appreciated!  Thanks again for your contributions!!!

Hi, Paul. I've played around with that a bit and had success using the Google "Query Language"

https://developers.google.com/chart/interactive/docs/querylanguage#Setting_the_Query_from_JavaScript

What makes this tricky is that you'll need a unique way of identifying the person taking the course, assuming that there will be multiple rows in your spreadsheet. Otherwise, you might pull back a different person's data.

In this way, Google Sheets start functioning like a database in which you can set/get/edit/delete values.

Erich,

Thanks for this! Good material for my subway rides. My son, a mobile
developer, is also very excited to see how this works.

Thanks so much Kate. This is so good and worked first time!

Glad that this is still assisting people Louise :)

Glad it was useful to you Louise :)

Thanks to everyone who has helped make this a reality, love this community!

Please help, I have attempted Steve's approach but I can't get the variables to go to google. Does the google form need to have a specific security setting (like share with everyone)? I am using chrome with the  deployed on a web server.

Any help would be tremendously appreciated!   

Hi Yoni,

I'm not familiar with the specifics of Steve's solution, but I suspect the doc will need to allow sharing and edits by anyone with the link - as that's how it'll be communicated from Storyline.

Steve is still a regular contributor here in the forums so hopefully he'll pop back in and share some additional information here. 

The Google Form itself should be shared with everyone.

However, there are a few things that can stop up the works. Watching the Javascript console is helpful in tracking down where things might be wrong. Here are a list of potential gotchas:

• The JQuery dependency isn't loaded before the ajax call. This means on the same slide on the base layer with your ajax call in another layer or in another slide that's sure to be hit. Loading everything at once, it'll likely fail as there's quite a bit that happens to force the load. 
• There's another script error somewhere. Invalid script, a missing variable, an LMS call tested outside of an LMS. Lots of stuff can put a stop to script execution before you reach the ajax call.
• Using the wrong form address. In my example above, the link provided was for my organization. It includes the org address. If you use this same string, it'll fail unless your part of my org:)
  fTarget="https://docs.google.com/a/nara.gov/forms/d/YOURFORMID/formResponse";

Thanks Steve - I knew you were out there somewhere. ;-) 

Thanks to everyone for input on this subject. I have the export to the google spreadsheet all working nicely however after it is written out I get a message back from the stating [object Object] - has anyone else come across this?

Ashley & Steve -  Thank you both. I was having issues with the permissions on the spreadsheet.