Print user input from text entry fields
Jan 26, 2018
By
Eric Carlson
Hi All,
I just finished making a simplified (though still HTML-heavy) method to collect and print user input from text entry fields.
There are some excellent posts on this topic already - notably Matthew Bibby's Printable Workbook and an elearning brothers demo - but I wanted a super basic method. In my project, you don't have to insert a separate html file after publishing.
Look at the "code" in the JavaScript trigger (see attached story file), and let me know if you have any questions. Most of the code (the middle section) is actually just HTML and CSS broken up into pieces so it is organized.
13 Replies
Hi Eric that's a great bit of work and extremely useful. I had a similar workaround but it used an external html file which saved notes perpetually and printed to any printer installed including to PDF. Worked from a publish to web directly from the hard drive. I like this as it does a better job. Many thanks for sharing.
That looks very useful, thanks Eric.
Hi Eric - do you still have this demo? I would love to see it. the link isn't working for me. thanks L
Can you download and preview the .STORY file? (I let my Google account lapse on that demo link).
I think it's not clear in my example that you can include those text fields on slides throughout a project and print at any point - the input fields don't have to be on a single slide.
Hi Eric. I found this very useful, and have adapted it to create a single text entry field that learners can use to type in their notes as they work through the module. However, the carriage returns don't carry through, and so everything runs together. I wondered if you know whether there's a way to have the printed version carry through the carriage returns that have been entered within a text input field?
Hello Eric,
Would you or anyone know how to change the file name for the document to be printed with the window.print(); command?
Thanks!!!!
Great work. Thanks for sharing.
If you want any "enter breaks" from the data entry fields to be included in the printout, try adding the code below to step 2. It works for PCs, not sure about Macs or Mobile devices as I have not tested it on these platforms.
contents+="<pre>";
contents+="";
contents+=""+TextEntry+"";
contents+="</pre>";
This post was removed by the author
Hi Anna
Where in step 2 would you put this?
Hi, the code I used for step two looked like this:
// Step 2. The HTML Section - with the Storyline variables inserted
var contents = "";
contents+="<pre>";
contents+="Here are your notes from the ___________ course";
contents+="";
contents+="Notes";
contents+=""+UserNotes+"";
contents+="</pre>";
Oh cool! Thank you so much!
I don't really understand java script. I want exactly what Eric demonstrated but with 1 data entry box. I tried to modify the java script by removing the references to text box 2 and text box 3 but it doesn't work.
Can someone give me an assist with this?
I am having issues with this as well! The JavaScript was useful for multiple text entries but when trying to print just one entry, the code isn't working. Any help would be greatly appreciated!