Certificate - Landscape View

kev27

Usually I'm asking for help, but this time I can give back to the community that has helped me so much. I have developed a way to automatically print a course completion certificate in landscape view through html and aicc courses (the web browser headers and footers are still there which is not a big deal because users can cut those off).Here's how my course works. My certificate page opens in a new window with the following properties:- Page size in pixels = 675 x 900 and no scrollbars, status bars, etc.- screen position of 5 x 5As you can imagine the certificate will open in a window that looks skinny and runs off the screen, but that's ok. This allows the printed copy to be in landscape view. You basically fool the printer into printing a landscape certificate.In a graphic program I created a certificate with all the visual effects I want. However, leave a blank spot for the users Name and current Date. These two will be populated from Lectora using a text box with actions. My certificate size was 655 x 880. This is a bit smaller than the page size which is good. This allows for printer margin differences when printed.Next take the certificate (in .gif, .png or whatever format you have) and place it on the certificate popup page. Don't forget to center the certificate horizontally and vertically.Next add two text boxes for Name and Current Date. These boxes should stretch a good distance across the page so that person's with long names will fit. Both of my text boxes had a size of 440 x 34 with bold, center alignment and 18 font size. Later you will add html script to rotate these boxes vertically.Next, add two white boxes to the page (with the exact size dimensions of the Name and Date text boxes but reversed such as 34 x 440) and position them where the Name and Date boxes should rotate to. When you've placed the boxes where you want them, note on a piece of paper where the x y position on the page is. This is critical so make sure the position is correct! You can delete the white boxes now if you wish.Next add page actions to (1) on show change the contents of the Name and Date box with the appropriate information and (2) on show print the page with a delay of about .5 seconds. This delay will allow the name and date to populate before the print box pops up.That's it for the Lectora piece. You should publish your files to html or aicc.Next, go into the html or aicc folder and find the popup certificate html page and open it in notepad. In the html script first locate either the Name or Date text box. My script looked like this:

Date

I am not a html/javascript expert by any means so just use the notepad find feature for Name or Date. Now the following script will allow the text boxes to rotate:STYLE="position:absolute; top:229px; left:103px; filter:progid:DXImageTransform.Microsoft.BasicImage(grayscal e=0, xray=0, mirror=0, invert=0, opacity=1, rotation=1)The rotation=1 piece tells the text box to rotate 90 degrees, if it had a 2 instead of a 1 it would rotate 180 degrees and so on.Now you must place this script in the text box script. The final product should now look like this:

Date

Here's a critical component!!! In the script you just pasted change the top pixels and left pixels with the dimensions you wrote down on a piece of paper from the white boxes. Now do the same thing for the other text box (either Name or Date).Finally save the notepad file and close it. To test the functionality of the certificate open the html page that launches the certificate. I have a text entry field and a button on my course complete page that allows the user to type their preferred name. Then when they click the button, the certificate opens in a new window with the Name and Date boxes rotated with the correct information in it.Once this certificate page opens, you should also receive the print dialog box after a .5 second delay.That's it folks. They users can now print the certificate, cut off the headers and footers and post their landscape certificate on their wall! Hope this was helpful and if you have any questions please feel free to contact me.