Er zijn twee soorten lijsten:

• Maak een ongeordende lijst met 3 hobby's
• Maak een geordende lijst met je top 3 films

Over Mij

Mijn Hobby's

Top 3 Films

Over Mij

Mijn Hobby's

• Gaming
• Muziek
• Sporten

Top 3 Films

1. Film 1
2. Film 2
3. Film 3

') && html.includes('

') && html.includes('

', '
', '
1. '] }, { id: 5, title: 'CSS Basics - Kleuren', description: 'Geef je pagina kleur met CSS!', instructions: `

   CSS gebruik je om je HTML op te maken. Je koppelt CSS met een style tag of extern bestand.

   color: red; = Tekstkleur
   background-color: blue; = Achtergrondkleur
   Je kunt kleurnamen, hex (#ff0000) of rgb(255,0,0) gebruiken.
   • Geef de body een lichtgrijze achtergrond (#f0f0f0)
   • Maak de h1 donkerblauw (#1a237e)
   • Maak de paragraaf tekst donkergrijs (#333333)
   `, starterHTML: `

   Mijn Gestylde Pagina

   Dit is een paragraaf met tekst.

   `, starterCSS: `/* Schrijf hier je CSS */ body { } h1 { } p { }`, solution: { html: `

   Mijn Gestylde Pagina

   Dit is een paragraaf met tekst.

   `, css: `body { background-color: #f0f0f0; } h1 { color: #1a237e; } p { color: #333333; }` }, check: (html, css) => { return css.includes('background-color') && css.includes('color') && (css.includes('#f0f0f0') || css.includes('#F0F0F0')); }, hints: [ 'CSS-regels eindigen altijd met een puntkomma ;', 'Kleuren met # zijn hex-codes', 'background-color is voor de achtergrond, color voor tekst' ], reference: ['color:', 'background-color:', '#hexcode'] }, { id: 6, title: 'CSS - Tekst Styling', description: 'Style je tekst met lettertype, grootte en meer.', instructions: `

   Met CSS kun je tekst volledig aanpassen.

   font-family: Arial; = Lettertype
   font-size: 20px; = Grootte
   font-weight: bold; = Dikte
   text-align: center; = Uitlijning
   • Zet de body op font-family: Arial, sans-serif
   • Maak de h1 gecentreerd en 32px groot
   • Geef de paragraaf een font-size van 16px
   `, starterHTML: `

   Mooie Typografie

   Tekst styling maakt je pagina professioneler.

   `, starterCSS: `body { } h1 { } p { }`, solution: { html: `

   Mooie Typografie

   Tekst styling maakt je pagina professioneler.

   `, css: `body { font-family: Arial, sans-serif; } h1 { text-align: center; font-size: 32px; } p { font-size: 16px; }` }, check: (html, css) => { return css.includes('font-family') && css.includes('font-size') && css.includes('text-align'); }, hints: [ 'font-family kan meerdere fonts bevatten, gescheiden door kommas', 'px staat voor pixels', 'text-align: center; centreert de tekst' ], reference: ['font-family:', 'font-size:', 'text-align:', 'font-weight:'] }, { id: 7, title: 'CSS - Box Model', description: 'Leer over margin, padding en borders.', instructions: `

   Elk HTML-element is een "box" met margin (buitenruimte), padding (binnenruimte) en border (rand).

   margin: 20px; = Ruimte buiten het element
   padding: 15px; = Ruimte binnen het element
   border: 2px solid black; = Rand om het element
   • Geef de div een padding van 20px
   • Voeg een border toe: 2px solid #e91e63
   • Zet margin op 10px
   `, starterHTML: `

   Dit is een box

   Met padding, margin en border.

   `, starterCSS: `.box { background-color: #f5f5f5; }`, solution: { html: `

   Dit is een box

   Met padding, margin en border.

   `, css: `.box { background-color: #f5f5f5; padding: 20px; border: 2px solid #e91e63; margin: 10px; }` }, check: (html, css) => { return css.includes('padding') && css.includes('border') && css.includes('margin'); }, hints: [ 'padding voegt ruimte toe BINNEN de box', 'margin voegt ruimte toe BUITEN de box', 'border heeft 3 waarden: dikte, stijl, kleur' ], reference: ['padding:', 'margin:', 'border:', 'border-radius:'] }, { id: 8, title: 'Compleet Project', description: 'Combineer alles in een persoonlijke profielpagina!', instructions: `

   Maak je eigen profielpagina met alles wat je hebt geleerd!

   • Een h1 met je naam
   • Een korte introductie in een paragraaf
   • Een lijst met je hobby's
   • Style met CSS: kleuren, lettertype, spacing

   Wees creatief en maak er iets moois van!

   `, starterHTML: ` `, starterCSS: `/* Style je profiel pagina */ body { }`, solution: { html: `

   Mijn Naam

   Hallo! Ik ben een leerling die leert programmeren. Ik vind het leuk om nieuwe dingen te leren.

   Mijn Hobby's

   • Gaming
   • Muziek luisteren
   • Coderen
   `, css: `body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } .profile { background-color: white; max-width: 600px; margin: 0 auto; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #e91e63; text-align: center; } h2 { color: #333; border-bottom: 2px solid #e91e63; padding-bottom: 10px; } p { color: #666; line-height: 1.6; } ul { padding-left: 20px; } li { margin-bottom: 8px; }` }, check: (html, css) => { return html.includes('

   ') && html.includes('

   ') && (html.includes('

   ') || html.includes('
   ')) && css.includes('font-family') && css.includes('color'); }, hints: [ 'Begin met de HTML-structuur', 'Voeg daarna CSS toe voor de styling', 'Experimenteer met kleuren en spacing' ], reference: ['
   ', 'class=""', 'max-width:', 'box-shadow:'] } ]; // State let currentLesson = 0; let currentTab = 'html'; let htmlCode = ''; let cssCode = ''; let completedLessons = JSON.parse(localStorage.getItem('webdesign_completed') || '[]'); let hintIndex = 0; // DOM Elements const codeInput = document.getElementById('codeInput'); const lineNumbers = document.getElementById('lineNumbers'); const previewFrame = document.getElementById('previewFrame'); const lessonList = document.getElementById('lessonList'); const lessonTitle = document.getElementById('lessonTitle'); const lessonContent = document.getElementById('lessonContent'); const feedback = document.getElementById('feedback'); const referenceGrid = document.getElementById('referenceGrid'); const progressFill = document.getElementById('progressFill'); // Initialize function init() { renderLessonList(); loadLesson(0); setupEventListeners(); updateProgress(); } function renderLessonList() { lessonList.innerHTML = lessons.map((lesson, i) => `
   ${i + 1} ${lesson.title}
   `).join(''); } function loadLesson(index) { currentLesson = index; const lesson = lessons[index]; htmlCode = lesson.starterHTML; cssCode = lesson.starterCSS; hintIndex = 0; lessonTitle.textContent = `Les ${index + 1}: ${lesson.title}`; lessonContent.innerHTML = lesson.instructions; referenceGrid.innerHTML = lesson.reference.map(ref => `
   ${ref}
   `).join(''); // Load HTML by default currentTab = 'html'; document.querySelectorAll('.editor-tab').forEach(t => { t.classList.toggle('active', t.dataset.tab === 'html'); }); codeInput.value = htmlCode; updateLineNumbers(); updatePreview(); feedback.style.display = 'none'; renderLessonList(); } function setupEventListeners() { // Lesson selection lessonList.addEventListener('click', (e) => { const item = e.target.closest('.lesson-item'); if (item) loadLesson(parseInt(item.dataset.index)); }); // Tab switching document.querySelectorAll('.editor-tab').forEach(tab => { tab.addEventListener('click', () => { // Save current code if (currentTab === 'html') { htmlCode = codeInput.value; } else { cssCode = codeInput.value; } // Switch tab currentTab = tab.dataset.tab; document.querySelectorAll('.editor-tab').forEach(t => { t.classList.toggle('active', t === tab); }); // Load code codeInput.value = currentTab === 'html' ? htmlCode : cssCode; updateLineNumbers(); }); }); // Code input codeInput.addEventListener('input', () => { if (currentTab === 'html') { htmlCode = codeInput.value; } else { cssCode = codeInput.value; } updateLineNumbers(); updatePreview(); }); codeInput.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); const start = codeInput.selectionStart; const end = codeInput.selectionEnd; codeInput.value = codeInput.value.substring(0, start) + ' ' + codeInput.value.substring(end); codeInput.selectionStart = codeInput.selectionEnd = start + 2; if (currentTab === 'html') { htmlCode = codeInput.value; } else { cssCode = codeInput.value; } } }); // Buttons document.getElementById('checkBtn').addEventListener('click', checkSolution); document.getElementById('hintBtn').addEventListener('click', showHint); document.getElementById('solutionBtn').addEventListener('click', showSolution); document.getElementById('nextBtn').addEventListener('click', nextLesson); // Reference items referenceGrid.addEventListener('click', (e) => { const item = e.target.closest('.reference-item'); if (item) { const text = item.textContent; const start = codeInput.selectionStart; codeInput.value = codeInput.value.substring(0, start) + text + codeInput.value.substring(start); codeInput.focus(); codeInput.selectionStart = codeInput.selectionEnd = start + text.length; if (currentTab === 'html') { htmlCode = codeInput.value; } else { cssCode = codeInput.value; } updatePreview(); } }); } function updateLineNumbers() { const lines = codeInput.value.split('\n').length; lineNumbers.innerHTML = Array.from({length: lines}, (_, i) => i + 1).join('
   '); } function updatePreview() { const combined = ` ${htmlCode.replace(/||<\/html>|.*?<\/head>/gs, '')} `; const blob = new Blob([combined], { type: 'text/html' }); previewFrame.src = URL.createObjectURL(blob); } function checkSolution() { const lesson = lessons[currentLesson]; const isCorrect = lesson.check(htmlCode, cssCode); feedback.style.display = 'block'; if (isCorrect) { feedback.className = 'feedback success'; feedback.innerHTML = 'Correct! Goed gedaan! Je kunt door naar de volgende les.'; if (!completedLessons.includes(currentLesson)) { completedLessons.push(currentLesson); localStorage.setItem('webdesign_completed', JSON.stringify(completedLessons)); renderLessonList(); updateProgress(); } } else { feedback.className = 'feedback error'; feedback.innerHTML = 'Nog niet helemaal... Controleer je code en probeer het opnieuw. Gebruik de hint-knop als je vastzit.'; } } function showHint() { const lesson = lessons[currentLesson]; if (hintIndex < lesson.hints.length) { feedback.style.display = 'block'; feedback.className = 'feedback'; feedback.style.background = '#fff3e0'; feedback.style.color = '#e65100'; feedback.innerHTML = `Hint ${hintIndex + 1}: ${lesson.hints[hintIndex]}`; hintIndex++; } else { feedback.innerHTML = 'Geen hints meer. Bekijk de oplossing als je vastloopt.'; } } function showSolution() { const lesson = lessons[currentLesson]; if (confirm('Weet je zeker dat je de oplossing wilt zien?')) { htmlCode = lesson.solution.html; cssCode = lesson.solution.css; codeInput.value = currentTab === 'html' ? htmlCode : cssCode; updateLineNumbers(); updatePreview(); } } function nextLesson() { if (currentLesson < lessons.length - 1) { loadLesson(currentLesson + 1); } else { alert('Gefeliciteerd! Je hebt alle lessen voltooid!'); } } function updateProgress() { const percentage = (completedLessons.length / lessons.length) * 100; progressFill.style.width = percentage + '%'; } init();