Forum Discussion

EricCarlson-118's avatar
EricCarlson-118
Community Member
7 years ago

Print user input from text entry fields

Hi All,

Click to see a demo here

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. 

 

  • JoeDey's avatar
    JoeDey
    Community Member

    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.

  • 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!!!!

  • 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>";

      • AnnaHoffman-399's avatar
        AnnaHoffman-399
        Community Member

        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>";

  • MaryField's avatar
    MaryField
    Community Member

    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?

    • MelissaHerre110's avatar
      MelissaHerre110
      Community Member

      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!