How to send data to a Web server?

There are times when you want to send score, variables, visited pages or quiz results to a Web server. You can then store the data in a database on the server. This demo shows a very simple implementation of sending and receiving data via JSON. If you’re not familiar with JSON, here’s a great overview.

How does it work?

In this demo you type a number in the field, and then click the button to send it to the server. The button has a JavaScript trigger attached that calls a JjsonavaScript function, called sendData. This function expects two things: the name of the Storyline variable you want to send (number) and the response variable (response) you want to receive the feedback for. The response variable will display the feedback we’ll get from the server.

In this simple demo, the server receives a number you type in, and in return sends back a text message: “You sent me X! I doubled it: Y”. The server doubles the original number to prove that you’re working with data back and forth.

Now what?

Okay, it’s not so exciting that you send a number and receive a stupid message from the server. But the same concept can be applied creatively for more complex situations. Let’s say you have a name and a score. You send those to the server, where they are stored in the database. You can then create a high score table. Or, you may place a call to the server when your course launches to receive some initial settings, tracking some page visits, etc.

What else would you use it for?

The JavaScript Code

/*
JSON communication with a web server.
variable = Name of the JS variable.
response = Response variable to receive information from the server.
*/
function sendData(variable,response)
{

// Get the value from Storyline.
var mydata=getVar(“”+variable+””);

// Set up JS object. You can send as many data pair as you want.
var myoptions = [ {“action”:”initiate”,”data”:””+mydata+””,”response”:””+response+””} ];

// Create the data to send via json.
var dataString = JSON.stringify(myoptions);

// Post the data to the server. “receiveData” is the name of the callback function. See below.
$.post(“http://rabbitoreg.com/demo/index.php?option=com_zsolt&view=storyline&format=raw”, { data: dataString}, receiveData, “json”);
}

//Callback function when the browser receives a response from the webserver.
function receiveData(data)
{
// data[‘response’] holds the response variable name we sent to the server. The server sent it back.
// data[‘result’] is the response text from the server. Let’s adjust the Storyline variable to display the response.
setVar(data[‘response’],data[‘result’]);
}

//Supporting functions:

/*
Get a Storyline varibale.
*/
function getVar(x)

{

var player = GetPlayer();

return player.GetVar(x);

}

/*
Set a Storyline variable;
*/
function setVar(x,v)

{

var player = GetPlayer();

return player.SetVar(x,v);

}

Server Side

The code depends on what server you’re working with. This demo is using a simple Joomla implementation on PHP. The JSON string is decoded to action, data and response variables.

2 Replies to “Storyline Communication with a Web Server”

  1. Hello it’s me, I am also visiting this website on a regular basis,
    this web site is actually pleasant and the viewers
    are genuinely sharing nice thoughts.

  2. Hayley says:

    Hi!

    I get that this was posted years ago now, so completely understand if you can’t get back to me – but this is exactly the kind of interaction that I’ve been trying to create.
    Unfortunately my knowledge of scripting is very basic and your demo isn’t working anymore – I don’t suppose you would be able to provide a link to download the .story of the demo, so I can have a poke around and try to figure it out a bit more through looking at the script within the file?

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *