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 JavaScript 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.