#!/usr/bin/env python3
"""Genereer Quiz HTML + JSON voor Storytelling Lions 2026-2027"""

import os
import json

output_path = "/root/projects/jg/2026-pbm-lions-storytelling/deliverables/html"
os.makedirs(output_path, exist_ok=True)

quiz_data = {
    "title": "Storytelling Quiz — Lions 2026-2027",
    "description": "Test je kennis over de storytelling-strategie voor District 110AN",
    "questions": [
        {
            "id": 1,
            "question": "Wat is het belangrijkste verschil tussen een verslag en een verhaal?",
            "options": [
                {"id": "a", "text": "Verslagen zijn langer dan verhalen"},
                {"id": "b", "text": "Verhalen richten zich op het menselijke moment, verslagen op feiten en cijfers"},
                {"id": "c", "text": "Er is geen verschil"},
                {"id": "d", "text": "Verhalen zijn alleen voor social media"}
            ],
            "correct": "b",
            "explanation": "Verhalen maken het menselijke moment voelbaar. Verslagen informeren, verhalen raken."
        },
        {
            "id": 2,
            "question": "Welke pilaar gaat over 'wie we zijn als district'?",
            "options": [
                {"id": "a", "text": "Pilaar 1 — Persoonlijk verhaal"},
                {"id": "b", "text": "Pilaar 2 — Ledenverhaal"},
                {"id": "c", "text": "Pilaar 4 — District-verhaal"},
                {"id": "d", "text": "Pilaar 5 — Toekomstverhaal"}
            ],
            "correct": "c",
            "explanation": "Pilaar 4 (District-verhaal) bouwt aan een gedeelde identiteit voor 110AN."
        },
        {
            "id": 3,
            "question": "Wat is de beste manier om een ledenverhaal te verzamelen?",
            "options": [
                {"id": "a", "text": "Schrijf een samenvatting van het projectverslag"},
                {"id": "b", "text": "Vraag de secretaris om notulen te delen"},
                {"id": "c", "text": "Vraag de Lion: 'Wat was het meest bijzondere moment? Wie raakte je? Wat veranderde er?'"},
                {"id": "d", "text": "Wacht tot iemand spontaan een verhaal instuurt"}
            ],
            "correct": "c",
            "explanation": "De 3-vraag-methode (moment → wie → verandering) activeert het verhaal vanuit de Lion zelf."
        },
        {
            "id": 4,
            "question": "Welke structuur gebruik je voor een projectverhaal?",
            "options": [
                {"id": "a", "text": "Situatie → Actie → Impact → Emotie"},
                {"id": "b", "text": "Datum → Locatie → Aanwezigen → Resultaat"},
                {"id": "c", "text": "Probleem → Oplossing → Conclusie"},
                {"id": "d", "text": "Inleiding → Middel → Slot"}
            ],
            "correct": "a",
            "explanation": "Situatie → Actie → Impact → Emotie is het framework dat het menselijke moment centraal stelt."
        },
        {
            "id": 5,
            "question": "Wat is het hashtag van District 110AN?",
            "options": [
                {"id": "a", "text": "#Lions110AN"},
                {"id": "b", "text": "#WeServe"},
                {"id": "c", "text": "#ThisIs110AN"},
                {"id": "d", "text": "#LionsNederland"}
            ],
            "correct": "c",
            "explanation": "#ThisIs110AN is het district-hashtag voor alle social media communicatie."
        },
        {
            "id": 6,
            "question": "Wanneer gebruik je Pilaar 5 (Toekomstverhaal)?",
            "options": [
                {"id": "a", "text": "Bij elk clubbezoek"},
                {"id": "b", "text": "Bij de installatie van nieuwe leden"},
                {"id": "c", "text": "Bij conventie-toespraken, jaarafsluiting en overdracht aan je opvolger"},
                {"id": "d", "text": "Alleen in de nieuwsbrief"}
            ],
            "correct": "c",
            "explanation": "Het toekomstverhaal schets een gewenste toestand — krachtig bij overdrachtsmomenten."
        },
        {
            "id": 7,
            "question": "Wat is de eerste stap in het 5-stappen storytelling workflow?",
            "options": [
                {"id": "a", "text": "Deel het verhaal op social media"},
                {"id": "b", "text": "Identificeer het menselijke moment"},
                {"id": "c", "text": "Schrijf een persbericht"},
                {"id": "d", "text": "Maak foto's"}
            ],
            "correct": "b",
            "explanation": "Stap 1 is altijd: identificeer het menselijke moment. Zonder dat geen verhaal."
        },
        {
            "id": 8,
            "question": "Welke twee pilars zijn het meest geschikt voor Instagram?",
            "options": [
                {"id": "a", "text": "Pilaar 1 en 5"},
                {"id": "b", "text": "Pilaar 2 en 3"},
                {"id": "c", "text": "Pilaar 3 en 4"},
                {"id": "d", "text": "Pilaar 4 en 5"}
            ],
            "correct": "b",
            "explanation": "Pilaar 2 (Ledenverhaal) en Pilaar 3 (Projectverhaal) werken het best op Instagram — visueel en emotioneel."
        }
    ]
}

# JSON opslaan
json_path = os.path.join(output_path, "2026-LST-Storytelling-Quiz_v1.0.json")
with open(json_path, "w", encoding="utf-8") as f:
    json.dump(quiz_data, f, ensure_ascii=False, indent=2)

# HTML genereren
html = f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{quiz_data['title']}</title>
<style>
:root {{
  --primary: #003366;
  --gold: #C5A55A;
  --text-dark: #1F2937;
  --text-secondary: #374151;
  --bg-main: #FFFFFF;
  --bg-card: #F8F9FA;
  --border: #E5E7EB;
  --success: #00A859;
  --error: #EF4444;
  --info: #3B82F6;
}}
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: var(--bg-card); color: var(--text-dark); line-height: 1.6; font-size: 16px; }}
.header {{ background: linear-gradient(135deg, var(--primary), #0a1628); color: white; padding: 30px 20px; text-align: center; }}
.header h1 {{ font-size: 1.8em; margin-bottom: 8px; }}
.container {{ max-width: 800px; margin: 0 auto; padding: 20px; }}
.progress {{ background: white; border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--border); }}
.progress-bar {{ height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 8px; }}
.progress-fill {{ height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.3s; width: 0%; }}
.question-card {{ background: white; border-radius: 12px; padding: 25px; margin-bottom: 20px; border: 1px solid var(--border); display: none; }}
.question-card.active {{ display: block; }}
.question-number {{ color: var(--gold); font-weight: 700; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; }}
.question-text {{ font-size: 1.1em; font-weight: 600; margin: 10px 0 20px; }}
.options {{ list-style: none; }}
.options li {{ padding: 12px 18px; margin: 8px 0; background: var(--bg-card); border-radius: 8px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }}
.options li:hover {{ border-color: var(--info); background: #EFF6FF; }}
.options li.correct {{ border-color: var(--success); background: #ECFDF5; }}
.options li.wrong {{ border-color: var(--error); background: #FEF2F2; }}
.options li.disabled {{ pointer-events: none; }}
.explanation {{ margin-top: 15px; padding: 15px; background: var(--bg-card); border-radius: 8px; display: none; border-left: 4px solid var(--info); }}
.btn {{ display: inline-block; padding: 12px 30px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 15px; }}
.btn:hover {{ background: #0a1628; }}
.result {{ text-align: center; padding: 40px; }}
.result h2 {{ font-size: 2em; color: var(--primary); }}
.result-score {{ font-size: 3em; font-weight: 700; color: var(--gold); margin: 20px 0; }}
</style>
</head>
<body>
<div class="header">
  <h1>🦁 Storytelling Quiz</h1>
  <p>Test je kennis over de storytelling-strategie voor District 110AN</p>
</div>
<div class="container">
  <div class="progress">
    <span id="progress-text">Vraag 1 van {len(quiz_data['questions'])}</span>
    <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
  </div>
  <div id="quiz-container"></div>
  <div id="result" class="result" style="display:none;">
    <h2>Quiz Voltooid!</h2>
    <div class="result-score" id="score"></div>
    <p id="score-text"></p>
    <button class="btn" onclick="location.reload()">Opnieuw</button>
  </div>
</div>
<script>
const quizData = {json.dumps(quiz_data, ensure_ascii=False)};
let current = 0;
let score = 0;

function renderQuestion() {{
  const q = quizData.questions[current];
  const container = document.getElementById('quiz-container');
  document.getElementById('progress-text').textContent = `Vraag ${{current + 1}} van ${{quizData.questions.length}}`;
  document.getElementById('progress-fill').style.width = `${{((current + 1) / quizData.questions.length) * 100}}%`;
  
  let html = `<div class="question-card active">
    <div class="question-number">Vraag ${{current + 1}}</div>
    <div class="question-text">${{q.question}}</div>
    <ul class="options">`;
  q.options.forEach(opt => {{
    html += `<li onclick="checkAnswer(this, '${{opt.id}}', '${{q.correct}}', '${{q.explanation.replace("'", "\\'")}}')">${{opt.id.toUpperCase()}}. ${{opt.text}}</li>`;
  }});
  html += `</ul><div class="explanation" id="explanation-${{current}}"></div>`;
  if (current < quizData.questions.length - 1) {{
    html += `<button class="btn" onclick="nextQuestion()" id="next-btn-${{current}}" style="display:none;">Volgende →</button>`;
  }} else {{
    html += `<button class="btn" onclick="showResult()" id="result-btn" style="display:none;">Resultaat →</button>`;
  }}
  html += `</div>`;
  container.innerHTML = html;
}}

function checkAnswer(el, selected, correct, explanation) {{
  const options = el.parentElement.querySelectorAll('li');
  options.forEach(o => o.classList.add('disabled'));
  if (selected === correct) {{
    el.classList.add('correct');
    score++;
  }} else {{
    el.classList.add('wrong');
    options.forEach(o => {{ if (o.textContent.trim().startsWith(correct.toUpperCase() + '.')) o.classList.add('correct'); }});
  }}
  document.getElementById(`explanation-${{current}}`).innerHTML = `<strong>Uitleg:</strong> ${{explanation}}`;
  document.getElementById(`explanation-${{current}}`).style.display = 'block';
  document.getElementById(current < quizData.questions.length - 1 ? `next-btn-${{current}}` : 'result-btn').style.display = 'inline-block';
}}

function nextQuestion() {{
  current++;
  renderQuestion();
}}

function showResult() {{
  document.getElementById('quiz-container').innerHTML = '';
  document.getElementById('result').style.display = 'block';
  document.getElementById('score').textContent = `${{score}}/${{quizData.questions.length}}`;
  const pct = Math.round((score / quizData.questions.length) * 100);
  let text = pct >= 80 ? 'Uitstekend! Je bent een storytelling-expert.' : pct >= 60 ? 'Goed! Je hebt de basis onder de knie.' : 'Befijn de storytelling-strategie nog eens.';
  document.getElementById('score-text').textContent = text;
}}

renderQuestion();
</script>
</body>
</html>"""

html_path = os.path.join(output_path, "2026-LST-Storytelling-Quiz_v1.0.html")
with open(html_path, "w", encoding="utf-8") as f:
    f.write(html)

print(f"✅ Quiz JSON: {json_path}")
print(f"✅ Quiz HTML: {html_path}")
print(f"   Vragen: {len(quiz_data['questions'])}")
