🎓 How to Use Certificate in Your Course

Simple step-by-step guide for teachers and admins

Reading time: 5 minutes | Everything you need to know!

🎯 Quick Overview

1
Design Certificate

5 minutes

2
Add to Course

2 minutes

3
Students Complete

Automatic

4
Download PDF

Done! ✅

🎨

Step 1: Design Your Certificate

Open the Editor

http://localhost/totara/server/mod/certificate/certificate_editor.php

Choose Size & Orientation

  • Size: Choose A4 (standard) / A5 (small) / Letter (US)
  • Orientation: Choose Landscape (horizontal) or Portrait (vertical)

Add Your Content

  • Click ➕ Add Text → Type "Certificate of Completion"
  • Add student name placeholder: "John Doe"
    ⚠️ This is a PLACEHOLDER! System will automatically replace it with real student names like "Hassan Eikial", "Sara Ahmed", etc.
  • Add course name placeholder: "Advanced Web Development"
    ⚠️ This is a PLACEHOLDER! System will replace it with actual course name like "Web Development", "ILT Virtual Rooms", etc.
  • Add date placeholder: "10.26.2025"
    ⚠️ This is a PLACEHOLDER! System will replace it with the actual date when certificate is issued.
  • Click 📁 Upload Background (optional)
Click "💾 Save Layout" and your design is saved!
Preview your design at: certificate_preview.php
📚

Step 2: Add Certificate to Your Course

Navigate to Your Course

  • Log in as Teacher or Admin
  • Go to your course
  • Click "Turn editing on"

Add Certificate Activity

  • Click "Add an activity or resource"
  • Select "Certificate"
  • Click "Add"
Certificate Type: MUST select "Custom Editor"

Configure Settings

Name: Course Completion Certificate Description: Congratulations on completing the course! Certificate Type: Custom Editor ← IMPORTANT! Required minutes: 0 (or set minimum) Required grade: 0 (or set minimum like 70%)
Click "Save and display" - Certificate added! ✅
👨‍🎓

Step 3: How Students Get Certificates

The Student Journey

  • Student enrolls in course
  • Student completes all activities
  • System checks requirements ✅
  • Student sees certificate activity
  • Student clicks certificate
  • Magic happens! ✨
  • Student downloads personalized PDF

🎯 The Magic Part! (Automatic Replacement)

System automatically:

  1. Loads your design from editor
  2. Replaces placeholders with REAL DATA:
    What You Type (Placeholder) → What Student Gets (Real Data)
    "John Doe" → "Hassan Eikial" (real student name)
    "John Doe" → "Sara Ahmed" (another student)
    "Advanced Web Development" → "ILT Virtual Rooms" (actual course name)
    "10.26.2025" → "26 October 2025" (issue date)
  3. Generates beautiful PDF with real data
  4. Shows download button
Important: You design ONCE with placeholders, and EVERY student gets a personalized certificate with THEIR OWN name, course, and date! 🎉
🔄

Understanding Placeholders (IMPORTANT!)

❓ Common Question: Are these names fixed?

NO! They are NOT fixed!

These are PLACEHOLDERS (examples only). The system automatically replaces them with real data for each student!

❌ WRONG Understanding

Thinking that:

  • All students get "John Doe" on certificate
  • All certificates show "Advanced Web Development"
  • All certificates have same date "10.26.2025"

This is WRONG! ❌

✅ CORRECT Understanding

Reality:

  • Each student gets THEIR OWN name
  • Each certificate shows ACTUAL course name
  • Each certificate has REAL issue date

This is CORRECT! ✅

📊 Real Example with 3 Students:

Student What They See on Certificate Issue Date
Hassan Eikial Certificate for "Hassan Eikial"
Course: "Web Development" 		26 October 2025
Sara Ahmed Certificate for "Sara Ahmed"
Course: "Web Development" 		27 October 2025
Ali Hassan Certificate for "Ali Hassan"
Course: "Web Development" 		28 October 2025
See? Same design, but each student gets their own personalized certificate! 🎉
Think of it like a template:
You create ONE design with placeholders, and the system uses it to create THOUSANDS of personalized certificates automatically!
💼

Real Example: "Web Development" Course

👨‍🏫 You (Teacher)

  1. Design certificate in editor
  2. Add to course
  3. Set required grade: 70%
  4. Save ✅

👨‍🎓 Student "Hassan"

  1. Enrolls in course
  2. Completes lessons
  3. Gets 85% on quiz
  4. Downloads certificate ✅
Result: Hassan gets a beautiful PDF with his name, course name, and today's date! 🎉
📐

Certificate Sizes Explained

Size Dimensions Print Size Best For
A4 842 x 595 px 297 x 210 mm Standard certificates (most popular)
A5 595 x 420 px 210 x 148 mm Compact certificates, badges
Letter 816 x 612 px 11 x 8.5 inch US-based institutions
💡

Pro Tips

🎨 Design Tips

  • ✅ Use clear, readable fonts
  • ✅ Good contrast (dark on light)
  • ✅ Leave margins (20-30px)
  • ✅ Test with long names
  • ✅ Preview before using

📚 Course Setup Tips

  • ✅ Select "Custom Editor" type
  • ✅ Set realistic requirements
  • ✅ Test as student first
  • ✅ Enable email notifications

👨‍🎓 Student Experience

  • ✅ Explain requirements clearly
  • ✅ Show where certificate is
  • ✅ Congratulate when earned
🔧

Troubleshooting

❌ Certificate shows default design

Solution:

  1. Check "Custom Editor" is selected
  2. Verify layout is saved (check preview)
  3. Clear cache: Site admin → Development → Purge all caches

❌ Student can't download certificate

Solution:

  1. Check student met requirements
  2. Verify student is enrolled
  3. Check activity is visible

❌ Placeholders not replaced

Solution:

  1. Use exact placeholders: "John Doe", "Advanced Web Development", "10.26.2025"
  2. Verify certificate was issued (not just previewing)
📋

Quick Checklist

Before Using in Course

  • Design created in editor
  • Layout saved
  • Preview looks good
  • Tested with long names

When Adding to Course

  • Certificate activity added
  • "Custom Editor" selected
  • Requirements configured
  • Activity visible to students

After Students Start

  • Monitor issued certificates
  • Check for issues
  • Celebrate with students!
📱

QR Code Integration (NEW!)

🎉 What's New: You can now add QR codes to your certificates for instant verification!

What is QR Code Verification?

QR codes allow anyone to scan the certificate with their smartphone and instantly verify its authenticity. Each certificate gets a unique QR code that links to a verification page showing the student's details.

1
Add QR Code

Click "📱 Add QR Code" in editor

→
2
Position & Save

Drag to bottom right, save layout

→
3
Auto-Generated

QR code embedded in PDF automatically

→
4
Scan & Verify

Anyone can verify certificate instantly

How to Add QR Code:

1

Open Certificate Editor

http://localhost/totara/server/mod/certificate/certificate_editor.php
2

Click "📱 Add QR Code" Button

Find the button in the toolbar at the top of the editor

3

Position the QR Code

  • Recommended: Bottom right corner
  • Position: X: 720px, Y: 475px (for A4 landscape)
  • Size: 100x100px (recommended)
💡 Pro Tip: Bottom right corner is the most professional placement and doesn't distract from the certificate content.
4

Save Your Layout

Click "💾 Save Layout" button. The QR code position is now saved!

QR Code Sizes:

Size Pixels Best For Scanability
Small 80x80px Top corners, subtle ✅ Good
Recommended ⭐ 100x100px Bottom corners ✅ Excellent
Large 150x150px High visibility ✅ Perfect
Too Large 200x200px - ⚠️ Distracting

What Happens When Certificate is Issued:

  1. Student completes course → Clicks certificate activity
  2. System generates unique code → Example: "ABC123XYZ"
  3. QR code image created → Saved as certificate_ABC123XYZ.png
  4. QR embedded in PDF → At the position you specified
  5. Student downloads certificate → With working QR code

How to Verify Certificate:

📱 Open Phone Camera

Point at QR code

→
📸 Scan QR Code

Camera recognizes code

→
🌐 Opens Link

verify.php?code=ABC123XYZ

→
✅ Shows Details

Student, course, date, status

Security Features:

🔐 Why QR Codes are Secure:
  • Unique Codes: Each certificate gets a unique verification code
  • Database Linked: Code is linked to specific student, course, and date
  • Timestamped: Issue date and time recorded
  • Cannot Be Forged: Codes cannot be duplicated or guessed
  • Instant Validation: Real-time database check

Preview vs PDF:

Location What You See Purpose
Editor Blue dashed box with 📱 icon Design placeholder
Preview Page Blue dashed box "QR Code Verification" Visual reference
Final PDF Real scannable QR code Actual verification

Troubleshooting QR Codes:

❌ Problem: QR not showing in preview

Solutions:

  • Make sure you saved the layout after adding QR code
  • Refresh preview page (Ctrl+F5)
  • Clear browser cache
  • Check browser console for errors

❌ Problem: QR not in PDF

Solutions:

  • Ensure certificate was actually issued (student completed course)
  • Check that certificate type is "Custom Editor"
  • Verify /local/qr/ directory exists and has write permissions
  • Check PHP error log for QR generation errors

❌ Problem: QR won't scan

Solutions:

  • Increase QR size to 150x150px
  • Ensure good contrast (white background works best)
  • Don't place QR over busy backgrounds
  • Use better lighting when scanning
  • Hold phone steady, 15-30cm away from QR code

Complete Example:

Certificate Layout with QR Code: 
┌────────────────────────────────────────┐
│                                        │
│     🎓 Certificate of Achievement      │
│                                        │
│           Hassan Eikial                │
│                                        │
│    has successfully completed          │
│                                        │
│        Web Development Course          │
│                                        │
│         26 October 2025                │
│                                        │
│                            ┌─────┐     │
│                            │█████│     │
│                            │█ █ █│ ← QR│
│                            │█████│     │
│                            └─────┘     │
└────────────────────────────────────────┘
✅ Ready to Use!
QR code integration is fully implemented. Add QR codes to your certificates now for instant, secure verification!
📱 View Complete QR Code Guide
🔗

Quick Links

🎨

Design Certificate

Create your design
👁️

Preview Certificate

Check your design
🔤

Manage Fonts

Upload custom fonts
🧪

Test Everything

Run diagnostics
🎉

Summary

Your First Certificate in 3 Steps:

1️⃣
Design (5 min)

Open editor → Design → Save

2️⃣
Add (2 min)

Open course → Add certificate → Save

3️⃣
Done!

Students download certificates ✅

🚀 Start Creating Now!
↑