Forum Discussion

OwenHolt's avatar
OwenHolt
Super Hero
11 years ago

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 conte...
General E-Learning
IanBell-394900f's avatar
IanBell-394900f
Community Member
4 years ago

Hi Owen. I know it has been a number of years since you posted this solution to printing a Certificate from Storyline via html.

I am trying to do just that and I have tried to follow a simplified version of your html code. I already have the variables I need in a certificate created in Articulate 360. I am just trying to print this screen so was hoping that the following html code would work but I cannot get a print screen to activate.

Can you help....

myWindow = window.open("","Print","width=900,height=700,scrollbars=0,resizable=0");

 myWindow.document.write(contents);

myWindow.document.close();

myWindow.focus();

myWindow.print();

  • OwenHolt's avatar
    OwenHolt
    Super Hero
    4 years ago

    The code looks right to me. Can you share a file so I can peek under the hood?

    I have a Rise demo that IF your browser security setting are right, shows you how to pass data between Storyline blocks. At the end of the course, I have an HTML certificate (also generated from a Storyline block). 

    You can check it out here: https://360.articulate.com/review/content/b56569f8-4679-4c5c-a937-738eb98cc3fa/review 

    The certificate code I'm using looks like this:

    // Get variables from StoryLine.
    var player=GetPlayer();
    var studentName=player.GetVar("StudentName");

    // Get date from computer and format it for the certificate.
    var date = new Date();
    var certificateDate = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();

    // Open a print window
    myWindow = window.open("","Print","width=1056,height=816,scrollbars=0,resizable=0");

    // Create the certificate by loading all the HTML code into a single variable.
    var contents ='<html><style> @page {size: landscape;}</style><body><div style="width:900px; height:660px; padding:20px; text-align:center; border: 10px solid #0c4da2"><div style="width:850px; height:610px; padding:20px; text-align:center; border: 5px double #0c4da2"><br/><span style="font-family:Lato; font-size:45px; font-weight:bold">Certificate of Completion</span><br/><br/><br/><br/><span style="font-size:30px"><i>This is to certify that</i></span><br><br><span style="font-size:45px"><b/>';

    contents+=studentName;

    contents+='</span><br/><br/><span style="font-size:30px"><i>has completed the</i></span> <br/><br/><span style="font-size:45px"><b>Passing Variables<br>Between Storyline Blocks in Rise</span> <br/><br/><span style="font-size:30px">course.</span> <br/><br/><br/><br/><span style="font-family:Lato; font-size:30px"><i>Completion date:</i></span><br><span style="font-family:Lato; font-size:30px"><i>';

    contents+=certificateDate;

    contents+='</i></span></div></div></html>';

    // Write the contents to the window and execute the print command.
    myWindow.document.write(contents);
    myWindow.document.close();
    myWindow.focus();
    myWindow.print();

Related Content