Skip to main content
Tag

JavaScript

Tracy Carroll
In All, Articulate Challenges, Blog Posts, Free Templates, Tutorial

Free Print Certificate Template

Preview: View the interactive demo of the Print Certificate template in action!

*Updated 8/16/22 – a new Storyline 360 version has been added to the download links below. The short video in this version was created with CreateStudioPro.

A couple of years ago a client requested a printable certificate option for a Storyline assessment module I was designing. Since Storyline does not have that option, I had to scramble to create the feature. Of course, I did a google search first, and found many different tutorials on the subject.

It turns out there are various ways to create a printable certificate, using JavaScript with Storyline! This example is just one way to go about it.

Two free downloads: The zipped folders each contain the .story file, the printCertificate.html file, and the Storyline output folder.

Customize:  To customize the look of the Certificate, edit the printCertificate.html file with any html editor, such as Dreamweaver or Notepad.

Remember: Be sure to insert the printCertificate.html into the Storyline output folder after you publish your Storyline module.  Otherwise, the print certificate function will not work! (See the example Storyline output folder in the zip file you downloaded).

Tip: Be sure to pay attention to your browser and/or printer settings before printing or saving the certificate as a PDF. You can control the margins, the header and footer information, and the orientation of the certificate page by adjusting your browser and/or printer settings.

For example, in the Chrome browser (image below), you can uncheck the “Headers & Footers” option to print your certificate without that extraneous information at the top and bottom of the page.

Tracy Carroll
In Articulate Challenges, Blog Posts

Online Learning Journals

My entry for Articulate’s E-Learning Heroes Challenge #344 – Using Learning Journals in E-Learning, is a scenario-based demo called Restaurant Management Training. To view the demo, click the image below.

In this course, the learner can take notes and reflect on their learning in an online learning journal.

Print the Journal by Using JavaScript

At the end of the course, the learner can either print or save their notes by clicking an icon. This is done by adding some JavaScript for Storyline to execute:

var player = GetPlayer();

var header = “Learning Journal~~”
var args =(
“Name:~~” +
player.GetVar(“Name_TextEntry1”) +
“~~Initial thoughts:~~” +
player.GetVar(“TextEntry2”) +
“~~Reflection:~~” +
player.GetVar(“TextEntry3”)
)

var url = (“print.html?=” + header + args);

window.open(url,”_blank”,”width=800,height=600,menubar=no”);

A customized logo has been included in the published output file. This is what the notes will look like when saved or printed:

Authoring Tool: Articulate Storyline 360

Tracy Carroll
In Articulate Challenges, Blog Posts, Gamification

ELH Challenge 174: Random Word Generator

This is my entry for Articulate’s E-Learning ELH Challenge # 174 – Using JavaScript to Create Random Word Generators in E-Learning.

Click the image below to give the Fairytale Generator a spin!

  

Instructions

To use the generator, simply click each button as many times as you need to choose your desired components: characters, locations, and actions. Clicking the buttons will generate random words or phrases for each category.

Then, click NEXT to view your customized fairytale. Want to make changes? Click PREV to go back to change the components, then advance the slide again to see how your fairytale has changed.

JavaScript

The generator uses JavaScript to generate the random words. Matthew Bibby has a great, easy-to-follow tutorial on Generating Random Words or Phrases in Storyline on the Articulate E-Learning Heroes community website, along with downloads you can use. I followed his method closely to create my demo!

Authoring Tools: Articulate Storyline 360