Articulate RISE Certificate Generator

// Storylline Certificate Generator
//Author: N R Z Malik
//Website: https://eblog.nrzmalik.com
//Version: 1.2 - Fixed text overflow with configurable course title

// ========== 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)
};

// Course Title - Set your custom course title here, leave empty to use page title
var CourseTitle = ""; // Example: "Advanced JavaScript Programming Course"

// 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 - moved up to create more space
    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, 125, null, null, 'left'); // Changed from 140 to 125

    // Function to wrap text properly
    function wrapText(text, maxWidth) {
        var words = text.split(' ');
        var lines = [];
        var currentLine = '';

        for (var i = 0; i < words.length; i++) {
            var testLine = currentLine + words[i] + ' ';
            var testWidth = doc.getStringUnitWidth(testLine) * doc.internal.getFontSize() / doc.internal.scaleFactor;

            if (testWidth > maxWidth && currentLine !== '') {
                lines.push(currentLine.trim());
                currentLine = words[i] + ' ';
            } else {
                currentLine = testLine;
            }
        }
        lines.push(currentLine.trim());
        return lines;
    }

    // Determine course title - use CourseTitle variable if set, otherwise use page title
    var pageTitle = "";
    if (CourseTitle && CourseTitle.trim() !== "") {
        pageTitle = CourseTitle.trim();
    } else {
        pageTitle = document.title;
    }

    // Course title with proper text wrapping - moved up
    doc.setFontSize(24);
    doc.setFont('Helvetica','bold');

    // Wrap and display the course title
    var maxTitleWidth = pageWidth - 40; // Leave 20px margin on each side
    var titleLines = wrapText(pageTitle, maxTitleWidth);
    var startY = 145; // Moved up from 160 to 145
    var lineHeight = 10; // Proper line height for readability

    for (var i = 0; i < titleLines.length; i++) {
        var line = titleLines[i];
        var lineWidth = doc.getStringUnitWidth(line) * doc.internal.getFontSize() / doc.internal.scaleFactor;
        var xPos = (pageWidth - lineWidth) / 2;
        doc.text(line, xPos, startY + (i * lineHeight), null, null, 'left');
    }

    // Calculate dynamic positioning for date and logo, ensuring minimum distance from title
    var titleEndY = startY + ((titleLines.length - 1) * lineHeight);
    var dateY = Math.max(190, titleEndY + 25); // Minimum 25px gap from last title line

    // Date section
    doc.setDrawColor(...COLORS.black);
    doc.setLineWidth(0.5);
    doc.line(18, dateY, 43, dateY);

    doc.setFontSize(14);
    doc.setTextColor(...COLORS.black);
    doc.text(date, 18, dateY - 2, null, null, 'left');
    doc.text("Date", 25, dateY + 5, null, null, 'left');

    // Add logo if available (positioned relative to date)
    if (LOGO_BASE64 && LOGO_BASE64.trim() !== "") {
        try {
            var logoX = pageWidth - 18 - LOGO_CONFIG.width;
            var logoY = dateY - LOGO_CONFIG.height - 2;
            doc.addImage(LOGO_BASE64, 'PNG', logoX, logoY, 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");
}