#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Genereert T10 REACH/CLP Bewustzijn 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 - T10: REACH/CLP Bewustzijn</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. - T10: REACH/CLP Bewustzijn</h1>
        <p>Training REACH/CLP Bewustzijn (TR-302-06)</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>REACH/CLP Bewustzijn</strong> met succes heeft afgerond.</p>
            <p><strong>Deelnemer:</strong> _________________________</p>
            <p><strong>Bedrijf:</strong> Phoenix Metals B.V.</p>
            <p><strong>Training:</strong> T10: REACH/CLP Bewustzijn (TR-302-06)</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 REACH en CLP",
                paragraphs: [
                    "REACH (Registration, Evaluation, Authorisation and Restriction of Chemicals) en CLP (Classification, Labelling and Packaging) zijn twee belangrijke Europese verordeningen die de chemicaliënbeheersing regelen. Deze verordeningen zijn ontworpen om de risico's van chemicaliën voor de menselijke gezondheid en het milieu te beheren.",
                    "REACH is gebaseerd op het principe 'no data, no market'. Dit betekent dat bedrijven die chemicaliën produceren of importeren, informatie moeten verstrekken over de eigenschappen van hun stoffen. CLP richt zich op de juiste classificatie, etikettering en verpakking van stoffen en mengsels.",
                    "Phoenix Metals B.V. als producent van vanadiumoxide (V₂O₅) en gebruiker van zwavelzuur (H₂SO₄) en natriumhydroxide (NaOH) heeft te maken met beide verordeningen en moet voldoen aan de daaraan verbonden verplichtingen.",
                    "Deze training biedt een overzicht van de belangrijkste aspecten van REACH en CLP specifiek relevant voor Phoenix Metals. Na deze training begrijpt u uw rol als downstream gebruiker en de bijbehorende verantwoordelijkheden.",
                    "Het is essentieel dat alle medewerkers van Phoenix Metals kennis hebben van deze verordeningen omdat ze direct of indirect werken met gevaarlijke stoffen en de veiligheid van zichzelf, collega's en het milieu garanderen."
                ],
                fact: "REACH is van kracht sinds 1 juni 2007 en CLP sinds 20 januari 2009. Beide verordeningen zijn verplicht voor alle bedrijven in de Europese Unie.",
                practice: "Phoenix Metals onderga jaarlijks een REACH-compliance audit. Controleer welke informatie u beschikbaar heeft over de stoffen die u verwerkt.",
                question: "Wat is het kernprincipe van REACH?",
                options: [
                    "Geen data, geen markt",
                    "Alles wat op de markt komt is veilig",
                    "Producenten zijn altijd verantwoordelijk",
                    "Gebruikers hebben geen verplichtingen"
                ],
                correct: 0
            }},
            {{
                title: "De vier pijlers van REACH",
                paragraphs: [
                    "REACH is gebaseerd op vier pijlers die samen het systeem vormen: Registratie, Evaluatie, Autorisatie en Beperking. Elke pijler vervult een specifieke functie in het beheer van chemische risico's.",
                    "Registratie is de eerste stap waar producenten en importeurs van chemicaliën informatie moeten indienen over de stoffen die ze op de markt brengen. Deze informatie bevat onder andere data over gevaarlijke eigenschappen, ecotoxiciteit en toxiciteit.",
                    "Evaluatie door de Europese Chemicaliënagentschap (ECHA) zorgt ervoor dat de ingediende data volledig, correct en betrouwbaar zijn. Er worden zowel dossierbeoordelingen als substanceevaluaties uitgevoerd.",
                    "Autorisatie vereist dat hoog-risico stoffen die zeer zorgwekkende eigenschappen (SVHC) hebben, een specifieke toestemming krijgen van ECHA voordat ze worden gebruikt. Dit stelt beheersmaatregelen voor om de blootstelling te beperken.",
                    "Beperking is de laatste stap waarbij het gebruik van bepaalde stoffen volledig wordt verboden of voorwaardelijk toegestaan als de risico's te groot zijn voor mens of milieu. Voor Phoenix Metals kunnen dit beperkingen betreffen voor V₂O₅ bij bepaalde toepassingen."
                ],
                fact: "Sinds 2020 zijn er meer dan 220 stoffen geautoriseerd onder REACH, waaronder diverse kleurstoffen en conserveermiddelen.",
                practice: "Identificeer de pijler in REACH die betrekking heeft op het verbieden of beperken van gevaarlijke stoffen.",
                question: "Welke pijler van REACH richt zich op het toestaan van gebruik van hoog-risico stoffen onder strikte voorwaarden?",
                options: [
                    "Registratie",
                    "Evaluatie",
                    "Autorisatie",
                    "Beperking"
                ],
                correct: 2
            }},
            {{
                title: "De drie pijlers van CLP",
                paragraphs: [
                    "CLP is gebaseerd op drie pijlers die samen zorgen voor harmonisatie van de classificatie en etikettering van chemicaliën in de Europese Unie: Classificatie, Etikettering en Verpakking.",
                    "Classificatie is het proces waarin de gevaarlijke eigenschappen van een stof of mengsel worden bepaald volgens de criteria van het Globaal Harmoniseerd Systeem (GHS). Deze criteria omvatten fysieke gevaren, gezondheidseffecten en milieugevaren.",
                    "Etikettering vereist dat alle gevaarlijke producten duidelijke etiketten krijgen met pictogrammen, signalwoorden en gevaarzinnen (H- en P-zinnen). Dit zorgt voor directe waarschuwinging voor gebruikers.",
                    "Verpakking richt zich op de eisen aan de fysieke verpakking van chemicaliën, inclusief etikettering, veiligheidssloten en compatibiliteit met de inhoud. Voor Phoenix Metals is dit van cruciaal belang bij het verpakken van V₂O₅.",
                    "De combinatie van deze drie pijlers zorgt voor een gestandaardiseerde aanpak die de veiligheid voor werknemers, consumenten en het milieu verhoogt door duidelijke en consistante risicoinformatie."
                ],
                fact: "CLP harmoniseert de classificatie en etikettering in de gehele Europese Unie en vervangt de oude Richtlijn 67/548/EEC (Rode lijst) en Richtlijn 1999/45/EG.",
                practice: "Inspecteer de verpakking van een product op de werkplaats en identificeer de CLP-elementen: pictogrammen, signalwoorden en H/P-zinnen.",
                question: "Welke onderdelen maken deel uit van de etikettering volgens CLP?",
                options: [
                    "Alleen pictogrammen",
                    "Alleen H-zinnen",
                    "Pictogrammen, signalwoorden en H/P-zinnen",
                    "Alleen voorzorgsmaatregelen"
                ],
                correct: 2
            }},
            {{
                title: "De negen GHS-pictogrammen",
                paragraphs: [
                    "Het Globaal Harmoniseerd Systeem (GHS) kent negen standaard pictogrammen die verschillende gevaarlijke eigenschappen van chemicaliën visualiseren. Deze pictogrammen worden gebruikt op etiketten, veiligheidsinformatiebladen (VIB) en in transportdocumenten.",
                    "Het explosiepictogram (ontploffen) wordt gebruikt voor stoffen die risico op explosie vormen, zoals bepaalde organische peroxiden. Dit is relevant voor Phoenix Metals bij het werken met bepaalde reactieve chemicaliën.",
                    "Het vlambare pictogram (ontbranden) is voor stoffen die vatbaar voor brand zijn, waaronder brandbare vloeistoffen en gasvormige stoffen. V₂O₅ zelf is niet brandbaar, maar kan brandverwekkende reacties veroorzaken.",
                    "Het oxidatiepictogram (oxyderend) wordt gebruikt voor stoffen die zuurstof kunnen afgeven en brand bevorderen, zoals certain metalen oxides en peroxiden.",
                    "De overige pictogrammen omvatten gezondheidseffecten (corrosie, giftig, acuut toxisch), milieugevaren (ecotoxisch) en specifieke gevaren (gas onder druk, gevaar bij contact met water). Elk pictogram heeft specifieke betekenissen en voorschriften."
                ],
                fact: "De GHS pictogrammen zijn ontworpen met een vierkante vorm, een rode rand op witte achtergrond en een zwarte symbool.",
                practice: "Identificeer de juiste pictogrammen voor de stoffen waar u mee werkt bij Phoenix Metals. Verbind elk pictogram met de juiste gevaar.",
                question: "Welk pictogram wordt gebruikt voor stoffen die corrosief zijn voor metaal en huid?",
                options: [
                    "Vlam",
                    "Ontploffen",
                    "Corrosie",
                    "Giftig"
                ],
                correct: 2
            }},
            {{
                title: "Gezondheids- en Voorzorgszinnen (H/P-zinnen)",
                paragraphs: [
                    "H-zinnen (Hazard Statements) beschrijven de natuur van de gevaren die verbonden zijn aan het gebruik van een chemische stof of mengsel. P-zinnen (Precautionary Statements) geven aanbevolen veiligheidsmaatregelen om de risico's te minimaliseren.",
                    "H-zinnen zijn genummerd en volledig gestandaardiseerd: H302 ('Schadelijk bij inslikken'), H314 ('Verbrandt de huid en het oog') enzovoort. Deze nummers zijn universeel en worden niet per bedrijf gewijzigd.",
                    "P-zinnen zijn onderverdeeld in vier categorieën: algemene preventie (P1xx), reactie (P2xx), opslag (P3xx) en verwijdering (P4xx). Bijvoorbeeld P261 ('Ventilatie goed voor zorgen') en P280 ('Draag beschermende handschoenen').",
                    "Voor Phoenix Metals zijn vooral H-zinnen relevant voor V₂O₅ (H351 'Verwijst naar kankerverwekkende stoffen') en H₂SO₄/NaOH (H314 'Verbrandt de huid en het oog'). Deze vereisen specifieke beschermingsmaatregelen.",
                    "De combinatie van H- en P-zinnen op etiketten en VIB's vormt de basis voor het veilig werken met chemicaliën. Medewerkers moeten bekend zijn met deze zinnen en de bijbehorende maatregelen."
                ],
                fact: "Er bestaan meer dan 900 verschillende H-zinnen die specifieke gevaarden beschrijven, van H200 tot H660.",
                practice: "Lees de etiketten van chemicaliën op de werkplaats en noteer de relevante H- en P-zinnen. Wat betekenen ze voor uw werkzaamheden?",
                question: "Wat is het verschil tussen een H-zin en een P-zin?",
                options: [
                    "H-zinnen zijn voor P-zinnen",
                    "H-zinnen beschrijven gevaren, P-zinnen beschrijve maatregelen",
                    "P-zinnen zijn alleen voor gevaarlijke stoffen",
                    "H-zinnen zijn wettelijk verplicht, P-zinnen zijn vrijwillig"
                ],
                correct: 1
            }},
            {{
                title: "Veiligheidsinformatiebladen (VIB/SDS)",
                paragraphs: [
                    "Veiligheidsinformatiebladen (VIB) of Safety Data Sheets (SDS) zijn gedetailleerde technische documenten die informatie verstrekken over de eigenschappen en veiligheidsaspecten van chemische producten. Elk product dat door Phoenix Metals wordt gebruikt of geproduceerd moet een VIB hebben.",
                    "Een VIB bestaat uit 16 secties die informatie bevatten van identificatie tot afvalbeheer. Sectie 1 bevat identificatie van de stof en de fabrikant, sectie 2 de gevaarlijke identificatie en sectie 3/4 samenstelling/informatie over bestanddelen.",
                    "Sectie 5-12 bevatten de fysische en chemische eigenschappen, stabiliteit en reacties, toxicologische informatie, ecologische informatie, en instructies voor transport, informatie over veiligheids- en milieuaspecten en transportinformatie.",
                    "Sectie 13-16 bevatten informatie over de identiteit van de fabrikant/leverancier, voorzorgsmaatregelen bij het hanteren en opslaan, en voorlichting voor de veiligheid van de gebruiker. Deze sectie bevat vaak de relevante H- en P-zinnen.",
                    "Voor Phoenix Metals is het VIB het centrale document voor het veilig werken met chemicaliën. Het moet altijd beschikbaar zijn op de werkplek en toegankelijk voor alle medewerkers."
                ],
                fact: "Volgens REACH moeten VIB's gratis beschikbaar worden gesteld aan downstream gebruikers, moeten ze in de EU-taal(en) zijn en moet ze beschikbaar zijn binnen 24 uur na verzoek.",
                practice: "Vraag een VIB op voor een stof die u regelmatig gebruikt bij Phoenix Metals en identificeer de belangrijkste secties voor uw werkzaamheden.",
                question: "Hoeveel secties bevat een standaard Veiligheidsinformatieblad (SDS)?",
                options: [
                    "8",
                    "12",
                    "16",
                    "24"
                ],
                correct: 2
            }},
            {{
                title: "V₂O₅ als Zeer Zorgwekkende Eigenschap (SVHC)",
                paragraphs: [
                    "Vanadiumpentoxide (V₂O₅) heeft door ECHA aangewezen als een Zeer Zorgwekkende Eigenschap (SVHC - Substance of Very High Concern) vanwege de carcinogene eigenschappen. Dit betekent dat aan extra eisen voldaan moet worden voor de toepassing van deze stof.",
                    "Als SVHC wordt V₂Oₛ geacht aan de criteria voor artikel 57(a) van REACH (kankerverwekkend). De toewijzing gebeurt op basis van wetenschappelijk bewijs dat de stof kankerverwekkend kan zijn bij menselijke blootstelling.",
                    "Voor Phoenix Metals als producent/importeur van V₂O₅ betekent dit dat extra verplichtingen gelden: registratie bij ECHA, noodzaak voor autorisatie voor bepaalde toepassingen, en mogelijk beperkingen of verbod.",
                    "Als downstream gebruiker heeft Phoenix Metals verplichtingen zoals het informeren over aanwezigheid van SVHC's in producten, en het waarnemen van alternatieve stoffen of technologieën om blootstelling te minimaliseren.",
                    "De SVHC-status van V₂O₅ vereist een strikt beleid voor arbeidshygiëne, PBM-gebruik en blootstellingsmonitoring om de gezondheid van medewerkers te waarborgen."
                ],
                fact: "Een SVHC wordt toegewezen als de stof voldoet aan ten minste één van de tien criteria in artikel 57 van REACH, waaronder carcinogeniciteit, mutageniciteit of reprotoxische eigenschappen.",
                practice: "Controleer het huidige SVHC-beleid van Phoenix Metals voor V₂O₅ en identificeer de specifieke maatregelen voor blootstellingsbeheer.",
                question: "Wat is een gevolg van het hebben van een SVHC status voor V₂O₅ bij Phoenix Metals?",
                options: [
                    "Geen extra verplichtingen",
                    "Mogelijke noodzaak voor autorisatie",
                    "Verbod op volledig gebruik",
                    "Vrije markttoegang"
                ],
                correct: 1
            }},
            {{
                title: "Downstream gebruikers verplichtingen",
                paragraphs: [
                    "Downstream gebruikers zijn bedrijven die chemicaliën gebruiken in hun productieproces, maar niet zelf produceren of importeren. Phoenix Metals als gebruiker van V₂O₅, H₂SO₄ en NaOH heeft belangrijke downstream gebruikers verplichtingen onder REACH.",
                    "Een belangrijke verplichting is het waarborgen dat veiligheidsinformatiebladen (VIB) voor alle gebruikte chemicaliën beschikbaar zijn en door medewerkers worden begrepen en gevolgd.",
                    "Downstream gebruikers moeten hun gebruik van chemicaliën aanpassen aan de aanbevolen veiligheidsmaatregelen in de VIB's, inclusief het gebruik van geschikte persoonlijke beschermingsmiddelen (PBM) en arbeidshygiënische maatregelen.",
                    "Als een stof een SVHC bevat, heeft Phoenix Metals de verplichting om informatie te verstrekken aan de klanten over de aanwezigheid van deze stof, en om af te zien van het gebruik als alternatieven beschikbaar zijn.",
                    "Downstream gebruikers moeten hun keten communiceren en informatie delen over het gebruik van chemicaliën. Dit betekent dat Phoenix Metals contact moet houden met leveranciers over eventuele veranderingen in de classificatie van chemicaliën."
                ],
                fact: "Downstream gebruikers moeten hun klanten informeren over aanpassingen in de veiligheidsinformatiebladen en op verzoek informatie verstrekken over het gebruik van SVHC's in producten.",
                practice: "Documenteer de downstream gebruikers verplichtingen voor de belangrijkste chemicaliën die Phoenix Metals gebruikt. Wat moet u doen bij wijzigingen in VIB's?",
                question: "Wat is een belangrijke downstream gebruikers verplichting onder REACH?",
                options: [
                    "Chemicaliën zelf registreren bij ECHA",
                    "VIB's beschikbaar hebben en veilig gebruik waarborgen",
                    "Nieuwe chemicaliën ontwikkelen",
                    "Geen verplichtingen als alleen gebruiker"
                ],
                correct: 1
            }},
            {{
                title: "Phoenix Metals stoffen classificatie",
                paragraphs: [
                    "Phoenix Metals verwerkt verschillende chemicaliën die allemaal een specifieke classificatie volgens CLP hebben. V₂O₅ (vanadiumoxide) wordt geclassificeerd als carcinogeen, mutagene en reprotoxische stof categorie 1B (Carc. 1B, Muta. 1B, Repr. 1B).",
                    "Zwavelzuur (H₂SO₄) is geclassificeerd als corrosief voor de huid (Skin Corr. 1A) en als ernstig oogirriterend (Eye Irrit. 2). Dit vereist strikte controles op blootstelling en proper gebruik van PBM.",
                    "Natriumhydroxide (NaOH) heeft vergelijkbare classificaties als H₂SO₄: corrosief voor de huid (Skin Corr. 1A) en ernstig oogirriterend (Eye Irrit. 2). Deze chemicaliën vereisen zorgvuldig hanteren en adequate bescherming.",
                    "De classificatie van deze stoffen bepaalt niet alleen de etikettering maar ook de vereiste veiligheidsmaatregelen. Voor carcinogene stoffen zoals V₂O₅ zijn extra controles en monitoring vereist.",
                    "Phoenix Metals heeft een specifiek beleid voor elke gevaarlijke stof dat de vereiste PBM, arbeidshygiënische maatregelen en procedures voor noodsituaties beschrijft. Dit beleid is gebaseerd op de CLP classificatie."
                ],
                fact: "De classificatie van stoffen wordt periodiek geëvalueerd op basis van nieuw wetenschappelijk bewijs. Dit kan leiden tot aanpassingen in etikettering en veiligheidsvoorschriften.",
                practice: "Identificeer de CLP classificatie voor de stoffen waar u mee werkt bij Phoenix Metals. Welke veiligheidsmaatregelen zijn vereist voor elke classificatie?",
                question: "Hoe wordt zwavelzuur (H₂SO₄) geclassificeerd volgens CLP?",
                options: [
                    "Niet gevaarlijk",
                    "Brandbaar vloeistof, categorie 3",
                    "Corrosief voor de huid, categorie 1A",
                    "Giftig, acute toxiciteit, categorie 3"
                ],
                correct: 2
            }},
            {{
                title: "Autorisatie traject en nieuwe REACH ontwikkelingen",
                paragraphs: [
                    "Het autorisatietraject onder REACH is cruciaal voor stoffen met Zeer Zorgwekkende Eigenschappen (SVHC's) die niet kunnen worden vervangen door veiligere alternatieven. Voor V₂O₅ moet Phoenix Metals dit proces begrijpen en volgen.",
                    "Het traject begint met het identificeren van de risico's en het gebruik van de stof, gevolgd door een dossier dat moet worden ingediend bij ECHA. Daarna wordt de stof opgenomen in de 'candidate list' en vervolgens in de 'authorisation list'.",
                    "Op de autorisatielijst wordt een deadline gesteld voor het gebruik van de stof. Bedrijven moeten een aanvraag voor autorisatie indienen die aantoont dat de risico's worden beheerst en dat er geen alternatieven beschikbaar zijn.",
                    "Phoenix Metals moet de ontwikkelingen rond V₂O₅ nauwlettend volgen, inclusief eventuele wijzigingen in de autorisatievoorwaarden of beperkingen. Dit vereist continue monitoring van ECHa-communicatie.",
                    "Nieuwe REACH-ontwikkelingen omvatten de verdere uitbreiding van SVHC-lijsten, strengere eisen voor dossierbeoordeling, en aandacht voor circulaire economie en duurzaam chemisch management."
                ],
                fact: "In 2023 zijn er meer dan 230 SVHC's op de kandidatenlijst van ECHA. Deze lijst wordt regelmatig uitgebreid op basis van nieuw wetenschappelijk bewijs.",
                practice: "Bespreek met uw manager hoe Phoenix Metals voorbereid is op mogelijke wijzigingen in de autorisatievoorwaarden voor V₂O₅. Wat is de noodzaak van alternatieven?",
                question: "Wat is de eerste stap in het autorisatietraject voor een SVHC als V₂O₅?",
                options: [
                    "Direct autorisatie aanvragen",
                    "Opschorting van alle activiteiten",
                    "Indienen van een dossier bij ECHA",
                    "Zoeken naar alternatieve stoffen"
                ],
                correct: 2
            }}
        ];

        // Quiz vragen
        const quizQuestions = [
            {{
                question: "Wat is het kernprincipe van REACH?",
                options: [
                    "Geen data, geen markt",
                    "Alles wat op de markt komt is veilig",
                    "Producenten zijn altijd verantwoordelijk",
                    "Gebruikers hebben geen verplichtingen"
                ],
                correct: 0
            }},
            {{
                question: "Welke pijler van REACH richt zich op het toestaan van gebruik van hoog-risico stoffen onder strikte voorwaarden?",
                options: [
                    "Registratie",
                    "Evaluatie",
                    "Autorisatie",
                    "Beperking"
                ],
                correct: 2
            }},
            {{
                question: "Welke onderdelen maken deel uit van de etikettering volgens CLP?",
                options: [
                    "Alleen pictogrammen",
                    "Alleen H-zinnen",
                    "Pictogrammen, signalwoorden en H/P-zinnen",
                    "Alleen voorzorgsmaatregelen"
                ],
                correct: 2
            }},
            {{
                question: "Welk pictogram wordt gebruikt voor stoffen die corrosief zijn voor metaal en huid?",
                options: [
                    "Vlam",
                    "Ontploffen",
                    "Corrosie",
                    "Giftig"
                ],
                correct: 2
            }},
            {{
                question: "Wat is het verschil tussen een H-zin en een P-zin?",
                options: [
                    "H-zinnen zijn voor P-zinnen",
                    "H-zinnen beschrijven gevaren, P-zinnen beschrijve maatregelen",
                    "P-zinnen zijn alleen voor gevaarlijke stoffen",
                    "H-zinnen zijn wettelijk verplicht, P-zinnen zijn vrijwillig"
                ],
                correct: 1
            }},
            {{
                question: "Hoeveel secties bevat een standaard Veiligheidsinformatieblad (SDS)?",
                options: [
                    "8",
                    "12",
                    "16",
                    "24"
                ],
                correct: 2
            }},
            {{
                question: "Wat is een gevolg van het hebben van een SVHC status voor V₂O₅ bij Phoenix Metals?",
                options: [
                    "Geen extra verplichtingen",
                    "Mogelijke noodzaak voor autorisatie",
                    "Verbod op volledig gebruik",
                    "Vrije markttoegang"
                ],
                correct: 1
            }},
            {{
                question: "Wat is een belangrijke downstream gebruikers verplichting onder REACH?",
                options: [
                    "Chemicaliën zelf registreren bij ECHA",
                    "VIB's beschikbaar hebben en veilig gebruik waarborgen",
                    "Nieuwe chemicaliën ontwikkelen",
                    "Geen verplichtingen als alleen gebruiker"
                ],
                correct: 1
            }},
            {{
                question: "Hoe wordt zwavelzuur (H₂SO₄) geclassificeerd volgens CLP?",
                options: [
                    "Niet gevaarlijk",
                    "Brandbaar vloeistof, categorie 3",
                    "Corrosief voor de huid, categorie 1A",
                    "Giftig, acute toxiciteit, categorie 3"
                ],
                correct: 2
            }},
            {{
                question: "Wat is de eerste stap in het autorisatietraject voor een SVHC als V₂O₅?",
                options: [
                    "Direct autorisatie aanvragen",
                    "Opschorting van alle activiteiten",
                    "Indienen van een dossier bij ECHA",
                    "Zoeken naar alternatieve stoffen"
                ],
                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_T10_REACH_CLP_Bewustzijn_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"T10 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")