Forum Discussion
Create a Course Certificate in StoryLine! (with Java and HTML)
I noticed in Stephanie Harnett's most excellent post on user notes that can be printed or emailed that much of the java for the printing function was really just filling the print window with content by using html. I thought to myself, why not use this same method for creating a course certificate. So I did just that following the steps below:
1) Design a rough draft in PowerPoint (so I could see what elements I would want on the page and determine or create any graphics I would need.
2) Create graphics and publish them to the web. You will need to reference them using a full URL.
3) Create an HTML based certificate using your favorite html editor. Tables work really well. I discovered this on my 3rd try to get this right. (More on that later.)
4) In StoryLine, create a trigger to execute JavaScript
5) Use the JavaScript to create your print window contents by adding the lines of your html together (see screenr)
Publish and test.
Below is a copy of the certificate created by StoryLine. The blue text represents variables pulled form the course:
Hey Matt -
One way to run relative links is using a Web Object to "carry on" files. Pretty easy:
- Create a folder and drop in all of your files. You can add anything to this folder including images, audio, PDF's... Any digital file.
- Add an index.html file to the folder. This can be completely blank. Just needs to be there for the Web Object to load.
- Create a slide in your story file and add the web object. This can be a slide that is never reached. You could also add it as a layer that's never displayed on one of your slides. The purpose of adding this is so that it's carried into your Story file and exported when published.
- Publish your storyline output. You can publish to LMS, Web, or CD. Doesn't matter, the published files are going to be relatively consistent.
- Explore the published folder. Navigate to the story_content/WebObjects folder. You'll see at least one Web object folder with a unique ID in that folder. If you see more than one, open each folder until you find the one that contains your "baggage files".
- Copy the string to of unique characters from the folder that contains your files.
This will become your relative reference. Example:
story_content/WebObjects/5uVWX7D/heading.png
Steve, thanks for your help. Awesome!
It turns out that it works in the edge browser but not in Chrome. Is there anything that can fix this? It seems like I am so close yet so far...
When you right click on the popped up certificate and click Inspect, then choose Console, anything appear in the console in red?
Ok this is weird, I press the button to print the certificate, and the print window has no images. The new window is underneath this and HAS images, and when I close it and press the print button again - both work!
It seems to open the print window before the images are loaded, but second time around they load.
It shouldn't need to open two windows. That's strange behavior:)
Have a look at this
Try commenting out the window.print line. Do the graphics load when the print function isn't called?
//myWindow.print();
It works perfectly when the print function is not called. It seems like it opens the print window before it is all loaded.
OK. Looks like Chrome fires off the window print too soon. What does the script look like? Depending on the construction, you could add the window print to the launched page and fire it after the page has been written.
contents+='<scr'+'ipt>'
contents+='window.print();'
contents+='</scr'+'ipt>'
contents+='</body></html>'myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
//myWindow.print(); comment this lineCode is attached.
