Wanting to write variables to an html page (using javascript?)

Nov 28, 2012

I know next to nothing about javascript, but I'd like to have storyline open a separate html window and write some variables generated by user responses in storyline onto the the html page.

Context: I have a course where the learner types some very lengthy text reponses. We'd like to have those reponses then displayed on a separate html page for printing/saving.

Any ideas? Thanks!

21 Replies
El Burgaluva

@Kevin & Maurice... 

Yesterday, I posted here looking for the same thing. Steve Flowers has said he might be able to do a Screenr with more details.

Fingers crossed!

Sam Clark offered an elegant-looking solution for a modest fee, but it's probably too complicated for my Accounts Dept. to make such a transaction. Although, maybe not. Perhaps I could pay for it directly and they could reimburse me. I'll go down that track if I can't find a solution by the end of next week. 

Hope we can sort this out. I've seen numerous requests for this or something similar.

@Articulate Dev Team...

We really need to be able to customise the results of each Results Slide. For example, I don't always want the correct answers to be displayed -- which learners can simply share around.

Or (as is the case -- and like Kevin and Maurice and others) I might have an essay response non-graded survey question, which I want learners to print out for their records and for assessment purposes.

Or I might not want to show the learners' choices; just the question number, correct/incorrect, score, total score.

Or [any number of other permutations]. 

Also, being able to format the output of the Results would be wonderful; I'd love to be able to (re)style those ugly c.1987 tables, the positioning, add a logo, etc. [Yes, I could so this with HTML & CSS, but I then have to hack the results.html file every time, which is tedious.]  

@Dev Team / Support Staff

I'd really like to know if these two customisability features (i.e. 1. select what is/isn't displayed; 2. format the page) are being considered for the next release -- and, if not, whether they're the kind of feature requests that would be considered.

Cheers,

Leslie 

Deborah Sallman

Hey guys,

I’ve figured out a solutionto pass variables from storyline to the report.html page.

To give a little backgroundabout my problem and as a proof of concept, I was looking to:

·        Have the userenter a something into a data entry filed in storyline

·        Take some sort ofquiz

·        Print the results

·        Then depending onwhat code they entered in storyline, display a certain set of information (div’s)in the report.html page

Here’s what I did (*Note – I’musing an alert popup just to test that the variable is updating):

1.     Created a variable called ‘code’ in storyline

2.     Created a ‘data entry’ element and assigned it to the variable I created ‘code’

3.     Created a button and added the javascript code below,then published the project

varplayer = GetPlayer();

code= player.GetVar("code");

alert(code);

4.     Open the user.js file here’s what was in there

function ExecuteScript(strId)

{

 switch (strId)

  {

     case "6Fpzyy7QPM1":

       Script1();

       break;

  }

}

function Script1()

{

  var player = GetPlayer();//find the Flash Player

code =player.GetVar("code");//get the current value or our sl variable

alert(code);

}

5.     I then declared the ‘code’ variable outside of thefunctions in the user.js file to make it global.

Var code; //here is what I added

functionExecuteScript(strId)

{

  switch (strId)

  {

      case "6Fpzyy7QPM1":

        Script1();

        break;

  }

}

functionScript1()

{

   var player = GetPlayer();//find the FlashPlayer

code= player.GetVar("code");//get the current value or our sl variable

alert(code);

}

6.     I then referenced the ‘code’ variable from the mainstory.html file by placing it near the other defined variables in thereport.html file

var g_oContentResults =window.opener.g_oContentResults;

var g_listQuizzes =window.opener.g_listQuizzes;

var g_oPrintOptions =window.opener.g_oPrintOptions;

var code = window.opener.code; //here the line I added

7.      To test I then used an alert popup totest that the variable I entered in my data entry object in storyline

function myFunction(){

alert(code);     

}

Clickme

Daniel Sposato (Philly)

Hey Maurice, I was able to get this to work just fine with a variable I made in SL2. Great find! However I am trying to do this with the result variables from a quiz slide and I can't get it to alert anything with the generated variables for the quiz. This is the code I'm using:

varplayer = GetPlayer();

ScorePercent1= player.GetVar("Results.ScorePercent");
ScorePoints2= player.GetVar("Results.ScorePoints");
PassPercent3= player.GetVar("Results.PassPercent");
PassPoints4= player.GetVar("Results.PassPoints");

alert(ScorePercent1);

Not sure if I need to do something different with this coding structure because I know that at least at some point in the process these values are in an array.

Steve Wooten

Hey Daniel,

I ran into a similar issue while trying to get the results variables to go into an email using javascript. I realized that the period in the results variable names sort of fouled up the whole mess.

The work around that I came up with was to create a variable and then have that variable = the results.scorepoints when the timeline starts on the results slide.  

The new variable name didn't have any of the periods in it, so I was then able to write them out into my email using javascript just fine.

 

Your code looks right, just switch out the standard results.variables with your custom created variables (without any periods in the name).

Daniel Sposato (Philly)

I think I understand what you mean. You're saying that you swapped out the quizzes generated variables with ones that you made?

If so, how do you link those variables to the quiz instead of the generated ones?

Do I have to set each question with triggers to add or subtract from the score and then put in custom triggers to calculate the results for the 4 variables?

Or can I just delete the current name for that generated variable in the variables pop-up in SL2?

Steve Wooten

Nope. It was even easier than that:

Set your quiz up like normal, and let SL handle the scoring and points and such all of the way through.

The only actions you need to take are on the results slide.

Step 1: Create custom variable names something like "scorePoints" and "scorePercent"

Step 2: Create a slide trigger on your results slide that says:

Set scorePoints = Variable Results.score when the results slide begins

Set scorePercent = Variable Results.percent when the results slide begins

 

Then in your JavaScript code, just use the scorePoints and scorePercents variables rather than the Results.score and Results.percent.

 

Ashley Terwilliger-Pollard

Hi Ahmed,

I'm not sure if folks are still subscribed here, as the post is a bit older - but you could always use the "contact me" button on a ELH users' profile to reach out to them directly!

 

The javascript isn't something I can help with, but you may want to start with the best practices here.

Best of luck with your project! 

Timothy Munroe

Hey Jeff, as this thread is old, it will probably not mean anything for the OP, but I'm hoping this helps you.

For SL3 & 360, g_listQuizzes is only available in the routine that generates report.html. The routine is in different places in SL3 vs 360. Below is what I did for SL3.

In your project turn on the reporting functionality by either setting up a trigger for 'Print results' on the last slide or by having a button that manually fires it. 

Once that's done, publish the course for HTML5. In the published content folder take a look at app.min.js, (PublishedContentFolder->html5->lib->scripts). Beware, this is a minified file, unminified is about 40k lines. Once you edit this file, set a copy aside otherwise you will need to re-edit after each publish.

Search for "d={g_oContentResults:p,g_oPrintOptions:c,g_listQuizzes:h}," there is only one occurrence of that string and only when the  'Print results' functionality is on.

Right after this assignment, place something like this code: "questionDataTemp = Object.values(d.g_listQuizzes),"

Obviously that means that questionDataTemp would need to exist outside of SL3 code. There are many ways to do this, the way I do it is I add a call to a custom.js file in the story_html5.html file, that contains this var, (another case for edit and set a copy aside so you don't have to re-edit every publish). 

Once you have that questionDataTemp object you can parse it for quiz and question data.