Hi Storyline Community and any Javascript experts!
I would like to add a print option for learners to be able to print out their responses to 6 different questions. I added the TextEntry Variables on each slide and attempted to update the Javascript code on Julie Renner's printable free-response example template.
I am definitiely missing something because when I published it, I only got my response to the last question and also did not see each question and then response.
Would you mind taking a look at my file and let me know what I need to do to get it to show each question and response and have it be printable?
This is a capability that interests me so I took Richard Watson's excellent example and customized it for your situation. Create a copy of your course and replace the following over the existing JavaScript trigger and see if it gives you the output you need. Hope this helps! -Bob
var player = GetPlayer();
var i1=player.GetVar("TextEntry1"); var i2=player.GetVar("TextEntry2"); var i3=player.GetVar("TextEntry3"); var i4=player.GetVar("TextEntry4"); var i5=player.GetVar("TextEntry5"); var i6=player.GetVar("TextEntry6");
var q1="What’s your first memory of gender defining or impacting your life?"; var q2="Growing up, did you think of yourself as a boy, a girl, both or neither? How did you come to that recognition? When do you first remember knowing your gender?\n"; var q3="What messages have you received from those around you about gender? Did those messages make sense to you"; var q4="How were kids who did not fit into expectations about gender treated by others (teachers, family, faith community, etc.)? By you?"; var q5="How have your race, ethnicity, faith, socioeconomic class, community/sense of place influenced your gender?"; var q6="How would you describe your gender today?"
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
Thank you, Richard. I could get Nia's original script to work (which seemed designed to include the question text) but I ran into errors with the embedded styles which removed the line breaks between the questions and answers. Your approach with divs allows each variable to be preceded by a line break. I will definitely add this to my toolkit.
I tweaked the script a little more to make it easier to read. For some reason, I could not get /n to work to create space between questions. I'm still learning...
Anyway, I modified the script to provide the following output and posted the updated .story file for Nia if she wants it.
var player = GetPlayer();
var i1=player.GetVar("TextEntry1"); var i2=player.GetVar("TextEntry2"); var i3=player.GetVar("TextEntry3"); var i4=player.GetVar("TextEntry4"); var i5=player.GetVar("TextEntry5"); var i6=player.GetVar("TextEntry6");
var q1="What’s your first memory of gender defining or impacting your life?"; var q2="Growing up, did you think of yourself as a boy, a girl, both or neither? How did you come to that recognition? When do you first remember knowing your gender?\n"; var q3="What messages have you received from those around you about gender? Did those messages make sense to you"; var q4="How were kids who did not fit into expectations about gender treated by others (teachers, family, faith community, etc.)? By you?"; var q5="How have your race, ethnicity, faith, socioeconomic class, community/sense of place influenced your gender?"; var q6="How would you describe your gender today?"
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
This was so helpful! Thank you for sharing!! I have two follow ups: - Would it be possible to add a title to the page that gets printed? I would like to add the title of 'growth opportunities' at the top. - Also, I wanted to have one slide with three open responses. I used the template shared here but I'm missing a step. Any help would be greatly appreciated! Thanks! Heather
Hi Heather, Here is a version that I believe meets your requests.
Notice how the new headline was done in the JavaScript trigger. You can add any new lines you desire if you follow the syntax. Similarly, you can edit what's there, by removing the entire line, changing the bolded text, to changing the font size and style:
I added a layer which is attached to a participant leaving question 1 "blank." It prompts the participant to at least enter input for the first item. The following two inputs can be left blank.
There were two sets of variables attached to this interaction when only one is needed. I removed the duplicates. Hope this helps! Bob
14 Replies
Here is something I created that does something similar using Javascript.
https://bridgehillls.com/capture-and-printing-a-learners-responses/
Richard
Hi Nia,
This is a capability that interests me so I took Richard Watson's excellent example and customized it for your situation. Create a copy of your course and replace the following over the existing JavaScript trigger and see if it gives you the output you need. Hope this helps! -Bob
var player = GetPlayer();
var i1=player.GetVar("TextEntry1");
var i2=player.GetVar("TextEntry2");
var i3=player.GetVar("TextEntry3");
var i4=player.GetVar("TextEntry4");
var i5=player.GetVar("TextEntry5");
var i6=player.GetVar("TextEntry6");
var q1="What’s your first memory of gender defining or impacting your life?";
var q2="Growing up, did you think of yourself as a boy, a girl, both or neither? How did you come to that recognition? When do you first remember knowing your gender?\n";
var q3="What messages have you received from those around you about gender? Did those messages make sense to you";
var q4="How were kids who did not fit into expectations about gender treated by others (teachers, family, faith community, etc.)? By you?";
var q5="How have your race, ethnicity, faith, socioeconomic class, community/sense of place influenced your gender?";
var q6="How would you describe your gender today?"
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents+="<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print My Responses</button></div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Here are your responses.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q1+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i1+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q2+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i2+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q3+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i3+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q4+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i4+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q5+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i5+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q6+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+i6+"</div>";
contents+= "</body></html>";
myWindow.document.write(contents);
Nice job Bob! I like how you added the questions as part of the output.
Thank you, Richard. I could get Nia's original script to work (which seemed designed to include the question text) but I ran into errors with the embedded styles which removed the line breaks between the questions and answers. Your approach with divs allows each variable to be preceded by a line break. I will definitely add this to my toolkit.
Bob,
I tweaked the script a little more to make it easier to read. For some reason, I could not get /n to work to create space between questions. I'm still learning...
Anyway, I modified the script to provide the following output and posted the updated .story file for Nia if she wants it.
var player = GetPlayer();
var i1=player.GetVar("TextEntry1");
var i2=player.GetVar("TextEntry2");
var i3=player.GetVar("TextEntry3");
var i4=player.GetVar("TextEntry4");
var i5=player.GetVar("TextEntry5");
var i6=player.GetVar("TextEntry6");
var q1="What’s your first memory of gender defining or impacting your life?";
var q2="Growing up, did you think of yourself as a boy, a girl, both or neither? How did you come to that recognition? When do you first remember knowing your gender?\n";
var q3="What messages have you received from those around you about gender? Did those messages make sense to you";
var q4="How were kids who did not fit into expectations about gender treated by others (teachers, family, faith community, etc.)? By you?";
var q5="How have your race, ethnicity, faith, socioeconomic class, community/sense of place influenced your gender?";
var q6="How would you describe your gender today?"
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents+="<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print My Responses</button></div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q1 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q1+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i1+"</n></div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q2 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q2+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i2+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q3 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q3+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i3+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q4 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q4+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i4+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q5 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q5+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i5+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Q6 Response.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+q6+"</div>";
contents+="<div style='font-size:17px;font-style:italic;margin-top:5px;'>Learner Reponse:"+i6+"</div>";
contents+= "</body></html>";
myWindow.document.write(contents);
Thank you, thank you, thank you on your JavaScript expertise and putting together the code for the response questions.
The client will be SO HAPPY to know we can add this to the course now!
Thank you again!!
Best,
Nia
You are welcome but credit should go to Bob and Matthew Bibby (who created the original script).
Richard
Best,
Nia
- Would it be possible to add a title to the page that gets printed? I would like to add the title of 'growth opportunities' at the top.
- Also, I wanted to have one slide with three open responses. I used the template shared here but I'm missing a step. Any help would be greatly appreciated!
Thanks!
Heather
Hi Heather,
Here is a version that I believe meets your requests.
Notice how the new headline was done in the JavaScript trigger. You can add any new lines you desire if you follow the syntax. Similarly, you can edit what's there, by removing the entire line, changing the bolded text, to changing the font size and style:
contents+="<div style='font-size:30px;font-weight:bold;margin-top:10px;'>Growth Opportunities</div>";
I added a layer which is attached to a participant leaving question 1 "blank." It prompts the participant to at least enter input for the first item. The following two inputs can be left blank.
There were two sets of variables attached to this interaction when only one is needed. I removed the duplicates.
Hope this helps!
Bob
So helpful, Bob! I really appreciate the help from this group!!
This has been very helpful. I am curious if you could add an image into the contents? For example a logo image at the top of the page.