Storyline to PHP via AJAX

In the previous posts related to Storyline and PHP interactivity, we have discussed about

Storyline to PHP via FLASH

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--?php if (isset($_GET['passvalue1'])) $php_var2 = $_GET['passvalue1']; else $php_var1 = "&lt;br ?-->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;
?&gt;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
 
  <head>
    <title>Pass variable from PHP to JavaScript - Cyberster's Blog'</title>
  </head>
 
  <body>    
    <a href="#" id="link">Pass Value!</a>
    <div id="update"></div>
    <script type="text/javascript">
 
	// Get Values from Storyline - variable passvalue
 
	var player = window.parent.GetPlayer();
        var passvalue1 = player.GetVar("passvalue1");
        var passvalue2 = player.GetVar("passvalue2"); 
 
 
       // ajax start
       document.getElementById("link").onclick = function () {            
 
           var xhr;
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers 
            else xhr = new ActiveXObject("Microsoft.XMLHTTP");     // for IE
            var url = 'process14032014.php?passvalue1=' + passvalue1 + '&passvalue2=' + passvalue2;
            xhr.open('GET', url, false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState===4 && xhr.status===200) {
                    var div = document.getElementById('update');
                    div.innerHTML = xhr.responseText;
                }
            }
            xhr.send();
            return false;
        }
 
	document.getElementById("link").click();
         // ajax stop
		</script>    
 
	Data Successfully Submitted.
 
  </body>
 
</html>

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.

 

See the output in action here.
Get the source files here.

  • David Boyle

    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

  • @ludm – Do you have an example file we could see with your script working?

  • DBIS

    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

    • kawstov

      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