Forum Discussion

DeanBijis's avatar
DeanBijis
Community Member
3 years ago

Print results from a scrolling panel - Javascript help

Hi everyone! 

I have an interactive Q&A that is quite lengthy so I inserted a scrolling panel to have a more compact look. Now I want to print the results of the whole document but I only know the basic JS print function that only captures the last two questions when I click the print button. Can you help me with the javascript to print a summary of answers? Attached is a story file for review.

Any suggestions and tips are appreciated.

Thanks a lot!

Dean

storyline 360
  • DeanBijis's avatar
    DeanBijis
    14 days ago

    Hi Russell,

    Thank you so much for your help—I really appreciate it! I’m encountering an issue with an image (logo.png as broken) in my JavaScript. It’s not displaying correctly during the preview or when prompted to download, which used to work fine before.

     

    I’ve attached the SL file for your review. Could you please check if there’s a script I might have missed? I'm using the same JavaScript you shared previously.

    Thanks in advance for your assistance! 😊

    • DeanBijis's avatar
      DeanBijis
      Community Member
      3 years ago

      Hi Russell!

      Thank you so much! You're the man! 👍👍👍

      Cheers,

      Dean

      • JinaAli's avatar
        JinaAli
        Community Member
        2 years ago

        Hi Dean,

        You can also remove the last line of code that closes the print window. If you remove it, the Print window will appear so students can select a printer, Save to PDF and/or change other print-out settings. 

    • DeanBijis's avatar
      DeanBijis
      Community Member
      3 years ago

      Hey Russell, thanks again for you help! Appreciate it very much.

      Just wondering if it is possible that two separate interactive Q&As/storyline files can build on each other, so that at the end of the 2nd interactive, it prints out the results of the first interactive followed by the results of the 2nd interactive. Basically getting a review of everything that was submitted.
       
      Attached is the storyline file of the first interactive.

      Thanks so much! :)

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Hello Russell,

      How's it going? I hope you are doing well.

      I need your advice/help on how to display the full text of a learner in the data entry field (see screenshot. The full sentence doesn't display on screen upon preview (so I'm guessing that gonna be like when uploaded as SCORM). Is there a way to make it dynamic and display all the text? Also how can I get rid of the Download button upon clicking download to print?

       

      Thanks a lot!

      Dean

      • RussellKillips-'s avatar
        RussellKillips-
        Community Member
        2 years ago

        Hello Dean,

        Try increasing the height of the text boxes to around 66px. The text should start to wrap then.

        For the download button, Storyline 360 has a new Print Slide trigger.

        When clicking the print button, you could have 3 triggers.

        1. Set state of Download button to hidden.

        2. Print slide

        3. Set state of Download button to normal.

  • RussellKillips-'s avatar
    RussellKillips-
    Community Member
    2 years ago

    You won't be able to use the print slide trigger because that only prints the current slide.

    You will need to use javascript similar to the previous projects that I have helped you with.

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Hi Russell!

      Thanks again for this! I always forget but it works now thanks to you. however, my issue at the moment is the print trigger. The print dialogue box won't appear. I think there's something wrong with my code. Can you perhaps help me with this?

      I've attached the SL file for reference.

      Thanks so much in advance! :)

      Best,

      Dean

       

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Dear Russell!

      Hope all is well.

      Can you help me with the Javascript to include an image as well as title header upon printing? Is it possible? If so, what javascript should I include in my current Javascript? See attached.

      Thanks so much!

       

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    11 months ago

    For drawing you need Canvas. As is Storyline doesnot add a <canvas> tag. But you can add that... and then use any wanted drawing library on it.
    Here you can see how to add a Canvas element to Storyline.
    https://community.articulate.com/discussions/articulate-storyline/can-you-draw-a-line-with-javascript-in-storyline-360

    Next step would be finding a library that fullfills your needs. Something like this would work i guess.
    https://lazybrush.dulnan.net/

  • RussellKillips-'s avatar
    RussellKillips-
    Community Member
    3 years ago

    Hello Dean,

    Both interactives would have to be built into one storyline file if you want both printed out together at once.

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Hi Russell,

      Hope you're doing well.

      I would like to learn how to print 2 slides in one document (1.15 and 1.16) At the moment, I only know how to capture/print one slide- See attached storyline file.
       
      Appreciate your help on this.
  • DeanBijis's avatar
    DeanBijis
    Community Member
    2 years ago

    Thank you so much, Russell! Have a great weekend ahead.

  • RussellKillips-'s avatar
    RussellKillips-
    Community Member
    2 years ago

    Hi Dean,

    Including an image is little bit more tricky.

    The code needs to reference an image. In this case, the company Logo.

    After publishing your course, copy the Logo.png into the output folder.

    Take a look at the javascript code in the story file.

    Code executes quickly. So the logo didn't have enough time to load before the print was called.

    So, I used the setTimeout function. It waits 1000 milliseconds before calling the print function.

    Hopefully this is enough time for the logo to load before printing. You may need to change it to 1500.

    I have attached a zip file that includes the story file and the logo.

     

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Hi Russell, I wanted to express my sincere gratitude for your assistance. Thank you very much for taking the time to help me out. Your support is greatly appreciated.

      Once again, thank you!

    • DeanBijis's avatar
      DeanBijis
      Community Member
      2 years ago

      Hi Russell,

      I hope you're doing well. I wanted to bring up another matter regarding the SL file with the logo. I attempted to upload the zipped file, but it seems that Review360 is not accepting or recognizing it. I would appreciate your assistance in identifying any missing steps or potential mistakes I may have made during the process. I have attached some screenshots for your reference.

      Thank you so much for your help!

      • RussellKillips-'s avatar
        RussellKillips-
        Community Member
        2 years ago

        Hi Dean,

        The screen shot that you sent me was for publishing for web. Instead publish for Review 360.

        Extract the created Zip file. Copy over the logo and then re-zip. Then upload into your Review 360 account.

        I have attached a short video.

Related Content