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
annekalinic's avatar
annekalinic
Community Member
3 years ago

Hello Owen,

I've been reading this interesting thread, but I'm new to javascript and I didn't found how to reach the next step.

I'm trying to print a course certificate but I have issues with graphics not being printed at all, in Firefox or Chrome. I linked a jpg background image file to an html file. I don't understand why the image appears in the browser, but is not printed.

Could you please help ?

Here is the html code :

<!DOCTYPE html>

<script type="text/javascript">

/*Get string from URL*/
var learner_info = window.location.href.split('?print=')[1];

/*Split string into variables*/
var learner_name = learner_info.split('&')[0];
var cert_date = learner_info.split('&')[1];

/*Send print request to browser if possible*/
window.onload = function() { window.print(); }
</script>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Impression certificat</title>
<style>
body{
margin:0;
padding:0;
}
.contenant{
width:100vw;
height:57vw;
font-family:'Times new roman',serif;
background:url('certificatbackground.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.contenant p:nth-of-type(1){
font-size:36px;
font-weight:bold;
}
.contenant p:nth-of-type(2){
font-size:18px;
}
.contenant p:nth-of-type(3){
font-size:30px;
}
.contenant p:nth-of-type(4){
font-size:25px;
}
.contenant p:nth-of-type(5){
font-size:30px;
}
.contenant p:nth-of-type(6){
font-size:20px;
}
</style>
</head>
<body>
<main class="contenant">
<p>This certificate</p>
<p>certifies that</p>
<p><script type="text/javascript">document.write(unescape(learner_name))</script></p>
<p>has completed</p>
<p>the course"</p>
<p> date <script type="text/javascript">document.write(unescape(cert_date))</script></p>
</main>
</body>
</html>

Thank you.

Related Content