#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Genereert T12 PBM Beleid en Gebruik e-learning
Phoenix Metals B.V.
"""

import os

# HTML template met inline CSS en JavaScript
HTML_TEMPLATE = """<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phoenix Metals - T12: PBM Beleid en Gebruik</title>
    <style>
        :root {
            --primary: #003366;
            --secondary: #1a5276;
            --bg: #e8f4f8;
            --accent: #f39c12;
            --error: #e74c3c;
            --correct: #27ae60;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: var(--bg);
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: var(--primary);
            color: white;
            padding: 20px 0;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .progress-bar {
            background-color: #ddd;
            height: 20px;
            width: 100%;
            position: sticky;
            top: 80px;
            z-index: 99;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        .progress {
            background-color: var(--accent);
            height: 100%;
            width: 0%;
            transition: width 0.5s ease;
        }
        .module {
            background: white;
            padding: 25px;
            margin-bottom: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .module h2 {
            color: var(--primary);
            border-bottom: 2px solid var(--accent);
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .paragraph {
            margin-bottom: 15px;
            text-align: justify;
        }
        .info-box {
            background-color: #f0f8ff;
            border-left: 4px solid var(--secondary);
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 5px 5px 0;
        }
        .info-box h3 {
            color: var(--secondary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .practice-box {
            background-color: #fff8dc;
            border: 1px solid var(--accent);
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        .practice-box h3 {
            color: var(--accent);
            margin-bottom: 10px;
        }
        .question {
            background-color: white;
            border: 1px solid #ddd;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        .question h3 {
            color: var(--primary);
            margin-bottom: 10px;
        }
        .options {
            display: grid;
            gap: 10px;
        }
        .option {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .option:hover {
            background-color: #f0f0f0;
        }
        .option.selected {
            border-color: var(--primary);
            background-color: #f0f8ff;
        }
        .option.correct {
            background-color: var(--correct);
            color: white;
        }
        .option.incorrect {
            background-color: var(--error);
            color: white;
        }
        .certificate {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 30px;
            text-align: center;
            border-radius: 10px;
            margin-top: 30px;
        }
        .certificate h2 {
            color: var(--primary);
            margin-bottom: 20px;
        }
        .certificate-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: var(--secondary);
        }
        .hidden {
            display: none;
        }
        .quiz-container {
            margin-top: 30px;
        }
        footer {
            background-color: var(--primary);
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="progress-bar">
        <div class="progress" id="progress"></div>
    </div>
    
    <header>
        <h1>Phoenix Metals B.V. - T12: PBM Beleid en Gebruik</h1>
        <p>Training PBM Beleid en Gebruik (TR-303-04)</p>
    </header>

    <div class="container" id="modules">
        <!-- Modules komen hier -->
    </div>

    <div class="quiz-container hidden" id="quiz-container">
        <div class="module">
            <h2>Quiz - 10 vragen (80% cesuur)</h2>
            <div id="quiz-questions">
                <!-- Quiz vragen komen hier -->
            </div>
            <button class="button" onclick="checkQuiz()">Resultaten Controleren</button>
            <button class="button hidden" id="retry-button" onclick="resetQuiz()">Opnieuw Proberen</button>
            <button class="button hidden" id="certificate-button" onclick="showCertificate()">Certificaat Bekijken</button>
        </div>
    </div>

    <div class="certificate hidden" id="certificate">
        <h2>Bewijs van Voltooiing</h2>
        <div class="certificate-content">
            <p>Deze certificeert dat de deelnemer de training <strong>PBM Beleid en Gebruik</strong> met succes heeft afgerond.</p>
            <p><strong>Deelnemer:</strong> _________________________</p>
            <p><strong>Bedrijf:</strong> Phoenix Metals B.V.</p>
            <p><strong>Training:</strong> T12: PBM Beleid en Gebruik (TR-303-04)</p>
            <p><strong>Datum:</strong> _________________________</p>
            <p><strong>Resultaat:</strong> _________________________</p>
        </div>
    </div>

    <footer>
        <p>Phoenix Metals B.V. | Safety • Governance • Advisory | © 2026</p>
    </footer>

    <script>
        const totalModules = 10;
        const totalQuestions = 10;
        let currentProgress = 0;
        let correctAnswers = 0;

        // Modules data
        const modules = [
            {
                title: "PBM hiërarchie - laatste middel na eliminatie/substitutie/technisch/org",
                paragraphs: [
                    "De hiërarchie van beschermingsmaatregelen is een fundamenteel principe in de arbeidshygiëne dat voorschrijft dat persoonlijke beschermingsmiddelen (PBM) alleen als laatste optie moeten worden gebruikt nadat alle andere maatregelen zijn overwogen en toegepast.",
                    "Eliminatie is het meest effectieve niveau in de hiërarchie: het verwijdert de gevaarlijke stof of activiteit volledig uit de werkplek. Dit is ideaal maar vaak niet praktisch bij complexe productieprocessen zoals die bij Phoenix Metals.",
                    "Substitutie betekent het vervangen van gevaarlijke stoffen door minder gevaarlijke alternatieven. Bij Phoenix Metals kan dit betekenen het gebruik van minder toxische chemicaliën of het vervangen van gevaarlijke procedures door veiligere methoden.",
                    "Technische maatregelen omvallen fysieke barrières, ventilatiesystemen, afgeschermde machines en geautomatiseerde processen. Deze verlagen de blootstelling zonder directe tussenkomst van de werknemer.",
                    "Organisatorische maatregelen zijn procedures voor werkmethoden, beperking van blootstellingstijd, training en bewaking. PBM vallen onder dit niveau als laatste verdedigingslinie tegen blootstelling aan gevaarlijke stoffen zoals V₂O₅, H₂SO₄ en NaOH.",
                ],
                fact: "De hiërarchie van beschermingsmaatregelen is vastgelegd in Arbowet art. 8.2 en is verplicht voor alle werkgevers in de Europese Unie.",
                practice: "Analyseer uw eigen werkplek: Welke maatregelen zijn al getroffen op de niveaus eliminatie, substitutie, technische en organisatorisch? Waar is PBM nog nodig?",
                question: "Wat is de volgorde in de PBM-hiërarchie, van meest effectief naar minst effectief?",
                options: [
                    "PBM → organisatorisch → technisch → substitutie → eliminatie",
                    "Eliminatie → substitutie → technisch → organisatorisch → PBM",
                    "Organisatorisch → technisch → substitutie → PBM → eliminatie",
                    "Substitutie → eliminatie → PBM → technisch → organisatorisch"
                ],
                correct: 1
            },
            {
                title: "Veiligheidsbril EN 166 types",
                paragraphs: [
                    "Veiligheidsbrillen zijn essentieel voor oogbescherming tegen chemische spatten, stofdeeltjes en mechanische gevaren. Bij Phoenix Metals zijn meerdere types EN 166-gecertificeerde brillen vereist afhankelijk van het specifieke risico.",
                    "EN 166 is de Europese norm voor oogbescherming die de minimumeisen stelt voor de prestaties van veiligheids brillen. De norm dekt impactbestendigheid, optische kwaliteiten en chemische bestendigheid.",
                    "Er bestaan verschillende klassen impactbestendigheid: F (voorwerp impact), B (schot impact) en A (stof impact). Bij Phoenix Metals is vaak klasse F vereist vanwege het risico op vliegdeeltjes bij het verwerken van metalen slakken.",
                    "Filters en tinten zijn genummerd volgens EN 170 en EN 172 voor UV-bescherming en zonlicht. Bij bewerkingen buiten of bij laswerk zijn speciale filters nodig. De keuze hangt af van het type werkzaamheid en de omgevingsfactoren.",
                    "Passend dragen is cruciaal: de bril moet goed zitten zonder drukpunten, geen openingen laten rond de ogen en compatibel zijn met andere PBM zoals ademhalingsapparatuur en gehoorbescherming.",
                ],
                fact: "Een veiligheidsbril met CE-markering voldoet aan de basiseisen van EN 166, maar bij chemische risico's is aanvullende certifi cateering (zoals EN 166 met 'D' markering voor chemische bestendigheid) nodig.",
                practice: "Controleer welke EN 166-gecertificeerde veiligheidsbril u nodig heeft voor uw specifieke werkzaamheden bij Phoenix Metals. Test de pasvorm en compatibiliteit met andere PBM.",
                question: "Wat betekent de 'D' markering bij een EN 166 veiligheidsbril?",
                options: [
                    "Hoog temperatuurbestendig tot 150°C",
                    "Chemisch bestendig voor vloeistoffen",
                    "Anti-condens coating",
                    "Ultraviolette straling blokkerend"
                ],
                correct: 1
            },
            {
                title: "Veiligheidsschoenen EN ISO 20345 S1-S5",
                paragraphs: [
                    "Veiligheidsschoenen volgens EN ISO 20345 zijn verplicht op veel werkplekken bij Phoenix Metals, met name bij het verwerken van metalen slakken en bij het werken met chemicaliën zoals H₂SO₄ en NaOH.",
                    "De norm kent verschillende klassen: S1 (basisbescherming), S2 (waterdicht), S3 (stofvrij), S4 (moderne veiligheidsschoenen) en S5 (moderne waterdichte veiligheidsschoenen). De klasse hangt af van de specifieke risico's.",
                    "Basisfunctionaliteiten omvatten stootneus (200J impactbestendig), doorstekbescherming (11kN druk) en antistatische eigenschappen. Voor werk met chemicaliën is chemische bestendigheid van de materialen essentieel.",
                    "Zoolkenmerken zijn eveneens belangrijk: antislip (SRC voor de hoogste grip), olierepellent (SR) en schoenlaceerbestendig. Phoenix Metals vereist vaak SRC-zolen vanwege combinaties van natte en droge oppervlakken.",
                    "Het juiste onderhoud verlengt de levensduur: regelmatig reinigen, inspecteren op schade en tijdig vervangen van versleten delen. Beschadigde schoenen bieden onvoldoende bescherming tegen vallende voorwerpen en chemicaliën.",
                ],
                fact: "In de Europese Unie moeten veiligheidsschoenen voldoen aan de CE-markering conform EN ISO 20345 sinds 1995. Dit is wettelijk verplicht voor alle werkplekken met risico's op voetletsel.",
                practice: "Inspecteer uw eigen veiligheidsschoenen: Voldoen ze aan de EN ISO 20345 norm voor uw specifieke werkzaamheden? Zijn ze in goede staat en geschikt voor de omgeving?",
                question: "Wat is de belangrijkste functie van de 'stootneus' in veiligheidsschoenen volgens EN ISO 20345?",
                options: [
                    "Bescherming tegen natte oppervlakken",
                    "Impactbestendigheid van de neus (200J)",
                    "Chemische bestendigheid",
                    "Antislip eigenschappen"
                ],
                correct: 1
            },
            {
                title: "Handschoenen EN 374 chemisch/EN 388 mechanisch",
                paragraphs: [
                    "Handschoenen zijn een van de meest gebruikte PBM bij Phoenix Metals vanwege het constante contact met gevaarlijke stoffen zoals V₂O₅, H₂SO₄ en NaOH. De juiste keuze is crucia voor effectieve bescherming.",
                    "EN 374 specificeert de prestaties van handschoenen tegen chemische en microbiologische risico's. De norm dekt doorlaat tijd bij chemische blootstelling, permeatie en doorboring door micro-organismen.",
                    "Chemische bestendigheid wordt gemeten door de tijd tot permeatie: Klasse 1 (>30 min), Klasse 2 (>60 min) en Klasse 3 (>120 min). Bij Phoenix Metals is vaak minimaal klasse 1 vereist voor chemicaliën.",
                    "EN 388 richt zich op mechanische risico's: snijbestendigheid (A-F), doorstekbestendigheid (1-4), slijtagebestendigheid en snijweerstand. Combinatie met chemische bescherming is vaak nodig bij handelingen met materialen.",
                    "Keuze en gebruik vereisen zorgvuldige overweging: materiaalcompatibiliteit, handschoendikte, lengte, compatibiliteit met andere PBM en de noodzaak van training voor correct gebruik en inspectie.",
                ],
                fact: "Handschoenen moeten worden getest onder de juiste omstandigheden, inclusief de juiste concentratie van chemicaliën en contactduur. Een handschoen die bestand is tegen verdunde zuur, is niet per se bestand tegen geconcentreerd zuur.",
                practice: "Controleer de chemische compatibiliteit van uw handschoenen met de stoffen waarmee u werkt. Test de pasvorm en inspecteer handschoenen vóór elk gebruik op schade.",
                question: "Wat meet EN 374 specifiek voor handschoenen?",
                options: [
                    "Alleen mechanische slijtage",
                    "Alleen bacteriële doorlaat",
                    "Chemische permeatie en microbiologische bescherming",
                    "Alleen warmtebestendigheid"
                ],
                correct: 2
            },
            {
                title: "Gehoorbescherming EN 352 otoplastiek/kaps",
                paragraphs: [
                    "Gehoorbescherming is verplicht bij blootstelling aan geluidsniveaus boven de 85 dB(A) bij Phoenix Metals, met name bij productieapparatuur, compressoren en bij het verwerken van metalen slakken.",
                    "EN 352 is de Europese norm voor gehoorbescherming met twee hoofdcategorien: otoplastieken (in-ear) en oorkappen (over-ear). Beide moeten voldoen aan minimumeisen voor effectiviteit en gebruikerscomfort.",
                    "Effectiviteit wordt gemeten als降噪 (SNR - Single Number Rating). Een SNR van 27 dB betekent dat de blootstelling met die hoeveelheid wordt verminderd. Bij Phoenix Metals zijn vaak SNR waarden tussen 20-30 dB afhankelijk van de omgeving.",
                    "Keuze hangt af van verschillende factoren: werkzaamheidstype (communicatie nodig?), omgevingscondities (hitte, vocht), compatibiliteit met andere PBM en persoonlijke voorkeur voor comfort en draagtijd.",
                    "Correct gebruik is essentieel: otoplastieken moeten correct in het oor worden geplaatst, oorkappen moeten goed sluiten zonder drukpunten, en beide moeten regelmatig worden gecontroleerd op schade en functionele werking.",
                ],
                fact: "Gehoorschade is permanent en onomkeerbaar. Eénmalige blootstelling aan zeer hoge geluidsniveaus (>120 dB) kan al leiden tot blijvende gehoorschade, zelfs met directe gehoorbescherming.",
                practice: "Meet het geluidsniveau op uw werkplek en vergelijk met de beschermingsniveaus van uw gehoorbescherming. Test verschillende soorten om de beste combinatie van bescherming en comfort te vinden.",
                question: "Wat meet de SNR-waarde bij gehoorbescherming volgens EN 352?",
                options: [
                    "Het absolute decibelniveau",
                    "De vermindering van blootstelling in decibels",
                    "De draagtijd in uren",
                    "De filterefficiëntie"
                ],
                correct: 1
            },
            {
                title: "Adembescherming EN 14387 FFP2/FFP3 halfmaskers, V₂O₅=FFP3",
                paragraphs: [
                    "Adembescherming is cruciaal bij Phoenix Metals voor bescherming tegen stoffen als V₂O₅, metalen oxides en andere respiratoire gevaren. De juiste keuring hangt af van de aerosolconcentratie en toxiciteit.",
                    "EN 14387 specificeert eisen voor ademhalingsbeschermingsapparatuur met filtering halfmaskers. De classificatie FFP1, FFP2 en FFP3 geeft de filterefficiëntie aan: FFP1 (80%), FFP2 (94%) en FFP3 (99%).",
                    "V₂O₅ (vanadiumpentoxide) vereist FFP3 bescherming vanwege de carcinogene eigenschappen en de mogelijkheid tot accumulatie in de longen. De fijndeeltjes kunnen diep in de longen doordringen en gezondheidseffecten veroorzaken.",
                    "Keuring omvat fit testing om de juiste pasvorm te garanderen: positieve en negatieve druktests. Een goede pasvorm is essentieel omdat lekkage de bescherming volledig tenietdoet, vooral bij werken met zeer gevaarlijke stoffen.",
                    "Onderhoud en vervanging zijn belangrijk: filters hebben een beperkte levensduur afhankelijk van de concentratie en blootstellingstijd. Maskers moeten worden schoongemaakt en regelmatig worden geïnspecteerd op beschadigingen.",
                ],
                fact: "Volgens de Arbowet moet werkgevers een Risico-inventarisatie & Evaluatie (RI&E) uitvoeren om de noodzaak van adembescherming te bepalen. Voor V₂O₅ is FFP3 verplicht bij blootstelling boven 0,1 mg/m³.",
                practice: "Voer een fit test voor uw ademhalingsmasker. Test de afdichting en filtercapaciteit onder werkomstandigheden. Documenteer de resultaten en stel vervangingschema's voor filters op.",
                question: "Welke adembescherming is verplicht voor V₂O₅ volgens EN 14387?",
                options: [
                    "FFP1 voldoende voor stofbescherming",
                    "FFP2 voor gemiddelde blootstelling",
                    "FFP3 vanwege de carcinogene eigenschappen",
                    "Geen adembescherming nodig bij lage concentraties"
                ],
                correct: 2
            },
            {
                title: "Beschermende kleding EN 13034 Type 5/6",
                paragraphs: [
                    "Beschermende kleding is essentieel bij Phoenix Metals voor bescherming tegen chemicaliën zoals H₂O₄, NaOH en V₂O₅. EN 13034 specificeert eisen voor beschermende kleding tegen vloeibare chemicaliën.",
                    "Type 5 beschermt tegen stofdeeltjes (bijvoorbeeld V₂O₅ stof), terwijl Type 6 beschermt tegen vloeibare aerosolen (zoals spatten van chemicaliën). Phoenix Metals vereist vaak combinatiebescherming vanwege de verschillende risico's.",
                    "Keuzecriteria omvatten chemische compatibiliteit, de concentratie van de stof, contacttijd en de noodzaak van ademhalingsbescherming. Materialen zoals PVC, neopreen en Tyvek® worden gebruikt voor verschillende toepassingen.",
                    "Draagcomfort is belangrijk voor compliance: te strakke kleding wordt niet goed gedragen, wat leidt tot blootstelling. Ventilatie, gewicht en bewegingsvrijheid bepalen de draagtijd en effectiviteit.",
                    "Inspectie en onderhoud verhogen de levensduur: na elk gebruik controleren op scheuren, gaten en chemische degradatie. Besmeurde kleding moet onmiddellijk worden verwijderd en schoongemaakt volgens procedures.",
                ],
                fact: "Beschermende kleding moet worden getest onder de specifieke omstandigheden van gebruik. EenOverall die bestand is tegen verdunde zuur, biedt geen bescherming tegen geconcentreerde zuren of chemicaliën bij hogere temperaturen.",
                practice: "Controleer de chemische compatibiliteit van uw beschermende kleding met de specifieke chemicaliën op uw werkplek. Test de pasvorm en comfort tijdens volledige werkzaamheden.",
                question: "Wat is het belangrijkste verschil tussen Type 5 en Type 6 beschermende kleding volgens EN 13034?",
                options: [
                    "Alleen de kleur verschilt",
                    "Type 5 voor stof, Type 6 voor vloeibare aerosolen",
                    "Type 5 voor chemicaliën, Type 6 voor hitte",
                    "Type 5 voor dagelijks gebruik, Type 6 voor noodgevallen"
                ],
                correct: 1
            },
            {
                title: "Correct aantrekken/uitrekken protocol volgorde",
                paragraphs: [
                    "Het correct aantrekken en uitrekken van PBM is een kritische procedure die de effectiviteit van de bescherming garandeert. Een verkeerde volgorde kan leiden tot blootstelling en verhoogde risico's.",
                    "Aantrekken volgt een logische volgorde: van boven naar beneden en van binnen naar buiten. Begin met ondergoed, gevolgd door beschermende kleding, adembescherming, gehoorbescherming en tot slot handen- en oogbescherming.",
                    "Uitrekken volgt de omgekeerde volgorde: van buiten naar binnen en van beneden naar boven. Begin met handschoenen (zonder de buitenkant aan te raken), gevolgd door adembescherming, beschermende kleding, en tot slot overige PBM.",
                    "Hygiëne procedures zijn essentieel: vóór het aan- en afzetten van PBM moeten handen worden gewassen. Na het afzetten van chemische PBM moeten handen worden gereinigd en gecontroleerd op contaminatie.",
                    "Training en oefening verhogen de effectiviteit: regelmatige oefensessies zorgen voor snelle en correcte toepassing, wat vooral belangrijk is bij noodsituaties en evacuaties waar snelle bescherming nodig is.",
                ],
                fact: "Volgens de Arbowet moeten werkgevers instructies geven over het correct gebruik van PBM. Instructies moeten schriftelijk zijn, toegankelijk en regelmatig worden herhaald.",
                practice: "Oefen het aantrekken en uitrekken van uw PBM volgens het protocol. Neem op waar de volgorde goed ging en waar verbetering nodig is. Deel ervaringen met collega's.",
                question: "Wat is de juiste volgorde voor het aantrekken van PBM?",
                options: [
                    "Handschoenen → adembescherming → beschermende kleding → andere PBM",
                    "Ondergoed → beschermende kleding → adembescherming → gehoor- en oogbescherming → handen",
                    "Oogbescherming → gehoorbescherming → adembescherming → beschermende kleding → handschoenen",
                    "Adembescherming → beschermende kleding → gehoorbescherming → handen → oogbescherming"
                ],
                correct: 1
            },
            {
                title: "PBM-matrix per taak bij Phoenix Metals",
                paragraphs: [
                    "Een PBM-matrix is een essentieel instrument dat de vereiste PBM toewijst aan specifieke werkzaamheden en risico's. Bij Phoenix Metals wordt deze matrix gebruikt om uniforme beschermingsnormen te handhaven.",
                    "De matrix categoriseert werkzaamheden op basis van de geïdentificeerde risico's: chemische blootstelling (V₂O₅, H₂SO₄, NaOH), mechanische gevaren, thermische risico's, geluid en stof. Elke categorie heeft specifieke PBM-eisen.",
                    "Voor chemische taken omvat de matrix bijvoorbeeld: FFP3 maskers voor V₂O₅ werkzaamheden, chemische handschoenen EN 374 voor zuren, beschermende kleding EN 13034 Type 6, en veiligheidsbrillen voor oogbescherming.",
                    "Regelmatige reviews zijn cruciaal: nieuwe processen, wijzigingen in chemicaliën of apparatuur vereisen aanpassingen aan de matrix. Phoenix Metals update de matrix minimaal jaarlijks en na incidenten.",
                    "Toegankelijkheid en training zorgen voor implementatie: de matrix moet beschikbaar zijn op de werkplek en onderdeel zijn van industrainingen en periodieke herhalingstrainingen voor alle medewerkers.",
                ],
                fact: "Een goed ontworpen PBM-matrix voldoet aan de Arbo-wet art. 11 en specifieke sectorale voorschriften. Het is een essentieel onderdeel van het RI&E-proces en moet worden gecontroleerd bij inspecties.",
                practice: "Raadpleeg de PBM-matrix voor uw specifieke werkzaamheden. Vergelijk met de werkelijkheid: is de bescherming adequate? Meld discrepantie of verbeterpunten aan uw leidinggevende.",
                question: "Waarom is een PBM-matrix belangrijk bij Phoenix Metals?",
                options: [
                    "Alleen voor administratieve doeleinden",
                    "Om uniforme bescherming voor specifieke taken te garanderen",
                    "Om de kosten van PBM te minimaliseren",
                    "Alleen voor externe audits"
                ],
                correct: 1
            },
            {
                title: "Onderhoud/vervanging/inspectie PBM",
                paragraphs: [
                    "Regelmatig onderhoud, tijdige vervanging en rigoureuze inspectie van PBM zijn crucia voor het waarborgen van de beschermingscapaciteit. Versleten of beschadigde PBM bieden geen adequate bescherming.",
                    "Inspectieprotocollen vereisen dagelijkse controle voor gebruik: scheuren, gaten, slijtage, vervorming en functionaliteit moeten worden gecontroleerd. Voor adembescherming omvat dit ook filtercontrole en afdichting.",
                    "Onderhoud omvat schoonmaken volgens fabrikantspecificaties, opslag op droge schone plaatsen, en bescherming tegen UV-straling en chemicaliën. Beschadigde PBM moeten onmiddellijk worden vervangen.",
                    "Vervangingsschema's zijn gebaseerd op gebruiksduur, omgevingsfactoren en fabrikantspecificaties. Handschoenen moeten bijvoorbeeld vaker worden verv dan kleding, en filters hebben een beperkte levensduur.",
                    "Documentatie van controles en vervangingen is wettelijk verplicht en essentieel voor tracebaarheid. Phoenix Metals houdt records bij van PBM-gebruik, inspecties en vervangingen voor compliance en analyses.",
                ],
                fact: "Volgens de PBM-richtlijnen (EU 2016/425) moeten fabrikanten gebruikersinstructies meegeven voor onderhoud en inspectie. Werkgevers moeten deze instructies opvolgen en documenteren.",
                practice: "Maak een inspectielijst voor uw eigen PBM. Documenteer bevindingen en plan vervangingen. Train collega's in het herkennen van beschadigingen en het melden van problemen.",
                question: "Wat is het belangrijkste doel van dagelijkse inspectie van PBM?",
                options: [
                    "Zorgen voor esthetisch uiterlijk",
                    "Controleren op beschadigingen en functionele werking",
                    "Minimaliseren van de aanschafkosten",
                    "Voldoen aan administratieve vereisten"
                ],
                correct: 1
            }
        ];

        // Quiz vragen
        const quizQuestions = [
            {
                question: "Wat is de volgorde in de PBM-hiërarchie, van meest effectief naar minst effectief?",
                options: [
                    "PBM → organisatorisch → technisch → substitutie → eliminatie",
                    "Eliminatie → substitutie → technisch → organisatorisch → PBM",
                    "Organisatorisch → technisch → substitutie → PBM → eliminatie",
                    "Substitutie → eliminatie → PBM → technisch → organisatorisch"
                ],
                correct: 1
            },
            {
                question: "Wat betekent de 'D' markering bij een EN 166 veiligheidsbril?",
                options: [
                    "Hoog temperatuurbestendig tot 150°C",
                    "Chemisch bestendig voor vloeistoffen",
                    "Anti-condens coating",
                    "Ultraviolette straling blokkerend"
                ],
                correct: 1
            },
            {
                question: "Wat is de belangrijkste functie van de 'stootneus' in veiligheidsschoenen volgens EN ISO 20345?",
                options: [
                    "Bescherming tegen natte oppervlakken",
                    "Impactbestendigheid van de neus (200J)",
                    "Chemische bestendigheid",
                    "Antislip eigenschappen"
                ],
                correct: 1
            },
            {
                question: "Wat meet EN 374 specifiek voor handschoenen?",
                options: [
                    "Alleen mechanische slijtage",
                    "Alleen bacteriële doorlaat",
                    "Chemische permeatie en microbiologische bescherming",
                    "Alleen warmtebestendigheid"
                ],
                correct: 2
            },
            {
                question: "Wat meet de SNR-waarde bij gehoorbescherming volgens EN 352?",
                options: [
                    "Het absolute decibelniveau",
                    "De vermindering van blootstelling in decibels",
                    "De draagtijd in uren",
                    "De filterefficiëntie"
                ],
                correct: 1
            },
            {
                question: "Welke adembescherming is verplicht voor V₂O₅ volgens EN 14387?",
                options: [
                    "FFP1 voldoende voor stofbescherming",
                    "FFP2 voor gemiddelde blootstelling",
                    "FFP3 vanwege de carcinogene eigenschappen",
                    "Geen adembescherming nodig bij lage concentraties"
                ],
                correct: 2
            },
            {
                question: "Wat is het belangrijkste verschil tussen Type 5 en Type 6 beschermende kleding volgens EN 13034?",
                options: [
                    "Alleen de kleur verschilt",
                    "Type 5 voor stof, Type 6 voor vloeibare aerosolen",
                    "Type 5 voor chemicaliën, Type 6 voor hitte",
                    "Type 5 voor dagelijks gebruik, Type 6 voor noodgevallen"
                ],
                correct: 1
            },
            {
                question: "Wat is de juiste volgorde voor het aantrekken van PBM?",
                options: [
                    "Handschoenen → adembescherming → beschermende kleding → andere PBM",
                    "Ondergoed → beschermende kleding → adembescherming → gehoor- en oogbescherming → handen",
                    "Oogbescherming → gehoorbescherming → adembescherming → beschermende kleding → handschoenen",
                    "Adembescherming → beschermende kleding → gehoorbescherming → handen → oogbescherming"
                ],
                correct: 1
            },
            {
                question: "Waarom is een PBM-matrix belangrijk bij Phoenix Metals?",
                options: [
                    "Alleen voor administratieve doeleinden",
                    "Om uniforme bescherming voor specifieke taken te garanderen",
                    "Om de kosten van PBM te minimaliseren",
                    "Alleen voor externe audits"
                ],
                correct: 1
            },
            {
                question: "Wat is het belangrijkste doel van dagelijkse inspectie van PBM?",
                options: [
                    "Zorgen voor esthetisch uiterlijk",
                    "Controleren op beschadigingen en functionele werking",
                    "Minimaliseren van de aanschafkosten",
                    "Voldoen aan administratieve vereisten"
                ],
                correct: 1
            }
        ];

        // Functies voor module interactie
        function initModules() {
            const modulesContainer = document.getElementById('modules');
            
            modules.forEach((module, index) => {
                const moduleDiv = document.createElement('div');
                moduleDiv.className = 'module';
                moduleDiv.innerHTML = `
                    <h2>Module ${index + 1}: ${module.title}</h2>
                    ${module.paragraphs.map(p => `<p class="paragraph">${p}</p>`).join('')}
                    
                    <div class="info-box">
                        <h3>📖 Wist je dat?</h3>
                        <p>${module.fact}</p>
                    </div>
                    
                    <div class="practice-box">
                        <h3>🏭 Phoenix Metals Praktijk</h3>
                        <p>${module.practice}</p>
                    </div>
                    
                    <div class="question">
                        <h3>Controlevraag</h3>
                        <p><strong>${module.question}</strong></p>
                        <div class="options">
                            ${module.options.map((option, optIndex) => `
                                <div class="option" onclick="selectOption(this, ${optIndex}, ${module.correct}, 'module-${index}')">
                                    ${String.fromCharCode(65 + optIndex)}. ${option}
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
                modulesContainer.appendChild(moduleDiv);
                
                // Update progress
                updateProgress(((index + 1) / totalModules) * 100);
            });

            // Voeg quiz knop toe
            const quizButton = document.createElement('div');
            quizButton.innerHTML = '<button class="button" onclick="showQuiz()">Quiz Voltooien</button>';
            modulesContainer.appendChild(quizButton);
        }

        function updateProgress(percent) {
            document.getElementById('progress').style.width = percent + '%';
            currentProgress = percent;
        }

        function selectOption(element, selectedIndex, correctIndex, moduleId) {
            // Reset alle opties
            const options = element.parentElement.querySelectorAll('.option');
            options.forEach(opt => {
                opt.classList.remove('selected', 'correct', 'incorrect');
            });
            
            // Markeer geselecteerde optie
            element.classList.add('selected');
            
            // Toon correct/incorrect na een korte tijd
            setTimeout(() => {
                if (selectedIndex === correctIndex) {
                    element.classList.add('correct');
                } else {
                    element.classList.add('incorrect');
                    // Markeer ook de correcte optie
                    options[correctIndex].classList.add('correct');
                }
                
                // Disable alle opties
                options.forEach(opt => {
                    opt.style.pointerEvents = 'none';
                });
            }, 300);
        }

        function showQuiz() {
            document.getElementById('modules').classList.add('hidden');
            document.getElementById('quiz-container').classList.remove('hidden');
            updateProgress(100);
            initQuiz();
        }

        function initQuiz() {
            const quizQuestionsContainer = document.getElementById('quiz-questions');
            
            quizQuestions.forEach((q, index) => {
                const questionDiv = document.createElement('div');
                questionDiv.className = 'question';
                questionDiv.innerHTML = `
                    <h3>Vraag ${index + 1}: ${q.question}</h3>
                    <div class="options">
                        ${q.options.map((option, optIndex) => `
                            <div class="option quiz-option" onclick="selectQuizOption(this, ${optIndex}, ${q.correct}, 'q-${index}')">
                                ${String.fromCharCode(65 + optIndex)}. ${option}
                            </div>
                        `).join('')}
                    </div>
                `;
                quizQuestionsContainer.appendChild(questionDiv);
            });
        }

        function selectQuizOption(element, selectedIndex, correctIndex, questionId) {
            // Reset alle opties voor deze vraag
            const questionElement = element.closest('.question');
            const options = questionElement.querySelectorAll('.option');
            
            options.forEach(opt => {
                opt.classList.remove('selected', 'correct', 'incorrect');
                opt.style.pointerEvents = 'none';
            });
            
            // Markeer geselecteerde optie
            element.classList.add('selected');
            
            // Toon correct/incorrect
            if (selectedIndex === correctIndex) {
                element.classList.add('correct');
                correctAnswers++;
            } else {
                element.classList.add('incorrect');
                // Markeer ook de correcte optie
                options[correctIndex].classList.add('correct');
            }
        }

        function checkQuiz() {
            const percentage = (correctAnswers / totalQuestions) * 100;
            const message = percentage >= 80 ? 
                `Gefeliciteerd! U heeft ${correctAnswers}/${totalQuestions} vragen correct beantwoord (${percentage.toFixed(1)}%).` :
                `Helaas heeft u ${correctAnswers}/${totalQuestions} vragen correct beantwoord (${percentage.toFixed(1)}%). De vereiste score van 80% is niet behaald.`;
            
            alert(message);
            
            // Toon juiste knoppen
            if (percentage >= 80) {
                document.getElementById('certificate-button').classList.remove('hidden');
            } else {
                document.getElementById('retry-button').classList.remove('hidden');
            }
        }

        function resetQuiz() {
            // Reset quiz
            document.getElementById('quiz-questions').innerHTML = '';
            document.getElementById('retry-button').classList.add('hidden');
            document.getElementById('certificate-button').classList.add('hidden');
            correctAnswers = 0;
            initQuiz();
        }

        function showCertificate() {
            document.getElementById('quiz-container').classList.add('hidden');
            document.getElementById('certificate').classList.remove('hidden');
        }

        // Initialize when page loads
        window.onload = function() {
            initModules();
        };
    </script>
</body>
</html>"""

def generate_html():
    # Maak de output directory aan als deze niet bestaat
    os.makedirs('/root/projects/jg/2026-PM-eLearning/deliverables', exist_ok=True)
    
    # Genereer de HTML file
    output_path = '/root/projects/jg/2026-PM-eLearning/deliverables/PM_EL_T12_PBM_Beleid_en_Gebruik_eLearning_v1.1.html'
    with open(output_path, 'w', encoding='utf-8') as f:
        f.write(HTML_TEMPLATE)
    
    # Controleer de bestandsgrootte
    file_size = os.path.getsize(output_path)
    print(f"T12 HTML gegenereerd: {output_path}")
    print(f"Bestandsgrootte: {file_size} bytes ({file_size/1024:.1f} KB)")
    
    return output_path, file_size

if __name__ == "__main__":
    output_path, file_size = generate_html()
    print(f"Succesvol voltooid! Bestandsgrootte: {file_size} bytes")