Articulate Storyline PDF Certificate JavaScript

nrzmalik

Jun 20th, 2025

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 5.38 KB | Source Code | 0 0

raw download clone embed print report

// Storylline Certificate Generator
//Author: N R Z Malik
//Website: https://eblog.nrzmalik.com
//Version: 1.1
// ========== CONFIGURATION VARIABLES ==========
// Colors - Change these values to customize the certificate appearance
var COLORS = {
primary: [27, 20, 100], // Main theme color (red)
white: [255, 255, 255], // White for text and lines
black: [0, 0, 0], // Black for text and lines
border: [27, 20, 100] // Border color (same as primary)
};
// Logo configuration (optional)
// Paste your base64 logo size (180*180). Generate it from https://www.base64-image.de/ code here, or leave empty string to disable logo
var LOGO_BASE64 = ""; // Example: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
// Logo settings
var LOGO_CONFIG = {
width: 40, // Reduced size to fit better
height: 40, // Reduced size to fit better
rightMargin: 0, // Distance from right edge
bottomMargin: 0 // Distance from bottom (aligned with date area)
};
// ========== CERTIFICATE GENERATION ==========
var confettiScript = document.createElement('script');
confettiScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js';
confettiScript.async = true;
confettiScript.onload = function() {
generateCertificate();
};
document.head.appendChild(confettiScript);
function generateCertificate() {
var date = new Date();
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0');
var yyyy = date.getFullYear();
date = mm + '/' + dd + '/' + yyyy;
/*
//For Storyline builtin variables, use the following code:
var player=GetPlayer();
var name=player.GetPlayer("Name");
//And Remove or Comment the next following line:
*/
var name = prompt("Please enter your name:", "");
if (!name) {
name = prompt("Please enter your name:", "");
}
var doc = new jsPDF({
orientation: 'landscape'
});
var pageWidth = doc.internal.pageSize.getWidth();
var pageHeight = doc.internal.pageSize.getHeight();
// Main border
doc.setLineWidth(2);
doc.setDrawColor(...COLORS.border);
doc.rect(10, 10, pageWidth - 20, pageHeight - 20);
// Header background
doc.setFillColor(...COLORS.primary);
doc.rect(10, 10, pageWidth - 20, 40, 'F');
// Header decorative lines
doc.setDrawColor(...COLORS.white);
doc.setLineWidth(1);
doc.line(10, 40, pageWidth - 10, 40);
doc.line(30, 10, 30, 40);
doc.line(pageWidth - 30, 10, pageWidth - 30, 40);
// Header title
doc.setTextColor(...COLORS.white);
doc.setFontSize(30);
doc.setFont('Helvetica', 'bold');
var title0 = "Certificate of Completion";
var nameWidth = doc.getStringUnitWidth(title0) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var xPos = (pageWidth - nameWidth) / 2;
doc.text(title0, xPos, 30, null, null, 'left');
// Certificate content
doc.setTextColor(...COLORS.black);
doc.setFontSize(28);
doc.setFont('Helvetica','normal');
var title2 = "THIS IS TO CERTIFY THAT";
var nameWidth = doc.getStringUnitWidth(title2) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var xPos = (pageWidth - nameWidth) / 2;
doc.text(title2, xPos, 70, null, null, 'left');
// Recipient name
doc.setFontSize(50);
doc.setFont('Helvetica','bold');
var nameWidth = doc.getStringUnitWidth(name) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var xPos = (pageWidth - nameWidth) / 2;
doc.text(name, xPos, 100, null, null, 'left');
// Completion text
doc.setFont('Helvetica','normal');
doc.setFontSize(28);
var title3 = "You have successfully completed:";
var nameWidth = doc.getStringUnitWidth(title3) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var xPos = (pageWidth - nameWidth) / 2;
doc.text(title3, xPos, 140, null, null, 'left');
// Course title
var pageTitle = document.title;
doc.setFontSize(24);
doc.setFont('Helvetica','bold');
var nameWidth = doc.getStringUnitWidth(pageTitle) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var xPos = (pageWidth - nameWidth) / 2;
doc.text(pageTitle, xPos, 160, null, null, 'left');
// Date section
doc.setDrawColor(...COLORS.black);
doc.setLineWidth(0.5);
doc.line(18, 190, 43, 190);
doc.setFontSize(14);
doc.setTextColor(...COLORS.black);
doc.text(date, 18, 188, null, null, 'left');
doc.text("Date", 25, 195, null, null, 'left');
// Add logo if available (positioned at bottom-right, mirroring date position)
if (LOGO_BASE64 && LOGO_BASE64.trim() !== "") {
try {
// Position logo on right side, mirroring the date position on the left
var logoX = pageWidth - 18 - LOGO_CONFIG.width; // Same distance from right as date from left (18px)
var logoY = 188 - LOGO_CONFIG.height + 25; // Align with date Y position, adjusted for logo height
doc.addImage(LOGO_BASE64, 'PNG', logoX, 169, LOGO_CONFIG.width, LOGO_CONFIG.height);
} catch (error) {
console.warn("Could not add logo to certificate:", error);
}
}
// Save the certificate
doc.save(name + " Certificate.pdf");
}

Add Comment

Please, Sign In to add comment