#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Genereert T11 Permit to Work 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 - T11: Permit to Work</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;
        }
        .step-container {
            margin: 20px 0;
        }
        .step {
            background-color: #f8f9fa;
            border-left: 4px solid var(--accent);
            padding: 15px;
            margin: 10px 0;
            border-radius: 0 5px 5px 0;
        }
        .step h4 {
            color: var(--secondary);
            margin-bottom: 10px;
        }
        .step-list {
            list-style: none;
            padding-left: 0;
        }
        .step-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .step-list li:last-child {
            border-bottom: none;
        }
        .flow-chart {
            display: flex;
            justify-content: space-between;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        .flow-item {
            background-color: white;
            border: 2px solid var(--accent);
            padding: 15px;
            text-align: center;
            border-radius: 10px;
            flex: 1;
            min-width: 150px;
            margin: 5px;
            position: relative;
        }
        .flow-item:not(:last-child):after {
            content: "→";
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
            font-size: 24px;
        }
        .checklist {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        .checklist ul {
            list-style-type: none;
            padding-left: 0;
        }
        .checklist li {
            padding: 8px 0;
            display: flex;
            align-items: center;
        }
        .checklist li:before {
            content: "✓";
            color: var(--correct);
            font-weight: bold;
            margin-right: 10px;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        .warning {
            background-color: #f8d7da;
            color: #721c24;
            padding: 15px;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            margin: 15px 0;
        }
        .warning h3 {
            color: #721c24;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="progress-bar">
        <div class="progress" id="progress"></div>
    </div>
    
    <header>
        <h1>Phoenix Metals B.V. - T11: Permit to Work</h1>
        <p>Training Permit to Work PtW/TRA/LOTO/LMRA (TR-303-02)</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="chart-container">
                <div id="quiz-questions">
                    <!-- Quiz vragen komen hier -->
                </div>
            </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>Permit to Work PtW/TRA/LOTO/LMRA</strong> met succes heeft afgerond.</p>
            <p><strong>Deelnemer:</strong> _________________________</p>
            <p><strong>Bedrijf:</strong> Phoenix Metals B.V.</p>
            <p><strong>Training:</strong> T11: Permit to Work PtW/TRA/LOTO/LMRA (TR-303-02)</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: "Introductie Permit to Work",
                paragraphs: [
                    "Permit to Work (PtW) is een systeem dat veiligheid garandeert bij hoog-risico werkzaamheden in industriële omgevingen zoals Phoenix Metals. Het systeem stelt strikte procedures vast die ervoor zorgen dat werkzaamheden alleen worden uitgevoerd na adequate voorbereiding en goedkeuring.",
                    "Het PtW-systeem is ontworpen om ongevallen te voorkomen die kunnen ontstaan bij niet-gepland onderhoud, inspecties, reparaties of andere werkzaamheden die gevaarlijk zijn voor werknemers, apparatuur of het milieu.",
                    "Op de Phoenix Metals locaties in IJmuiden en Rotterdam wordt PtW toegepast voor werkzaamheden zoals onderhoud aan high-voltage systemen, tankreiniging, thermische snijwerkzaamheden, en bij het werken met gevaarlijke stoffen zoals V₂O₅.",
                    "Het systeem bestaat uit zes hoofdpermit types: hot work, cold work, confined space entry, electrical work, lifting operations, en energy isolation. Elk type permit heeft specifieke eisen en procedures.",
                    "Een succesvol PtW-systeem vereist commitment van alle betrokken partijen: aanvragers, goedkeurders, uitvoerders en ondersteunend personeel. Elke persoon heeft duidelijke verantwoordelijkheden en taken."
                ],
                fact: "Onderzoek toont aan dat bedrijven met effectieve Permit to Work systemen tot 80% minder ongevallen ervaren bij hoog-risico werkzaamheden.",
                practice: "Identificeer de werkzaamheden op de Phoenix Metals locatie die een PtW vereisen. Welke werkzaamheden worden momenteel uitgevoerd zonder permit?",
                question: "Wat is het hoofddoel van een Permit to Work systeem?",
                options: [
                    "Versnellen van werkzaamheden",
                    "Documentatie administratie",
                    "Verhogen van de productiviteit",
                    "Voorkomen van ongevallen bij hoog-risico werkzaamheden"
                ],
                correct: 3
            }},
            {{
                title: "Zes types PtW Permits",
                paragraphs: [
                    "Phoenix Metals maakt gebruik van zes verschillende types permits die elk zijn ontworpen voor specifieke categorieën hoog-risico werkzaamheden. Elk permit type heeft unieke eisen en procedures die zijn afgestemd op de bijbehorende risico's.",
                    "Hot Work Permits zijn vereist voor werkzaamheden waarbij vonken, vlammen of warmte gegenereerd wordt, zoals laswerk, slijpen, snijden of heet werken. Deze werkzaamheden brandgevaar veroorzaken en vereiden extra voorzorgsmaatregelen.",
                    "Cold Work Permits zijn voor werkzaamheden zonder significante warmteproductie, zoals bouwwerkzaamheden, installaties en mechanisch onderhoud. Hoewel minder risicovol, vereisen deze vaak nog steeds speciale voorzorgsmaatregelen.",
                    "Confined Space Entry Permits zijn nodig voor het betreden van beperkte ruimtes zoals tanks, silo's of pijpleidingen waar onvoldoende ventilatie of gevaarlijke atmosfeer mogelijk is.",
                    "Electrical Work Permits vereisen extra voorzorgsmaatregelen bij werk aan elektrische systemen, inclusief proper lock-out/tag-out procedures en veiligheidschecks om elektrische schokken te voorkomen."
                ],
                fact: "Volgens de Nederlandse Arbowet moeten bedrijven een schriftelijk systeem voor Permit to Work hebben voor risicovolle werkzaamheden. De specifieke eisen zijn vastgelegd in de Arbocatalogus.",
                practice: "Classificeer de volgende werkzaamheden bij Phoenix Metals: 1) lassen op een tank met residuen, 2) vervangen van een pomp, 3) betreden van een silo voor inspectie, 4) onderhoud aan 1000V elektrische kabels.",
                question: "Welk permit type is vereist voor laswerk op een chemische tank?",
                options: [
                    "Cold Work Permit",
                    "Hot Work Permit",
                    "Confined Space Entry Permit",
                    "Electrical Work Permit"
                ],
                correct: 1
            }},
            {{
                title: "TRA formulier: Stap-voor-stap",
                paragraphs: [
                    "De Taak Risico Analyse (TRA) is een essentieel onderdeel van het PtW-systeem en wordt uitgevoerd vóórdat een permit wordt aangevraagd. De TRA identificeert de specifieke risico's bij een taak en bepaalt de juiste beheersmaatregelen.",
                    "Stap 1: Identificatie van de taak. Definieer precies wat er gedaan moet worden, inclusief locatie, tijdsduur, benodigde middelen en het team dat de werkzaamheden uitvoert. Bijvoorbeeld: 'Onderhoud pomp P-101 in Unit A'.",
                    "Stap 2: Risicoanalyse. Identificeer alle mogelijke gevaarden die kunnen optreden bij de taak, zoals vallen, elektrische schokken, chemicaliënblootstelling, brand, explosie, etc. Gebruik methoden zoals What If of HAZOP.",
                    "Stap 3: Beheersmaatregelen. Bepaal welke maatregelen nodig zijn om de gevaarden te beheersen. Volg de hiërarchie van beheersmaatregelen: eliminatie, substitutie, technische maatregelen, administratieve maatregelen en ten slotte PBM.",
                    "Stap 4: Verificatie. Controleer of alle maatregelen getroffen zijn en de taak veilig kan worden uitgevoerd. Stap 5: Goedkeuring door een bevoegd persoon (vaak een supervisor of veiligheidsfunctionaris)."
                ],
                fact: "Een goede TRA kan 60-70% van de mogelijke incidenten voorkomen door proactieve identificatie van risico's en implementatie van geschikte beheersmaatregelen.",
                practice: "Maak een TRA voor het onderhouden van een pomp die V₂O₅ verwerkt. Identificeer de specifieke risico's en benodigde beheersmaatregelen voor deze taak.",
                question: "Wat is het doel van stap 2 in de TRA procedure?",
                options: [
                    "Task uitvoeren",
                    "Risico's identificeren",
                    "Maatregelen implementeren",
                    "Resultaten evalueren"
                ],
                correct: 1
            }},
            {{
                title: "LOTO procedure: 8 stappen",
                paragraphs: [
                    "Lockout/Tagout (LOTO) is een kritische procedure om werknemers te beschermen tegen onbedoelde energie-activatie tijdens onderhoud of reparatie. Bij Phoenix Metals wordt een strikte 8-stappen LOTO procedure gevolgd.",
                    "Stap 1: Voorbereiding. Het onderhoudsteam identificeert alle energiebronnen die geïsoleerd moeten worden: elektrisch, pneumatisch, hydraulisch, thermisch, chemisch en mechanisch. Maak een inventarisatie van alle energiebronnen.",
                    "Stap 2: Informeer betrokkenen. Communiceer de LOTO procedure aan alle werknemers die worden beïnvloed door het onderhoud, inclusief operators, onderhoudspersoneel en supervisors.",
                    "Stap 3: Machine/Installatie uitschakelen. Schakel de machine of installatie volgens normale procedures uit en wacht tot alle bewegende onderdelen stil zijn gestaan.",
                    "Stap 4: Energiebronnen isoleren. Physiek isoleer alle energiebronnen door het sluiten van kleppen, onderbrekers of andere beveiligingen. Verwijder onderdelen die energie kunnen opslaan zoals gespannen veren."
                ],
                fact: "Volgens OSHA is onjuiste of ontbrekende LOTO verantwoordelijk voor ongeveer 10% van de industriële ongevallen wereldwijd.",
                practice: "Identificeer alle energiebronnen bij een machine die V₂O₅ verwerkt. Wat zijn de specifieke risico's als de LOTO procedure niet correct wordt gevolgd?",
                question: "Wat is het belangrijkste doel van de LOTO procedure?",
                options: [
                    "Versnellen van onderhoudswerkzaamheden",
                    "Documentatie van werkzaamheden",
                    "Voorkomen van onbedoelde energie-activatie",
                    "Verhogen van de productie efficiëntie"
                ],
                correct: 2
            }},
            {{
                title: "LOTO vervolgstappen",
                paragraphs: [
                    "Stap 5: Sloten en tags aanbrengen. Breng persoonlijke sloten aan op alle geïsoleerde energiebronnen. Elk slot heeft een unieke tag met de naam van de werknemer en contactgegevens. Gebruik meerdere sloten bij teamwerk.",
                    "Stap 6: Energie residualen afvoeren. Controleer of er nog energie aanwezig is in de installatie. Bij pneumatische systemen laat lucht ontsnappen, bij elektrische systemen test spanning, bij hydraulische systemen laat druk af.",
                    "Stap 7: Verificatie. Test de machine om zeker te zijn dat deze volledig veilig is. Probeer de machine te activeren vanuit verschillende bedieningsposities. De machine moet niet reageren.",
                    "Stap 8: Start werkzaamheden. Pas nadat alle bovenstaande stappen succesvol zijn voltooid, mogen werkzaamheden beginnen. Alle medewerkers moeten op de hoogte zijn van de LOTO-status en de procedures.",
                    "Na voltooiing van werkzaamheden volgt een reverse procedure: werkzaamheden controleren, LOTO verwijderen, energie herstellen en functionele test uitvoeren. Deze procedure vereist dezelfde zorgvuldigheid als de oorspronkelijke LOTO."
                ],
                fact: "Een typisch industrieel verlies van €500.000 per ongeluk met energie-activatie. Goede LOTO procedures zijn dus niet alleen een veiligheidskwestie maar ook een financiële.",
                practice: "Maak een checklist voor het verwijderen van L-sloten na voltooiing van onderhoud aan een tank met V₂O₅. Welke stappen zijn extra belangrijk vanwege de gevaarlijke eigenschappen?",
                question: "Welke stap komt onmiddellijk na het aanbrengen van sloten en tags in de LOTO procedure?",
                options: [
                    "Machine testen",
                    "Energie residualen afvoeren",
                    "Werkzaamheden starten",
                    "Nieuwe energiebronnen identificeren"
                ],
                correct: 1
            }},
            {{
                title: "LMRA voorinspectie",
                paragraphs: [
                    "Last Minute Risk Assessment (LMRA) is een snelle evaluatie die vlak vóór het starten van werkzaamheden plaatsvindt. Bij Phoenix Metals wordt een LMRA uitgevoerd voor elk PtW om te controleren of de situatie nog steeds veilig is.",
                    "De LMRA bestaat uit vijf kernvragen die gericht zijn op risico's die kunnen zijn ontstaan sinds de oorspronkelijke TRA: 1) Zijn er nieuwe risico's ontstaan? 2) Is de omgeving veranderd? 3) Zijn de beheersmaatregelen nog effectief? 4) Is het team volledig paraat? 5) Is communicatie adequaat?",
                    "LMRA's worden uitgevoerd door de aanvrager van het permit in samenwerking met de uitvoerders. Het is een snelle, informele check die 5-10 minuten in beslag neemt maar cruciaal is voor veiligheid.",
                    "Voorbeelden van situaties waarbij een LMRA kan leiden tot heroverweging: veranderingen in weersomstandigheden, wijzigingen in productieproces, nieuwe personeelsleden, of onverwachte technische problemen.",
                    "Als de LMRA onveilige situaties identificeert, moet de permit worden opgeschort of ingetrokken. Het werk mag pas hervatten nadat alle risico's zijn opgelost en nieuwe goedkeuring is verkregen."
                ],
                fact: "Onderzoek toont aan dat 60% van de incidenten tijdens werkzaamheden veroorzaakt wordt door ongeplande veranderingen in omstandigheden, wat precies is waar LMRA voor bedoeld is.",
                practice: "Voer een LMRA uit voor laswerk in een ruimte waar eerder een lekkage van zwavelzuur heeft plaatsgevonden. Welke specifieke risico's moet u controleren?",
                question: "Wat is het hoofddoel van een LMRA?",
                options: [
                    "Voldoen aan wettelijke verplichtingen",
                    "Snel controleren of situatie nog veilig is",
                    "Documentatie toevoegen aan het dossier",
                    "Training van nieuw personeel"
                ],
                correct: 1
            }},
            {{
                title: "Beheersmaatregelen hiërarchie",
                paragraphs: [
                    "De hiërarchie van beheersmaatregelen is een fundament van veiligheidsmanagement en wordt toegepast in elke TRA en LMRA bij Phoenix Metals. Deze hiërarchie bepaalt welke maatregelen prioriteit hebben bij risicobeheersing.",
                    "Eliminatie is de meest effectieve beheersmaatregel: volledig vermijden van het gevaarlijke aspect. Bijvoorbeeld: een taak uitstellen tot een gevaarlijke component is verwijderd of vervangen door een veilig alternatief.",
                    "Substitutie is de tweede beste optie: vervang een gevaarlijke methode of stof door een minder gevaarlijke alternatief. Bij Phoenix Metals: vervang V₂O₅ door een minder gevaarlijk alternatief waar mogelijk.",
                    "Technische maatregelen maken de taak veiliger door engineering oplossingen: installeren van ventilatie, automatische beveiligingen, lekdetectiesystemen, of modificatie van apparatuur om risico's te minimaliseren.",
                    "Administratieve maatregelen beperken blootstelling via procedures: trainingen, werk instructies, waarschuwingsborden, toegangscontroles, en tijdsrestricties voor blootstelling aan gevaarlijke stoffen."
                ],
                fact: "De hiërarchie van beheersmaatregelen is gebaseerd op het 'Safety by Design' principe en wordt wereldwijd erkend als de beste aanpak voor risicobeheersing.",
                practice: "Gebruik de hiërarchie om een risico te beheren bij het werken met geconcentreerde zwavelzuur. Welke maatregelen zou u overwegen in volgorde van effectiviteit?",
                question: "Wat is de meest effectieve beheersmaatregel volgens de hiërarchie?",
                options: [
                    "Persoonlijke beschermingsmiddelen (PBM)",
                    "Administratieve procedures",
                    "Technische oplossingen",
                    "Eliminatie van het gevaar"
                ],
                correct: 3
            }},
            {{
                title: "Rollen in het PtW systeem",
                paragraphs: [
                    "Een succesvol Permit to Work systeem vereist duidelijke roldefinities en verantwoordelijkheden. Bij Phoenix Metals worden vier primaire rollen onderscheiden: aanvrager, goedkeurder, uitvoerder en ondersteunend personeel.",
                    "De aanvrager (requester) is degene die de werkzaamheden uitvoert of leidt en verantwoordelijk is voor het aanvragen van de juiste permits, het uitvoeren van de TRA en LMRA, en het naleven van alle veiligheidsprocedures.",
                    "De goedkeurder (approver) is een ervaren manager of veiligheidsfunctionaris die verantwoordelijk is voor het evalueren van de TRA, het verifiëren van de veiligheidseisen, en het goedkeuren of afkeuren van de permit.",
                    "De uitvoerder (performer) is het team dat de daadwerkelijke werkzaamheden uitvoert onder supervisie van de aanvrager. Zij zijn verantwoordelijk voor het volgen van veiligheidsprocedures en het rapporteren van onveilige situaties.",
                    "Ondersteunend personeel (support) omvat HSEQ, medische dienst, facilitaire diensten en andere afdelingen die nodig zijn voor de uitvoering van de werkzaamheden, zoals gasdetectie, brandweer of technische ondersteuning."
                ],
                fact: "Nauwkeurige roldefinities kunnen 40% miscommunicatie en onduidelijkheid in het werkproces verminderen, wat leidt tot veiligere werkpraktijken.",
                practice: "Beschrijf de verantwoordelijkheden van elke rol bij onderhoud aan een tank met V₂O₅. Welke interacties zijn er tussen de verschillende rollen?",
                question: "Wie is primair verantwoordelijk voor het uitvoeren van de TRA?",
                options: [
                    "Goedkeurder",
                    "Uitvoerder",
                    "Aanvrager",
                    "HSEQ specialisten"
                ],
                correct: 2
            }},
            {{
                title: "Combinatie PtW+TRA+LOTO",
                paragraphs: [
                    "In de praktijk bij Phoenix Metals werken PtW, TRA en LOTO samen als een geïntegreerd veiligheidssysteem. Deze drie elementen versterken elkaar en vormen een gelaagde aanpak voor risicobeheersing.",
                    "Het begint met een PtW dat de noodzaak van een formeel proces vaststelt. De aanvrager vervolgens een TRA uitvoeren die specifieke risico's identificeert en beheersmaatregelen definieert. LOTO wordt dan toegepast als technische maatregel voor energiebeheersing.",
                    "De combinatie zorgt ervoor dat risico's worden beheerd op verschillende niveaus: het PtW zorgt voor formele goedkeuring, de TRA voor risicoanalyse en planning, en LOTO voor technische isolatie van energiebronnen.",
                    "Bij complexe werkzaamheden zoals onderhoud aan chemische reactoren kan een combinatie van meerdere permit types nodig zijn: een Hot Work Permit voor laswerk, een Confined Space Entry Permit voor toegang, en een Electrical Work Permit voor elektrische componenten.",
                    "Digitalisering via Ultimo stelt Phoenix Metals in staat om deze processen te integreren, met automatische afstemming tussen verschillende permits, tracking van tijdlijnen, en digitale goedkeuringsworkflows."
                ],
                fact: "Bedrijven die PtW, TRA en LOTO integreren in één systeem rapporteren 65% minder incidenten dan bedrijven die deze systemen los van elkaar uitvoeren.",
                practice: "Ontwerp een werkplan voor onderhoud aan een installatie die V₂O₅ en H₂SO₄ verwerkt. Hoe passen PtW, TRA en LOTO samen in dit plan?",
                question: "Wat is het voordeel van het combineren van PtW, TRA en LOTO?",
                options: [
                    "Snelere goedkeuring",
                    "Minder documentatie",
                    "Meer geïntegreerde risicobeheersing",
                    "Minder personeel nodig"
                ],
                correct: 2
            }},
            {{
                title: "Phoenix Metals specifieke procedures",
                paragraphs: [
                    "Phoenix Metals heeft specifieke procedures afgestemd op de unieke risico's van vanadiumoxide (V₂O₅) en andere chemicaliën. Deze procedures zijn gebaseerd op de algemene PtW-principes maar verfijnd voor onze specifieke processen.",
                    "Voor werkzaamheden met V₂O₅ zijn extra maatregelen vanwege de carcinogene eigenschappen. Dit omvat strikte PBM-eisen (FFP3 ademhalingsbescherming, nitril handschoenen, volledige overall), blootstellingsmonitoring en speciale afvalprocedures.",
                    "Bij werkzaamheden met zwavelzuur (H₂SO₄) en natriumhydroxide (NaOH) zijn corrosieve risico's primair. Procedures vereisen zuurbestendige PBM, waarschuwingsborden, speciale spoelmogelijkheden, en medische controles voor eventuele blootstelling.",
                    "De Phoenix Metals PtW-systeem integreert digitalisering via Ultimo, wat elektronische aanvragen, tracking van permit status, en automatische meldingen mogelijk maakt. Dit verbetert traceerbaarheid en efficiency.",
                    "Afwijkingen-procedures zijn uitgewerkt voor situaties waar strikte naleving van normale PtW-procedures onmogelijk is of onevenredige risico's met zich meebrengt. Deze vereisen extra goedkeuringen en alternatieve beheersmaatregelen."
                ],
                fact: "Phoenix Metals is vrijwillig gecertificeerd onder Seveso III richtlijn voor gevaarlijke stoffen, wat strengere eisen stelt aan veiligheidsprocedures dan de wettelijke minimumvereisten.",
                practice: "Identificeer de extra procedures die van toepassing zijn bij onderhoud aan een tank met V₂O₅ ten opzichte van routine onderhoud. Welke specifieke risico's vereisen extra aandacht?",
                question: "Wat is een belangrijk verschil in procedures voor V₂O₅ vanwege zijn eigenschappen?",
                options: [
                    "Mildere PBM-eisen",
                    "Geen extra maatregelen nodig",
                    "Striktere PBM en blootstellingscontrole",
                    "Vereist geen permit"
                ],
                correct: 2
            }}
        ];

        // Quiz vragen
        const quizQuestions = [
            {{
                question: "Wat is het hoofddoel van een Permit to Work systeem?",
                options: [
                    "Versnellen van werkzaamheden",
                    "Documentatie administratie",
                    "Verhogen van de productiviteit",
                    "Voorkomen van ongevallen bij hoog-risico werkzaamheden"
                ],
                correct: 3
            }},
            {{
                question: "Welk permit type is vereist voor laswerk op een chemische tank?",
                options: [
                    "Cold Work Permit",
                    "Hot Work Permit",
                    "Confined Space Entry Permit",
                    "Electrical Work Permit"
                ],
                correct: 1
            }},
            {{
                question: "Wat is het doel van stap 2 in de TRA procedure?",
                options: [
                    "Task uitvoeren",
                    "Risico's identificeren",
                    "Maatregelen implementeren",
                    "Resultaten evalueren"
                ],
                correct: 1
            }},
            {{
                question: "Wat is het belangrijkste doel van de LOTO procedure?",
                options: [
                    "Versnellen van onderhoudswerkzaamheden",
                    "Documentatie van werkzaamheden",
                    "Voorkomen van onbedoelde energie-activatie",
                    "Verhogen van de productie efficiëntie"
                ],
                correct: 2
            }},
            {{
                question: "Welke stap komt onmiddellijk na het aanbrengen van sloten en tags in de LOTO procedure?",
                options: [
                    "Machine testen",
                    "Energie residualen afvoeren",
                    "Werkzaamheden starten",
                    "Nieuwe energiebronnen identificeren"
                ],
                correct: 1
            }},
            {{
                question: "Wat is het hoofddoel van een LMRA?",
                options: [
                    "Voldoen aan wettelijke verplichtingen",
                    "Snel controleren of situatie nog veilig is",
                    "Documentatie toevoegen aan het dossier",
                    "Training van nieuw personeel"
                ],
                correct: 1
            }},
            {{
                question: "Wat is de meest effectieve beheersmaatregel volgens de hiërarchie?",
                options: [
                    "Persoonlijke beschermingsmiddelen (PBM)",
                    "Administratieve procedures",
                    "Technische oplossingen",
                    "Eliminatie van het gevaar"
                ],
                correct: 3
            }},
            {{
                question: "Wie is primair verantwoordelijk voor het uitvoeren van de TRA?",
                options: [
                    "Goedkeurder",
                    "Uitvoerder",
                    "Aanvrager",
                    "HSEQ specialisten"
                ],
                correct: 2
            }},
            {{
                question: "Wat is het voordeel van het combineren van PtW, TRA en LOTO?",
                options: [
                    "Snelere goedkeuring",
                    "Minder documentatie",
                    "Meer geïntegreerde risicobeheersing",
                    "Minder personeel nodig"
                ],
                correct: 2
            }},
            {{
                question: "Wat is een belangrijk verschil in procedures voor V₂O₅ vanwege zijn eigenschappen?",
                options: [
                    "Mildere PBM-eisen",
                    "Geen extra maatregelen nodig",
                    "Striktere PBM en blootstellingscontrole",
                    "Vereist geen permit"
                ],
                correct: 2
            }}
        ];

        // 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_T11_Permit_to_Work_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"T11 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")