Exporting Variables into a Google Spreadsheet

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.

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

Meant to say, the data lines of the code corresponds to what you want put into your spreadsheet so adapt as necessary.

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

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

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.

Hi Albert. In case it helps I've attached my test .story. I have tweaked code slightly to get rid of the [Object object] error I was getting but it all seems to work well. You'll find the javascript code on the last slide. Happy to share the spreadsheet too if you want to message me with your google details.

Hi Norman.

I did a test in SL1 and it all worked as it did in SL2. I also did a test to see if it all worked OK without a results slide and it also worked as it did with results slide. I also am testing on a website (no LMS). There is no message displayed in SL when the data is sent. I'm not sure what else to suggest. If I were you I would just start again at the beginning with fresh spreadsheet and SL file, but perhaps you have tried that?

Louise

Hi Norman - 

Since the script can bomb on any number of things, I'll usually run the JS console in the browser to watch for errors. This will quickly tell you if the problem is in your send function or if there's something else going on.

Another method you can use in a pinch is editing the user.js file on the server. Many FTP clients allow for direct edit and save of the file (auto-upload of changes). This would make it easy to insert an alert, something like alert("here"); to see how far through the script it goes. Wherever the alert stops working, the problem is somewhere above that.

If you don't get errors and the alert works, it may be that something is going on with your field ID's or the structure of your endpoint string. 

Do you have a link you can share here?

Hi Norman

I am glad you have managed to get it working. Louise changed the code slightly to get rid of the popup so that section should read:

success: function(data){

console.log(data);

},

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

Although, your code seems to work as well!