Passing Values from Storyline to PHP via FLASH

Iwas looking to store data from SL in external files (.txt/ .csv). Got some success via PHP calling in Storyline, both via Flash and without Flash. Here we go:

For this, we shall be using:

1.        Storyline: which will keep a Flash form to collect data

2.        A FLASH form inside the .story file: which shall collect the data and give it to PHP file

3.        PHP [no prior experience required]: This will update the collected data on the server, in form of a .txt file

Here is the workflow for the same:

 

Steps:

Step 1: Create the FLASH form in Adobe Flash or equivalent program. Let us assume, we are capturing two variables - name and email id, both of which are mandatory. On clicking the submit button, it must trigger the following code:

-----------------------------------------------------------------------------------------------

if (f1 == 1 && f2 == 1) /*Check if both name and email id are filled*/

{

var my_vars:URLVariables = new URLVariables();

my_vars.senderName = name_txt.text;

my_vars.senderEmail = mail_txt.text;

     

var my_url:URLRequest = new URLRequest("process_data.php"); /*this line calls the php file ‘process_data.php’*/

my_url.method = URLRequestMethod.POST;

my_url.data = my_vars;

     

var my_loader:URLLoader = new URLLoader();

my_loader.dataFormat = URLLoaderDataFormat.VARIABLES;

my_loader.load(my_url);

           

name_txt.text = "name";

mail_txt.text = "E-mail";

f1 = 0;

f2 = 0;

           

score=1;

ExternalInterface.call('GetPlayer().SetVar','gameScore',score);

/*Trigger the variable “score” which can be used by storyline to check if the data is submitted*/

trace(score);

}

else

{

trace("Not sent");

}

-----------------------------------------------------------------------------------------------

Step 2: Open a .story file, and insert the FLASH .swf on the first screen.

-----------------------------------------------------------------------------------------------

Step 3: Open a notepad and write the following code:

<?php

$message = "\n" . "Name: ".$_POST['senderName']. " "."E-mail : ".$_POST['senderEmail'] . "\n";

$File = "data.txt";

$Handle = fopen($File, 'a+');

fwrite($Handle, $message);

print "Data Written";

fclose($Handle);

?>

 

Save the file as “process_data.php”.

 

-----------------------------------------------------------------------------------------------

Now publish the .story file.

Step 4: Paste process_data.php in the folder where story.html is kept.

Step 5: Create a data.txt file and paste it in the folder where story.html is present.

 

And it is done! Now whenever a person fills the form and submits it. A new record is added to data.txt.

PS: What if, I want to mail the data to an email ID instead of storing it?

In the Step 3 - process_data.php, write the following code:

<?php

$to = "youremail@id.com"; /*put the recipient email id here*/

$subject = ($_POST['senderSub']);

$message = ($_POST['senderMsg']);

$message .= "\n\n---------------------------\n";

$message .= "E-mail Sent From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . " <". $_POST['senderSub']. ">\n";

$headers = "From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";

if(@mail($to, $subject, $message, $headers))

{

echo "answer=ok";

}

else

{

echo "answer=error";

}

?>

Rest all the steps are same.

64 Replies
Kawstov FLIP

Now via Javascript:

I did some tinkering on excluding  the FLASH, as well as modifying the storageformat part. Now, we shall discuss the use Javascript to call PHP and storedata in .txt file and .csv file, without the use of FLASH.

To start with, let us assume that we needto store data from a Feedback Form in Storyline.

The variables created in the Storyline are:‘name’, ‘rating’ and ‘comment’.

Step1: Create a trigger to execute a javascript when submit button is clicked

Enter the Javascript:

---------------------------------------------------------------------------

var player = GetPlayer();

var name = player.GetVar("name")

var rating = player.GetVar("rating")

var comment = player.GetVar("comment")

window.location.href = "http://yoururl.com/feedback/main.php?w1="+ name + "&w2=" + rating + "&w3=" + comment;

------------------------------------------------------------------------------------------

Explanationof the last line:

The last line redirects the current windowto the location where the PHP is kept (http://yoururl.com/feedback/)and pushes the values of name, rating and comment as w1, w2 and w3 respectivelyinto the PHP.

In case, you need to push another variable(say w4 – for email): just add + "&w4=" + email before semicolon.

------------------------------------------------------------------------------------------

Step 2: Create the PHP (main.php) at theurl given (http://yoururl.com/feedback/)

Enterthe code:

------------------------------------------------------------------------------------------

For saving data in a .txt file:

<?php

$message ="\n" .$_GET['w1']. " ".$_GET['w2'] . "".$_GET['w3']. "\n";

$File ="data.txt";

$Handle =fopen($File, 'a+');

fwrite($Handle,$message);

print"Data Written";

fclose($Handle);

?>

Also create data.txt file and save it atthe location of main.php.

------------------------------------------------------------------------------------------

For saving data in a .csv file:

<?php

$cvsData .=$_GET['w1'].",".$_GET['w2'].",".$_GET['w3'].",".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); // Closethe file

}

?>

Also create data.csv file and save it atthe location of main.php.

------------------------------------------------------------------------------------------

Nowpublish the .story file and upload it. This time*, there is no need to keep thedata file (.txt/.csv) in the same folder where story.html is kept.

You canfind the source files here.

Benjamin Caulder

I could really use some help on this one. I have everything in place, but I have no idea how to create the http://yoururl.com/feedback/main.php on my server. I don't have a feedback page there.

I am totally NOT a web developer, so baby steps please. Like which folder on server? (the same folder as my home page?) How do I create the main.php file at the URL?

I have dreamweaver.

Thanks

Ben

Benjamin Caulder

I think I figured it out. I created a folder name feedback on my server and uploaded the php and csv files there. Is that correct?

If yes, what does the output look like. I am not getting anything yet.

Benjamin Caulder said:

I could really use some help on this one. I have everything in place, but I have no idea how to create the http://yoururl.com/feedback/main.php on my server. I don't have a feedback page there.

I am totally NOT a web developer, so baby steps please. Like which folder on server? (the same folder as my home page?) How do I create the main.php file at the URL?

I have dreamweaver.

Thanks

Ben

Benjamin Caulder

I had an error in the javascript. I see the output now. I am not getting the data from the fields though. I assume that the data.csv is being altered by the fields. I am downloading the data.csv from my server, but it is not altered. How do I get the data from the feedback?

Benjamin Caulder said:

I think I figured it out. I created a folder name feedback on my server and uploaded the php and csv files there. Is that correct?

If yes, what does the output look like. I am not getting anything yet.

Benjamin Caulder said:

I could really use some help on this one. I have everything in place, but I have no idea how to create the http://yoururl.com/feedback/main.php on my server. I don't have a feedback page there.

I am totally NOT a web developer, so baby steps please. Like which folder on server? (the same folder as my home page?) How do I create the main.php file at the URL?

I have dreamweaver.

Thanks

Ben


Jason Livesay

Hello Ben!

So Eric messaged me tonight about your site/problem and I have been working through it for the paste hour/hour and a half.  First thing I had to figure out was what this Articulate thing is and what you were trying to do.  I think that basically you just want to somehow save data from the Story on your server?  So that Microsoft/IE code that Articulate is giving out for saving to a text file won't work on most browsers and most setups, so forget that.  But this POSTing PHP approach should work and is what I was telling Eric.

So this is kind of hard for me to work on since I don't have access to your server or to Articulate, but I made some progress.  To simply things, I am POSTing data to your contact form (contact me on your home page).  Its a bit more complicated to set up a custom PHP page and I am not sure you need to.

Here is the code that I have: 

window.Script1 = function() {

  var xmlhttp;

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

      xmlhttp=new XMLHttpRequest();

  } else {// code for IE6, IE5

      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      try {

        alert("Saved info.");

      } catch (e) {

      }    

    }

  }

  xmlhttp.open("POST","http://www.benjamincaulder.com/wp-content/themes/refinery/inc/contact-form.php",true);

  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  var player = GetPlayer()

  var name = player.GetVar("name");

  var email = player.GetVar("email");

  var school = player.GetVar("school");

  var grade = player.GetVar("grade");

  var msg = "School: " + school + " Grade: " + grade;

  var dat = "name="+name+"&email="+encodeURIComponent(email)+"&message="+encodeURIComponent(msg);

  alert("Saving: " + dat);

  xmlhttp.send(dat);

}

That appears to be working, for the most part, on my computer.  At least as far as interacting with articulate to some degree and POSTing the data to the contact form.  I am getting a 200 status code in my network monitor from sending the data to the contact form php file.

The problem I have at the moment, and I don't know if this is actually a problem or not, because I am sort of hacking that code into your page using the Google Chrome developer tools, so that may explain this issue.  When I do that, I am getting empty strings "" from the player.GetVar("name") or whatever.  But when I do player.getVar("foonotarealname") I get null, so it seems like I am accessing something, it just doesn't seem to be tied to the text fields.  I am hoping that it will actually work fine if you actually use my new script on your server, or if not, maybe the problem is actually something you can fix inside of the Articulate editor by setting text field properties.

If you still get blank values returned from GetVar("name") etc after inserting the text and messing with the editor to make sure the text fields are set up correct, then post another question on here specifically about that, or maybe someone in this thread will know.

If at some point you want to work with a custom PHP page for saving to a text file or something other than using a contact form/data plugin, you can follow these steps to create it: http://stackoverflow.com/questions/2810124/how-to-add-a-php-page-to-wordpress

Kawstov FLIP

Kennethg Goeieman said:

Hi all,

is it possible to push info from MySQL to Storyline using Javascript and PHP. I managed to store info from storyline but to push information is a hussle....any hints...

Regards

Kenneth

Hi Kenneth, 

Sorry for the delayed response. There are some serious issues with the subscription to replies. To answer your query, yes it is possible. If you would have asked a month earlier, it was a no go, But just got some break-thru.

You can pull the data from MYSQL via PHP and push it in an HTML page using Javascript. This page will also contain the "SETVAR", that will push it into Storyline. When you insert the webpage as webobject, the player can recieve the values via HTML page.

Regards,

Kawstov

Kawstov FLIP

Benjamin Caulder said:

I had an error in the javascript. I see the output now. I am not getting the data from the fields though. I assume that the data.csv is being altered by the fields. I am downloading the data.csv from my server, but it is not altered. How do I get the data from the feedback?

Benjamin Caulder said:

I think I figured it out. I created a folder name feedback on my server and uploaded the php and csv files there. Is that correct?

If yes, what does the output look like. I am not getting anything yet.

Benjamin Caulder said:

I could really use some help on this one. I have everything in place, but I have no idea how to create the http://yoururl.com/feedback/main.php on my server. I don't have a feedback page there.

I am totally NOT a web developer, so baby steps please. Like which folder on server? (the same folder as my home page?) How do I create the main.php file at the URL?

I have dreamweaver.

Thanks

Ben




Dear Ben,

Really sorry for not being there when u needed. If data is not getting stored in the csv file, it may be possible that it is in READ ONLY mode. Also can u share me the source files (in case you have changed anything other than url), so that I may see where the problem is?

Regards,

Kawstov

Kawstov FLIP

Inthe previous posts related to Storyline and PHP interactivity, we havediscussed about

1.   Storyline to PHP via FLASH

2.   Storyline to PHP via Javascript

Inthe 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. Howeverif you are interested to know, check the url when the javascript is executed)

Wecan however improve the second method, so that the values are hidden whilepassing it to PHP. We can do this by using AJAX. Let’s see how to do it.

 

 

We’ll do this Right to Left.

Letus 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:

-------------------------------------------------------------------------------------------------------------------------------------------

<?php

      

       if (isset($_GET['passvalue1'])) $php_var2= $_GET['passvalue1'];

    else $php_var1 = "<br />var1 isnot set!";

                   

       if (isset($_GET['passvalue2'])) $php_var2= $_GET['passvalue2'];

    else $php_var2 = "<br />var2 isnot set!";

       $cvsData .=$_GET['passvalue1'].",".$_GET['passvalue2'].PHP_EOL; // Format toconcatenate the data in one string.

      

$fp = fopen('data.csv', 'a');

       if($fp)

       {

       fwrite($fp,$cvsData); // Writeinformation to the file

       fclose($fp); // Close the file

       }

       echo $cvsData;

?>

-------------------------------------------------------------------------------------------------------------------------------------------

Thencreate an HTML page that pulls the data from Storyline and passes it to the PHPpage

-------------------------------------------------------------------------------------------------------------------------------------------

<html>

  <head>

    <title></title>

  </head>

  <body>   

    <a href="#"id="link">Pass Value!</a>

    <divid="update"></div>

    <scripttype="text/javascript">

      

       // Get Values from Storyline - variablepassvalue

       var player = window.parent.GetPlayer();

       var passvalue1 =player.GetVar("passvalue1");

       var passvalue2 =player.GetVar("passvalue2");

             

   <!-- var passvalue1 = "Test1";-->

   <!-- var passvalue2 = "Test2"; -->

             

       document.getElementById("link").onclick = function () {           

            // ajax start

            var xhr;

            if (window.XMLHttpRequest) xhr =new XMLHttpRequest(); // all browsers

            else xhr = newActiveXObject("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();

            // ajax stop

            return false;

        }

              document.getElementById("link").click();

              </script>   

              Data Successfully Submitted.

  </body>

</html>

-------------------------------------------------------------------------------------------------------------------------------

Afterthis upload both the HTML and PHP on the server.

Create a storyfile that uses the two variables – passvalue1 andpassvalue2.


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

Finallyplace a file data.csv in the same location where the HTML and PHP files are saved.

 

See it in action here

 

Source files are here

Russ Sawchuk

Hi Kawstov,

Thanks for the examples. I was able to get the javascript to PHP scripts work for both text and sending to a MySQL database table. Now I can track all of my SL game results in the same table as I do my HTML5 games.

A couple of problems that I ran into that others who want to use these scripts should be aware of:

1. The data was being send successfully with IE 11 and Firefox; but not with Chrome and Safari. After extensive testing I discovered that the problem happens when you open a new window (_blank). Opening the course or game in the SAME window seems to work for all 4 of the major current browsers.

2. However, opening in the same window results in issues when you Exit the game. With IE, you simply close the browser; with the other 3 you end up with a blank page showing the url with variables in the address bar. The solution is to add a php redirect statement at the end of your text writing or database sending scripts, e.g.,

          header('Location: http://www.domainname.com/page.html');

Here is a script I developed and implemented to keep track of the number of visitors who viewed each of our eCourse modules.

     <?php

      $message ="\n" .$_GET['w1']. " ".$_GET['w2']. " ".$date = date('Y-m-d H:i:s'). "\n";
     $File ="data.txt";
      $Handle =fopen($File, 'a+');
      fwrite($Handle,$message);
      header('Location: http://www.mydomain.org');
      fclose($Handle);

      ?>

This script writes to a text file the Module name, the number of slides viewed and a date:time stamp. Note that once it is finished writing, the viewer is sent back to our website. This file will give me information on numbers of people viewing the module, how much of it they viewed (# of slides), and the day and time of viewing.

It took some time and effort to get it working on my server setup. I hope this helps you take advantage of this powerful functionality.

Russ

Benjamin Caulder

Kawstov FLIP said:

Benjamin Caulder said:

I had an error in the javascript. I see the output now. I am not getting the data from the fields though. I assume that the data.csv is being altered by the fields. I am downloading the data.csv from my server, but it is not altered. How do I get the data from the feedback?

Benjamin Caulder said:

I think I figured it out. I created a folder name feedback on my server and uploaded the php and csv files there. Is that correct?

If yes, what does the output look like. I am not getting anything yet.

Benjamin Caulder said:

I could really use some help on this one. I have everything in place, but I have no idea how to create the http://yoururl.com/feedback/main.php on my server. I don't have a feedback page there.

I am totally NOT a web developer, so baby steps please. Like which folder on server? (the same folder as my home page?) How do I create the main.php file at the URL?

I have dreamweaver.

Thanks

Ben




Dear Ben,

Really sorry for not being there when u needed. If data is not getting stored in the csv file, it may be possible that it is in READ ONLY mode. Also can u share me the source files (in case you have changed anything other than url), so that I may see where the problem is?

Regards,

Kawstov


Thanks for the reply. I am looking through what you have posted since and trying to figure it all out. I willpost with more soon.

Ben

Benjamin Caulder

and the .story since I could only do 1 at a time.

BTW - I downloaded your source files and they work just fine (of course). I used them as the base for mine, but nothing.

When I alter the javascript to open the php on my server, it works (for your source file), but when I do the same thing for with my variables, It doesn't forward. 

Any help is appreciated.

Ben

Kawstov FLIP

Benjamin Caulder said:

One last question: I have a quiz with a variable result I want to pass along to the data.csv file. It does not want to pass along, though all the other variable do (from text entries). Anyone know why?

Ben


Hi Ben,

If I refer to your example storyfile you are asking to pass it like - " Results.ScorePercent = player.GetVar("Results.ScorePercent")". Right?

Javascript may not pass inbuilt Storyline variables. Try storing the score in some another custom variable when a correct attempt is made, and then pass it via Javascript.

Regards,

Kawstov

Kawstov FLIP

Russ Sawchuk said:

Hi Kawstov,

Thanks for the examples. I was able to get the javascript to PHP scripts work for both text and sending to a MySQL database table. Now I can track all of my SL game results in the same table as I do my HTML5 games.

A couple of problems that I ran into that others who want to use these scripts should be aware of:

1. The data was being send successfully with IE 11 and Firefox; but not with Chrome and Safari. After extensive testing I discovered that the problem happens when you open a new window (_blank). Opening the course or game in the SAME window seems to work for all 4 of the major current browsers.

2. However, opening in the same window results in issues when you Exit the game. With IE, you simply close the browser; with the other 3 you end up with a blank page showing the url with variables in the address bar. The solution is to add a php redirect statement at the end of your text writing or database sending scripts, e.g.,

          header('Location: http://www.domainname.com/page.html');

Here is a script I developed and implemented to keep track of the number of visitors who viewed each of our eCourse modules.

    

      $message ="\n" .$_GET['w1']. " ".$_GET['w2']. " ".$date = date('Y-m-d H:i:s'). "\n";
     $File ="data.txt";
      $Handle =fopen($File, 'a+');
      fwrite($Handle,$message);
      header('Location: http://www.mydomain.org');
      fclose($Handle);

      ?>

This script writes to a text file the Module name, the number of slides viewed and a date:time stamp. Note that once it is finished writing, the viewer is sent back to our website. This file will give me information on numbers of people viewing the module, how much of it they viewed (# of slides), and the day and time of viewing.

It took some time and effort to get it working on my server setup. I hope this helps you take advantage of this powerful functionality.

Russ


Nice observation Russ,

Yes there is a problem as you rightly said.

However, if we open the HTML in same window, and can use Javascript to come back to storyline, most of the problem is solved. Currently tested it successfully, but short of time to document it.

Will post it asap.

Regards,

Kawstov

Benjamin Caulder

Kawstov FLIP said:

Benjamin Caulder said:

One last question: I have a quiz with a variable result I want to pass along to the data.csv file. It does not want to pass along, though all the other variable do (from text entries). Anyone know why?

Ben


Hi Ben,

If I refer to your example storyfile you are asking to pass it like - " Results.ScorePercent = player.GetVar("Results.ScorePercent")". Right?

Javascript may not pass inbuilt Storyline variables. Try storing the score in some another custom variable when a correct attempt is made, and then pass it via Javascript.

Regards,

Kawstov


I have been looking up how to do this, but I am not figuring this out. Does anyone have an idea?

ben