{"id":1,"date":"2025-09-30T15:09:50","date_gmt":"2025-09-30T15:09:50","guid":{"rendered":"https:\/\/taaldigitaal.eu\/?p=1"},"modified":"2025-09-30T15:17:44","modified_gmt":"2025-09-30T15:17:44","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/taaldigitaal.eu\/index.php\/2025\/09\/30\/hello-world\/","title":{"rendered":"Hello world!"},"content":{"rendered":"\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>\n\n\n\nhtml\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>LinguaConnect &#8211; Leer talen op een natuurlijke manier<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        :root {\n            --primary-color: #3498db;\n            --secondary-color: #2ecc71;\n            --accent-color: #e74c3c;\n            --text-color: #2c3e50;\n            --background-color: #f9f9f9;\n            --card-background: #ffffff;\n            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            --border-radius: 12px;\n            --transition: all 0.3s ease;\n        }\n\n        [data-language=\"nl\"] {\n            --primary-color: #ff7700;\n            --secondary-color: #01539d;\n            --accent-color: #e44d26;\n            --background-pattern: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><rect width=\"40\" height=\"40\" fill=\"%23ff7700\" opacity=\"0.1\"\/><path d=\"M0 0h40v40H0z\" fill=\"none\"\/><path d=\"M20 5a15 15 0 1 1 0 30 15 15 0 0 1 0-30z\" fill=\"%2301539d\" opacity=\"0.1\"\/><\/svg>');\n        }\n\n        [data-language=\"tmz\"] {\n            --primary-color: #2ecc71;\n            --secondary-color: #27ae60;\n            --accent-color: #8e44ad;\n            --background-pattern: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><rect width=\"40\" height=\"40\" fill=\"%232ecc71\" opacity=\"0.1\"\/><path d=\"M0 0h40v40H0z\" fill=\"none\"\/><path d=\"M10 10h20v20H10z\" fill=\"%2327ae60\" opacity=\"0.1\"\/><\/svg>');\n        }\n\n        [data-language=\"en\"] {\n            --primary-color: #3498db;\n            --secondary-color: #e74c3c;\n            --accent-color: #9b59b6;\n            --background-pattern: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><rect width=\"40\" height=\"40\" fill=\"%233498db\" opacity=\"0.1\"\/><path d=\"M0 0h40v40H0z\" fill=\"none\"\/><path d=\"M0 0l40 40M40 0L0 40\" stroke=\"%23e74c3c\" opacity=\"0.1\" stroke-width=\"1\"\/><\/svg>');\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        body {\n            background-color: var(--background-color);\n            color: var(--text-color);\n            transition: var(--transition);\n            background-image: var(--background-pattern);\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        header {\n            background-color: var(--card-background);\n            box-shadow: var(--shadow);\n            padding: 15px 0;\n            position: sticky;\n            top: 0;\n            z-index: 100;\n        }\n\n        .header-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .logo {\n            font-size: 24px;\n            font-weight: bold;\n            color: var(--primary-color);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        nav ul {\n            display: flex;\n            list-style: none;\n            gap: 20px;\n        }\n\n        nav a {\n            text-decoration: none;\n            color: var(--text-color);\n            font-weight: 500;\n            transition: var(--transition);\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        nav a:hover {\n            color: var(--primary-color);\n        }\n\n        .user-actions {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }\n\n        .btn {\n            padding: 12px 24px;\n            background-color: var(--primary-color);\n            color: white;\n            border: none;\n            border-radius: var(--border-radius);\n            font-weight: bold;\n            cursor: pointer;\n            transition: var(--transition);\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n            background-color: var(--secondary-color);\n        }\n\n        .btn-outline {\n            background-color: transparent;\n            border: 2px solid var(--primary-color);\n            color: var(--primary-color);\n        }\n\n        .btn-outline:hover {\n            background-color: var(--primary-color);\n            color: white;\n        }\n\n        .language-selector {\n            display: flex;\n            gap: 10px;\n        }\n\n        .language-btn {\n            padding: 8px 15px;\n            border: none;\n            border-radius: var(--border-radius);\n            background-color: #eee;\n            cursor: pointer;\n            transition: var(--transition);\n        }\n\n        .language-btn.active {\n            background-color: var(--primary-color);\n            color: white;\n        }\n\n        .hero {\n            padding: 80px 0;\n            text-align: center;\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            color: white;\n            border-radius: 0 0 var(--border-radius) var(--border-radius);\n            margin-bottom: 40px;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .hero::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.05);\n            z-index: 1;\n        }\n\n        .hero-content {\n            position: relative;\n            z-index: 2;\n        }\n\n        .hero h1 {\n            font-size: 2.8rem;\n            margin-bottom: 20px;\n            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);\n        }\n\n        .hero p {\n            font-size: 1.3rem;\n            max-width: 700px;\n            margin: 0 auto 30px;\n        }\n\n        .features {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 25px;\n            margin-bottom: 60px;\n        }\n\n        .feature-card {\n            background-color: var(--card-background);\n            border-radius: var(--border-radius);\n            padding: 25px;\n            box-shadow: var(--shadow);\n            transition: var(--transition);\n            text-align: center;\n        }\n\n        .feature-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n        }\n\n        .feature-icon {\n            font-size: 40px;\n            color: var(--primary-color);\n            margin-bottom: 15px;\n        }\n\n        .feature-card h3 {\n            color: var(--primary-color);\n            margin-bottom: 15px;\n        }\n\n        .ai-tutor {\n            background-color: var(--card-background);\n            border-radius: var(--border-radius);\n            padding: 30px;\n            box-shadow: var(--shadow);\n            margin-bottom: 60px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .tutor-avatar {\n            width: 100px;\n            height: 100px;\n            border-radius: 50%;\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: white;\n            font-size: 40px;\n            margin-bottom: 20px;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n        }\n\n        .chat-container {\n            width: 100%;\n            max-width: 600px;\n            margin-top: 20px;\n        }\n\n        .chat-messages {\n            height: 250px;\n            overflow-y: auto;\n            border: 1px solid #ddd;\n            border-radius: var(--border-radius);\n            padding: 15px;\n            margin-bottom: 15px;\n            background-color: #f5f5f5;\n        }\n\n        .message {\n            margin-bottom: 10px;\n            padding: 10px 15px;\n            border-radius: 18px;\n            max-width: 80%;\n            animation: fadeIn 0.3s;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .user-message {\n            background-color: var(--primary-color);\n            color: white;\n            margin-left: auto;\n        }\n\n        .tutor-message {\n            background-color: #e0e0e0;\n            color: var(--text-color);\n        }\n\n        .chat-input {\n            display: flex;\n            gap: 10px;\n        }\n\n        .chat-input input {\n            flex: 1;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: var(--border-radius);\n            font-size: 16px;\n        }\n\n        .progress-section {\n            background-color: var(--card-background);\n            border-radius: var(--border-radius);\n            padding: 30px;\n            box-shadow: var(--shadow);\n            margin-bottom: 50px;\n        }\n\n        .progress-bar {\n            height: 20px;\n            background-color: #eee;\n            border-radius: 10px;\n            margin: 20px 0;\n            overflow: hidden;\n        }\n\n        .progress-fill {\n            height: 100%;\n            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\n            border-radius: 10px;\n            width: 0%;\n            transition: width 1s ease-in-out;\n        }\n\n        .culture-section {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            margin-bottom: 50px;\n        }\n\n        .culture-card {\n            flex: 1;\n            min-width: 300px;\n            background-color: var(--card-background);\n            border-radius: var(--border-radius);\n            padding: 25px;\n            box-shadow: var(--shadow);\n            transition: var(--transition);\n        }\n\n        .culture-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .culture-card h3 {\n            color: var(--primary-color);\n            margin-bottom: 15px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .level-cards {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 25px;\n            margin: 40px 0;\n        }\n\n        .level-card {\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            color: white;\n            padding: 30px;\n            border-radius: var(--border-radius);\n            text-align: center;\n            transition: var(--transition);\n            cursor: pointer;\n            box-shadow: var(--shadow);\n        }\n\n        .level-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n        }\n\n        .level-card h3 {\n            font-size: 1.5rem;\n            margin-bottom: 10px;\n        }\n\n        .level-card p {\n            margin-bottom: 20px;\n            opacity: 0.9;\n        }\n\n        .test-container {\n            background-color: var(--card-background);\n            border-radius: var(--border-radius);\n            padding: 30px;\n            box-shadow: var(--shadow);\n            margin: 40px 0;\n        }\n\n        .question {\n            margin-bottom: 25px;\n        }\n\n        .options {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 12px;\n            margin-top: 15px;\n        }\n\n        .option {\n            padding: 15px;\n            border: 2px solid #ddd;\n            border-radius: var(--border-radius);\n            cursor: pointer;\n            transition: var(--transition);\n        }\n\n        .option:hover {\n            border-color: var(--primary-color);\n            background-color: rgba(0, 0, 0, 0.03);\n        }\n\n        .option.selected {\n            background-color: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n\n        .test-nav {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 30px;\n        }\n\n        .modal {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.5);\n            z-index: 1000;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .modal-content {\n            background-color: var(--card-background);\n            padding: 30px;\n            border-radius: var(--border-radius);\n            width: 90%;\n            max-width: 500px;\n            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);\n            animation: modalFadeIn 0.3s;\n        }\n\n        @keyframes modalFadeIn {\n            from { opacity: 0; transform: translateY(-20px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .modal-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n\n        .close-btn {\n            font-size: 24px;\n            cursor: pointer;\n            color: var(--text-color);\n        }\n\n        .form-group {\n            margin-bottom: 20px;\n        }\n\n        .form-group label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 500;\n        }\n\n        .form-group input {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: var(--border-radius);\n            font-size: 16px;\n        }\n\n        footer {\n            background-color: var(--text-color);\n            color: white;\n            padding: 40px 0;\n            text-align: center;\n            margin-top: 60px;\n        }\n\n        .page {\n            display: none;\n        }\n\n        .page.active {\n            display: block;\n            animation: pageFadeIn 0.5s;\n        }\n\n        @keyframes pageFadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        .badges {\n            display: flex;\n            gap: 15px;\n            margin-top: 20px;\n            flex-wrap: wrap;\n        }\n\n        .badge {\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            color: white;\n            padding: 10px 15px;\n            border-radius: 20px;\n            font-size: 14px;\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n        }\n\n        @media (max-width: 768px) {\n            .header-content {\n                flex-direction: column;\n                gap: 15px;\n            }\n            \n            nav ul {\n                flex-wrap: wrap;\n                justify-content: center;\n            }\n            \n            .hero h1 {\n                font-size: 2rem;\n            }\n            \n            .hero p {\n                font-size: 1.1rem;\n            }\n            \n            .user-actions {\n                flex-direction: column;\n            }\n            \n            .features {\n                grid-template-columns: 1fr;\n            }\n            \n            .culture-section {\n                flex-direction: column;\n            }\n            \n            .level-cards {\n                grid-template-columns: 1fr;\n            }\n        }\n    <\/style>\n<\/head>\n<body data-language=\"nl\">\n    <header>\n        <div class=\"container header-content\">\n            <div class=\"logo\">\n                <i class=\"fas fa-language\"><\/i>\n                <span>LinguaConnect<\/span>\n            <\/div>\n            <nav>\n                <ul>\n                    <li><a href=\"#\" onclick=\"showPage('home')\"><i class=\"fas fa-home\"><\/i> <span data-translate=\"home\">Home<\/span><\/a><\/li>\n                    <li><a href=\"#\" onclick=\"showPage('lessons')\"><i class=\"fas fa-book\"><\/i> <span data-translate=\"lessons\">Lessen<\/span><\/a><\/li>\n                    <li><a href=\"#\" onclick=\"showPage('tests')\"><i class=\"fas fa-tasks\"><\/i> <span data-translate=\"tests\">Toetsen<\/span><\/a><\/li>\n                    <li><a href=\"#\" onclick=\"showPage('community')\"><i class=\"fas fa-users\"><\/i> <span data-translate=\"community\">Community<\/span><\/a><\/li>\n                    <li><a href=\"#\" onclick=\"showPage('progress')\"><i class=\"fas fa-chart-line\"><\/i> <span data-translate=\"progress\">Voortgang<\/span><\/a><\/li>\n                <\/ul>\n            <\/nav>\n            <div class=\"user-actions\">\n                <div class=\"language-selector\">\n                    <button class=\"language-btn active\" data-lang=\"nl\">NL<\/button>\n                    <button class=\"language-btn\" data-lang=\"tmz\">\u2d5c\u2d4e\u2d63<\/button>\n                    <button class=\"language-btn\" data-lang=\"en\">EN<\/button>\n                <\/div>\n                <button class=\"btn btn-outline\" onclick=\"showModal('loginModal')\" id=\"loginBtn\">\n                    <i class=\"fas fa-sign-in-alt\"><\/i> <span data-translate=\"login\">Inloggen<\/span>\n                <\/button>\n                <button class=\"btn\" onclick=\"showModal('registerModal')\" id=\"registerBtn\">\n                    <i class=\"fas fa-user-plus\"><\/i> <span data-translate=\"register\">Registreren<\/span>\n                <\/button>\n                <button class=\"btn\" onclick=\"logout()\" id=\"logoutBtn\" style=\"display: none;\">\n                    <i class=\"fas fa-sign-out-alt\"><\/i> <span data-translate=\"logout\">Uitloggen<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"container\">\n        <!-- Home Pagina -->\n        <section id=\"home\" class=\"page active\">\n            <div class=\"hero\">\n                <div class=\"hero-content\">\n                    <h1 data-translate=\"heroTitle\">Leer talen op een natuurlijke manier<\/h1>\n                    <p data-translate=\"heroText\">Ontdek Nederlands, Tamazight en Engels met onze adaptieve AI-tutor en culturele ervaring.<\/p>\n                    <button class=\"btn\" onclick=\"showPage('level-select')\" data-translate=\"startButton\">Start nu<\/button>\n                <\/div>\n            <\/div>\n\n            <div class=\"features\">\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-robot\"><\/i>\n                    <\/div>\n                    <h3 data-translate=\"feature1Title\">Adaptieve lessen<\/h3>\n                    <p data-translate=\"feature1Text\">Lessen die zich aanpassen aan jouw niveau en leerstijl, van A0 tot B1.<\/p>\n                <\/div>\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-globe-europe\"><\/i>\n                    <\/div>\n                    <h3 data-translate=\"feature2Title\">Culturele integratie<\/h3>\n                    <p data-translate=\"feature2Text\">Leer de taal in zijn culturele context met authentieke materialen.<\/p>\n                <\/div>\n                <div class=\"feature-card\">\n                    <div class=\"feature-icon\">\n                        <i class=\"fas fa-chalkboard-teacher\"><\/i>\n                    <\/div>\n                    <h3 data-translate=\"feature3Title\">AI-begeleider<\/h3>\n                    <p data-translate=\"feature3Text\">Persoonlijke begeleiding van een AI-tutor die met je meegroeit.<\/p>\n                <\/div>\n            <\/div>\n\n            <section class=\"ai-tutor\">\n                <div class=\"tutor-avatar\">AI<\/div>\n                <h2 data-translate=\"tutorTitle\">Jouw persoonlijke taaltutor<\/h2>\n                <p data-translate=\"tutorText\">Oefen conversaties met onze AI-tutor die je helpt bij het leren.<\/p>\n                \n                <div class=\"chat-container\">\n                    <div class=\"chat-messages\" id=\"chatMessages\">\n                        <div class=\"message tutor-message\" data-translate=\"tutorWelcome\">Hallo! Ik ben je persoonlijke taaltutor. Laten we beginnen met oefenen. Hoe heet je?<\/div>\n                    <\/div>\n                    <div class=\"chat-input\">\n                        <input type=\"text\" id=\"userInput\" placeholder=\"Typ je bericht...\">\n                        <button class=\"btn\" id=\"sendMessage\"><i class=\"fas fa-paper-plane\"><\/i><\/button>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <section class=\"progress-section\">\n                <h2 data-translate=\"progressTitle\">Jouw voortgang<\/h2>\n                <div class=\"progress-bar\">\n                    <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n                <\/div>\n                <p data-translate=\"progressText\">Je bent op 25% van je weg naar niveau A1. Ga zo door!<\/p>\n                \n                <div class=\"badges\">\n                    <div class=\"badge\"><i class=\"fas fa-award\"><\/i> Eerste les voltooid<\/div>\n                    <div class=\"badge\"><i class=\"fas fa-fire\"><\/i> 3 dagen actief<\/div>\n                    <div class=\"badge\"><i class=\"fas fa-star\"><\/i> 5 oefeningen voltooid<\/div>\n                <\/div>\n            <\/section>\n\n            <section class=\"culture-section\">\n                <div class=\"culture-card\">\n                    <h3><i class=\"fas fa-flag\"><\/i> <span data-translate=\"cultureNlTitle\">Nederlandse cultuur<\/span><\/h3>\n                    <p data-translate=\"cultureNlText\">Ontdek de Nederlandse tradities, feestdagen en manier van leven.<\/p>\n                <\/div>\n                <div class=\"culture-card\">\n                    <h3><i class=\"fas fa-camera\"><\/i> <span data-translate=\"cultureTmzTitle\">Tamazight cultuur<\/span><\/h3>\n                    <p data-translate=\"cultureTmzText\">Duik in de rijke geschiedenis en tradities van de Amazigh-bevolking.<\/p>\n                <\/div>\n                <div class=\"culture-card\">\n                    <h3><i class=\"fas fa-landmark\"><\/i> <span data-translate=\"cultureEnTitle\">Engelse cultuur<\/span><\/h3>\n                    <p data-translate=\"cultureEnText\">Ervaar de diversiteit van de Engelssprekende wereld.<\/p>\n                <\/div>\n            <\/section>\n        <\/section>\n\n        <!-- Level Selectie Pagina -->\n        <section id=\"level-select\" class=\"page\">\n            <h2><i class=\"fas fa-layer-group\"><\/i> <span data-translate=\"selectLevel\">Selecteer je niveau<\/span><\/h2>\n            <p data-translate=\"selectLevelText\">Kies het niveau waar je wilt beginnen of doe een niveautoets om je niveau te bepalen.<\/p>\n            \n            <div class=\"level-cards\">\n                <div class=\"level-card\" onclick=\"startCourse('A0')\">\n                    <h3>A0 &#8211; Absolute beginner<\/h3>\n                    <p data-translate=\"levelA0\">Leer het alfabet, basiswoorden en eenvoudige zinnen.<\/p>\n                    <button class=\"btn\">Start met A0<\/button>\n                <\/div>\n                <div class=\"level-card\" onclick=\"startCourse('A1')\">\n                    <h3>A1 &#8211; Beginner<\/h3>\n                    <p data-translate=\"levelA1\">Eenvoudige gesprekken over vertrouwde onderwerpen.<\/p>\n                    <button class=\"btn\">Start met A1<\/button>\n                <\/div>\n                <div class=\"level-card\" onclick=\"startCourse('A2')\">\n                    <h3>A2 &#8211; Elementair<\/h3>\n                    <p data-translate=\"levelA2\">Kan zinnen en veelvoorkomende uitdrukkingen begrijpen.<\/p>\n                    <button class=\"btn\">Start met A2<\/button>\n                <\/div>\n                <div class=\"level-card\" onclick=\"startCourse('B1')\">\n                    <h3>B1 &#8211; Intermediate<\/h3>\n                    <p data-translate=\"levelB1\">Kan de belangrijkste punten begrijpen van duidelijke standaardteksten.<\/p>\n                    <button class=\"btn\">Start met B1<\/button>\n                <\/div>\n            <\/div>\n            \n            <div style=\"text-align: center; margin-top: 40px;\">\n                <button class=\"btn\" onclick=\"showPage('level-test')\">\n                    <i class=\"fas fa-clipboard-list\"><\/i> <span data-translate=\"takeLevelTest\">Doe niveautoets<\/span>\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- Toets Pagina -->\n        <section id=\"level-test\" class=\"page\">\n            <h2><i class=\"fas fa-clipboard-list\"><\/i> <span data-translate=\"levelTest\">Taalniveautoets<\/span><\/h2>\n            <p data-translate=\"levelTestText\">Deze toets helpt je het juiste startniveau te bepalen. Beantwoord de vragen naar waarheid.<\/p>\n            \n            <div class=\"test-container\">\n                <div class=\"question\">\n                    <h3 data-translate=\"question1\">Hoe zou je je huidige niveau beschrijven?<\/h3>\n                    <div class=\"options\">\n                        <div class=\"option\" onclick=\"selectOption(this)\">Ik ken geen woord van deze taal<\/div>\n                        <div class=\"option\" onclick=\"selectOption(this)\">Ik ken enkele woorden en basiszinnen<\/div>\n                        <div class=\"option\" onclick=\"selectOption(this)\">Ik kan eenvoudige gesprekken voeren<\/div>\n                        <div class=\"option\" onclick=\"selectOption(this)\">Ik kan redelijk communiceren over vertrouwde onderwerpen<\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"test-nav\">\n                    <button class=\"btn btn-outline\" onclick=\"showPage('level-select')\">\n                        <i class=\"fas fa-arrow-left\"><\/i> <span data-translate=\"back\">Terug<\/span>\n                    <\/button>\n                    <button class=\"btn\" onclick=\"calculateTestResult()\">\n                        <span data-translate=\"seeResults\">Resultaten zien<\/span> <i class=\"fas fa-arrow-right\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Lessen Pagina -->\n        <section id=\"lessons\" class=\"page\">\n            <h2><i class=\"fas fa-book\"><\/i> <span data-translate=\"lessons\">Lessen<\/span><\/h2>\n            <p data-translate=\"lessonsText\">Kies een hoofdstuk om te beginnen met leren.<\/p>\n            \n            <div class=\"level-cards\">\n                <div class=\"level-card\" onclick=\"showPage('lesson-detail')\">\n                    <h3>Hoofdstuk 1: Begroetingen<\/h3>\n                    <p>Leer hoe je mensen begroet in verschillende situaties.<\/p>\n                    <button class=\"btn\">Start les<\/button>\n                <\/div>\n                <div class=\"level-card\">\n                    <h3>Hoofdstuk 2: Introducties<\/h3>\n                    <p>Leer jezelf voorstellen en vragen stellen.<\/p>\n                    <button class=\"btn\">Start les<\/button>\n                <\/div>\n                <div class=\"level-card\">\n                    <h3>Hoofdstuk 3: Eten en drinken<\/h3>\n                    <p>Leer vocabulaire rondom voedsel en bestellen in een restaurant.<\/p>\n                    <button class=\"btn\">Start les<\/button>\n                <\/div>\n                <div class=\"level-card\">\n                    <h3>Hoofdstuk 4: Reizen<\/h3>\n                    <p>Leer hoe je vragen stelt over richtingen en transport.<\/p>\n                    <button class=\"btn\">Start les<\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Les Detail Pagina -->\n        <section id=\"lesson-detail\" class=\"page\">\n            <h2><i class=\"fas fa-book\"><\/i> Begroetingen<\/h2>\n            <p>Leer hoe je mensen begroet in verschillende situaties.<\/p>\n            \n            <div class=\"test-container\">\n                <h3>Vocabulaire<\/h3>\n                <ul style=\"margin: 20px;\">\n                    <li>Hallo &#8211; Hello<\/li>\n                    <li>Goedemorgen &#8211; Good morning<\/li>\n                    <li>Goedemiddag &#8211; Good afternoon<\/li>\n                    <li>Goedenavond &#8211; Good evening<\/li>\n                    <li>Hoe gaat het? &#8211; How are you?<\/li>\n                <\/ul>\n                \n                <h3>Zinnen<\/h3>\n                <ul style=\"margin: 20px;\">\n                    <li>Hallo, hoe gaat het met je? &#8211; Hello, how are you?<\/li>\n                    <li>Goedemorgen, fijne dag! &#8211; Good morning, have a nice day!<\/li>\n                    <li>Goedenavond, hoe was je dag? &#8211; Good evening, how was your day?<\/li>\n                <\/ul>\n                \n                <div style=\"text-align: center; margin-top: 30px;\">\n                    <button class=\"btn\" onclick=\"showPage('lesson-exercise')\">\n                        <i class=\"fas fa-play\"><\/i> Start oefening\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Community Pagina -->\n        <section id=\"community\" class=\"page\">\n            <h2><i class=\"fas fa-users\"><\/i> <span data-translate=\"community\">Community<\/span><\/h2>\n            <p data-translate=\"communityText\">Word deel van onze community en vind taalpartners om mee te oefenen.<\/p>\n            \n            <div class=\"test-container\">\n                <h3 data-translate=\"languagePartners\">Taalpartners<\/h3>\n                <p data-translate=\"languagePartnersText\">Vind andere gebruikers om mee te oefenen in de taal die je leert.<\/p>\n                \n                <div style=\"text-align: center; margin: 30px 0;\">\n                    <button class=\"btn\">\n                        <i class=\"fas fa-search\"><\/i> <span data-translate=\"findPartners\">Vind taalpartners<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Voortgang Pagina -->\n        <section id=\"progress\" class=\"page\">\n            <h2><i class=\"fas fa-chart-line\"><\/i> <span data-translate=\"progress\">Voortgang<\/span><\/h2>\n            <p data-translate=\"progressText\">Bekijk je voortgang en behaalde prestaties.<\/p>\n            \n            <div class=\"test-container\">\n                <h3 data-translate=\"yourProgress\">Jouw voortgang<\/h3>\n                <div class=\"progress-bar\">\n                    <div class=\"progress-fill\" style=\"width: 45%;\"><\/div>\n                <\/div>\n                <p>Je bent 45% voltooid met je huidige niveau.<\/p>\n                \n                <h3 style=\"margin-top: 30px;\" data-translate=\"achievements\">Prestaties<\/h3>\n                <div class=\"badges\">\n                    <div class=\"badge\"><i class=\"fas fa-medal\"><\/i> Eerste les voltooid<\/div>\n                    <div class=\"badge\"><i class=\"fas fa-trophy\"><\/i> 5 dagen actief<\/div>\n                    <div class=\"badge\"><i class=\"fas fa-star\"><\/i> 10 oefeningen voltooid<\/div>\n                    <div class=\"badge\"><i class=\"fas fa-award\"><\/i> Grammatica expert<\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Toetsen Pagina -->\n        <section id=\"tests\" class=\"page\">\n            <h2><i class=\"fas fa-tasks\"><\/i> <span data-translate=\"tests\">Toetsen<\/span><\/h2>\n            <p data-translate=\"testsText\">Test je kennis met onze hoofdstuk- en eindtoetsen.<\/p>\n            \n            <div class=\"level-cards\">\n                <div class=\"level-card\" onclick=\"showPage('test-detail')\">\n                    <h3>Hoofdstuk 1 Toets<\/h3>\n                    <p>Test je kennis over begroetingen en introducties.<\/p>\n                    <button class=\"btn\">Start toets<\/button>\n                <\/div>\n                <div class=\"level-card\">\n                    <h3>Hoofdstuk 2 Toets<\/h3>\n                    <p>Test je kennis over eten en drinken.<\/p>\n                    <button class=\"btn\">Start toets<\/button>\n                <\/div>\n                <div class=\"level-card\">\n                    <h3>Eindtoets A1<\/h3>\n                    <p>Test of je klaar bent voor niveau A2.<\/p>\n                    <button class=\"btn\">Start toets<\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <!-- Login Modal -->\n    <div id=\"loginModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h2 data-translate=\"login\">Inloggen<\/h2>\n                <span class=\"close-btn\" onclick=\"closeModal('loginModal')\">&times;<\/span>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"login-email\" data-translate=\"email\">E-mailadres<\/label>\n                <input type=\"email\" id=\"login-email\" placeholder=\"Jouw e-mailadres\">\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"login-password\" data-translate=\"password\">Wachtwoord<\/label>\n                <input type=\"password\" id=\"login-password\" placeholder=\"Jouw wachtwoord\">\n            <\/div>\n            <button class=\"btn\" onclick=\"login()\">\n                <i class=\"fas fa-sign-in-alt\"><\/i> <span data-translate=\"login\">Inloggen<\/span>\n            <\/button>\n            <p style=\"margin-top: 20px;\">\n                <span data-translate=\"noAccount\">Nog geen account?<\/span>\n                <a href=\"#\" onclick=\"closeModal('loginModal'); showModal('registerModal')\" data-translate=\"registerHere\">Registreer hier<\/a>\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Registratie Modal -->\n    <div id=\"registerModal\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h2 data-translate=\"register\">Registreren<\/h2>\n                <span class=\"close-btn\" onclick=\"closeModal('registerModal')\">&times;<\/span>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"register-name\" data-translate=\"fullName\">Volledige naam<\/label>\n                <input type=\"text\" id=\"register-name\" placeholder=\"Jouw volledige naam\">\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"register-email\" data-translate=\"email\">E-mailadres<\/label>\n                <input type=\"email\" id=\"register-email\" placeholder=\"Jouw e-mailadres\">\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"register-password\" data-translate=\"password\">Wachtwoord<\/label>\n                <input type=\"password\" id=\"register-password\" placeholder=\"Kies een wachtwoord\">\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"register-language\" data-translate=\"preferredLanguage\">Voorkeurstaal<\/label>\n                <select id=\"register-language\" class=\"form-control\">\n                    <option value=\"nl\">Nederlands<\/option>\n                    <option value=\"tmz\">Tamazight<\/option>\n                    <option value=\"en\">Engels<\/option>\n                <\/select>\n            <\/div>\n            <button class=\"btn\" onclick=\"register()\">\n                <i class=\"fas fa-user-plus\"><\/i> <span data-translate=\"register\">Registreren<\/span>\n            <\/button>\n            <p style=\"margin-top: 20px;\">\n                <span data-translate=\"hasAccount\">Heb je al een account?<\/span>\n                <a href=\"#\" onclick=\"closeModal('registerModal'); showModal('loginModal')\" data-translate=\"loginHere\">Log hier in<\/a>\n            <\/p>\n        <\/div>\n    <\/div>\n\n    <footer>\n        <div class=\"container\">\n            <p data-translate=\"footerText\">LinguaConnect &#8211; Een meertalig leerplatform voor iedereen<\/p>\n        <\/div>\n    <\/footer>\n\n    <script>\n        \/\/ Vertalingen voor alle ondersteunde talen\n        const translations = {\n            nl: {\n                home: \"Home\",\n                lessons: \"Lessen\",\n                tests: \"Toetsen\",\n                community: \"Community\",\n                progress: \"Voortgang\",\n                login: \"Inloggen\",\n                register: \"Registreren\",\n                logout: \"Uitloggen\",\n                heroTitle: \"Leer talen op een natuurlijke manier\",\n                heroText: \"Ontdek Nederlands, Tamazight en Engels met onze adaptieve AI-tutor en culturele ervaring.\",\n                startButton: \"Start nu\",\n                feature1Title: \"Adaptieve lessen\",\n                feature1Text: \"Lessen die zich aanpassen aan jouw niveau en leerstijl, van A0 tot B1.\",\n                feature2Title: \"Culturele integratie\",\n                feature2Text: \"Leer de taal in zijn culturele context met authentieke materialen.\",\n                feature3Title: \"AI-begeleider\",\n                feature3Text: \"Persoonlijke begeleiding van een AI-tutor die met je meegroeit.\",\n                tutorTitle: \"Jouw persoonlijke taaltutor\",\n                tutorText: \"Oefen conversaties met onze AI-tutor die je helpt bij het leren.\",\n                tutorWelcome: \"Hallo! Ik ben je persoonlijke taaltutor. Laten we beginnen met oefenen. Hoe heet je?\",\n                progressTitle: \"Jouw voortgang\",\n                progressText: \"Je bent op 25% van je weg naar niveau A1. Ga zo door!\",\n                cultureNlTitle: \"Nederlandse cultuur\",\n                cultureNlText: \"Ontdek de Nederlandse tradities, feestdagen en manier van leven.\",\n                cultureTmzTitle: \"Tamazight cultuur\",\n                cultureTmzText: \"Duik in de rijke geschiedenis en tradities van de Amazigh-bevolking.\",\n                cultureEnTitle: \"Engelse cultuur\",\n                cultureEnText: \"Ervaar de diversiteit van de Engelssprekende wereld.\",\n                footerText: \"LinguaConnect - Een meertalig leerplatform voor iedereen\",\n                selectLevel: \"Selecteer je niveau\",\n                selectLevelText: \"Kies het niveau waar je wilt beginnen of doe een niveautoets om je niveau te bepalen.\",\n                levelA0: \"Leer het alfabet, basiswoorden en eenvoudige zinnen.\",\n                levelA1: \"Eenvoudige gesprekken over vertrouwde onderwerpen.\",\n                levelA2: \"Kan zinnen en veelvoorkomende uitdrukkingen begrijpen.\",\n                levelB1: \"Kan de belangrijkste punten begrijpen van duidelijke standaardteksten.\",\n                takeLevelTest: \"Doe niveautoets\",\n                levelTest: \"Taalniveautoets\",\n                levelTestText: \"Deze toets helpt je het juiste startniveau te bepalen. Beantwoord de vragen naar waarheid.\",\n                question1: \"Hoe zou je je huidige niveau beschrijven?\",\n                back: \"Terug\",\n                seeResults: \"Resultaten zien\",\n                lessonsText: \"Kies een hoofdstuk om te beginnen met leren.\",\n                email: \"E-mailadres\",\n                password: \"Wachtwoord\",\n                noAccount: \"Nog geen account?\",\n                registerHere: \"Registreer hier\",\n                fullName: \"Volledige naam\",\n                preferredLanguage: \"Voorkeurstaal\",\n                hasAccount: \"Heb je al een account?\",\n                loginHere: \"Log hier in\",\n                communityText: \"Word deel van onze community en vind taalpartners om mee te oefenen.\",\n                languagePartners: \"Taalpartners\",\n                languagePartnersText: \"Vind andere gebruikers om mee te oefenen in de taal die je leert.\",\n                findPartners: \"Vind taalpartners\",\n                yourProgress: \"Jouw voortgang\",\n                achievements: \"Prestaties\",\n                testsText: \"Test je kennis met onze hoofdstuk- en eindtoetsen.\"\n            },\n            tmz: {\n                home: \"\u2d30\u2d59\u2d4f\u2d49\u2d31\",\n                lessons: \"\u2d5c\u2d49\u2d59\u2d59\u2d49\u2d37\u2d49\u2d37\u2d49\u2d4f\",\n                tests: \"\u2d49\u2d54\u2d37\u2d49\u2d37\u2d49\u2d62\u2d4f\",\n                community: \"\u2d5c\u2d30\u2d4e\u2d30\u2d5c\u2d5c\",\n                progress: \"\u2d30\u2d59\u2d53\u2d54\u2d3c\u2d49\",\n                login: \"\u2d30\u2d3d\u2d53\u2d4e\",\n                register: \"\u2d30\u2d4f\u2d59\u2d37\u2d30\u2d3d\",\n                logout: \"\u2d3c\u2d3c\u2d56\",\n                heroTitle: \"\u2d59\u2d59\u2d49\u2d4f\u2d59 \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d49\u2d4f \u2d37 \u2d5c\u2d4e\u2d63\u2d49\u2d54\u2d5c\",\n                heroText: \"\u2d59\u2d59\u2d4f\u2d30\u2d5c \u2d5c\u2d49\u2d4f\u2d4d\u2d49\u2d56\u2d49\u2d4f \u2d4f \u2d5c\u2d4f\u2d4d, \u2d5c\u2d4e\u2d63\u2d49\u2d56\u2d5c \u2d37 \u2d5c\u2d30\u2d4f\u2d33\u2d4d\u2d49\u2d63\u2d5c \u2d37\u2d49 \u2d61\u2d49\u2d4f \u2d53\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d4f \u2d5c\u2d4e\u2d59\u2d59\u2d49\u2d61\u2d49\u2d4f\u2d5c \u2d30\u2d59\u2d5c\u2d53\u2d54\u2d4f\u2d53\u2d4e\u2d49 \u2d37 \u2d5c\u2d4e\u2d59\u2d59\u2d49\u2d61\u2d49\u2d4f\u2d5c \u2d5c\u2d30\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c.\",\n                startButton: \"\u2d31\u2d37\u2d30 \u2d5c\u2d53\u2d54\u2d5c\",\n                feature1Title: \"\u2d5c\u2d49\u2d59\u2d59\u2d49\u2d37\u2d49\u2d37\u2d49\u2d4f \u2d49\u2d4d\u2d53\u2d3d\u2d49\u2d4f\",\n                feature1Text: \"\u2d5c\u2d49\u2d59\u2d59\u2d49\u2d37\u2d49\u2d37\u2d49\u2d4f \u2d5c\u2d49\u2d4d\u2d53\u2d3d\u2d49\u2d4f \u2d49 \u2d5c\u2d30\u2d4f\u2d30\u2d3d\u2d3d\u2d53\u2d4e \u2d37 \u2d5c\u2d30\u2d4f\u2d30\u2d61\u2d4d \u2d4f\u2d4f\u2d3d, \u2d59 \u2d53\u2d59\u2d49\u2d37\u2d49 \u2d300 \u2d30\u2d54 \u2d62\u2d30\u2d54\u2d30 \u2d301.\",\n                feature2Title: \"\u2d30\u2d59\u2d54\u2d5c\u2d49 \u2d5c\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c\",\n                feature2Text: \"\u2d59\u2d59\u2d49\u2d4f\u2d59 \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c \u2d37 \u2d5c\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c \u2d4f\u2d4f\u2d59 \u2d59 \u2d61\u2d49\u2d4e\u2d59\u2d49\u2d37\u2d49\u2d4f \u2d5c\u2d49\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d49\u2d4f.\",\n                feature3Title: \"\u2d30\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d30\u2d59\u2d5c\u2d53\u2d54\u2d4f\u2d53\u2d4e\u2d49\",\n                feature3Text: \"\u2d5c\u2d49\u2d61\u2d49\u2d59\u2d49 \u2d5c\u2d49\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c \u2d59\u2d33 \u2d61\u2d49\u2d4f \u2d53\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d30\u2d59\u2d5c\u2d53\u2d54\u2d4f\u2d53\u2d4e\u2d49 \u2d49\u2d4d\u2d53\u2d3d\u2d49\u2d4f \u2d49 \u2d5c\u2d30\u2d4f\u2d30\u2d3d\u2d3d\u2d53\u2d4e \u2d4f\u2d4f\u2d3d.\",\n                tutorTitle: \"\u2d30\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d4f\u2d4f\u2d3d \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c\",\n                tutorText: \"\u2d59\u2d59\u2d4f\u2d53\u2d5c\u2d59\u2d59 \u2d5c\u2d49\u2d4e\u2d59\u2d59\u2d49\u2d61\u2d49\u2d4f \u2d59\u2d33 \u2d61\u2d49\u2d4f \u2d53\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d30\u2d59\u2d5c\u2d53\u2d54\u2d4f\u2d53\u2d4e\u2d49 \u2d30\u2d37 \u2d49\u2d30\u2d61\u2d3d \u2d59\u2d59\u2d4f\u2d59\u2d4f\u2d4f\u2d3d.\",\n                tutorWelcome: \"\u2d30\u2d63\u2d53\u2d4d! \u2d4f\u2d3d\u2d3d\u2d49\u2d4f\u2d49 \u2d37 \u2d53\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d4f\u2d4f\u2d3d \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c. \u2d30\u2d37 \u2d4f\u2d31\u2d37\u2d53 \u2d5c\u2d53\u2d59\u2d59\u2d4f\u2d53\u2d5c\u2d59\u2d5c. \u2d49\u2d59\u2d4e \u2d4f\u2d4f\u2d3d \u2d4e\u2d30\u2d4f\u2d4f\u2d53?\",\n                progressTitle: \"\u2d30\u2d59\u2d53\u2d54\u2d3c\u2d49 \u2d4f\u2d4f\u2d3d\",\n                progressText: \"\u2d5c\u2d4d\u2d4d\u2d49\u2d37 25% \u2d59 \u2d61\u2d30\u2d54\u2d30\u2d54 \u2d4f\u2d4f\u2d3d \u2d56\u2d54 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d301. \u2d59\u2d3d\u2d54 \u2d37\u2d30\u2d56 \u2d3d\u2d54\u2d30!\",\n                cultureNlTitle: \"\u2d5c\u2d30\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c \u2d5c\u2d49\u2d4f\u2d4d\u2d49\u2d56\u2d49\u2d4f\",\n                cultureNlText: \"\u2d59\u2d59\u2d4f\u2d30\u2d5c \u2d5c\u2d49\u2d4f\u2d4d\u2d49\u2d56\u2d49\u2d4f \u2d5c\u2d49\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d49\u2d4f, \u2d5c\u2d49\u2d37\u2d53\u2d59\u2d30\u2d4f\u2d49\u2d4f \u2d37 \u2d5c\u2d4e\u2d49\u2d63\u2d61\u2d53\u2d54\u2d49 \u2d4f \u2d5c\u2d49\u2d63\u2d54\u2d3c\u2d30\u2d4f.\",\n                cultureTmzTitle: \"\u2d5c\u2d30\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c \u2d5c\u2d30\u2d4e\u2d30\u2d63\u2d49\u2d56\u2d5c\",\n                cultureTmzText: \"\u2d59\u2d59\u2d37\u2d53 \u2d56\u2d54 \u2d5c\u2d4e\u2d53\u2d54 \u2d5c\u2d30\u2d4e\u2d63\u2d61\u2d53\u2d54\u2d30\u2d4f\u2d5c \u2d37 \u2d5c\u2d49\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d49\u2d4f \u2d4f \u2d49\u2d4e\u2d30\u2d63\u2d49\u2d56\u2d4f.\",\n                cultureEnTitle: \"\u2d5c\u2d30\u2d4e\u2d53\u2d37\u2d30\u2d4f\u2d5c \u2d5c\u2d30\u2d4f\u2d33\u2d4d\u2d49\u2d63\u2d5c\",\n                cultureEnText: \"\u2d4a\u2d54 \u2d5c\u2d30\u2d3c\u2d49\u2d54\u2d30 \u2d4f \u2d61\u2d30\u2d54\u2d30\u2d54 \u2d49\u2d4f\u2d59\u2d49\u2d4e\u2d4d\u2d30\u2d4f \u2d49\u2d37 \u2d59\u2d59\u2d30\u2d61\u2d30\u2d4d\u2d4f \u2d5c\u2d30\u2d4f\u2d33\u2d4d\u2d49\u2d63\u2d5c.\",\n                footerText: \"LinguaConnect - \u2d30\u2d59\u2d49\u2d4f\u2d30\u2d3d \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d49\u2d4f \u2d49\u2d3d\u2d54\u2d30\u2d61\u2d4f \u2d49 \u2d3d\u2d54\u2d30 \u2d61\u2d49\u2d4e\u2d59\u2d49\u2d37\u2d49\u2d4f\",\n                selectLevel: \"\u2d3c\u2d54 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d4f\u2d4f\u2d3d\",\n                selectLevelText: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d5c\u2d30\u2d37 \u2d5c\u2d31\u2d37\u2d49\u2d37 \u2d56\u2d54\u2d59, \u2d4f\u2d4f\u2d49\u2d5c \u2d5c\u2d30\u2d54\u2d37\u2d30\u2d59\u2d5c \u2d4f \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d30\u2d37 \u2d5c\u2d59\u2d3d\u2d4f\u2d5c \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d4f\u2d4f\u2d3d.\",\n                levelA0: \"\u2d59\u2d59\u2d49\u2d4f\u2d59 \u2d49\u2d59\u2d3d\u2d49\u2d4d\u2d4f, \u2d49\u2d61\u2d37\u2d4f \u2d49\u2d4e\u2d63\u2d61\u2d54\u2d49\u2d62\u2d4f \u2d37 \u2d5c\u2d53\u2d5c\u2d5c\u2d54\u2d49\u2d4f \u2d5c\u2d49\u2d4e\u2d63\u2d61\u2d54\u2d49\u2d62\u2d4f.\",\n                levelA1: \"\u2d5c\u2d49\u2d4e\u2d59\u2d49\u2d61\u2d49\u2d4f \u2d5c\u2d49\u2d4e\u2d63\u2d61\u2d54\u2d49\u2d62\u2d4f \u2d59\u2d33 \u2d61\u2d30\u2d61\u2d30\u2d4d\u2d4f \u2d5c\u2d53\u2d54\u2d49\u2d4e\u2d49\u2d4d\u2d4f.\",\n                levelA2: \"\u2d62\u2d63\u2d63\u2d30 \u2d37 \u2d49\u2d3c\u2d40\u2d4e \u2d5c\u2d53\u2d5c\u2d5c\u2d54\u2d49\u2d4f \u2d37 \u2d49\u2d37\u2d54\u2d53\u2d59\u2d4f \u2d49\u2d4e\u2d63\u2d61\u2d54\u2d49\u2d62\u2d4f.\",\n                levelB1: \"\u2d62\u2d63\u2d63\u2d30 \u2d37 \u2d49\u2d3c\u2d40\u2d4e \u2d49\u2d59\u2d3d\u2d3d\u2d49\u2d4d\u2d4f \u2d49\u2d4e\u2d54\u2d61\u2d30\u2d4f\u2d4f \u2d4f \u2d61\u2d30\u2d61\u2d30\u2d4d\u2d4f \u2d49\u2d59\u2d49\u2d4f\u2d56\u2d4d\u2d49\u2d59\u2d4f \u2d49\u2d4f\u2d56\u2d4d\u2d49\u2d59\u2d4f.\",\n                takeLevelTest: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d5c\u2d30\u2d54\u2d37\u2d30\u2d59\u2d5c \u2d4f \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c\",\n                levelTest: \"\u2d5c\u2d30\u2d54\u2d37\u2d30\u2d59\u2d5c \u2d4f \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c\",\n                levelTestText: \"\u2d5c\u2d30\u2d54\u2d37\u2d30\u2d59\u2d5c \u2d30\u2d37 \u2d49\u2d30\u2d61\u2d3d\u2d4f \u2d30\u2d37 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d4f\u2d4f\u2d3d \u2d5c\u2d30\u2d4e\u2d30\u2d5c\u2d5c\u2d53\u2d5c. \u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d49\u2d59\u2d5c\u2d53\u2d5c\u2d4f\u2d4f \u2d59\u2d33 \u2d5c\u2d4e\u2d49\u2d37\u2d5c.\",\n                question1: \"\u2d4e\u2d30\u2d4f\u2d4f\u2d49 \u2d37 \u2d5c\u2d59\u2d59\u2d4f\u2d49\u2d37 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c \u2d4f\u2d4f\u2d3d \u2d5c\u2d30\u2d4e\u2d53\u2d54\u2d5c\u2d53\u2d4f\u2d49?\",\n                back: \"\u2d30\u2d56\u2d4f\u2d49\",\n                seeResults: \"\u2d65\u2d54 \u2d49\u2d3c\u2d54\u2d37\u2d4f\u2d59\u2d4f\",\n                lessonsText: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d61\u2d30\u2d4f\u2d30\u2d61\u2d30\u2d4d \u2d30\u2d37 \u2d5c\u2d31\u2d37\u2d49\u2d37 \u2d56\u2d54 \u2d5c\u2d59\u2d59\u2d49\u2d37\u2d49.\",\n                email: \"\u2d49\u2d4e\u2d30\u2d62\u2d4d\",\n                password: \"\u2d5c\u2d30\u2d61\u2d53\u2d54\u2d5c \u2d4f \u2d61\u2d53\u2d54\u2d37\",\n                noAccount: \"\u2d53\u2d54 \u2d5c\u2d59\u2d59\u2d4f\u2d49\u2d37\u2d56 \u2d30\u2d54\u2d37\u2d49\u2d59\u2d4f?\",\n                registerHere: \"\u2d30\u2d4f\u2d59\u2d37\u2d30\u2d3d \u2d37\u2d30\",\n                fullName: \"\u2d49\u2d59\u2d4e \u2d4f\u2d4f\u2d3d \u2d4e\u2d53\u2d55\u2d55\u2d30\u2d3d\u2d3d\u2d4f\",\n                preferredLanguage: \"\u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c \u2d5c\u2d30\u2d4e\u2d53\u2d54\u2d5c\u2d53\u2d4f\u2d5c\",\n                hasAccount: \"\u2d49\u2d59\u2d37\u2d56 \u2d37\u2d30\u2d54\u2d37 \u2d53\u2d54\u2d37\u2d49\u2d59\u2d4f?\",\n                loginHere: \"\u2d30\u2d3d\u2d53\u2d4e \u2d37\u2d30\",\n                communityText: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d5c\u2d30\u2d4e\u2d30\u2d5c\u2d5c \u2d4f\u2d4f\u2d56 \u2d37 \u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d49\u2d4e\u2d37\u2d37\u2d53\u2d3d\u2d4d\u2d4f \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c \u2d30\u2d37 \u2d5c\u2d59\u2d59\u2d4f\u2d53\u2d5c\u2d59\u2d5c.\",\n                languagePartners: \"\u2d49\u2d4e\u2d37\u2d37\u2d53\u2d3d\u2d4d\u2d4f \u2d4f \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c\",\n                languagePartnersText: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d49\u2d4e\u2d59\u2d4e\u2d54\u2d4f \u2d4f\u2d49\u2d37\u2d37\u2d4f \u2d30\u2d37 \u2d5c\u2d59\u2d59\u2d4f\u2d53\u2d5c\u2d59\u2d5c \u2d59\u2d33 \u2d5c\u2d53\u2d5c\u2d4d\u2d30\u2d62\u2d5c \u2d5c\u2d30\u2d37 \u2d5c\u2d59\u2d59\u2d49\u2d4f\u2d59\u2d4f.\",\n                findPartners: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d49\u2d4e\u2d37\u2d37\u2d53\u2d3d\u2d4d\u2d4f\",\n                yourProgress: \"\u2d30\u2d59\u2d53\u2d54\u2d3c\u2d49 \u2d4f\u2d4f\u2d3d\",\n                achievements: \"\u2d49\u2d59\u2d4f\u2d3c\u2d30\u2d54\u2d4f\",\n                testsText: \"\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d5c\u2d4e\u2d53\u2d54\u2d5c\u2d53\u2d4f\u2d4f\u2d4f\u2d3d \u2d59\u2d33 \u2d5c\u2d49\u2d54\u2d37\u2d49\u2d37\u2d49\u2d62\u2d4f \u2d4f\u2d56\u2d4f \u2d37 \u2d49\u2d54\u2d37\u2d49\u2d37\u2d49\u2d62\u2d4f \u2d4f \u2d5c\u2d4e\u2d30\u2d54\u2d30.\"\n            },\n            en: {\n                home: \"Home\",\n                lessons: \"Lessons\",\n                tests: \"Tests\",\n                community: \"Community\",\n                progress: \"Progress\",\n                login: \"Login\",\n                register: \"Register\",\n                logout: \"Logout\",\n                heroTitle: \"Learn languages naturally\",\n                heroText: \"Discover Dutch, Tamazight and English with our adaptive AI tutor and cultural experience.\",\n                startButton: \"Start now\",\n                feature1Title: \"Adaptive lessons\",\n                feature1Text: \"Lessons that adapt to your level and learning style, from A0 to B1.\",\n                feature2Title: \"Cultural integration\",\n                feature2Text: \"Learn the language in its cultural context with authentic materials.\",\n                feature3Title: \"AI tutor\",\n                feature3Text: \"Personal guidance from an AI tutor that grows with you.\",\n                tutorTitle: \"Your personal language tutor\",\n                tutorText: \"Practice conversations with our AI tutor that helps you learn.\",\n                tutorWelcome: \"Hello! I'm your personal language tutor. Let's start practicing. What's your name?\",\n                progressTitle: \"Your progress\",\n                progressText: \"You're 25% on your way to level A1. Keep it up!\",\n                cultureNlTitle: \"Dutch culture\",\n                cultureNlText: \"Discover Dutch traditions, holidays and way of life.\",\n                cultureTmzTitle: \"Tamazight culture\",\n                cultureTmzText: \"Dive into the rich history and traditions of the Amazigh people.\",\n                cultureEnTitle: \"English culture\",\n                cultureEnText: \"Experience the diversity of the English-speaking world.\",\n                footerText: \"LinguaConnect - A multilingual learning platform for everyone\",\n                selectLevel: \"Select your level\",\n                selectLevelText: \"Choose the level where you want to start or take a level test to determine your level.\",\n                levelA0: \"Learn the alphabet, basic words and simple sentences.\",\n                levelA1: \"Simple conversations about familiar topics.\",\n                levelA2: \"Can understand sentences and commonly used expressions.\",\n                levelB1: \"Can understand the main points of clear standard texts.\",\n                takeLevelTest: \"Take level test\",\n                levelTest: \"Language level test\",\n                levelTestText: \"This test helps you determine the right starting level. Answer the questions truthfully.\",\n                question1: \"How would you describe your current level?\",\n                back: \"Back\",\n                seeResults: \"See results\",\n                lessonsText: \"Choose a chapter to start learning.\",\n                email: \"Email address\",\n                password: \"Password\",\n                noAccount: \"No account yet?\",\n                registerHere: \"Register here\",\n                fullName: \"Full name\",\n                preferredLanguage: \"Preferred language\",\n                hasAccount: \"Already have an account?\",\n                loginHere: \"Login here\",\n                communityText: \"Become part of our community and find language partners to practice with.\",\n                languagePartners: \"Language partners\",\n                languagePartnersText: \"Find other users to practice the language you're learning with.\",\n                findPartners: \"Find partners\",\n                yourProgress: \"Your progress\",\n                achievements: \"Achievements\",\n                testsText: \"Test your knowledge with our chapter and final tests.\"\n            }\n        };\n\n        \/\/ Huidige taal instellen\n        let currentLanguage = 'nl';\n        let currentUser = null;\n\n        \/\/ Elementen selecteren\n        const languageButtons = document.querySelectorAll('.language-btn');\n        const translatableElements = document.querySelectorAll('[data-translate]');\n        const progressFill = document.getElementById('progressFill');\n        const chatMessages = document.getElementById('chatMessages');\n        const userInput = document.getElementById('userInput');\n        const sendButton = document.getElementById('sendMessage');\n        const loginBtn = document.getElementById('loginBtn');\n        const registerBtn = document.getElementById('registerBtn');\n        const logoutBtn = document.getElementById('logoutBtn');\n\n        \/\/ Pagina navigatie\n        function showPage(pageId) {\n            document.querySelectorAll('.page').forEach(page => {\n                page.classList.remove('active');\n            });\n            document.getElementById(pageId).classList.add('active');\n        }\n\n        \/\/ Modal weergeven\n        function showModal(modalId) {\n            document.getElementById(modalId).style.display = 'flex';\n        }\n\n        \/\/ Modal sluiten\n        function closeModal(modalId) {\n            document.getElementById(modalId).style.display = 'none';\n        }\n\n        \/\/ Taalwijziging afhandelen\n        languageButtons.forEach(button => {\n            button.addEventListener('click', () => {\n                const lang = button.getAttribute('data-lang');\n                changeLanguage(lang);\n                \n                \/\/ Actieve knop bijwerken\n                languageButtons.forEach(btn => btn.classList.remove('active'));\n                button.classList.add('active');\n            });\n        });\n\n        \/\/ Taal wijzigen\n        function changeLanguage(lang) {\n            currentLanguage = lang;\n            document.body.setAttribute('data-language', lang);\n            \n            \/\/ Alle vertaalbare elementen bijwerken\n            translatableElements.forEach(element => {\n                const key = element.getAttribute('data-translate');\n                element.textContent = translations[lang][key];\n            });\n        }\n\n        \/\/ Voortgangsbalk animeren\n        function animateProgressBar() {\n            progressFill.style.width = '25%';\n        }\n\n        \/\/ Chat functionaliteit\n        sendButton.addEventListener('click', sendMessage);\n        userInput.addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') {\n                sendMessage();\n            }\n        });\n\n        function sendMessage() {\n            const message = userInput.value.trim();\n            if (message === '') return;\n            \n            \/\/ Gebruikersbericht toevoegen\n            addMessage(message, 'user');\n            userInput.value = '';\n            \n            \/\/ AI-reactie na korte vertraging\n            setTimeout(() => {\n                let response = '';\n                \n                if (message.toLowerCase().includes('naam') || message.toLowerCase().includes('name') || message.toLowerCase().includes('ism')) {\n                    response = currentLanguage === 'nl' \n                        ? `Leuk je te ontmoeten! Ik zal je helpen bij het leren van ${currentLanguage === 'nl' ? 'Nederlands' : currentLanguage === 'tmz' ? 'Tamazight' : 'Engels'}. Waarmee wil je vandaag oefenen?`\n                        : currentLanguage === 'tmz'\n                        ? `\u2d49\u2d4e\u2d59\u2d4d\u2d49 \u2d4e\u2d30\u2d54\u2d40\u2d31\u2d30! \u2d30\u2d37 \u2d4f\u2d4f\u2d30\u2d61\u2d3d \u2d37 \u2d5c\u2d49\u2d61\u2d49\u2d59\u2d49 \u2d4f\u2d4f\u2d3d \u2d59\u2d59\u2d4f\u2d59\u2d4f\u2d59 \u2d4f ${currentLanguage === 'nl' ? '\u2d5c\u2d49\u2d4f\u2d4d\u2d49\u2d56\u2d49\u2d4f' : currentLanguage === 'tmz' ? '\u2d5c\u2d4e\u2d63\u2d49\u2d56\u2d5c' : '\u2d5c\u2d30\u2d4f\u2d33\u2d4d\u2d49\u2d63\u2d5c'}. \u2d59 \u2d4e\u2d30\u2d4f\u2d5c \u2d37 \u2d5c\u2d59\u2d59\u2d4f\u2d53\u2d5c\u2d59\u2d5c \u2d30\u2d59\u2d56\u2d56\u2d61\u2d30\u2d4d?`\n                        : `Nice to meet you! I will help you learn ${currentLanguage === 'nl' ? 'Dutch' : currentLanguage === 'tmz' ? 'Tamazight' : 'English'}. What would you like to practice today?`;\n                } else {\n                    response = currentLanguage === 'nl' \n                        ? 'Dat is interessant! Laten we hier meer over praten in de doeltaal. Probeer eens een zin te vormen over dit onderwerp.'\n                        : currentLanguage === 'tmz'\n                        ? '\u2d61\u2d30\u2d62\u2d40\u2d49 \u2d49\u2d4e\u2d59\u2d4d\u2d49! \u2d30\u2d37 \u2d4f\u2d59\u2d59\u2d61\u2d54\u2d59 \u2d37\u2d30\u2d56 \u2d56\u2d3c \u2d61\u2d30\u2d62\u2d62\u2d30\u2d37. \u2d30\u2d54\u2d4e\u2d37 \u2d5c\u2d53\u2d5c\u2d5c\u2d54\u2d49\u2d4f \u2d5c\u2d30\u2d61\u2d59\u2d59\u2d30 \u2d59\u2d33 \u2d61\u2d30\u2d62\u2d62\u2d30\u2d37.'\n                        : 'That is interesting! Let us talk more about this in the target language. Try to form a sentence about this topic.';\n                }\n                \n                addMessage(response, 'tutor');\n            }, 1000);\n        }\n\n        function addMessage(text, sender) {\n            const messageDiv = document.createElement('div');\n            messageDiv.classList.add('message');\n            messageDiv.classList.add(sender + '-message');\n            messageDiv.textContent = text;\n            chatMessages.appendChild(messageDiv);\n            chatMessages.scrollTop = chatMessages.scrollHeight;\n        }\n\n        \/\/ Registratie functionaliteit\n        function register() {\n            const name = document.getElementById('register-name').value;\n            const email = document.getElementById('register-email').value;\n            const password = document.getElementById('register-password').value;\n            const language = document.getElementById('register-language').value;\n            \n            if (!name || !email || !password) {\n                alert(currentLanguage === 'nl' ? 'Vul alle velden in' : currentLanguage === 'tmz' ? '\u2d59\u2d49\u2d54 \u2d30\u2d3d\u2d3d\u2d4f \u2d49\u2d4e\u2d54\u2d30\u2d61\u2d4f' : 'Please fill in all fields');\n                return;\n            }\n            \n            \/\/ Opslaan in localStorage (in een echte app zou dit naar een server gaan)\n            const user = {\n                name,\n                email,\n                password, \/\/ In een echte app zou dit gehasht worden\n                language,\n                progress: 0,\n                level: 'A0'\n            };\n            \n            localStorage.setItem('user', JSON.stringify(user));\n            currentUser = user;\n            \n            updateUserUI();\n            closeModal('registerModal');\n            \n            \/\/ Taal instellen op basis van gebruikersvoorkeur\n            changeLanguage(language);\n            \n            alert(currentLanguage === 'nl' ? 'Registratie succesvol!' : currentLanguage === 'tmz' ? '\u2d5c\u2d30\u2d4f\u2d59\u2d37\u2d30\u2d3d\u2d5c \u2d5c\u2d61\u2d54\u2d30!' : 'Registration successful!');\n        }\n\n        \/\/ Login functionaliteit\n        function login() {\n            const email = document.getElementById('login-email').value;\n            const password = document.getElementById('login-password').value;\n            \n            \/\/ In een echte app zou dit een server request zijn\n            const storedUser = localStorage.getItem('user');\n            \n            if (storedUser) {\n                const user = JSON.parse(storedUser);\n                \n                if (user.email === email && user.password === password) {\n                    currentUser = user;\n                    updateUserUI();\n                    closeModal('loginModal');\n                    \n                    \/\/ Taal instellen op basis van gebruikersvoorkeur\n                    changeLanguage(user.language);\n                    \n                    alert(currentLanguage === 'nl' ? 'Ingelogd!' : currentLanguage === 'tmz' ? '\u2d5c\u2d53\u2d3d\u2d4e\u2d49\u2d4e!' : 'Logged in!');\n                    return;\n                }\n            }\n            \n            alert(currentLanguage === 'nl' ? 'Ongeldige inloggegevens' : currentLanguage === 'tmz' ? '\u2d5c\u2d49\u2d4f\u2d3c\u2d53\u2d54\u2d49\u2d4f \u2d4f \u2d61\u2d53\u2d3d\u2d4e \u2d53\u2d54 \u2d5c\u2d4d\u2d4d\u2d49' : 'Invalid login credentials');\n        }\n\n        \/\/ Logout functionaliteit\n        function logout() {\n            currentUser = null;\n            updateUserUI();\n            showPage('home');\n        }\n\n        \/\/ UI updaten op basis van login status\n        function updateUserUI() {\n            if (currentUser) {\n                loginBtn.style.display = 'none';\n                registerBtn.style.display = 'none';\n                logoutBtn.style.display = 'block';\n            } else {\n                loginBtn.style.display = 'block';\n                registerBtn.style.display = 'block';\n                logoutBtn.style.display = 'none';\n            }\n        }\n\n        \/\/ Start een cursus op een bepaald niveau\n        function startCourse(level) {\n            if (!currentUser) {\n                showModal('loginModal');\n                alert(currentLanguage === 'nl' ? 'Log in om te beginnen' : currentLanguage === 'tmz' ? '\u2d30\u2d3d\u2d4e \u2d30\u2d37 \u2d5c\u2d31\u2d37\u2d49\u2d37' : 'Login to get started');\n                return;\n            }\n            \n            \/\/ Update user level\n            currentUser.level = level;\n            localStorage.setItem('user', JSON.stringify(currentUser));\n            \n            showPage('lessons');\n            \n            alert(currentLanguage === 'nl' ? `Gestart met niveau ${level}!` : currentLanguage === 'tmz' ? `\u2d5c\u2d61\u2d54\u2d30 \u2d59\u2d33 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c ${level}!` : `Started with level ${level}!`);\n        }\n\n        \/\/ Option selectie in toetsen\n        function selectOption(element) {\n            \/\/ Verwijder geselecteerde class van alle opties\n            element.parentNode.querySelectorAll('.option').forEach(opt => {\n                opt.classList.remove('selected');\n            });\n            \n            \/\/ Voeg geselecteerde class toe aan geklikte optie\n            element.classList.add('selected');\n        }\n\n        \/\/ Toetsresultaat berekenen\n        function calculateTestResult() {\n            const selectedOption = document.querySelector('.option.selected');\n            \n            if (!selectedOption) {\n                alert(currentLanguage === 'nl' ? 'Selecteer een antwoord' : currentLanguage === 'tmz' ? '\u2d59\u2d59\u2d4f\u2d5c\u2d49 \u2d5c\u2d30\u2d54\u2d37\u2d30\u2d59\u2d5c' : 'Please select an answer');\n                return;\n            }\n            \n            \/\/ Simpele bepaling van niveau (in een echte app zou dit complexer zijn)\n            const options = document.querySelectorAll('.option');\n            const selectedIndex = Array.from(options).indexOf(selectedOption);\n            const levels = ['A0', 'A1', 'A2', 'B1'];\n            const recommendedLevel = levels[selectedIndex];\n            \n            alert(currentLanguage === 'nl' ? `Je wordt aanbevolen om te starten met niveau ${recommendedLevel}` : \n                  currentLanguage === 'tmz' ? `\u2d5c\u2d61\u2d54\u2d30 \u2d59\u2d33 \u2d5c\u2d30\u2d59\u2d61\u2d49\u2d4d\u2d5c ${recommendedLevel}` : \n                  `You are recommended to start with level ${recommendedLevel}`);\n            \n            startCourse(recommendedLevel);\n        }\n\n        \/\/ Initialisatie\n        function init() {\n            animateProgressBar();\n            \n            \/\/ Controleren of er een ingelogde gebruiker is\n            const storedUser = localStorage.getItem('user');\n            if (storedUser) {\n                currentUser = JSON.parse(storedUser);\n            }\n            \n            updateUserUI();\n            \n            \/\/ Sluit modals wanneer er buiten geklikt wordt\n            window.onclick = function(event) {\n                document.querySelectorAll('.modal').forEach(modal => {\n                    if (event.target === modal) {\n                        modal.style.display = 'none';\n                    }\n                });\n            }\n        }\n\n        \/\/ Start initialisatie wanneer de pagina geladen is\n        window.onload = init;\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing! html LinguaConnect &#8211; Leer talen op een natuurlijke manier LinguaConnect Home Lessen Toetsen Community Voortgang NL \u2d5c\u2d4e\u2d63 EN Inloggen Registreren Uitloggen Leer talen op een natuurlijke manier Ontdek Nederlands, Tamazight en Engels met onze adaptieve AI-tutor en culturele ervaring. Start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":1,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taaldigitaal.eu\/index.php\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}