Certificate of Completion with DateStamp

Hi Mario,

Your statement in the if section is broken as it only has a single quote. I'm not sure what you wanted to do in that statement. Maybe add the leading 0?

Anyway, your setting the "th" to the end of the string when you return the value to Storyline with the player.SetVar statement. What you need to do is set the string up as needed, and then just return the prepared string. Perhaps the easiest way to do this is with a switch statement.

Try this:

var player = GetPlayer();
var currentDate = new Date();
var day = currentDate.getDate();
var txtDay = "";

switch (day) {
 case 1:
  txtDay = "1st";
  break;
 case 2:
  txtDay = "2nd";
  break;
 default:
  txtDay = day + "th";
}
player.SetVar("Day",txtDay);

If you are interested in improving your JavaScript, w3schools.com is a really great free resource that does a really great job of explaining all about JavaScript.

Best Regards,

Dave

Thank you so much for the feedback Dave. Yes, I was researching and came across this site. So I will try to study this and hope for the best. I did use your code and it did work. Thanks again for your help :)

1 more question. SO when I use this code, in the print preview, it changes the place of the text box to where I originally had it on the certificate (which is weird). Do you know what it might have done that?

Hi Mario,

I'm pretty sure that there isn't anything in that code that would affect the placement of your text box, as we are only setting the value of the text variable.

I'm not sure how you are doing your certificate, but I've done this several times. The way that I create the certificate is to create an HTML/CSS page that I include in the project. In the web page, I create HTML/CSS statements for how the certificate will look on screen, and populate fields for certificate name, user name, and date with my design for how it will look when printed. This way, I can make sure that the printed certificate will fit on the page, and look the way it was designed both when displayed and when printed. This also allows me to put graphics on the certificate that make it look official, and make it hard to forge.

I've been practicing this and I'm not sure what I'm doing wrong. It looks like I want it before I publish it but when I print, some of my text (On this...) disappears. If you have a minutes I've attached my certificate. PLEASE tell me what I'm doing wrong. This is driving me crazy

This is what's happening when I try to print it.

Hi Mario, 

I don't see the Certificate.html file that your print script references.

It looks like you are attempting to print the slide, so here is another way of printing that I came up with for another user. This script allows you to print the slide on paper as it is displayed on the slide.

It's a very long script, so I've just added it into the script for the slide. See if this will work for you.

Dave

THANK YOU SO MUCH!!! Yes, this works. You are a lifesaver :)

Awesome! I so glad that works for you. :-)

Dave

You’ve been such a great help so I’m hoping you can answer this for me: (last time and I won’t both you 😊)

How do I get rid of or make invisible the print button and the edges (highlighted in green) so when my students print the certificate, it won’t show up? (see attached)

And lastly, the code you gave me works. So I added case 3-7 to add the format to the 3rd, 21st, 22nd, 23rd, and 31st. All others are defaulted to “th”. Do you think the code below will work to take care of the remaining dates?

var player = GetPlayer();

var currentDate = new Date();

var day = currentDate.getDate();

var txtDay = "";

switch (day) {

 case 1:

  txtDay = "1st";

  break;

 case 2:

  txtDay = "2nd";

  break;

 case 3:

  txtDay = "3rd";

  break;

 case 4:

  txtDay = "21st";

  break;

 case 5:

  txtDay = "22nd";

  break;

 case 6:

  txtDay = "23rd";

  break;

 case 7:

  txtDay = "31st";

  break;

 default:

  txtDay = day + "th";

}

player.SetVar("Day",txtDay);

Hi Mario,

Yes, you have the correct idea with you updated code. Great job!

With this script, the best way to get rid of the print button is to use another layer for the print content. See Attached.

That's a good work-around. I've been studying your codes and working from there. What about the print edges? Any suggestion with that?

The headers and footers are generated by the browser when the print function is invoked. You can hide them by deselecting the Headers and footers checkbox to the right, but I'm not sure if they can be suppressed with code. I'll have to do a be of research to see if that is possible.

Dave

I'll try to deselect them the Header and Footer and see if there is a way for me to enlarge the size of the certificate so when my students print it, it will cover as much of the paper as possible.

I did some research. Those headers and footers are added by the Javascript print() function. Since that function does not add any html ids, there is no way I can target them with CSS to remove them. 

Well you have helped me tremendously. I can't thank you enough for your help. Happy New Year

Hi Mario,

This was bugging me, so I kept working on it.

I was able to remove the header and footer in the Chrome browser. It will still display in the Microsoft browsers though. This new file has the updated code.

Hi Dave.

I just happen to be searching for answers to another question I have and came across this post. I'm sorry I'm just seeing this, as I don't receive notifications through my email when someone has replied.

Thank you for the update on this. I was just having my students print it with the header and footer, so this is fantastic. I do have another question. When I print it, the certificate doesn't scale to fit the entire page. I've tried changing the scale settings but none seem to work. Is there a way so the certificate will take up the entire print page? Or does this have nothing to do with JS?

As I'm studying the code, I came upon this:

@page {size: auto A4 landscape; margin: 3mm; }
.slide-container, .slide-container * {
visibility: visible !important;
margin-top: 0px !important;
margin-left: 0px !important;

I would think it would make the margins from top to bottom at 0. I'm not sure why it prints as a mini certificate