Forum Discussion
User notes that they can print and email
Hi all. I built a course earlier this year that contains a "notes" function to allow users to take a moment to reflect and type their thoughts on certain questions. This is used in place of a typical multiple response/choice type question. Thought I'd share it here with you!
Here are the files:
Screenr Part 1: Demonstration - https://player.vimeo.com/video/204928444
Screenr Part 2: How It Was Built - https://player.vimeo.com/video/204928450
Storyline Source: https://bit.ly/3Kd96as
Published Output: https://bit.ly/3Z0hj5X
Cheers!
Stephanie
- OwenHoltSuper Hero
And here is a simple .story file with both email and printing functions currently working in I.E.9
- Jerson-CamposCommunity Member
Thanks Owen. I'll take this for a test drive.
- Sabinede-Kamps1Community Member
This is absolutely brilliant. Thank you!
- MichelleHubchenCommunity Member
Thank you very much for your help Owen. I really appreciate it!
- BreanneMyersCommunity Member
My department and I were so excited when we saw this function and this would really really help with our 6 hour course, Employee Performance Appraisals: The Foundation for Performance Management. I would love to have some help clarifying part of the Javascript code.
I have only minor experience with editing code, but I’ve managed to customize parts of it. The sections I don’t understand at this point are locating in the downloadable project where you use “exercisenotes1” “exercisenotes2” and “exercisenotes3.” I’ve studied the .story file provided extensively and can’t find a sign of it (or reference, or variable, etc.), so I’m not sure exactly what to name and reference to within the code for my own project (or what I should be naming within Storyline).
I’m also uncertain about what to name different bolded areas of the code provided in the Powerpoint file. I noticed that the blue words are references to names of variables you created so the code can “grab” onto the text learners enter. However, I’m not sure about how to develop and customize the other bolded words.
I tried customizing everything as best I could and publishing my project to LMS to test the function. Nothing happens when I hit either the “send” or “print” buttons.
I also downloaded Owen's .story file where he created this function and compared the 2 versions of codes. Still stumped! (Lovely project, Owen!)
Any help would be massively appreciated!! : )
- OwenHoltSuper Hero
In my example, those are the names of Javascript variables that are created by the script and are used to contain the values of various StoryLine variables. I don't remember if it is the same in Stephanie's example but I believe that it is.
The code can basically be split into several sections:// Opens a new window for printing
myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
// Launches the javascript function to get variable values. Gets storyline variables and assigns them to a java variable. The first part (before the =) is the new java variable. The second part (after the =) is a call to storyline to get the value from the specified storyline variable.
var player=GetPlayer();
var headline=player.GetVar("PrintTitle");
var date=player.GetVar("SystemDate");
var exercisenotes1=player.GetVar("NotesOne");
var exercisenotes2=player.GetVar("NotesTwo");
// Creates a java variable called contents and assigns it with html content. The html content controls how and where the content appears in the print window. It includes the java variables that you just created and assigned storyline values to.
var contents = "< html><head></head><body style='width:650px;padding:20px;'>"
contents+="< div style='font-size:22px;font-weight:bold;margin-top:20px;margin-bottom:20px;'>"+headline+"</div>";
contents+="< div style='font-size:16px;'>"+date+"</div>";
contents+="< div style='font-size:18px;font-weight:bold;margin-top:10px;'>Activity Notes 1</div>";
contents+="< div style='font-size:17px;margin-top:5px;'>"+exercisenotes1+"</div>";
contents+="< div style='font-size:18px;font-weight:bold;margin-top:10px;'>Activity Notes 2</div>";
contents+="< div style='font-size:17px;margin-top:5px;'>"+exercisenotes2+"</div>";
contents+="< /body></html>"
// Writes the html to the window and initiates the print function
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
myWindow.print();
- Lissbeth-McCrodCommunity Member
This is great. thank you so much for sharing.
- JillFreemanCommunity Member
Thanks, Stephanie! This is great. I would also hope that the notes typed by the user would be available if they open the course in the future. But I can't seem to wrap my head completely around that. My users will be taking the course through an LMS. What do you think?
- andrewwelsh2Community Member
wow. fantastic work.
- LaytonFCommunity Member
I don' t think it is ever too late to say thank you and good job. It is very inspirational.