Any javascript champs out there?

Howdy, folks

I'm trying to customise the results.html file in Storyline output.  

Sadly, I know next to nothing about js and as such I'm just hacking away trial and error style with my limited knowledge.

So I thought it better to ask those who know what they're doing. 

Here's the situation:

I have a series of questions where learners type their ideas into a text entry field, which is then carried over to another screen for review/comparison. Just prior to the comparison I'd like learners to print out their response and attach it as part of their assessment materials.

Here's the problem (other than my lack of coding chops!):

By default, results.html pulls all the table headings and all cell values whereas I just need the following:

  • first table with the date
  • second table with the response (g_strStudentAns)

Can anybody help?  :(

P.S.  I'm pretty sure I've already submitted (as a feature request) the ability to customise and modify the Results page. But I'll submit it again just in case.

15 Replies
Robert Stewart

Look at this post:

http://community.articulate.com/forums/t/18764.aspx

Lectora automatically posts some variables for you at the end of the coarse (no really rocket science coding here). However, in Storyline you have to save the variables in the UI then extract them using Flash Get functions.

You have to know a server side script like ASP to take it to the next step. e.g. Get a post response then throw the variables in a custom HTML file. Maybe you can you jQuery in a web Object within Storyline to process them????

Either way, happen programming and many hours of frustration.

Sam Carter

El Burgaluva said:

I have a series of questions where learners type their ideas into a text entry field, which is then carried over to another screen for review/comparison. Just prior to the comparison I'd like learners to print out their response and attach it as part of their assessment materials.

I've developed a web object that can be used to nicely format contents of Storyline variables for printing.  PM me if this would help.

Rebecca Lee

Hi Sam

I would be interested in this, I have no idea about coding etc and posted asking for help a while ago (in the end I got the learners to email there results slide) but ideally I would like them to be able to print directly.

This looks like just the thing, have you got more info?

Many thanks

El Burgaluva

@Gary... Thanks for that link. It lead me to this wonderful post from Dave Moxon.

Now, if only some js-ranger could mark up Storyline's results.html file in the same way so I knew what the heck I was doing in there!

@Robert... Thanks for linking to that discussion. All a bit over my head, I'm afraid. I'm not a tech-nonce; I just know next to nothing about js.Maybe it'll make sense to me some day [*insert wistful southern belle sigh*]

@Sam... I really appreciate your kind offer and I will, indeed, PM you. I'd be very happy to take your textToWebObject widget for a spin and see if it can do what I need.

@Rebecca... If all you need a print-out of your learners' results, you can insert a [PRINT] button onto your Results Slide in the Options tab. This tutorial might be helpful.

Thanks again everyone,

Leslie 

P.S. If anyone fancies a coffee-break challenge... and would like to see whether or not they can wrangle the commenting of Storyline's results.html template file... well, that would just be awesome.

Steve Flowers

The results.html file is pretty complicated. It's specifically for the purposes of pulling from question arrays and results. I found attempting to unwind it for my own purposes was more work than it was worth.

I find it's easier to directly pull what I want into my own HTML or generate a document.write via a JS trigger.

var player=GetPlayer();

var myVar=player.GetVar("storylineVar");

Employing this variable is cleaner and easier than the dynamic assembly in results.html. There are a couple of ways to employ it. Hope to get some time today to run a quick screenr. 

El Burgaluva

Hi, Steve

Thanks for skipping across to this thread. Much appreciated.

Somewhat disappointing to hear that the results.html file isn't easy to hack, but good to get confirmation of the difficulty involved from someone who knows what he's talking about; that way I won't sink any more time into trying to unpack it and get it to do what (seems to me, at least) is a relatively simply thing -- which a number of people have asked about on this forum (I don't know why the print output isn't customisable by default).

I really look forward to the Screenr whenever you get time to do it because although I think I understand the principles in the code, above, I have no idea how to actually implement it!

Like others who've asked about this, all I'm trying to do is print a simply styled page with the learner's name, the date, and their text entry response (to an essay-style, non-graded survey question).

The process is:

  1. They enter their response and submit
  2. on the next slide, their entry is displayed (as non-editable) by calling the contents of the text variable
  3. There's a [PRINT] button on this second slide which they use to print their response and attach to their workbook for assessment.

I very much look forward to your response and any help you (or anyone else) might be able to offer.

All the best,

Leslie 

El Burgaluva

P.S.

I just submitted a Feature Request on this. I thought I'd copy it in here as well to maybe spark some more creative ideas. There might be a simpler way of achieving what I outline than the method I propose...

================  START EXCERPT OF FEATURE REQUEST  ================

There are two things I'd love to see added to Storyline:

1.  Ability to choose what's printed

I'd like to see another tab in the UI when setting up a Results Slide. This tab becomes active when you select "Allow user to print results".  You can then select which of the columns to display.

Surely a series of checkboxes can be made to comment out the relevant code in the output of the results.html file? I'm thinking something similar to what Dave Moxon did in this Quizmaker tutorial.

For example, by default, all the checkboxes could be ticked and UNchecking a box gives the command to remove that column from the output on the HTML page generated by the results.html file.


2. Styles and Formatting

The output is as ugly as sin. For most purposes, it's fine; I'm guessing most people just need their learners to have a time-stamped record with their name and results.

But... it sure would be nice to be able to style the page.

How about another tab in the Results Page UI with a form to add custom css (which is then injected into the head of the results.html page) and another form to add custom HTML (which is injected into the body)?

The content generated by results.html is wrapped up in a div and when using custom HTML, you just have to insert a token (e.g. [RESULTS]) where you want this data to display (which then pulls the contents of the results/output div).

That would be awesome.

=========================  END  EXCERPT  ======================

El Burgaluva

Okay... so I had a tinker this afternoon...

Attached is a .txt file with some code (commented to the best of my -- limited -- ability in such javascript matters).

There's also a demo .story file to show you how it works.

Hope it helps and if anyone can add anything (like, a [PRINT] button, for example -- which I don't know how to add using this method), that would be fantastic.

Cheers,

Leslie 

El Burgaluva

Hi, Steve

You really are a champ! Thank you very much for all your help with this.

I also integrated the code from this thread so the learner doesn't have to enter it manually as in my first demo.

Here's a screenshot of what the output looks like now:

I also added a layer to simulate the "Enter your name" dialogue box that pops up ahead of calling the results.html file.

New Storyline file attached.

Thanks again,

Leslie