GEOCHALLENGE

No existing file or test is named; start by scoping the requested single HTML file and its embedded CSS and JavaScript. Review the required navigation, category-specific questions, ten exercise types, localStorage progress, and map behavior before implementation. Done means all stated flows and buttons work without empty placeholders, and the site works responsively without a server.

Maak een volledige interactieve aardrijkskundewebsite: GEOCHALLENGE

Maak een professionele, uitgebreide en volledig werkende educatieve website met HTML, CSS en JavaScript.

De website heet GEOCHALLENGE en is bedoeld voor leerlingen die aardrijkskunde willen oefenen via verschillende spelletjes en quizzen.

Het belangrijkste onderdeel is dat de gebruiker eerst een werelddeel kiest, daarna een onderwerp en vervolgens een oefening.

De website moet geschikt zijn om via een link op Smartschool te openen.

1. HOMEPAGE

Maak een moderne homepage met:

• De titel GEOCHALLENGE.
• Een wereldkaart als achtergrond.
• Een knop 'Begin met leren'.
• Het aantal verzamelde punten.
• Het huidige level.
• De laatste gespeelde oefeningen.
• Een knop naar mijn voortgang.
• Een knop naar alle werelddelen.

Gebruik blauw, groen, wit en geel als kleuren.

2. KEUZE VAN WERELDDELEN

Maak grote aanklikbare knoppen voor:

• Europa
• Afrika
• Azië
• Noord-Amerika
• Zuid-Amerika
• Oceanië
• Antarctica

Iedere knop moet naar een eigen pagina gaan.

Gebruik bij ieder werelddeel een passende afbeelding of kaart.

3. EUROPA

Wanneer iemand op Europa klikt, verschijnt een nieuwe pagina met deze onderwerpen:

• Heel Europa
• Europese Unie
• Europese landen
• Europese hoofdsteden
• Europese rivieren
• Europese gebergtes
• Europese meren
• Europese zeeën
• Europese eilanden
• Europese schiereilanden

BELANGRIJK:
Europa en de Europese Unie moeten twee volledig aparte categorieën zijn.

Bij heel Europa moeten alle geografisch Europese landen aan bod komen.

Bij de Europese Unie mogen uitsluitend de 27 huidige EU-lidstaten voorkomen.

4. AFRIKA

Maak dezelfde structuur voor Afrika:

• Afrikaanse landen
• Afrikaanse hoofdsteden
• Afrikaanse rivieren
• Afrikaanse gebergtes
• Afrikaanse meren
• Afrikaanse woestijnen
• Afrikaanse zeeën en oceanen
• Afrikaanse eilanden

5. AZIË

Maak dezelfde structuur voor Azië:

• Aziatische landen
• Aziatische hoofdsteden
• Aziatische rivieren
• Aziatische gebergtes
• Aziatische meren
• Aziatische woestijnen
• Aziatische zeeën
• Aziatische eilanden

6. NOORD-AMERIKA

Onderwerpen:

• Landen
• Hoofdsteden
• Rivieren
• Gebergtes
• Meren
• Woestijnen
• Zeeën
• Eilanden

7. ZUID-AMERIKA

Onderwerpen:

• Landen
• Hoofdsteden
• Rivieren
• Gebergtes
• Meren
• Woestijnen
• Zeeën
• Eilanden

8. OCEANIË

Onderwerpen:

• Landen
• Hoofdsteden
• Eilanden
• Rivieren
• Gebergtes
• Zeeën
• Oceanen

9. ANTARCTICA

Onderwerpen:

• Geografie
• Gebergtes
• IJsgebieden
• Oceanen
• Belangrijke geografische plaatsen

Maak duidelijk dat Antarctica geen gewone landen en hoofdsteden heeft.

10. OEFENINGEN

Dit is het belangrijkste onderdeel.

Iedere categorie moet dezelfde soorten oefeningen hebben.

Bijvoorbeeld:
Europa → Europese Unie → Hoofdsteden → Quiz.

Maar ook:
Afrika → Rivieren → Kaartquiz.

Maak deze 10 oefenmogelijkheden:

1. Meerkeuzequiz
2. Kaartquiz
3. Koppelspe l
4. Typ het antwoord
5. Letters door elkaar
6. Waar of niet waar
7. Geheugenspel
8. Flitskaarten
9. Tijdchallenge
10. Eindtoets

Alle oefeningen moeten automatisch de juiste vragen gebruiken voor de gekozen categorie.

Bijvoorbeeld:
Als de gebruiker Afrika en rivieren kiest, mogen er geen Europese hoofdsteden verschijnen.

11. INTERACTIEVE KAARTEN

Maak bij de kaartquiz een interactieve kaart.

De speler krijgt bijvoorbeeld de opdracht:
'Klik op de rivier de Nijl.'

De speler moet de juiste plaats op de kaart aanduiden.

Maak verschillende kaarten:

• Wereldkaart
• Kaart van Europa
• Kaart van Afrika
• Kaart van Azië
• Kaart van Noord-Amerika
• Kaart van Zuid-Amerika
• Kaart van Oceanië

Gebruik waar mogelijk echte geografische kaartgegevens.

Bij een juist antwoord krijgt de speler punten.

Bij een fout antwoord wordt de juiste locatie getoond.

12. PUNTENSYSTEEM

• Juist antwoord: 10 punten.
• 5 juiste antwoorden achter elkaar: 25 bonuspunten.
• 10 juiste antwoorden achter elkaar: 50 bonuspunten.
• Volledige quiz afwerken: bonuspunten.
• Perfecte eindtoets: extra medaille.

Bewaar de punten automatisch.

13. MIJN VOORTGANG

Maak een persoonlijke voortgangspagina met:

• Totaal aantal punten.
• Aantal juiste antwoorden.
• Aantal foute antwoorden.
• Percentage juiste antwoorden.
• Beste reeks.
• Welke werelddelen al geoefend zijn.
• Welke onderwerpen moeilijk zijn.
• Welke onderwerpen al goed gekend zijn.

14. LEVELS EN PRESTATIES

Maak levels:

• Beginner
• Ontdekker
• Wereldreiziger
• Aardrijkskundekenner
• Wereldexpert
• Aardrijkskundemeester

Maak medailles voor:

• Eerste quiz voltooid.
• Eerste werelddeel voltooid.
• 100 juiste antwoorden.
• Alle landen van Europa geoefend.
• Alle hoofdsteden gekend.
• Alle werelddelen bezocht.
• 10 antwoorden achter elkaar juist.

15. EXTRA FUNCTIES

Voeg ook toe:

• Een willekeurige quiz waarbij de website zelf een onderwerp kiest.
• Een dagelijkse uitdaging.
• Een knop om fouten opnieuw te oefenen.
• Een knop om alle vragen opnieuw te maken.
• Een zoekfunctie om een land, rivier of gebergte op te zoeken.
• Een favorietenlijst.
• Een overzicht van de moeilijkste vragen.
• Een functie om zelf een oefening te kiezen.
• Een knop 'Verrassing' die een willekeurige oefening start.

16. DESIGN

De website moet modern en professioneel zijn.

Gebruik:

• Mooie knoppen met afbeeldingen.
• Een duidelijke navigatie.
• Verschillende kleuren per werelddeel.
• Animaties bij juiste antwoorden.
• Een voortgangsbalk.
• Mooie quizschermen.
• Een duidelijke terugknop.
• Een mobiele versie.
• Een desktopversie.

De website mag niet te kinderachtig zijn.

17. TECHNISCHE VEREISTEN

Maak alles in één HTML-bestand met HTML, CSS en JavaScript.

Gebruik localStorage om voortgang en punten te bewaren.

Zorg dat:

• Alle knoppen werken.
• Alle quizzen echt speelbaar zijn.
• De gebruiker altijd terug kan naar het vorige menu.
• Iedere categorie de juiste vragen toont.
• De website geen account nodig heeft.
• Er geen betaalfuncties zijn.
• De website zonder server kan werken, behalve wanneer externe kaartgegevens nodig zijn.
• Er geen lege of nepknoppen zijn.

BELANGRIJK:
Bouw de website op een manier waarop later gemakkelijk nieuwe landen, rivieren, gebergtes, meren en andere geografische onderwerpen toegevoegd kunnen worden.

Maak de website volledig werkend en niet alleen een visueel voorbeeld.