How to pass Storyline 2 Variables to SharePoint 2010 for Storage

Dec 09, 2016

Kevin Brake
By Kevin Brake

I just recently finished initial testing on this feature and it is working.

I figured it would be a good code to share so please see attached.

Place code below into a webpart of a custom list.  You will need to use jquery and SPServices.

Then in the storyline file edit the button in the success layer of the results slide.  It will need to point to the SharePoint URL on your server.

<script src="jquery152.js" type="text/javascript"></script>

<script src="jquery.SPServices-2014.02.min.js" type="text/javascript"></script>

<!-- <input name="ADD" id="btnADD" value="Mark as complete" type="button"/> -->

<!-- <a id="btnADD" href="#" onclick="AddNewListItem()">Mark as complete</a> -->

<script language="javascript" type="text/javascript">

$(document).ready(function() {

 $("#btnADD").click(function () {

 AddNewListItem(grade);

 });

});

function AddNewListItem(grade){
//Created by Kevin Brake - Dec 2016
//These scripts accept one new pushed variable
//for example grade extracted from Storyline 2

alert("This is your score: " + grade);

var thelistname = "Name of your custom SharePoint List";

$().SPServices({
operation:"UpdateListItems",
async: false,
batchCmd: "New",
listName: thelistname,
//myscore is the name of the field that will store the grade
valuepairs:[["myscore",grade]],
completefunc:function(xData, Status)
{
alert("Your test results have been saved.");
//Save complete display thank you page
var openthispage = "Thankyou.html";
window.location = openthispage;
}
});

}</script>

<script type="text/javascript">

//Created by Kevin Brake - Dec 2016
//This code permits the Articulate to talk to SharePoint and call a JavaScript Function 
//if included in string: http://yoururl.com/AllItems.aspx#AddNewListItem()

//Code is placed on an Articulate Storyline JavaScript Button
 
if(window.location.hash)
//This code will execute the function appended after the # tag
//Use this code if within a firewall to avoid external hack attempts
 eval(window.location.hash.substr(1));
</script>

 

10 Replies
Kevin Brake
over 7 years ago12/19/16 at 7:53 pm (UTC)

Hi Kenji,

In SharePoint you need to:

  1. Create a custom list
  2. Edit the page
  3. Add a Web Part
  4. Select Categories - Media and Content, Content Editor
  5. Then select "Format Text" tab
  6. Click the HTML drop down arrow and select "Edit HTML Source"
  7. Copy and paste the JavaScript into the Web Part
  8. In the custom list create the columns as outlined in the attached graphic

In the JavaScript you need to:

  1. Link to jquery.SPServices-2014.02.min.js and jquery152.js
  2. Insert the name of your list

That should get you up and running.

Remember the myscore value is the only one getting passed and captured. 

So you will need to set default settings on the server such as:

When this code is executed the quiz name value will equal:  My quiz name.

All the best and be sure to let everyone know how it works out.

Kevin

Christian deTorres
almost 7 years ago04/28/17 at 10:26 pm (UTC)

Nice! I could have saved a lot of time if I'd found this before I finally solved this problem on my own about a month or two ago. Conceptually, it's easy... but getting it to work with SharePoint 2010 and IE is a pain--especially when my browser is forced into compatibility mode (IE 7 emulation).

My solution was essentially the same: jQuery + SPServices & GET variables. I simply made a small HTML page with the code, and you call it like so: https://mysharepoint/sites/example/setscore.html?score=40&quizname=Spangled&timetaken=40m

Call it from a WebObject invoked via JS, and hidden, and the user never sees it. Of course, the custom list must be set up with the right columns, and you just tweak the variable names in the embedded JS to pull the right variables and put them in the right columns.

This approach is relatively insecure, if any user goes digging too deeply. Remember, each user is writing to the list themselves via client-side script, so every potential user must have write access to the SharePoint list! Keep the list hidden and never link to it! One semi-solution is to use a workflow to repost the data to a second list that has restricted write access (and possibly even delete the record from the first list). Use that second list for reporting and leaderboards, etc.

Most of the time I spent on this project was just getting it working with IE11 compatibility mode. I had a test version working in Chrome, without jQuery & SPservices, right away... but almost nobody uses that internally.

This discussion is closed. You can start a new discussion or contact Articulate Support.