<!DOCTYPE html>

<html lang="nl" class="scroll-smooth">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>De Persoonsvorm – Single Page</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<style>

body{font-family:'Inter',sans-serif}

.word-span{cursor:pointer;padding:2px 4px;border-radius:4px;transition:background-color .2s,color .2s}

.word-span:hover{background:#e0f2fe}

.correct{background:#dcfce7;color:#166534;font-weight:600}

.incorrect{background:#fee2e2;color:#991b1b}

.disabled{pointer-events:none}

</style>

</head>

<body class="bg-stone-50 text-slate-800">

<header class="bg-white/80 backdrop-blur border-b border-stone-200 sticky top-0 z-10">

<nav class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">

<h1 class="text-xl font-bold text-sky-700">De Persoonsvorm</h1>

<div class="hidden sm:flex gap-6 text-sm">

<a href="#intro" class="text-slate-600 hover:text-sky-700">Introductie</a>

<a href="#uitleg" class="text-slate-600 hover:text-sky-700">Uitleg</a>

<a href="#oefenen" class="text-slate-600 hover:text-sky-700">Oefenen</a>

<a href="#checklist" class="text-slate-600 hover:text-sky-700">Checklist</a>

</div>

</nav>

</header>

<main class="max-w-4xl mx-auto p-4 sm:p-6 md:p-8 space-y-16">

<section id="intro" class="text-center">

<h2 class="text-3xl font-bold mb-4">Wat gaat hier mis?</h2>

<p class="text-lg text-slate-600 mb-6">Je krijgt een appje van een vriend(in). Er klopt iets niet helemaal…</p>

<div class="bg-white p-6 rounded-xl shadow-md border border-stone-200 text-2xl font-mono text-left">

<p>"morgen ik naar de stad <span class="bg-yellow-200 rounded px-2">ga</span>, kom je ook?"</p>

</div>

<button id="toon-uitleg-btn"

class="mt-6 inline-flex items-center justify-center rounded-lg bg-sky-600 text-white px-5 py-2 hover:bg-sky-700">

Toon uitleg bij deze fout

</button>

<p id="intro-uitleg" class="mt-4 text-slate-600 hidden">

Eén woord staat op de verkeerde plek. Als je dat woord verplaatst, klopt de zin ineens wél.

Dat speciale woord noemen we de <strong>persoonsvorm</strong>. Vandaag leer je hoe je die in elke zin vindt.

</p>

<div class="mt-6">

<a href="#uitleg" class="text-sky-700 underline">Ga door naar de Uitleg ↓</a>

</div>

</section>

<section id="uitleg" class="space-y-8">

<div class="text-center">

<h2 class="text-3xl font-bold mb-2">De Uitleg: Twee Handige Proefjes</h2>

<p class="text-lg text-slate-600">De persoonsvorm (pv) is de motor van de zin. Met deze twee proefjes vind je ’m altijd.</p>

</div>

<div class="grid md:grid-cols-2 gap-8">

<div class="bg-white p-6 rounded-xl shadow-md border border-stone-200">

<h3 class="text-2xl font-bold mb-4 text-sky-700">Proef 1: De Vraagproef</h3>

<p class="text-slate-600 mb-4">Maak van de zin een ja/nee-vraag. Het werkwoord dat vooraan komt te staan, is de persoonsvorm.</p>

<div class="bg-stone-100 p-4 rounded-lg space-y-3">

<p class="text-lg" id="vraagproef-zin">De voetballer schiet de bal in het doel.</p>

<button id="btn-vraagproef" class="bg-sky-600 text-white px-4 py-2 rounded-lg hover:bg-sky-700">Voer de vraagproef uit</button>

</div>

</div>

<div class="bg-white p-6 rounded-xl shadow-md border border-stone-200">

<h3 class="text-2xl font-bold mb-4 text-sky-700">Proef 2: De Tijdproef</h3>

<p class="text-slate-600 mb-4">Zet de zin in een andere tijd. Het werkwoord dat verandert, is de persoonsvorm.</p>

<div class="bg-stone-100 p-4 rounded-lg space-y-3">

<p class="text-lg" id="tijdproef-zin">De voetballer schiet de bal in het doel.</p>

<button id="btn-tijdproef" class="bg-sky-600 text-white px-4 py-2 rounded-lg hover:bg-sky-700">Voer de tijdproef uit</button>

</div>

</div>

</div>

<div class="text-center">

<a href="#oefenen" class="inline-flex items-center justify-center rounded-lg bg-slate-700 text-white px-5 py-2 hover:bg-slate-800">

Naar de oefeningen →

</a>

</div>

</section>

<section id="oefenen" class="space-y-6">

<div class="text-center">

<h2 class="text-3xl font-bold mb-2">Tijd om te oefenen</h2>

<p class="text-lg text-slate-600">Klik op het woord dat volgens jou de persoonsvorm is. Je krijgt meteen feedback.</p>

</div>

<div class="bg-white p-8 rounded-xl shadow-lg border border-stone-200">

<div id="quiz-start" class="space-y-4 text-center">

<p class="text-slate-600">Je gaat 15 zinnen oefenen. Klik op de knop om te beginnen.</p>

<button id="start-btn" class="bg-sky-600 text-white px-6 py-3 rounded-lg text-lg hover:bg-sky-700">Start met Oefenen</button>

</div>

<div id="quiz-area" class="hidden">

<div class="flex justify-between items-center mb-4">

<p id="progress-text" class="text-sm text-slate-500">Zin 1 van 15</p>

<p id="score-text" class="text-sm font-semibold text-green-600">Score: 0</p>

</div>

<div class="bg-slate-100 h-2 w-full rounded-full mb-6">

<div id="progress-bar" class="bg-sky-500 h-2 rounded-full transition-all duration-300" style="width:0%"></div>

</div>

<p id="sentence-container" class="text-2xl text-center leading-loose mb-3"></p>

<p id="feedback-text" class="text-center font-semibold h-6"></p>

<button id="next-button" class="hidden mt-4 block w-full max-w-xs mx-auto bg-slate-700 text-white px-6 py-2 rounded-lg hover:bg-slate-800">

Volgende zin

</button>

<div class="mt-8 border-t pt-6">

<h4 class="font-semibold mb-2">Bonus-oefenzin (zonder internet/AI)</h4>

<p class="text-sm text-slate-500 mb-3">Klik om een extra zin te krijgen uit een interne lijst.</p>

<button id="bonus-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">Genereer bonuszin</button>

<div id="bonus-wrap" class="mt-4">

<p id="bonus-sentence" class="text-2xl text-center leading-loose mb-2"></p>

<p id="bonus-feedback" class="text-center font-semibold h-6"></p>

</div>

</div>

</div>

<div id="quiz-end" class="hidden text-center">

<h3 class="text-2xl font-bold mb-2">Goed gedaan!</h3>

<p id="final-score" class="text-lg text-slate-600 mb-4">Je hebt de oefening afgerond.</p>

<a href="#checklist" class="inline-flex items-center justify-center rounded-lg bg-sky-600 text-white px-5 py-2 hover:bg-sky-700">Ga naar de checklist</a>

</div>

</div>

</section>

<section id="checklist">

<div class="text-center">

<h2 class="text-3xl font-bold mb-2">Checklist & Samenvatting</h2>

<p class="text-lg text-slate-600">Onthoud dit over de persoonsvorm:</p>

</div>

<div class="mt-6 bg-white p-8 rounded-xl shadow-md border border-stone-200 space-y-4">

<div class="flex items-start gap-4">

<span class="text-green-500 text-2xl mt-1">✓</span>

<div>

<h4 class="font-semibold text-lg">De persoonsvorm is de “motor” van de zin.</h4>

<p class="text-slate-600">Het is een werkwoord dat de tijd bepaalt en meeverandert met het onderwerp.</p>

</div>

</div>

<div class="flex items-start gap-4">

<span class="text-green-500 text-2xl mt-1">✓</span>

<div>

<h4 class="font-semibold text-lg">Vraagproef.</h4>

<p class="text-slate-600">Maak een ja/nee-vraag: het werkwoord dat vooraan komt, is de pv.</p>

</div>

</div>

<div class="flex items-start gap-4">

<span class="text-green-500 text-2xl mt-1">✓</span>

<div>

<h4 class="font-semibold text-lg">Tijdproef.</h4>

<p class="text-slate-600">Verander de tijd: het werkwoord dat mee verandert, is de pv.</p>

</div>

</div>

</div>

<div class="text-center mt-6">

<a href="#intro" class="text-sky-700 underline">Terug naar boven ↑</a>

</div>

</section>

</main>

<footer class="text-center py-8 text-slate-500 text-sm">

<p>Single-page lesmateriaal. Geen dataopslag. Werkt offline.</p>

</footer>

<script>

// --- Intro: uitleg toggler ---

document.getElementById('toon-uitleg-btn').addEventListener('click', ()=>{

document.getElementById('intro-uitleg').classList.toggle('hidden');

});

// --- Uitleg: proefjes ---

let vraagproefOmgedraaid = false;

let tijdproefVerleden = false;

document.getElementById('btn-vraagproef').addEventListener('click', ()=>{

const el = document.getElementById('vraagproef-zin');

if(!vraagproefOmgedraaid){

el.innerHTML = '<span class="font-bold text-sky-700">Schiet</span> de voetballer de bal in het doel?';

} else {

el.textContent = 'De voetballer schiet de bal in het doel.';

}

vraagproefOmgedraaid = !vraagproefOmgedraaid;

});

document.getElementById('btn-tijdproef').addEventListener('click', ()=>{

const el = document.getElementById('tijdproef-zin');

if(!tijdproefVerleden){

el.innerHTML = 'De voetballer <span class="font-bold text-sky-700">schoot</span> de bal in het doel.';

} else {

el.textContent = 'De voetballer schiet de bal in het doel.';

}

tijdproefVerleden = !tijdproefVerleden;

});

// --- Oefenen: quiz ---

const questions = [

{ sentence: "De leerlingen maken hun huiswerk in de studieruimte.", answer: "maken" },

{ sentence: "Mijn oma bakt de lekkerste appeltaart van de wereld.", answer: "bakt" },

{ sentence: "De snelle spits scoorde in de laatste minuut.", answer: "scoorde" },

{ sentence: "Jij hebt een nieuwe fiets voor je verjaardag gekregen.", answer: "hebt" },

{ sentence: "Onze hond blaft altijd naar de postbode.", answer: "blaft" },

{ sentence: "De meester vertelt een spannend verhaal.", answer: "vertelt" },

{ sentence: "De vogels floten een vrolijk lied.", answer: "floten" },

{ sentence: "Wij wonen al tien jaar in dit huis.", answer: "wonen" },

{ sentence: "De regen viel met bakken uit de hemel.", answer: "viel" },

{ sentence: "Zij werken hard voor hun proefwerk.", answer: "werken" },

{ sentence: "Vanwege het slechte weer ging de sportdag niet door.", answer: "ging" },

{ sentence: "Mijn kleine broertje speelt graag met zijn speelgoedauto's.", answer: "speelt" },

{ sentence: "De detective zocht naar sporen op de plaats delict.", answer: "zocht" },

{ sentence: "Omdat ik ziek was, miste ik het schoolfeest.", answer: "miste" },

{ sentence: "Volgende week krijgen we de cijfers van de toets terug.", answer: "krijgen" },

];

let currentIndex = 0;

let score = 0;

const quizStart = document.getElementById('quiz-start');

const quizArea = document.getElementById('quiz-area');

const quizEnd = document.getElementById('quiz-end');

const startBtn = document.getElementById('start-btn');

const sentenceContainer = document.getElementById('sentence-container');

const feedbackText = document.getElementById('feedback-text');

const nextButton = document.getElementById('next-button');

const progressText = document.getElementById('progress-text');

const scoreText = document.getElementById('score-text');

const progressBar = document.getElementById('progress-bar');

startBtn.addEventListener('click', startQuiz);

nextButton.addEventListener('click', nextQuestion);

function startQuiz(){

currentIndex = 0;

score = 0;

quizStart.classList.add('hidden');

quizEnd.classList.add('hidden');

quizArea.classList.remove('hidden');

nextButton.classList.add('hidden');

loadQuestion();

}

function loadQuestion(){

feedbackText.textContent = '';

nextButton.classList.add('hidden');

if(currentIndex >= questions.length){ return showFinal(); }

const q = questions[currentIndex];

sentenceContainer.innerHTML = '';

q.sentence.split(' ').forEach(word=>{

const span = document.createElement('span');

span.textContent = word;

span.className = 'word-span';

span.onclick = ()=> checkAnswer(span, word, q.answer);

sentenceContainer.appendChild(span);

sentenceContainer.appendChild(document.createTextNode(' '));

});

updateProgress();

}

function checkAnswer(span, selectedWord, correctAnswer){

const clean = selectedWord.replace(/[.,]/g,'');

if(clean === correctAnswer){

span.classList.add('correct');

feedbackText.textContent = 'Goed zo!';

feedbackText.style.color = '#16a34a';

score++;

} else {

span.classList.add('incorrect');

feedbackText.textContent = 'Helaas, dat is niet juist.';

feedbackText.style.color = '#dc2626';

}

// Markeer juiste antwoord

document.querySelectorAll('#sentence-container .word-span').forEach(s=>{

s.classList.add('disabled');

if(s.textContent.replace(/[.,]/g,'') === correctAnswer){

s.classList.add('correct');

}

});

nextButton.classList.remove('hidden');

updateProgress();

}

function nextQuestion(){

currentIndex++;

loadQuestion();

}

function updateProgress(){

progressText.textContent = `Zin ${Math.min(currentIndex+1, questions.length)} van ${questions.length}`;

scoreText.textContent = `Score: ${score}`;

const pct = (currentIndex / questions.length) * 100;

progressBar.style.width = pct + '%';

}

function showFinal(){

quizArea.classList.add('hidden');

quizEnd.classList.remove('hidden');

document.getElementById('final-score').textContent =

`Je hebt ${score} van de ${questions.length} goed.`;

}

// --- Bonuszin (lokale set, geen API) ---

const bonusSet = [

{ s:"De docent legt de opgave rustig uit.", a:"legt" },

{ s:"Morgen start de klas met het project.", a:"start" },

{ s:"Gisteren fietste ik naar school.", a:"fietste" },

{ s:"Wij lezen elke week een nieuw boek.", a:"lezen" },

{ s:"De kat sprong op de vensterbank.", a:"sprong" },

{ s:"Zij bakken koekjes voor de pauze.", a:"bakken" }

];

const bonusBtn = document.getElementById('bonus-btn');

const bonusSentenceEl = document.getElementById('bonus-sentence');

const bonusFeedbackEl = document.getElementById('bonus-feedback');

bonusBtn.addEventListener('click', ()=>{

bonusFeedbackEl.textContent = '';

bonusSentenceEl.innerHTML = '';

const pick = bonusSet[Math.floor(Math.random()*bonusSet.length)];

const words = pick.s.split(' ');

words.forEach(w=>{

const sp = document.createElement('span');

sp.textContent = w;

sp.className = 'word-span';

sp.onclick = ()=> {

const clean = w.replace(/[.,]/g,'');

if(clean === pick.a){

sp.classList.add('correct');

bonusFeedbackEl.textContent = 'Helemaal goed!';

bonusFeedbackEl.style.color = '#16a34a';

} else {

sp.classList.add('incorrect');

bonusFeedbackEl.textContent = 'Niet correct. Het juiste woord is gemarkeerd.';

bonusFeedbackEl.style.color = '#dc2626';

}

document.querySelectorAll('#bonus-sentence .word-span').forEach(x=>{

x.classList.add('disabled');

if(x.textContent.replace(/[.,]/g,'') === pick.a){ x.classList.add('correct'); }

});

};

bonusSentenceEl.appendChild(sp);

bonusSentenceEl.appendChild(document.createTextNode(' '));

});

bonusSentenceEl.id = 'bonus-sentence'; // ensure selector works after reset

});

</script>

</body>

</html>