Forum Discussion
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
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! 😊
Hi Dean,
Take a look at this story file.
Hi Russell!
Thank you so much! You're the man! 👍👍👍
Cheers,
Dean
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.
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! :)
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
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.
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.
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
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!
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/Hello Dean,
Both interactives would have to be built into one storyline file if you want both printed out together at once.
Hi Russell,
Hope you're doing well.
Thank you so much, Russell! Have a great weekend ahead.
Hello,
I am having the same issue--using javascript to create an option to print a scrolling panel.
Is anyone willing to take a look and assist me?
Thank you!
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.
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!
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!
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.
