In the previous posts related to Storyline and PHP interactivity, we have discussed about
Storyline to PHP via Javascript
In the first method, dependency on FLASH coding increases. While in the second, there is a vulnerability, which leaves the process to learner manipulation. (No, I am not going to discuss that. However if you are interested to know, check the url when the javascript is executed)
We can however improve the second method, so that the values are hidden while passing it to PHP. We can do this by using AJAX. Let’s see how to do it.
We’ll do this Right to Left.
Let us assume that the variables used in SL are passvalue1 and passvalue2.
First, create a PHP that will accept the values from the HTML data and store it in CSV.
Here, I used the following code:
Name of the file: process14032014.php
var1 is not set!";
if (isset($_GET['passvalue2'])) $php_var2 = $_GET['passvalue2'];
else $php_var2 = "
var2 is not set!";
$cvsData .= $_GET['passvalue1'].",".$_GET['passvalue2'].PHP_EOL; // Format to concatenate the data in one string.
/* $cvsData .= $_GET['$php_var2'].”,”.$_GET['$php_var2'].PHP_EOL; // Format to concatenate the data in one string. */
$fp = fopen('data.csv', 'a');
if($fp)
{
fwrite($fp,$cvsData); // Write information to the file
fclose($fp); // Close the file
}
echo $cvsData;
?>
Then create an HTML page that pulls the data from Storyline and passes it to the PHP page
CREDITS: Thanks to Arpan Das for his post.
Name of the file: index.html
Pass variable from PHP to JavaScript - Cyberster's Blog'
Pass Value!
Data Successfully Submitted.
After this upload both the HTML and PHP on the server.
Finally create a storyfile that uses the two variables – passvalue1 and passvalue2.
Now insert a screen that contains the HTML as a web-object.
And lightbox this screen to the ‘on-click’ trigger of the button on the previous screen.
Finally place a file data.csv in the same location where the HTML and PHP files are saved.
Very well laid out tutorial and easy to follow
Just wondered why you needed the Web object
Why not just use the AJAX Code via javascript?
Doug
Hi Doug,
Thanks for giving a heads-up.
The only reason is that I still have to explore that area. I still have to learn more in this area 🙂
Will look for sure, and keep u posted in this regard.
Regards,
Kawstov
Thank you for your script Kawstov, it’s great.
As you have said Doug, we can use javascript without the web-object:
1 ———
Create a folder called “script”
in this folder create a file called “saveData.js”
write the following function in this file
function sendData() {
var player = GetPlayer();
var passvalue1 = player.GetVar(“passvalue1”);
var passvalue2 = player.GetVar(“passvalue2”);
// ajax start
var xhr;
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
else xhr = new ActiveXObject(“Microsoft.XMLHTTP”); // for IE
var url = ‘script/process.php?passvalue1=’ + passvalue1 + ‘&passvalue2=’ + passvalue2;
xhr.open(‘GET’, url, false);
xhr.onreadystatechange = function () {
//4: request finished and response is ready
// 200: “OK” else 404: “Page not found”
if (xhr.readyState===4 && xhr.status===200) {
// you can uncomment the following line to test if the vars are passed
// a pop-up will be displayed
//alert(xhr.responseText);
}
}
xhr.send();
// ajax stop
return false;
}
2 ——–
in StoryLine use Execute JavaScript in the button trigger
in the script window just put the call to the function :
sendData();
3 ——-
In my example I have renamed “process14032014.php” to “process.php” and have put in the folder “script” we have created previously
4 ——-
Export your Storyline project and add the script folder at the same place.
Edit story.html and add the following line before the closing tag.
this is line is to call the javascript file.
5 ——
Try and enjoy 😉
Regards,
ludm
the javascript line has been removed :
script LANGUAGE=”JavaScript1.2″ SRC=”script/saveData.js” TYPE=”text/javascript” /script
you have to add the
@ludm – Do you have an example file we could see with your script working?
In the JavaScript trigger code below, may I ask what the reason is for concatenating the two “passvalue” variables?
Should I use this method when combining a question/activity name with a response variable in the context of a quiz question to track what activity has been completed?
Does the code output the value of the variable?
Dear David,
The JavaScript concatenation acts as a value provider.
So it passes all the value concatenated to the URL where it is received and processed via PHP.
Feel free to ask if u have any queries.
Regards,
Kawstov