Nieuw '25

Programma
Scratch 1
Scratch 2
Leerdoelen van Scratch naar Python
Van Scratch naar Python
Pak de Kaas
Vallende stenen
Snake
Snake Challenge
Introductie AI
Prompt Engineering 1
Prompt Engineering 2
Prompt Engineering 3
Prompt Engineering 4
PHP Intro
PHP 1
xxx Van Scratch naar Python
Digital Skills 1
test

Programma

OP	Blok	Module	Wat
1	1	Scratch 1	Blokprogrammeren 1
		Scratch 2	Blokprogrammeren 2
		Overgang naar Python	Leren tekst-base programmeren
		Pak de Kaas	Eenvoudig spel net als bij Scratch maar nu in Python (tekst based)
1	2	Vallende Stenen	Nieuw Spel in Python
		Snake	Uitdagender spel in Python
		Intro AI	Hoe AI te gebruiken
		Challenge Snake/Vallande Stenen	Vul je Snake game aan mbv AI
2	1	HTML
		CSS
		Challange HTML/CSS
		HTML 1
	2	Prompt Engineer
		......

Blok 1 - van blok naar tekst

Scratch 1 -(block-based programmeren)

Deze module beschrijft een stapsgewijze introductiecursus programmeren met Scratch, bedoeld om studenten te leren hoe ze een doolhofspel kunnen maken. Het leidt je door verschillende concepten zoals beweging, herhalingen (loops), voorwaardelijke logica (als-dan-anders), en het gebruik van variabelen voor een score. Elke stap bevat uitlegvideo's en opdrachten om de geleerde programmeerprincipes direct toe te passen.

Scratch 2 (block-based programmeren)

Deze module biedt een reeks lessen voor het maken van een platformspel in Scratch, vergelijkbaar met Super Mario. De instructies leiden gebruikers stap voor stap door het proces, beginnend bij basisbeweging en voortschrijdend naar complexere elementen zoals springen op muren, het vermijden van obstakels, en het toevoegen en verslaan van monsters. Elke sectie bevat een video-tutorial, opdrachten, en vereist screenshots voor inlevering en punten.

Van Scratch naar Python

Deze moduleis bedoeld om de overstap te maken van de visuele programmeertaal Scratch naar Python. Het is gericht op het leren van basisconcepten door middel van praktische opdrachten met een bewegende stip. Het document behandelt essentiële Python-concepten zoals inspringen (indentatie), commentaar, if-statements voor logica en loops (lussen), en maakt daarbij steeds de vergelijking met bekende Scratch-blokken. Door middel van geleidelijke oefeningen leren studenten hoe ze een object laten bewegen, van richting laten veranderen (heen en weer stuiteren), een vierkant laten tekenen, en zelfs een spiraal laten creëren door middel van herhalingen (lus) met veranderende parameters. De handleiding sluit af met een opdracht tot reflectie op het leerproces, waarbij studenten gevraagd worden naar hun ervaringen, geleerde lessen en verbeterpunten.
Om de cognitieve overload te verminderen wordt een eenvoudige Python-IDE gebruikt (Thonny).

Pak de Kaas (eenvoudig spel in Python)

Deze module bouwt het voort op de basisprincipes van programmeren en de overgang naar Python. De lessen doorlopen stap voor stap de basis van het creëren van een game, beginnend met het tonen van afbeeldingen (sprites), het bewegen van een personage met toetsen en het detecteren van botsingen. Er wordt ook geoefend met meer geavanceerde concepten zoals het gebruik van willekeurige getallen om objecten te verplaatsen, het bijhouden van een score, en het toevoegen van een tijdslimiet.
Studenten worden aangemoedigd code te lezen en te begrijpen. Studenten leren hoe ze een probleem (zoals het bouwen van een spel) kunnen opdelen in kleinere, behapbare stappen. Ze ontwikkelen algoritmisch denken door sequentie (code wordt regel voor regel uitgevoerd), selectie (met if-statements bepalen wat er gebeurt op basis van voorwaarden_ en herhaling (met lussen zoals for en while) toe te passen.

Blok 2 - spelletjes in Python

Vallende Stenen (spel Python)

Studenten passen concepten toe die ze eerder in Scratch of de "Van Scratch naar Python" module hebben geleerd, zoals het gebruik van variabelen voor posities, afmetingen en snelheid, controle structuren zoals if-statements voor het detecteren van toetsaanslagen, begrenzing van beweging en botsingen, en for-loops om meerdere vallende objecten te beheren en te tekenen
Studenten leren hoe ze scode moeten lezen en aanpassen om nieuwe functionaliteit toe te voegen en problemen op te lossen, zoals voorkomen dat de speler uit beeld beweegt.
Aan het eind woprdt de creativiteit gestimuleert door studenten aan te moedigen het spel zelfstandig uit te breiden met nieuwe functies, zoals geluiden, power-ups, of veranderingen in uiterlijk.

Snake (spel Python)

De "Snake" module bouwt voort op basiskennis van Python en introduceert specifiek nieuwe concepten en toepassingen binnen de context van game-ontwikkeling met Pygame Zero. Er zit herhaling in maar de opdrachten zijn wat uitdagender en de code is wat groter (meer regels). Er zit een lastig concept in de module die ervoor zorgt dat de slang groeit.
Studenten owrden in de eindopdracht uitgedaagd conceptueel na te denken over een game-probleem. Dit is een voorbereiding op het latere prompt engineering.

Intro AI (wat is AI en wat zijn voor- en nadelen?)

Deze module is een introductie over AI en behandelt de basisbeginselen en toepassingen van kunstmatige intelligentie. Het leert het verschil tussen klassieke programmering en AI, waarbij de laatste leert van data in plaats van vaste instructies. De les identificeert verschillende AI-toepassingstypes zoals classificatie en voorspelling, en verkent zowel de voordelen als de nadelen van AI. Ten slotte wordt de introductie van prompt engineering benadrukt als een manier om AI effectief te gebruiken. DIt is korte teaser en inleiding voor de modules over prompt engeneering en geeft een aanzet om in de Snake Challange op een verantwoorde manier AI in te zetten.

Snake Challenge (Python/AI challenge)

Studenten woerden in deze challange uitgedaagd om een eigen versie van hun Snake game te maken.

Blok 3 (web front-end)

HTML

CSS

Pogrammeren JS

Challenge

Blok 4 (web back-end)

PHP - XAMPP

Prompt Enineering

Blok 5 (Databases, PDO)

DB Design 1/2

SQL 1/2

andere databases......?

PDO (PHP en SQL)

Blok 6

Scratch 1

Deze pagina biedt een stap-voor-stap handleiding om te leren programmeren in Scratch door het bouwen van een doolhofspel. Je volgt de lessen door middel van uitlegvideo's, maakt opdrachten direct in Scratch en leert daarbij belangrijke programmeerconcepten zoals beweging, loops, if-then-else statements, variabelen en het resetten van de speltoestand. De cursus begeleidt je van de introductie en het opzetten van het startproject tot het afronden van je eigen unieke versie van het spel en het reflecteren op wat je hebt geleerd.

Introductie en start

Welkom! We gaan je stap voor stap helpen om Scratch te begrijpen, zodat je zelf leert programmeren. Maar wat gaan we eigenlijk doen?

Wat kun je verwachten?

Je bekijkt korte uitlegvideo's van Felienne, een docent aan de TU Delft.
Je maakt opdrachten direct in Scratch.
Je leert stap voor stap hoe je een eigen doolhofspel bouwt.

Voorbereiding: Open dit project in Scratch:

https://scratch.mit.edu/projects/96709199/#editor
(of download het bestand hier: Doolhof Start.sb3)

Je zou dit startscherm moeten zien:

Bekijk de uitlegvideo

In deze video legt Felienne uit wat je gaat bouwen en hoe je aan de slag kunt. Let goed op de uitleg over hoe Scratch werkt.

Alternatieve link: Klik hier als de video hierboven niet werkt

Opdracht

Beschrijf in één zin in je eigen woorden wat je denkt dat je gaat maken.

Inleveren

Typ je zin in het tekstvak hieronder. Gebruik je eigen woorden en denk aan wat je in het spel gaat bouwen.

Stap 1 – Beweging

We beginnen met de besturing van je hoofdpersonage, Giga. In deze stap leer je hoe je Giga kunt laten bewegen met de pijltjestoetsen.

Wat leer je?

Bewegen over de X-as (links en rechts).
Bewegen over de Y-as (omhoog en omlaag).

Bekijk de uitlegvideo

Alternatieve link: Bekijk de video via HiDrive

Opdracht

Hoeveel richtingen kan jouw poppetje bewegen aan het einde van deze stap?

Inleveren

Vul in het tekstvak in hoeveel richtingen jouw sprite beweegt.

Stap 2 – De lus (loop)

Stap 9 – Punten bijhouden

We voegen nu een score toe met behulp van een variabele.

Een variabele is een waarde die je kunt opslaan en aanpassen tijdens het spel.

Bekijk de uitlegvideo

Alternatieve link: Bekijk de video via HiDrive

Opdracht

Laat zien hoe je de score bijhoudt.

Inleveren

Lever een screenshot in van je code waarin je de score bijhoudt met een variabele.

Stap 10 – Afronden

We maken het spel af en zorgen dat het er goed uitziet. Je kunt je spel opslaan op je laptop of online delen.

Bekijk de uitlegvideo

Alternatieve link: Bekijk de video via HiDrive

Opdracht

Maak het spel af, voeg iets unieks toe en sla het op.

Inleveren

Lever jouw eigen unieke versie van het spel in.

Stap 11 – Wat heb je geleerd?

Je hebt veel geleerd over programmeren. Nu kijk je terug op wat je allemaal hebt gedaan.

Opdracht

Vraag 1: Waarvoor heb je in dit spel een lus gebruikt?
Vraag 2: Waarvoor heb je een als-dan-anders-blok gebruikt?
Vraag 3: Waarvoor heb je een variabele gebruikt?

Inleveren

Schrijf je drie antwoorden op en lever ze in.

Scratch 2

Deze pagina biedt een reeks lessen voor het maken van een platformspel in Scratch 2, vergelijkbaar met Super Mario. De instructies leiden gebruikers stap voor stap door het proces, beginnend bij basisbeweging en voortschrijdend naar complexere elementen zoals springen op muren, het vermijden van obstakels, en het toevoegen en verslaan van monsters. Elke sectie bevat een video-tutorial, opdrachten, en vereist screenshots voor inlevering en punten.

Introductie en start

We slaan een paar stappen over en gaan direct aan de slag met het maken van een soort 'Mario-spel'.

We beginnen met deze 'code': Giga Platformer Start.sb3

We gaan code gebruiken die we in Scratch 1 hebben gemaakt. Hiervoor gebruiken we de 'rugzak'. Dit wordt in de video uitgelegd.

Alternatieve link: https://my.hidrive.com/lnk/ApKeEML7P

Opdracht

Bekijk de video en laat Giga vloeiend bewegen met een herhaal-als-blok; in het als-blok herhaal je de beweging zolang de toets is ingedrukt.

Inleveren

Een screenshot van je 'code'.

Springen

We gaan Giga laten springen. In de video wordt uitgelegd hoe.

Alternatieve link: https://my.hidrive.com/lnk/dHHmCfJHa

Aan het eind van de video krijg je de uitdaging om de springbeweging vloeiender te maken.

Opdracht

Maak de springbeweging en probeer deze vloeiender te maken.

Inleveren

Een screenshot van je 'code'.

Muur

We gaan een muur in het veld plaatsen en het spel zo maken dat we op de muur kunnen springen.

Bekijk de video voor instructies.

Aan het eind blijven we in de lucht hangen. Dat is niet de bedoeling. Kun jij dat oplossen?

Alternatieve link: https://my.hidrive.com/lnk/KwzJbR6t3

Opdracht

Zorg ervoor dat Giga niet meer in de lucht blijft zweven als je springt.

Inleveren

Een screenshot van je 'code'.

Niet meer door de muur

Als je het monster 'plet', wil je dat het geen 'Game Over' is. Het monster moet worden geplet en daarna verdwijnen.

We maken een aanpassing zodat het monster weer terugkomt nadat het is geplet.

Je hebt 12 screenshots ingeleverd. Als deze goed zijn, heb je 12 x 5 = 60 punten.

Voor een vinkje moet je 84 punten of meer hebben.

Laat het hele spel aan een docent zien. Je kunt tot 35 punten krijgen.

De docent kan vragen stellen over hoe jouw spel werkt.

Het spel moet aan de volgende voorwaarden voldoen:

Verplicht (+25 punten)

Je kunt door het spel heen bewegen: naar links en naar rechts.
Je kunt niet door de muur heen lopen, maar je kunt er wel op springen.
Je hebt een monster; als je die raakt, is het 'Game Over'. Er verschijnt een 'Game Over'-melding en het spel stopt.
Je kunt het monster pletten: je ziet het geplette monster, waarna het verdwijnt en even later weer terugkomt.

###

Youtube Links

Leerdoelen van Scratch naar Python

Les 0: Wat gaan we leren?

Leerdoelen:

Begrijpen waarom en hoe inspringen (indentation) werkt in Python.
Leren wat commentaar in code is en hoe je dit gebruikt.
Inzicht krijgen in het gebruik van if-statements in Python.
Leren hoe je loops (lussen) maakt in Python.

Les 1: Installatie Python (Thonny) en pygame

Leerdoelen:

Installeren van de Thonny IDE voor Python-programmeren.
Installeren van de pygame-library voor grafische toepassingen.
Startcode downloaden en uitvoeren om de basisstructuur van een Python-programma te begrijpen.

Les 2: De stuiterbal

Leerdoelen:

Begrijpen van het concept ‘inspringen’ (indentation) in Python en het belang ervan.
Vergelijken van Python-code met Scratch-blokken om overeenkomsten en verschillen te zien.
Leren hoe je een eenvoudige animatie maakt waarbij een bal stuitert.

Les 3: De stuiterbal – heen en weer

Leerdoelen:

Gebruik van if-statements om bewegingen te controleren.
Begrijpen van vergelijkingsoperatoren in Python.
Implementeren van logica om een object heen en weer te laten bewegen.

Les 4: De vierkante beweging

Leerdoelen:

Creëren van bewegingen in een vierkant patroon.
Gebruik van meerdere if-statements om richtingen te bepalen.
Versterken van begrip over coördinatensystemen en beweging in twee dimensies.

Les 5: Vierkant met sprongen op elke hoek

Leerdoelen:

Introductie tot for-loops in Python.
Automatiseren van herhaalde acties met behulp van loops.
Vergelijken van loops in Python met herhalingsblokken in Scratch.

Les 6: Spring vaker op twee hoeken

Leerdoelen:

Verfijnen van bewegingen met behulp van loops en conditionele logica.
Begrijpen van geneste loops en complexe bewegingspatronen.
Toepassen van eerder geleerde concepten in een nieuwe context.

Les 7: Spiraal – stap 1

Leerdoelen:

Creëren van een spiraalvormig bewegingspatroon.
Gebruik van vaste richtingen en patronen in loops.
Begrijpen van hoe kleine aanpassingen in code grote visuele effecten kunnen hebben.

Les 8: Spiraal – stap 2

Leerdoelen:

Aanpassen van spiraalbewegingen door afstanden te verkleinen.
Gebruik van variabelen om bewegingen dynamisch te maken.
Versterken van begrip over loops en variabele manipulatie.

Les 9: Spiraal – stap 3

Leerdoelen:

Implementeren van een automatische stopconditie voor loops.
Begrijpen van het gebruik van break-statements in Python.
Creëren van programma’s die zelfstandig kunnen stoppen op basis van bepaalde voorwaarden.

Les 10: Reflectie: wat heb je geleerd?

Leerdoelen:

Terugblikken op de geleerde concepten en vaardigheden.
Identificeren van persoonlijke groeipunten en uitdagingen.
Formuleren van doelen voor verdere ontwikkeling in programmeren.

Deze lessenserie biedt een geleidelijke overgang van visueel programmeren in Scratch naar tekstueel programmeren in Python, met de nadruk op fundamentele programmeerconcepten zoals loops, conditionele logica en het belang van code-structuur.

Van Scratch naar Python

Status: alles uitgevoerd en getest

Deze webpagina, getiteld "Van Scratch naar Python", dient als een tutorial om beginners te helpen overstappen van de visuele programmeertaal Scratch naar de tekstgebaseerde taal Python. De lessen behandelen belangrijke programmeerconcepten zoals indentatie (hoe codeblokken worden herkend in Python), het gebruik van commentaar om code te verduidelijken, en de implementatie van if-statements voor beslissingslogica en loops (zoals for- en while-loops) voor herhalende acties. Door middel van praktische opdrachten met een bewegende stip (sprite) leren gebruikers deze concepten toe te passen en steeds complexere bewegingspatronen, zoals stuiteren, vierkante bewegingen en spiralen, te creëren in de Thonny Python-omgeving, waarbij ook het gebruik van de pygame library en een specifieke scratch_lib.py wordt uitgelegd.

0 Wat gaan we leren?

We gaan code maken.

We gaan daarvoor Python gebruiken.

Wat gaan we leren:

waarom en hoe we inspringen in Python.
wat commentaar in code is
hoe we in Python een if-statement maken
hoe we in python een loop (lus) maken

In deze lessen worden de volgende Scratch blokken in geschreven code omgezet.

IF - THEN	IF - THEN - ELSE	FOR LOOP (repeat)

🛠️ Opdracht

Leg in eigen woorden uit:

wat is het verschil tussen een if-then en een if-then-else ?
Waarvoor gebruik je een for-loop (of een repeat; dat is hetzelfde)?

Inleveren

Een antwoord op de twee vragen, in eigen woorden (geen AI)!

Maak een txt bestand en schrijf daarin je antwoorden.

1 Installatie Python (Thonny)

We hebben geprogrammeerd in Scratch en we gaan nu programmeren in een echte programmeertaal: Python.

We gaan echte code maken, maar daarvoor moeten we eerst wat zaken installeren.

We gaan gebruikmaken van Thonny

📥Download

Pak het bestand uit en zet het op een plek die voor jou logisch is, bijvoorbeeld op je bureaublad.

Installatie pygame Library

Programmeertalen hebben libraries (ook wel 'packages' genoemd). Deze libraries bevatten code die jij kunt gebruiken.

Wij gaan de pygame library installeren omdat we die straks nodig hebben.

Als je Thonny opstart, ga dan naar Tools - Manage packages...

Zoek dan naar pygame

Klik op pygame en daarna op de knop Install

📥Download code

Download de code startcode-python-scratch.zip

Pak de code uit, start Thonny en open het bestand student.py

Druk op het groene 'run'-symbool en kijk wat er gebeurt.

Het programma wordt regel voor regel van boven naar beneden uitgevoerd.

ℹ️Uitleg code

Hieronder zie je de uitleg. Het kan zijn dat je niet alles in één keer begrijpt, maar probeer in ieder geval de rode uitleg te begrijpen.

Regel 1

Hier worden libraries ingeladen. Dit zijn stukjes code die al klaar zijn en die in het bestand scratch_lib.py staan.

Regel 3

Hier wordt de sprite gemaakt en op een positie gezet. Let op dat positie (0, 0) linksboven is (en niet in het midden zoals bij Scratch).

Regel 5

Hier maken we een functie waarmee de sprite wordt bewogen. Dit is nodig om de library te kunnen gebruiken.

Regel 6

Hiermee bewegen we de sprite 10 pixels naar rechts en 0 pixels naar beneden.

Regel 7

We pauzeren een aantal frames.

Regel 9

Hiermee starten we het spel.

🛠️ Opdracht

Probeer de getallen op regel 6 eens aan te passen en kijk wat er gebeurt.

Verander de getallen zodanig dat de groene stip van linksboven diagonaal richting rechtsonder beweegt.

Inleveren

Maak een screenshot van de code die jij hebt aangepast zodat de groene stip diagonaal van linksboven naar rechtsonder beweegt.

2 De stuiterbal

In deze opdracht leer je hoe je een sprite (een groene stip) van links naar rechts kunt laten bewegen en hoe je met een if-statement de richting verandert zodra de sprite de rechterkant van het scherm bereikt.

Begincode

Je gebruikt de volgende code als uitgangspunt:

from scratch_lib import create_sprite, move, run_animation, get_x

# Maak de sprite en zet hem links op het scherm
sprite = create_sprite("green_dot.png", 0, 300)

# Variabele om te onthouden of we naar rechts bewegen
moving_right = True

def animate():
    global moving_right  # We gaan deze variabele aanpassen
    
    # Haal de huidige x-positie op
    x = get_x(sprite)
    
    # TODO: Als x groter of gelijk is aan 550, verander moving_right naar False
    # if ???:
    #    moving_right = False
    
    # Beweeg de sprite op basis van de richting
    if moving_right:
        move(sprite, 5 , 0 )
    else:
        move(sprite, 0 , 0 )

# Start de animatie
run_animation([sprite], animate, steps=1000)

Als je deze code uitvoert, zie je dat de groene stip van links naar rechts beweegt, maar hij stopt niet of verandert niet van richting. Hij verdwijnt uit beeld.

ℹ️ Wat is inspringen in Python?

Inspringen = blok = identation

In Python is de inspringing (ook wel indentatie genoemd) heel belangrijk. Python gebruikt inspringen om aan te geven welke code bij elkaar hoort.

Als je bijvoorbeeld eenif-statement gebruikt, dan moet de code die daarbij hoort **een stukje naar rechts inspringen** (meestal 4 spaties).

if x >= 100:
    move(sprite, 5, 0)  # deze regel hoort bij het if-blok

# dit staat buiten het if-blok
print("Ik ben klaar!")

🔁 Vergelijking met Scratch

In Scratch zie je blokken zoals "als ... dan" of "herhaal ...". De blokken die in zo'n constructie staan, vallen daar letterlijk in. Ze zijn visueel naar binnen geschoven.

In Python doe je dat met spaties:

De buitenste structuur (zoals if of for) sluit je af met een dubbele punt :.
De regels die bij dat blok horen, zet je eronder en laat je 4 spaties naar rechts inspringen.

Als je dit vergeet, krijg je in Python een foutmelding zoals:

IndentationError: expected an indented block

✅ Juiste voorbeeld

if moving_right:
    move(sprite, 5 , 0 )

❌ Fout voorbeeld

if moving_right:
move(sprite, 5 , 0 )

Controleer dus goed dat de regels die bij een if of for horen, netjes zijn ingesprongen.

Wat gaan we doen?

We willen dat de bal van richting verandert als hij de rechterkant bereikt (bijvoorbeeld bij x = 550).

Daarvoor heb je een paar dingen nodig:

De variabele moving_right die onthoudt of de sprite naar rechts beweegt (True) of niet (False).

Een if-statement (regel 15, 16 en 17) die controleert of de x-waarde van de sprite groter is dan 550.

Als dat zo is, moet de sprite naar links bewegen in plaats van naar rechts (regel 19, 20, 21, 22 en 23).

De code is nog niet helemaal af.

# Commentaar

In de code zie je af en toe een hekje # aan het begin van de regel staan.

Dit betekent dat dit commentaar is. De regel wordt niet uitgevoerd. Het dient om jou als programmeur te helpen begrijpen wat de code doet.

🛠️ Opdracht

Haal het hekje weg op regel 16 en 17, maar zorg ervoor dat de uitlijning goed blijft: voor de if vier spaties en op de regel moving_right = False acht spaties.

Op de plaats van de ??? plaats je nu de juiste conditie. Je vergelijkt of de x-positie van de sprite groter of gelijk is aan 550.

In Python ziet dat er als volgt uit:

if var_a >= 550:

var_a is een variabele. Plaats deze conditie in de code en vervang var_a door de juiste variabele die de x-positie bevat.

→ Test je code. Geen foutmeldingen? OK!

Wat gebeurt er nu als de x-positie 550 is? Precies — de bal staat stil!

Kijk nog eens goed naar het if-statement op regel 20 t/m 23 en probeer de code aan te passen zodat de bal niet meer stil staat als hij positie 550 heeft bereikt, maar dat hij terug beweegt.

Gebruik daarna een tweede if-statement om te bepalen hoe de sprite moet bewegen:

Als moving_right True is → beweeg naar rechts.
Anders, dus als moving_right False is → beweeg naar links.

Denk eraan: een positief getal beweegt de sprite vooruit, een negatief getal beweegt hem achteruit.

Inleveren

Maak een screenshot van de aangepaste code.

3 De stuiterbal – heen en weer

In deze opdracht breiden we de vorige oefening uit. De groene stip moet nu niet alleen van links naar rechts bewegen, maar ook weer terug naar links als hij de rechterrand heeft bereikt, en daarna weer naar rechts als hij de linkerrand bereikt.

Begincode

Je gebruikt de volgende code als uitgangspunt. Deze lijkt op de vorige, maar nu gaan we twee richtingen controleren.

from scratch_lib import create_sprite, move, run_animation, get_x

# Maak de sprite en zet hem links op het scherm
sprite = create_sprite("green_dot.png", 0, 300)

# Variabele om te onthouden of we naar rechts bewegen
moving_right = True

def animate():
    global moving_right
    
    x = get_x(sprite)
    
    # Keer om als de sprite de rechterkant raakt
    if x >= 550:
        moving_right = False

    # TODO: Voeg hier een extra if-statement toe:
    # Als de sprite aan de linkerkant is (x <= 0), dan moet moving_right weer True worden
    
    if moving_right:
        move(sprite, 5, 0)
    else:
        move(sprite, -5, 0)

run_animation([sprite], animate, steps=1000)

Als we een if maken dan kennen we de volgende vergelijking

==	is gelijk aan?
<	is kleiner dan?
>	is groter dan?
<=	is kleiner of gelijk aan?
>=	is groter of gelijk aan?
!=	is ongelijk aan?

if-then-else - Vergelijking met Scratch

If-loop

if-then-else loop

Wat moet je doen?

Je gaat nu een extra if-statement toevoegen die controleert of de bal de linkerkant van het scherm heeft bereikt (dus bij x <= 0).

Als dat zo is, verander dan de waarde van moving_right weer naar True. Daardoor beweegt de sprite weer naar rechts.

🛠️ Opdracht

Voeg onder de eerste if-statement een tweede if-statement toe.
Controleer of x <= 0.
Als dat zo is, zet moving_right = True.
Test je code. Werkt het? Dan beweegt de bal nu heen en weer!

💡 Tip

Als je wilt, kun je bij beide if-statements ook een print() toevoegen, zodat je in het log kunt zien wanneer de richting verandert.

if x >= 550:
    moving_right = False
    print("Rechterkant bereikt – keer om")

if x <= 0:
    moving_right = True
    print("Linkerkant bereikt – keer om")

Inleveren

Maak een screenshot van jouw code waarin je beide if-statements hebt toegevoegd en de sprite heen en weer beweegt.

4 De vierkante beweging

In deze opdracht leer je hoe je een sprite (de groene stip) kunt laten bewegen in de vorm van een vierkant. De sprite moet dus eerst naar rechts, dan naar beneden, dan naar links, en tot slot weer omhoog. Daarna herhaalt hij dit patroon.

Begincode

Je gebruikt de volgende code als uitgangspunt. Deze keer gaan we bijhouden in welke richting de sprite moet bewegen, en telkens van richting veranderen als hij een hoekpunt bereikt.

from scratch_lib import create_sprite, move, run_animation, get_x, get_y

# Startpositie linksboven
sprite = create_sprite("green_dot.png", 10, 10)

# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0

def animate():
    global richting
    
    x = get_x(sprite)
    y = get_y(sprite)
    
    Op basis van de richting, kies hoe de sprite moet bewegen
    if richting == 0:        # boven naar rechts bewegen
        move(sprite, 5, 0)
        if x >= 550:
            richting = 1     # volgende richting: aan de rechter kant naar beneden bewegen

    elif richting == 1:      # rechts naar beneden bewegen
        move(sprite, 0, 5)
        if y >= 550:
            richting = 2     # volgende richting: beneden langs naar links bewegen
    
    # ToDo maak de code hier af
    # we hebben moeten nog 2 blokjes maken:
    #    beneden langs naar rechts bewegen
    #    linker kant omhoog bewegen.
    # (je kunt het blokje op regel 22-25 kopiëren en aanpassen)
   

run_animation([sprite], animate, steps=2000)

Wat moet je doen?

In de code staat al aangegeven welke stappen moeten worden uitgevoerd. Maar niet alles is compleet.

Controleer of je begrijpt wat de waarde van richting betekent.
De sprite moet telkens van richting veranderen als hij een hoekpunt van het vierkant heeft bereikt.
De richtingsveranderingen gebeuren met behulp van een if of elif-structuur.
Pas eventueel de getallen 550 aan als jouw sprite kleiner of groter is.

🛠️ Opdracht

Vul de TODO op regel 27 aan door goed te begrijpen wat elke if doet.
Test je code. Beweegt de sprite in een vierkant? Perfect!

Inleveren

Maak een screenshot van jouw werkende code waarin je laat zien dat de sprite een vierkant loopt.

5 Vierkant met sprongen op elke hoek

In deze opdracht ga je de sprite in een kleiner vierkant laten bewegen. Maar dat is nog niet alles: op elk hoekpunt van het vierkant springt de sprite vijf keer op en neer. Hiervoor ga je gebruikmaken van een for-loop.

Begincode

We hebben de code voor je voorbereid zodat de sprite een kleiner vierkant loopt. Dit vierkant is 100 stappen breed en hoog. Voer deze code uit en kijk wat er gebeurt:

from scratch_lib import create_sprite, move, run_animation, get_x, get_y, force_redraw
import time

# Startpositie linksboven
sprite = create_sprite("green_dot.png", 80, 80)

# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0

def animate():
    global richting

    x = get_x(sprite)
    y = get_y(sprite)

    if richting == 0:        # naar rechts
        move(sprite, 5, 0)
        if x >= 470:
            # SPRINGEN: plak hier onderstaande code
            richting = 1     # volgende richting: naar beneden

    elif richting == 1:      # naar beneden
        move(sprite, 0, 5)
        if y >= 470:
            # SPRINGEN: plak hier onderstaande code
            richting = 2     # volgende richting: naar links

    elif richting == 2:      # naar links
        move(sprite, -5, 0)
        if x <= 80:
            # SPRINGEN: plak hier onderstaande code
            richting = 3     # volgende richting: naar boven

    elif richting == 3:      # naar boven
        move(sprite, 0, -5)
        if y <= 80:
            # SPRINGEN: plak hier onderstaande code
            richting = 0     # opnieuw naar rechts

run_animation([sprite], animate, steps=2000)

Sprongen op elk hoekpunt

Nu willen we dat de sprite op elk hoekpunt van het vierkant vijf keer op en neer springt.

Op en neer betekent dat de sprite eerst iets omhoog en dan weer omlaag beweegt. Dat doen we in een for-loop.

🔁 Wat is een `for`-loop?

Een for-loop gebruik je in Python als je iets meerdere keren wilt herhalen. Dat kan bijvoorbeeld zijn: de sprite 5 keer naar rechts bewegen, of 10 keer springen.

🔤 De basisvorm van een `for`-loop

for i in range(5):
    move(sprite, 5, 0)

Wat gebeurt hier?

for i in range(5): dit betekent dat de code in het blok 5 keer wordt uitgevoerd.
De variabele i krijgt automatisch de waarden 0, 1, 2, 3 en 4 (vijf keer in totaal).
Elke keer dat de loop draait, voert Python de ingesprongen regels onder de for-regel uit.

🔄 Loop - Vergelijking met Scratch

In Scratch gebruik je bijvoorbeeld:

Herhaal 10 keer → [doe iets]

Dat is precies hetzelfde idee! De blokken die je in Scratch ín een herhaal-blok sleept, zijn in Python de regels die je moet inspringen (met spaties).

✅ Juiste voorbeeld

for i in range(3):
    print("Hallo")

Uitvoer:

Hallo
Hallo
Hallo

ℹ️ Handig om te weten

Wil je iets 10 keer doen?

for i in range(10):

Wil je iets maar 1 keer doen? Dan heb je eigenlijk geen loop nodig 😉

🛠️ Oefening (optioneel)

Wat doet onderstaande code? Probeer het te voorspellen.

for i in range(2):
    move(sprite, 0, -20)
    force_redraw()
    time.sleep(0.1)
    move(sprite, 0, 20)
    force_redraw()
    time.sleep(0.1)

👉 Antwoord: de sprite springt 2 keer op en neer.

Wat moet je doen?

Kopieer bovenstaande for-loop.
Plak die op vier plekken in de animate()-functie:
- Vlak voordat richting = 1 wordt uitgevoerd (na de rechterkant).
- Vlak voordat richting = 2 wordt uitgevoerd (na beneden).
- Vlak voordat richting = 3 wordt uitgevoerd (na links).
- Vlak voordat richting = 0 wordt uitgevoerd (na boven).

🛠️ Opdracht

Kopieer en plak de for-loop op de juiste plekken in je code (op elk hoekpunt).
Test je code. De sprite moet netjes in een vierkant bewegen en op elke hoek vijf keer op en neer springen.

Inleveren

Maak een screenshot van jouw code waarin de sprite op elk hoekpunt springt.

6 Spring vaker op twee hoeken

In deze korte opdracht breid je je bestaande script uit. De sprite moet nu alleen rechtsboven en linksonder springen, telkens vijf keer. Maar dit keer springt de sprite niet omhoog en omlaag, maar naar links en naar rechts (horizontaal).

ℹ️ Weet je nog wat inspringen is?

Inspringen = blok = identation

In Python is de inspringing (ook wel indentatie genoemd) heel belangrijk. Python gebruikt inspringen om aan te geven welke code bij elkaar hoort.

Ook bij eenfor-statement , moet de code die daarbij hoort **een stukje naar rechts inspringen** (meestal 4 spaties).

for i in range(5):
    move(sprite, 0, -20)
    force_redraw()

Dus de regels 2 én 3 horen bij het for-blok en worden 5x uitgevoerd.

🔁 Vergelijking met Scratch

In Scratch zie je blokken zoals "als ... dan" of "herhaal ...". De blokken die in zo'n constructie staan, vallen daar letterlijk in. Ze zijn visueel naar binnen geschoven.

In Python doe je dat met spaties:

De buitenste structuur (zoals if of for) sluit je af met een dubbele punt :.
De regels die bij dat blok horen, zet je eronder en laat je 4 spaties naar rechts inspringen.

Als je dit vergeet, krijg je in Python een foutmelding zoals:

IndentationError: expected an indented block

✅ Juiste voorbeeld

for i in range(5):
    move(sprite, 0, -20)
    force_redraw()

❌ Fout voorbeeld

for i in range(5):
move(sprite, 0, -20)   # geen inspringing!
force_redraw()

Controleer dus goed dat de regels die bij een if of for horen, netjes zijn ingesprongen.

Wat moet je doen?

Zoek in je code de momenten waarop de sprite de rechterbovenhoek en de linkeronderhoek bereikt.
Op die plekken laat je de sprite 5X (in plaats van 2X) springen.

Zorg dat je deze code alleen toevoegt bij de overgang van:

- richting == 0 → als y <= 80 (rechtsboven)
- richting == 2 → als y >= 470 (linksonder)

Inleveren

Maak een screenshot van de code in Thonny waarop te zien is dat de sprite alleen rechtsboven en linksonder horizontaal springt, vijf keer per keer.

7 Spiraal – stap 1

"vaste richtingen in een patroon"

In deze opdracht ga je de sprite steeds twee richtingen bewegen met een vaste afstand. Je doet dit een paar keer achter elkaar.

Uiteindelijk zal dit het begin worden van een spiraal. Maar eerst leer je het patroon maken: rechts → omlaag → links → omhoog.

📥 Begincode

from scratch_lib import create_sprite, move, pause_for_frames

sprite = create_sprite("green_dot.png", 300, 300)

# Afstand per richting
afstand = 100

# Herhaal het patroon 3 keer
for i in range(3):
    # Beweeg naar rechts
    for j in range(afstand // 5):
        move(sprite, 5, 0)
        pause_for_frames(1)

    # Beweeg naar beneden
    for j in range(afstand // 5):
        move(sprite, 0, 5)
        pause_for_frames(1)

    # Beweeg naar links
    for j in range(afstand // 5):
        move(sprite, -5, 0)
        pause_for_frames(1)

    # Beweeg naar boven
    for j in range(afstand // 5):
        move(sprite, 0, -5)
        pause_for_frames(1)

ℹ️ Uitleg

Je ziet hierboven een herhaling (een for-loop) die het patroon van 4 richtingen 3 keer uitvoert.

Elke richting bestaat uit een eigen for-loop waarin de sprite telkens kleine stapjes zet.

De afstand is verdeeld in blokjes van 5 pixels, zodat je het goed kunt zien bewegen.

🛠️ Opdracht

Experimenteer met afstand = 100. Wat gebeurt er als je die verandert in 200?
Voeg commentaar toe bij elke richting, zodat je het patroon beter begrijpt.
Test wat er gebeurt als je range(3) verandert in range(1) of range(5).

📤 Inleveren

Maak een screenshot van je code én van het pad dat de sprite aflegt in het venster.

8 Spiraal – stap 2

"kleiner wordende afstanden"

In de vorige opdracht heb je een patroon gemaakt: de sprite bewoog rechts, omlaag, links, omhoog – en dat een paar keer. Het pad bleef telkens even groot.

Nu gaan we iets nieuws doen: na elke twee richtingen wordt de afstand kleiner. Hierdoor lijkt het alsof de sprite langzaam een spiraal naar binnen loopt.

📥 Begincode

from scratch_lib import create_sprite, move, pause_for_frames

sprite = create_sprite("green_dot.png", 300, 300)

afstand = 200  # beginafstand

for i in range(5):  # we doen 5 spiraal-lagen
    # naar rechts
    for j in range(afstand // 5):
        move(sprite, 5, 0)
        pause_for_frames(1)

    # naar beneden
    for j in range(afstand // 5):
        move(sprite, 0, 5)
        pause_for_frames(1)

    afstand = afstand - 40  # we maken de afstand kleiner

    # naar links
    for j in range(afstand // 5):
        move(sprite, -5, 0)
        pause_for_frames(1)

    # naar boven
    for j in range(afstand // 5):
        move(sprite, 0, -5)
        pause_for_frames(1)

    afstand = afstand - 40  # opnieuw iets kleiner maken

ℹ️ Uitleg

We beginnen met afstand = 200.
Na twee richtingen verkleinen we de afstand met 40.
Daarna bewegen we weer twee richtingen (links en boven).
We verkleinen opnieuw met 40.

Zo wordt het pad kleiner en kleiner – alsof je een vierkante spiraal naar het midden tekent.

🛠️ Opdracht

Pas de waarde afstand = 200 aan. Wat gebeurt er bij 300?
Wat als je niet met 40 verkleint, maar met 20?
Voeg een print(afstand) toe onder elke afstand = afstand - 40. Wat zie je in de console?

📤 Inleveren

Maak een screenshot van je aangepaste code én van de spiraal die de sprite tekent.

9 Spiraal – stap 3

"automatisch stoppen"

Je hebt nu al een mooie spiraal gemaakt waarbij de sprite steeds kleinere vierkantjes loopt. Maar misschien heb je gemerkt: op een gegeven moment is de afstand zo klein dat de sprite nauwelijks nog beweegt of zelfs gekke dingen gaat doen.

Daarom gaan we in deze stap zorgen dat het script zelf stopt als de afstand te klein wordt.

📥 Begincode

from scratch_lib import create_sprite, move, pause_for_frames

sprite = create_sprite("green_dot.png", 300, 300)

afstand = 200

# Herhaal zolang de afstand groter is dan 20
while afstand > 20:
    # naar rechts
    for j in range(afstand // 5):
        move(sprite, 5, 0)
        pause_for_frames(1)

    # naar beneden
    for j in range(afstand // 5):
        move(sprite, 0, 5)
        pause_for_frames(1)

    afstand = afstand - 20

    # naar links
    for j in range(afstand // 5):
        move(sprite, -5, 0)
        pause_for_frames(1)

    # naar boven
    for j in range(afstand // 5):
        move(sprite, 0, -5)
        pause_for_frames(1)

    afstand = afstand - 20

ℹ️ Uitleg

In plaats van for i in range(5) gebruiken we nu een while-loop.
Die zorgt ervoor dat het patroon doorgaat zolang de afstand groter is dan 20.
Als de afstand kleiner wordt dan of gelijk is aan 20, stopt de loop vanzelf.

🛠️ Opdracht

Test de code. Kun je zien waar de sprite stopt?
Wat gebeurt er als je de afstand > 20 verandert in afstand > 40?
Voeg een print(afstand) toe aan het einde van elke herhaling om te zien wanneer het stopt.
Kun je de sprite laten starten in het midden van het scherm in plaats van linksboven?

📤 Inleveren

Maak een screenshot van jouw spiraal die vanzelf stopt wanneer het midden bereikt is.

10 Reflectie: wat heb je geleerd?

Je hebt nu gewerkt aan meerdere opdrachten waarbij je de sprite steeds meer hebt aangestuurd met code. Je hebt geleerd hoe je met een for-loop en if-statements herhaling en logica kunt combineren, en je hebt een echte spiraalbeweging gemaakt in Python.

In deze laatste opdracht ga je terugkijken op je leerproces. Wat ging goed? Wat vond je moeilijk? En wat wil je nog beter leren?

ℹ️ Wat is een reflectie?

Reflecteren betekent dat je nadenkt over wat je gedaan hebt. Je kijkt niet alleen naar het resultaat, maar vooral naar hoe je het hebt aangepakt en wat je daarvan leert.

📝 Opdracht

Beantwoord de volgende vragen in een kort reflectieverslag (ongeveer 5 zinnen per vraag is voldoende):

Wat ging goed?
Geef een voorbeeld van iets dat je zelfstandig hebt opgelost of goed begreep.
Wat vond je lastig?
Was er iets dat je niet meteen snapte? Welke opdracht kostte meer tijd dan je dacht?
Noem drie dingen die je hebt geleerd o ver Python.
Wat zijn specifieke dingen die je hebt geleerd over Python?
Wat heb je geleerd over if-statements?
Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code.
Wat heb je geleerd over loops?
Beschrijf kort wat je nu beter begrijpt over herhaling of logica in code.
Wat zou je de volgende keer anders doen?
Denk aan hoe je je werk hebt aangepakt, of hoe je omging met fouten.
Waar wil je nog meer mee oefenen?
Zijn er onderwerpen waarvan je denkt: dit wil ik nóg beter snappen of meer mee oefenen?
Welke uitleg was duidelijk?
Welke opdracht(en) vond je goed uitgelegd?
Welkke uitleg was onduidelijk?
Welke opdrachten waren niet duidelijk genoeg uitgelegd en hoe zou jij het ander/beter doen?

📤 Inleveren

Lever je reflectie in als een PDF-bestand.

###

# Docenten

opdracht 4

from scratch_lib import create_sprite, move, run_animation, get_x, get_y

# Startpositie linksboven
sprite = create_sprite("green_dot.png", 10, 10)

# We gebruiken een getal om de richting bij te houden:
# 0 = rechts, 1 = naar beneden, 2 = naar links, 3 = omhoog
richting = 0

def animate():
    global richting
    
    x = get_x(sprite)
    y = get_y(sprite)
    
    # TODO: Op basis van de richting, kies hoe de sprite moet bewegen
    if richting == 0:        # naar rechts
        move(sprite, 5, 0)
        if x >= 550:
            richting = 1     # volgende richting: naar beneden

    elif richting == 1:      # naar beneden
        move(sprite, 0, 5)
        if y >= 550:
            richting = 2     # volgende richting: naar links

    elif richting == 2:      # naar links
        move(sprite, -5, 0)
        if x <= 0:
            richting = 3     # volgende richting: naar boven

    elif richting == 3:      # naar boven
        move(sprite, 0, -5)
        if y <= 0:
            richting = 0     # opnieuw naar rechts

run_animation([sprite], animate, steps=2000)

Pak de Kaas

Status: alles uitgevoerd en getest

Dit is een lessenserie over een programmeerproject met Python en Pygame Zero genaamd "Pak de Kaas". Het leidt leerlingen door zes stappen om een eenvoudig spel te maken waarin een muis kaas verzamelt. De lessen behandelen basisconcepten zoals het weergeven en verplaatsen van afbeeldingen (sprites), het detecteren van botsingen tussen objecten, het gebruik van willekeurige getallen om de kaas te verplaatsen, het bijhouden van een score en het toevoegen van een tijdslimiet voor een "Game Over" scenario. Het document bevat ook een docentenhandleiding met leerdoelen, potentiële valkuilen en suggesties voor differentiatie en beoordeling.

0 Wat gaan we leren

We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:

pgzero

Weet je nog hoe je een pacakge installeert in Thonny?

Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.

Als je het niet meer weer weet kijk dan even naar de vorige les.

1 Pak de Kaas – Les 1

Je hebt pgzero in Thonny geinstalleerd? Nee kijk dan bij de vorige stap.

In deze les gaan we met Python en Pygame Zero leren hoe je plaatjes (sprites) op het scherm kunt zetten.

Je leert hoe je het scherm wist, en hoe je sprites op een bepaalde positie tekent.

Wat gaan we doen?

We gaan een muis en een stuk kaas op het scherm laten verschijnen.

Hiervoor gebruiken we screen.blit() in de draw()-functie van Pygame Zero.

📦 Benodigdheden

Thonny met Pygame Zero geïnstalleerd
Een map images/ met daarin twee bestanden: mouse.png en cheese.png

🔰 Startercode

# importeer library
import pgzrun

# Spelgrootte
WIDTH = 800
HEIGHT = 600

def draw():
    screen.clear()
    screen.blit("mouse", (150, 150))
    screen.blit("cheese", (50, 50))

#start programma
pgzrun.go()

ℹ️ Uitleg

De code wordt van boven naar beneden, regel voor regel uitgevoerd.
import pgzrun hiermee vertellen we dat de library pgrun gaan gebruiken. Sommige computer-comando's 'sdie straks gaan gebruiken staat beschreven in deze library.
WIDTH en HEIGHT bepalen hoe groot het venster is
draw() is een speciale functie die automatisch wordt aangeroepen om het scherm te tekenen
screen.clear() is een library functie die het scherm bij elke frame wist
screen.blit("mouse", (150, 150)) tekent het plaatje mouse.png op positie (150, 150). Dit zijn ook beide library functies.

🛠️ Opdracht

Pas de coördinaten van de muis en de kaas aan en kijk wat er gebeurt.

Zet de muis linksboven in beeld
Zet de kaas rechtonder in beeld

Wat gebeurt er als deze posities gebruikt?
screen.blit("mouse", (50, 50))
screen.blit("cheese", (30, 30))

Denk na over de volgorde waarin de commando's worden uitgevoerd.

📤 Inleveren

Maak een screenshot de code met de coordinaten waarbij de muis linksboven in beeld in beeld staat en de kaas rechtsonder.

2 Beweeg de muis

In deze les gaan we de muis laten bewegen met de pijltjestoetsen.

We doen dat door de positie van de muis aan te passen telkens als een toets wordt ingedrukt.

Wat gaan we doen?

We maken twee variabelen mouse_x en mouse_y om de positie van de muis bij te houden.

In de functie update() passen we deze coördinaten aan als je een pijl indrukt.

🔰 Startercode

# importeer library
import pgzrun

# Spelgrootte
WIDTH = 800
HEIGHT = 600

# Startpositie van de muis
mouse_x = 150
mouse_y = 150

def draw():
    screen.clear()
    screen.blit("mouse", (mouse_x, mouse_y))
    screen.blit("cheese", (50, 50))

def update():
    global mouse_x, mouse_y
    if keyboard.left:
        mouse_x -= 5
    if keyboard.right:
        mouse_x += 5
    if keyboard.up:
        mouse_y -= 5
    if keyboard.down:
        mouse_y += 5

#start programma
pgzrun.go()

ℹ️ Uitleg

mouse_x en mouse_y zijn variabelen die bijhouden waar de muis staat
update() wordt meerdere keren per seconde uitgevoerd
Met keyboard.left controleer je of de linkerpijl wordt ingedrukt
Bij elke toetsdruk wordt de positie een klein stukje aangepast

🛠️ Opdracht

Voer de code uit en beweeg de muis met de pijltjestoetsen
Pas de waarde 5 aan naar een groter of kleiner getal. Wat merk je?
Probeer ervoor te zorgen dat de muis niet buiten het scherm kan verdwijnen (zie extrat uitleg).
Als de muis en de kaas op dezelfde positie staan dan verdwijnt de muis onder de kaas. Zorg ervoor dat de muis boven de kaas komt. Zoals hier is weegegven:

💡 Extra uitleg

Laat de muis niet verder bewegen als hij het scherm uit dreigt te gaan. Voeg hiervoor `if`-statements toe zoals:

if keyboard.left and mouse_x > 10:
    mouse_x -= 5

Dus hier staat: las de linker pijtjes toets is ingedrukt én de x coördinaat is > 10 zet de postie van de muis dan op de huidige positie - 5. Dus trek 5 van de huisdige posite af.

Doe dit in vier stappen en test elke stap.

Doe dit eerst voor keyboard.left en test of het werkt.
Doe dit ook voor de keyboard.right en test of het werkt.
Doe dit daarna ook voor de keyboard.up en test of het werkt.
Doe dit tenslotte voor de keyboard.down en test of het werkt.

📤 Inleveren

Maak een screenshot van je aangepaste code waarbij de muis boven de kaas beweegt én
waarbij de muis niet uit het scherm kan bewegen.

3 Botsing met de kaas

In deze les gaan we kijken of de muis de kaas aanraakt.

Daarvoor gebruiken we een if-statement en controleren we of de muis en de kaas elkaar overlappen.

Wat gaan we doen?

We maken een rechthoek rondom de muis en rondom de kaas, en gebruiken colliderect() om te kijken of ze elkaar raken.

Als de muis de kaas raakt, tonen we een bericht in de console met print().

🔰 Startercode

# importeer library
import pgzrun

# Spelgrootte
WIDTH = 800
HEIGHT = 600

# Startpositie van de muis en kaas
mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50

def draw():
    screen.clear()
    screen.blit("mouse", (mouse_x, mouse_y))
    screen.blit("cheese", (cheese_x, cheese_y))

def update():
    global mouse_x, mouse_y
    if keyboard.left:
        mouse_x -= 5
    if keyboard.right:
        mouse_x += 5
    if keyboard.up:
        mouse_y -= 5
    if keyboard.down:
        mouse_y += 5

    # Botsing controleren
    mouse_rect = Rect((mouse_x, mouse_y), (50, 50))
    cheese_rect = Rect((cheese_x, cheese_y), (100, 100))

    if mouse_rect.colliderect(cheese_rect):
        print("Gevonden!")
    else:
      print('-')

#start programma
pgzrun.go()

ℹ️ Uitleg

Een Rect is een rechthoek: (x, y, breedte, hoogte)
colliderect() geeft True als twee rechthoeken elkaar raken
In dit voorbeeld zijn muis 50x50 pixels en de kaas beide 100x100 pixels groot.
Als er een botsing is, toont Python het woord Gevonden!

🛠️ Opdracht

Probeer de muis met de pijltjestoetsen naar de kaas te bewegen
Als je Gevonden! ziet in de console, werkt de botsing
De kaas is niet helemaal 100x100 (in alle richtingen). Pas de grootte van de Rect aan zodat je alleen een melding "Gevonden!" krijgt als de muis duidelijk de kaas raakt en duidelijk 'op de kaas zit'.
Zorg er ook voor dat de muis op de kaas komt en niet eronder!

💡 Extra uitdaging

Toon een boodschap op het scherm als de muis de kaas heeft gevonden:

gevonden = False

def update():
    ...
    if mouse_rect.colliderect(cheese_rect):
        gevonden = True

def draw():
    ...
    if gevonden:
        screen.draw.text("Gevonden!", (350, 10), fontsize=60, color="red")

📤 Inleveren

Maak een screenshot van je console waarin je ziet dat "Gevonden!" verschijnt als de muis de kaas aanraakt.

4 Kaas verspringt

In deze les gaan we ervoor zorgen dat de kaas naar een nieuwe plek springt als de muis hem aanraakt.

We doen dat met de functie random.randint() om een willekeurige positie te kiezen.

Wat gaan we doen?

We importeren de random-bibliotheek en maken een functie die een nieuwe plek kiest voor de kaas.

Als er een botsing is, roepen we die functie aan en verplaatsen we de kaas.

🔰 Startercode

import random

WIDTH = 800
HEIGHT = 600

mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50

def nieuwe_kaas_plek():
    x = random.randint(0, WIDTH - 64)
    y = random.randint(0, HEIGHT - 64)
    return x, y

def draw():
    screen.clear()
    screen.blit("mouse", (mouse_x, mouse_y))
    screen.blit("cheese", (cheese_x, cheese_y))

def update():
    global mouse_x, mouse_y, cheese_x, cheese_y

    if keyboard.left:
        mouse_x -= 5
    if keyboard.right:
        mouse_x += 5
    if keyboard.up:
        mouse_y -= 5
    if keyboard.down:
        mouse_y += 5

    mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
    cheese_rect = Rect((cheese_x, cheese_y), (64, 64))

    if mouse_rect.colliderect(cheese_rect):
        cheese_x, cheese_y = nieuwe_kaas_plek()

ℹ️ Uitleg

import random zorgt ervoor dat we willekeurige getallen kunnen gebruiken
random.randint(a, b) geeft een willekeurig getal tussen a en b
WIDTH - 64 zorgt ervoor dat het plaatje niet buiten beeld komt
Als de muis de kaas raakt, wordt cheese_x en cheese_y aangepast

🛠️ Opdracht

Laat de muis de kaas aanraken en kijk of deze naar een nieuwe plek verspringt
Probeer het een paar keer en kijk of het altijd binnen het scherm blijft
Pas de afmetingen van de sprite aan als jouw plaatjes groter of kleiner zijn dan 64x64

💡 Extra uitdaging

Kies een leuk geluidseffect op : https://www.wavsource.com/sfx/sfx.htm

📁 Zet dan ook een bestand, bijvoorbeeld bloop_x.wav in de (nieuwe) map sounds/

Voeg een geluid toe dat afspeelt als de muis de kaas raakt:

if mouse_rect.colliderect(cheese_rect):
    sounds.blook_x.play()
    cheese_x, cheese_y = nieuwe_kaas_plek()

📤 Inleveren

Maak een screenshot van je werkende code waar de kaas verspringt.

Leg kort uit wat random.randint() doet en waarom je WIDTH - 64 gebruikt.

5 Score bijhouden

In deze les gaan we een score bijhouden: elke keer als de muis de kaas raakt, telt de score één punt op.

Deze score tonen we ook op het scherm.

Wat gaan we doen?

We maken een variabele score die begint op 0 en steeds verhoogd wordt bij een botsing.

In de draw()-functie tekenen we de score linksboven in het scherm.

🔰 Startercode

# importeer library
import pgzrun
import random

WIDTH = 800
HEIGHT = 600

mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
score = 0

def nieuwe_kaas_plek():
    x = random.randint(0, WIDTH - 64)
    y = random.randint(0, HEIGHT - 64)
    return x, y

def draw():
    screen.clear()
    screen.blit("mouse", (mouse_x, mouse_y))
    screen.blit("cheese", (cheese_x, cheese_y))
    screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white")

def update():
    global mouse_x, mouse_y, cheese_x, cheese_y, score

    if keyboard.left:
        mouse_x -= 5
    if keyboard.right:
        mouse_x += 5
    if keyboard.up:
        mouse_y -= 5
    if keyboard.down:
        mouse_y += 5

    mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
    cheese_rect = Rect((cheese_x, cheese_y), (64, 64))

    if mouse_rect.colliderect(cheese_rect):
        cheese_x, cheese_y = nieuwe_kaas_plek()
        score += 1

#start programma
pgzrun.go()

ℹ️ Uitleg

score = 0 zet de score aan het begin op nul
Elke keer als de muis de kaas aanraakt, wordt de score verhoogd met score += 1
screen.draw.text() toont tekst op het scherm

🛠️ Opdracht

Speel het spel een paar keer en kijk of de score steeds verder oploopt
Pas de tekstkleur of positie aan van de score
Maak de tekst groter of kleiner door fontsize aan te passen

💡 Extra uitdaging

Laat de kleur van de tekst veranderen bij een bepaalde score:

kleur = "black"
if score >= 5:
    kleur = "red"
screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color=kleur)

📤 Inleveren

Maak een screenshot van het spel waarbij de score zichtbaar is (minimaal 3 punten).

Leg in een zinnetje uit wat score += 1 betekent.

6 Tijdslimiet

In deze les gaan we een tijdslimiet toevoegen. De speler heeft bijvoorbeeld 30 seconden om zoveel mogelijk kaas te pakken.

Aan het einde tonen we “Game Over” en stoppen we het spel.

Wat gaan we doen?

We maken een teller tijd_over die elke seconde met 1 omlaag gaat. Als de tijd op is, stopt het spel.

We tonen de tijd linksboven in beeld naast de score.

🔰 Startercode

# importeer library
import pgzrun
import random

WIDTH = 800
HEIGHT = 600

mouse_x = 150
mouse_y = 150
cheese_x = 50
cheese_y = 50
score = 0
tijd_over = 30
game_over = False

def nieuwe_kaas_plek():
    x = random.randint(0, WIDTH - 64)
    y = random.randint(0, HEIGHT - 64)
    return x, y

def draw():
    screen.clear()
    screen.blit("mouse", (mouse_x, mouse_y))
    screen.blit("cheese", (cheese_x, cheese_y))
    screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="white")
    screen.draw.text(f"Tijd: {tijd_over}", (10, 50), fontsize=40, color="blue")
    if game_over:
        screen.draw.text("Game Over", center=(WIDTH//2, HEIGHT//2), fontsize=60, color="red")

def update():
    global mouse_x, mouse_y, cheese_x, cheese_y, score

    if game_over:
        return

    if keyboard.left:
        mouse_x -= 5
    if keyboard.right:
        mouse_x += 5
    if keyboard.up:
        mouse_y -= 5
    if keyboard.down:
        mouse_y += 5

    mouse_rect = Rect((mouse_x, mouse_y), (64, 64))
    cheese_rect = Rect((cheese_x, cheese_y), (64, 64))

    if mouse_rect.colliderect(cheese_rect):
        cheese_x, cheese_y = nieuwe_kaas_plek()
        score += 1

def verlaag_tijd():
    global tijd_over, game_over
    if tijd_over > 0:
        tijd_over -= 1
    if tijd_over == 0:
        game_over = True

clock.schedule_interval(verlaag_tijd, 1.0)

#start programma
pgzrun.go()

ℹ️ Uitleg

tijd_over begint op 30 (seconden)
clock.schedule_interval(verlaag_tijd, 1.0) zorgt ervoor dat elke seconde de functie verlaag_tijd() wordt aangeroepen
Als tijd_over op 0 staat, verandert game_over in True en stopt het spel
In de draw()-functie tonen we de resterende tijd en, als het spel voorbij is, de tekst “Game Over”

🛠️ Opdracht deel 1

Laat het spel lopen en probeer zoveel mogelijk punten te halen binnen de tijd
Pas de tijd aan naar 10 of 60 seconden – wat vind je leuker?
Laat bij “Game Over” ook de eindscore groter in beeld zien.

🛠️Opdracht deel 2 (opnieuw uitvoeren)

Zorg ervoor dat de muis niet uit het beeld kan worden bewogen (zoals we bij opgave 2 hebben gedaan).
Zorg ervoor dat de muis op de kaas en niet onder de kaas verdwijnt.

💡 Extra uitdaging

Voeg een herstart-mogelijkheid toe met de R-toets:

def on_key_down(key):
    global score, tijd_over, game_over, mouse_x, mouse_y, cheese_x, cheese_y
    if key == keys.R:
        score = 0
        tijd_over = 30
        game_over = False
        mouse_x, mouse_y = 150, 150
        cheese_x, cheese_y = nieuwe_kaas_plek()

📤 Inleveren

Maak een screenshot van het spel als de tijd op is en je “Game Over” ziet en zet een mooie score neer!
Bewaar je code als een bestand (in Thonny, file - save as...) en lever het .py bestand met de code in.

7 Eindopdracht

🎮 Eindopdracht

Kies één (of meerdere) van de volgende uitbreidingen en voeg die toe aan je spel:

🧀 Zet meerdere stukjes kaas tegelijk op het scherm (gebruik een for-loop)
💣 Voeg een “giftige” kaas toe: als je die pakt, verlies je punten
🔊 Voeg geluiden toe voor eten, botsing of game over
🎨 Verander het uiterlijk van de muis of de achtergrond
🕒 Laat het spel moeilijker worden naarmate de tijd verstrijkt (bijv. snellere muis of bewegende kaas)

💡 Bedenk zelf ook een uitbreiding? Schrijf het plan op, laat het goedkeuren door je docent en priobeer het te maken!

Bij deze opgave mag je AI gebruiken!

📤 Inleveren

Lever één van de volgende dingen in:

Een werkend Python-bestand (.py) waarin jouw uitbreiding is verwerkt
Een screenshot van je spel én;
Uitleg in tekst (.txt) wat je hebt gedaan.

8 Reflectie

In deze les kijk je terug op wat je hebt gemaakt, én krijg je de kans om je spel op een leuke manier uit te breiden of aan te passen.

🧠 Reflectie

Als je terugkijkt naar deze opgave.

Vraag je zelf de volgende dingen af:

Wat vond je het leukste om te doen?
Wat vond je moeilijk of lastig om te begrijpen?
Welke onderdelen van Python begrijp je nu beter?
Waar ben je trots op.

📤 Inleveren

Lever je reflectie in met de antwoorden op de (reflectie) vragen in een PDF bestand.

Let op: gebruik je eigen woorden en wees specifiek!

###

# Docenten

🎓 Docentenhandleiding

📘 Overzicht

Doelgroep: Leerlingen van 12-15 jaar (instapniveau Python)
Duur: 6 lessen van ±45-60 minuten
Software: Thonny + Pygame Zero
Spelconcept: Een muis beweegt met de pijltjestoetsen en pakt steeds opnieuw verschijnende kaasjes

🎯 Leerdoelen

Begrijpen hoe coördinaten werken in een 2D-scherm
Gebruik van draw() en update() in een animatie
Werken met variabelen voor positie en beweging
Detecteren van botsingen met Rect en colliderect()
Gebruik van random en herhaalde logica
Score bijhouden en tonen
Reflecteren op eigen code en uitbreidingen bedenken

📚 Lesoverzicht

Les	Onderwerp	Nieuwe concepten
1	Muis en kaas tekenen	`draw()`, `screen.blit()`, coördinaten
2	Muis beweegt met toetsen	`keyboard.left`, `update()`, grenzen
3	Botsing detecteren	`Rect()`, `colliderect()`
4	Kaas verspringt op random plek	`random.randint()`, logica
5	Score bijhouden	`score += 1`, `screen.draw.text()`
6	Reflectie & uitbreiden	Reflecteren, creatief uitbreiden

⚠️ Valkuilen

colliderect() werkt niet → verkeerde grootte/positie van Rect
Sprites bewegen niet vloeiend → update() mist force_redraw() (indien nodig)
Kaas verschijnt buiten het scherm → randomwaarden buiten bereik
Score telt verkeerd → score += 1 buiten juiste if-blok

🧠 Differentiatie

Voor snelle leerlingen

Voeg meerdere stukjes kaas toe tegelijk
Laat een “slechte” kaas verschijnen die de score verlaagt
Gebruik afbeeldingen en laat muis draaien in richting

Voor langzamere leerlingen

Werk eerst zonder Rect, laat botsing handmatig triggeren
Gebruik alleen horizontale beweging
Geef startscripts per les met al werkende onderdelen

📊 Beoordeling (optioneel)

Criterium	Omschrijving	Score (1-5)
Spel werkt	Muis beweegt, kaas wordt gepakt, score telt	🟩
Codekwaliteit	Variabelen zijn logisch, overzichtelijk	🟩
Creativiteit	Leerling heeft iets extra’s toegevoegd (geluid, extra levels, design)	🟩
Reflectie	Leerling beantwoordt de reflectievragen met inzicht	🟩

💡 Lesaanpak & tips

Laat leerlingen direct runnen en testen na elke wijziging
Gebruik klassikale codebesprekingen met testvoorbeelden
Moedig leerlingen aan om “stukjes code” zelf te veranderen
Laat ze uitleggen wat ze doen: peer programming werkt goed bij deze opdracht

🧰 Benodigdheden

Thonny + Pygame Zero geïnstalleerd
Afbeeldingen: muis.png, cheese.png (optioneel)
Toetsenbord met pijltjestoetsen
Basiskennis Python (variabelen, if, def)

Vallende stenen

0 Wat gaan we leren

We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:

pgzero

Weet je nog hoe je een pacakge installeert in Thonny?

Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.

1 Teken speler en steen

In deze les gaan we de speler en één vallende steen tekenen.

We beginnen met een eenvoudige versie: een blokje onderaan dat je straks kunt besturen, en een steen die we straks laten vallen.

Wat gaan we doen?

We tekenen een rechthoek voor de speler en een rechthoek voor de steen.

We gebruiken vaste posities om de eerste versie werkend te krijgen.

🔰 Code

import pgzrun

WIDTH = 800
HEIGHT = 600

# Speler onderaan het scherm
player_x = 400
player_y = 550
player_width = 80
player_height = 20

# Vallende steen bovenaan
rock_x = 300
rock_y = 0
rock_size = 40

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
    screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")

pgzrun.go()

ℹ️ Uitleg

player_x en player_y: positie van de speler (een blauw blokje onderaan)
rock_x en rock_y: positie van de steen
screen.draw.filled_rect(...): tekent een blokje op het scherm

🛠️ Opdracht

Verplaats de steen naar een andere plek op het scherm door rock_x en rock_y aan te passen
Maak de speler breder of smaller
Verander de kleuren van speler en steen

💡 Extra uitdaging

Teken meerdere stenen op het scherm (gebruik meerdere draw.filled_rect())

📤 Inleveren

Maak een screenshot waarop je de speler en minstens één steen ziet (waarbij je de plaats van de steen dus hebt aangepast).

2 Speler bewegen

In deze les gaan we de speler besturen met de pijltjestoetsen.

De speler beweegt alleen naar links en rechts, en mag niet buiten het scherm gaan.

Wat gaan we doen?

We bewerken de update()-functie om de x-positie van de speler aan te passen als je op pijltjes drukt.

We voegen een maximale en minimale positie toe zodat de speler niet van het scherm glijdt.

🔰 Code

import pgzrun

WIDTH = 800
HEIGHT = 600

player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5

rock_x = 300
rock_y = 0
rock_size = 40

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
    screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")

def update():
    global player_x

    if keyboard.left:
        player_x -= player_speed
    if keyboard.right:
        player_x += player_speed

    # Speler binnen scherm houden
    if player_x < 0:
        player_x = 30
    if player_x > WIDTH - player_width:
        player_x = WIDTH - player_width

pgzrun.go()

ℹ️ Uitleg

player_speed: hoe snel de speler beweegt
keyboard.left en keyboard.right: detecteren of een toets is ingedrukt
if player_x > WIDTH - player_width: voorkomt dat de speler buiten beeld schuift

🛠️ Opdracht

Beweeg de speler heen en weer met je pijltjestoetsen
Verander player_speed – wordt de speler sneller of trager?
Aan de linker kant van het scherm stuitert de speler terwijl aan de rechterkant de speler netjes op de rand stopt. Zie jij hoe dat komt? Probeer dit aan te passen, probeer gewoon maar wat, je kan niets kapot maken!

Tip: bij welke if wordt gekeken of de speler tegen de linkerkant van het scherm aan zit?

💡 Extra uitdaging

Laat de speler sneller bewegen als je de toets langer inhoudt
Laat de speler automatisch naar links of rechts bewegen als je een extra toets indrukt (bijvoorbeeld A of D)

📤 Inleveren

Leg in eigen woorden uit hoe de player_speed de snelheid van het spel veranderd.
Leg uit waarom de speler aan de linkerkant van het scherm 'stuitert' en wat heb je aangepast om dit te voorkomen?

3 Steen laten vallen

In deze les gaan we de steen automatisch laten vallen.

Zodra de steen de onderkant van het scherm bereikt, verschijnt hij opnieuw bovenaan op een willekeurige plek.

Wat gaan we doen?

We voegen een rock_speed toe en laten de y-positie van de steen langzaam toenemen in update().

We controleren of de steen het scherm uit valt, en zetten hem dan opnieuw bovenaan met een willekeurige x-positie.

🔰 Code

import pgzrun
import random

WIDTH = 800
HEIGHT = 600

player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5

rock_x = random.randint(0, WIDTH - 40)
rock_y = 0
rock_size = 40
rock_speed = 3

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
    screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")

def update():
    global player_x, rock_y, rock_x, rock_size

    if keyboard.left:
        player_x -= player_speed
    if keyboard.right:
        player_x += player_speed

    if player_x < 0:
        player_x = 0
    if player_x > WIDTH - player_width:
        player_x = WIDTH - player_width

    # Steen laten vallen
    rock_y += rock_speed

    # Als de steen onderaan is, zet hem weer bovenaan met random x
    if rock_y > HEIGHT:
        rock_y = 0
        rock_x = random.randint(0, WIDTH - rock_size)

pgzrun.go()

ℹ️ Uitleg

rock_speed: bepaalt hoe snel de steen valt
rock_y += rock_speed: laat de steen naar beneden bewegen
random.randint(...): zorgt voor een willekeurige x-positie als de steen opnieuw verschijnt

🛠️ Opdracht

Verander de rock_speed – wat gebeurt er?
Maak de steen groter of kleiner door rock_size aan te passen.
Zorg er nu voor dat elke keer als de steen opnieuw valt de rock_size wordt aangepast en een random grootte krijgt.
Met random.randint(1, 10) wordt er een getal tussen 1 en 10 gegenereerd. Bedenk zelf mooie waarden en pas de code aan zodat de grootte van de steen telkens anders wordt.

💡 Extra uitdaging

Laat meerdere stenen tegelijk vallen
Laat elke steen een willekeurige snelheid hebben

📤 Inleveren

Leg uit hoe je ervoor hebt gezorgdt dat de steen telkens een ander grootte kijgt.

4 Botsing & Game Over

In deze les gaan we controleren of de speler de steen raakt.

Als er een botsing is, stopt het spel en verschijnt er de tekst “Game Over”.

Wat gaan we doen?

We maken een Rect van de speler en van de steen, en gebruiken colliderect() om te zien of ze elkaar raken.

We gebruiken een variabele game_over om te stoppen met het spel als er een botsing is.

🔰 Code

import pgzrun
import random
from pygame import Rect

WIDTH = 800
HEIGHT = 600

player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5

rock_x = random.randint(0, WIDTH - 40)
rock_y = 0
rock_size = 40
rock_speed = 3

game_over = False

def draw():
    screen.clear()
    if game_over:
        screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
        return

    screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
    screen.draw.filled_rect(Rect((rock_x, rock_y), (rock_size, rock_size)), "gray")

def update():
    global player_x, rock_y, rock_x, game_over

    if game_over:
        return

    if keyboard.left:
        player_x -= player_speed
    if keyboard.right:
        player_x += player_speed

    if player_x < 0:
        player_x = 0
    if player_x > WIDTH - player_width:
        player_x = WIDTH - player_width

    rock_y += rock_speed

    if rock_y > HEIGHT:
        rock_y = 0
        rock_x = random.randint(0, WIDTH - rock_size)

    # Botsing detecteren
    speler_rect = Rect(player_x, player_y, player_width, player_height)
    steen_rect = Rect(rock_x, rock_y, rock_size, rock_size)

    if speler_rect.colliderect(steen_rect):
        game_over = True

pgzrun.go()

ℹ️ Uitleg

Rect(x, y, w, h) maakt een rechthoek op de juiste plek
colliderect() kijkt of twee rechthoeken elkaar raken
game_over bepaalt of het spel nog doorgaat

🛠️ Opdracht

Laat de speler de steen raken en kijk of het spel stopt
Verplaats de speler naar de andere kant van het scherm – bots je dan nog?
Verander de “GAME OVER” tekst (bijvoorbeeld kleur of grootte)

💡 Extra uitdaging

Laat het spel herstarten als je op de R-toets drukt
Speel een geluid af bij de botsing (bijv. sounds.hit.play())

📤 Inleveren

Leg eersts stap-voor-stap in he eigen woorden uit hoe er een botsing van de steen met de speler wordt gedetecteerd.
Leg daarna stap-voor-stap, in eigen woorden uit wat er allemaal gebeurt als de steen tegen de speler aan komt. Verwijs daarbij naar de code.

5 Meerdere stenen & moeilijker maken

In deze les gaan we meerdere stenen tegelijk laten vallen.

Bovendien maakt het spel zichzelf moeilijker naarmate je langer speelt: de stenen vallen sneller.

Wat gaan we doen?

We maken een lijst van stenen, elk met hun eigen positie en snelheid.

We laten deze stenen vallen en bij een botsing stoppen we het spel.

We laten het spel steeds moeilijker worden door de snelheid te verhogen na een paar seconden.

🔰 Code

import pgzrun
import random
from pygame import Rect

WIDTH = 800
HEIGHT = 600

player_x = 400
player_y = 550
player_width = 80
player_height = 20
player_speed = 5

rocks = []
game_over = False
rock_timer = 0
rock_interval = 60  # frames
difficulty = 1.0

# Start met een paar stenen
for _ in range(3):
    x = random.randint(0, WIDTH - 40)
    speed = random.uniform(2, 4)
    rocks.append({"x": x, "y": 0, "size": 40, "speed": speed})

def draw():
    screen.clear()
    if game_over:
        screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
        return

    screen.draw.filled_rect(Rect((player_x, player_y), (player_width, player_height)), "blue")
    for rock in rocks:
        screen.draw.filled_rect(Rect((rock["x"], rock["y"]), (rock["size"], rock["size"])), "gray")

def update():
    global player_x, game_over, rock_timer, difficulty

    if game_over:
        return

    if keyboard.left:
        player_x -= player_speed
    if keyboard.right:
        player_x += player_speed

    player_x = max(0, min(WIDTH - player_width, player_x))

    speler_rect = Rect(player_x, player_y, player_width, player_height)

    for rock in rocks:
        rock["y"] += rock["speed"] * difficulty

        if rock["y"] > HEIGHT:
            rock["y"] = 0
            rock["x"] = random.randint(0, WIDTH - rock["size"])
            rock["speed"] = random.uniform(2, 5)

        rock_rect = Rect(rock["x"], rock["y"], rock["size"], rock["size"])
        if speler_rect.colliderect(rock_rect):
            game_over = True

    # Verhoog de moeilijkheid langzaam
    rock_timer += 1
    if rock_timer % 300 == 0:
        difficulty += 0.2

pgzrun.go()

ℹ️ Uitleg

Elke steen is een dict met x, y, size en speed
We gebruiken een for-loop om alle stenen te laten vallen
Met difficulty verhogen we langzaam de snelheid van de stenen

🛠️ Opdracht

Test het spel en kijk of het spel moeilijker wordt na ongeveer 15 seconden
Nu gaan we de grootte van de stenen weer aanpassen naar een random waarde zoals we dat bij de vorige opdracht ook hebben gedaan.
- Dat gaat iets anders omdat we nu meerdere 'rocks' hebben. In de for rock in rocks: loop worden één voor één alle blokken behandeld. De grootte van de rock staat in rock["size"]

Tip: weet je nog dat je met random.randint(1,4) een getal tussen 1 en 4 kan genereren?

💡 Extra uitdaging

Laat het aantal stenen toenemen naarmate het spel langer duurt
Laat een andere kleur steen verschijnen bij hogere moeilijkheid.
Laat elke steen een ander formaat hebben
Toon je “score” op het scherm: hoe lang heb je overleefd?

📤 Inleveren

Lever je code (.py bestand) in.

**************************************************

6 Score, Reflectie & Uitbreiding

In deze les voeg je een score toe die laat zien hoelang je het hebt volgehouden.

Daarnaast kijk je terug op je eigen werk én kies je een uitbreiding om het spel leuker of moeilijker te maken.

Wat gaan we doen?

We voegen een score toe die telt hoeveel frames je overleeft
We tonen deze score linksboven op het scherm
Bij Game Over laten we je eindscore zien

🔰 Toevoegingen aan bestaande code

score = 0  # bij de andere variabelen

def draw():
    screen.clear()
    if game_over:
        screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
        screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="black")
        return
    ...
    screen.draw.text(f"Score: {score}", (10, 10), fontsize=40, color="black")

def update():
    global score
    if game_over:
        return
    ...
    score += 1

ℹ️ Uitleg

score wordt bij elke frame 1 hoger → hoe langer je speelt, hoe hoger je score
screen.draw.text() toont je score tijdens én na het spel

🧠 Reflectie

Beantwoord de volgende vragen onderaan je code als commentaar of in een apart document:

Wat vond je het leukst om te maken in dit spel?
Wat vond je moeilijk, en hoe heb je dat opgelost?
Wat heb je geleerd over Python en programmeren?
Waar ben je trots op?

🎮 Uitbreiding (kies er één)

💥 Laat een explosie zien of geluid horen bij Game Over
🧱 Voeg bewegende obstakels toe
🏆 Houd een highscore bij (hoogste score van de sessie)
🚀 Geef de speler power-ups: tijdelijk onsterfelijk, versnellen, etc.
🎨 Verander het uiterlijk van de speler of achtergrond na elke 30 seconden

💡 Eigen idee?

Bedenk zelf een uitbreiding en probeer deze te maken. Schrijf kort op wat jouw idee is en hoe je het hebt aangepakt.

📤 Inleveren

Lever je eindversie van het spel in (inclusief score en uitbreiding)
Voeg een korte beschrijving toe van wat je hebt toegevoegd of aangepast
Lever ook je reflectie in (de 4 vragen)
Optioneel: voeg een screenshot of kort filmpje toe van je spel

🧠 Reflectieopdracht

Deze reflectieopdracht helpt je om stil te staan bij wat je hebt geleerd tijdens het programmeren van je spel.

Beantwoord de onderstaande vragen eerlijk en in je eigen woorden. Je mag je antwoorden inleveren via een apart document of onderaan je Python-bestand als commentaar zetten.

📋 Vragen

🔹 Wat vond je het leukste om te maken of uit te proberen?
🔹 Wat vond je lastig? Hoe heb je dat opgelost?
🔹 Wat heb je geleerd over Python (of programmeren in het algemeen)?
🔹 Waar ben je trots op in jouw eindresultaat?
🔹 Wat zou je de volgende keer anders willen doen of verbeteren?

📤 Inleveren

Lever je reflectie in bij je docent via de afgesproken manier (document, upload of als commentaar in je code).

###

# Docenten

🎓 Docentenhandleiding

📘 Overzicht

Doelgroep: Leerlingen met basiskennis Python (13-16 jaar)
Duur: 6 lessen van ±45-60 minuten
Software: Thonny + Pygame Zero
Spelconcept: De speler ontwijkt vallende objecten (stenen) en het spel wordt steeds moeilijker

🎯 Leerdoelen

Werken met coördinaten en schermlogica
Gebruik van draw() en update()
Toetsenbordbesturing met keyboard.left en keyboard.right
Beweging simuleren met variabelen
Objecten detecteren met Rect en colliderect()
Werken met lijsten voor meerdere objecten
Reflecteren op het leerproces en zelf uitbreidingen bedenken

📚 Lesoverzicht

Les	Onderwerp	Nieuwe concepten
1	Speler en steen tekenen	`draw()`, rechthoek tekenen, coördinaten
2	Speler beweegt	`update()`, keyboard input, begrenzen
3	Steen valt en komt terug	Beweging, `random`, logica
4	Botsing + Game Over	`Rect`, `colliderect()`, boolean vlag
5	Meerdere stenen + moeilijkheid	Lijsten, `for`-loops, moeilijkheidsschaal
6	Score, Reflectie & Uitbreiding	Scorevariabele, `draw.text()`, vrije opdracht

⚠️ Valkuilen

Speler glijdt van het scherm → if player_x > WIDTH - breedte vergeten
Botsing werkt niet → verkeerde waarden in Rect()
Alle stenen bewegen tegelijk, maar maar één wordt gecheckt op botsing
Score telt door na game over → geen check op if not game_over:

🧠 Differentiatie

Voor snelle leerlingen

Voeg power-ups toe (onzichtbaarheid, levens, vertraging)
Laat speler en stenen met sprites tekenen in plaats van rechthoeken
Laat leerlingen zelf een nieuw spelelement verzinnen

Voor langzamere leerlingen

Laat maar één steen vallen (geen lijst)
Geef per les kant-en-klare startercode mee
Werk samen in tweetallen

📊 Beoordeling (optioneel)

Criterium	Omschrijving	Score (1-5)
Werkt het spel	Geen fouten, spel werkt zoals bedoeld	🟩
Code is leesbaar	Logische structuur, goede naamgeving	🟩
Uitbreiding toegevoegd	Creatieve of technische aanvulling	🟩
Reflectie	Antwoorden zijn volledig en met inzicht	🟩

💡 Tips voor in de les

Laat leerlingen na elke wijziging op F5 drukken → directe feedback is motiverend
Gebruik klassikale demo’s bij fouten: “Waarom crasht deze versie?”
Laat leerlingen zelfstandig kleine uitbreidingen testen vanaf les 5
Bespreek reflectievragen klassikaal in les 6

🧰 Benodigdheden

Thonny geïnstalleerd (met Pygame Zero via pip install pgzero indien nodig)
Werkende computer (Windows, Linux of macOS)
Toetsenbord met pijltjestoetsen

Snake

Status: alles uitgevoerd en getest

0 Snake Lessenserie

Welkom bij de Snake lessenserie! In deze serie leer je stap voor stap hoe je het klassieke spelletje Snake maakt met Python en Pygame Zero. Je begint met het tekenen van een blokje en eindigt met een compleet werkend spel – inclusief groeiende slang, score en Game Over!

📚 Overzicht van de lessen

🎯 Leerdoelen

Je leert werken met de draw() en update() functies van Pygame Zero
Je oefent met variabelen, lists en toetsenbordinvoer
Je leert wat een game loop is en hoe je controle krijgt over beweging
Je leert je eigen code uitbreiden, testen en verbeteren

🛠️ Benodigdheden

Thonny geïnstalleerd met de package pgzero
Een beetje basiskennis van Python (variabelen, if, functies)

💬 Hoe werk je?

Elke les bevat uitleg, voorbeeldcode, opdrachten én een extra uitdaging. Voer je code steeds uit in Thonny en probeer alle opdrachten echt zelf op te lossen. Je mag hulp vragen of AI gebruiken, maar probeer te begrijpen wat er gebeurt.

🎓 Klaar?

Lever je eindspel in, samen met je antwoorden op de reflectievraag. Veel succes en vooral: veel plezier met programmeren!

🛠️ Opdracht

We gaan nog een projectje maken met Thonny (uit de vorige les) en bij dit project gaan we gebruik maken van de standaard Python library:

pgzero

Weet je nog hoe je een package installeert in Thonny?

Yep, Tools - Manage Packages en dan pgzero zoeken en installeren.

📤 Inleveren

Niets, maar zorg ervoor dat je Thonny werkt en dat je een neiuw project maak.

Tip: Kopieer je vorige project en noem het anders.

1 Teken de slangkop

In deze les gaan we beginnen met het maken van een eigen versie van Snake in Python met Pygame Zero.

We gaan eerst de kop van de slang tekenen op het scherm. Je ziet dan een vierkantje dat straks kan gaan bewegen.

Wat gaan we doen?

We maken een slangkop als vierkant met een bepaalde positie en grootte, en tekenen die in de draw()-functie.

📦 Benodigdheden

Een werkende Python-omgeving met Pygame Zero (zoals Thonny)
Geen plaatjes nodig – we tekenen de slang met blokken

🔰 Startercode

# importeer library
import pgzrun

# Spelgrootte
WIDTH = 600
HEIGHT = 400

# Startpositie van de slangkop
snake_x = 100
snake_y = 100
tile_size = 20

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
    
#start programma
pgzrun.go()

ℹ️ Uitleg

WIDTH en HEIGHT: grootte van het spelvenster
snake_x en snake_y: positie van de slangkop
tile_size: grootte van het blokje
screen.draw.filled_rect(...): tekent een gevuld vierkantje op het scherm

🛠️ Opdracht

Pas de waarde van snake_x en snake_y aan – wat gebeurt er?
Maak het vierkant groter of kleiner door tile_size te wijzigen
Verander de kleur van het vierkant in bijvoorbeeld "blue" of "orange"

💡 Extra uitdaging

Teken een tweede blokje naast de slangkop alsof er al een stukje staart is. Gebruik nog een screen.draw.filled_rect().

📤 Inleveren

Maak een screenshot van je 'slangkop' op het scherm waarbij je de 'slangkop'op een andere positie hebt gezet.

2 Beweeg de slang

In deze les gaan we de slangkop laten bewegen met de pijltjestoets die je indrukt.

We gebruiken daarvoor de update()-functie van Pygame Zero en de toetsenbordinput.

Wat gaan we doen?

We maken een richting-variabele en passen de positie van de slang aan op basis van de pijltjes die je indrukt.

🔰 Code

Dit is een deel van de code, je moet jouw bestaande code aanpassen aan de hand van deze nieuwe code.

Je hoeft dus niet alles opnieuw te typen. Plaats de update() functie en pas eventueel snake_x, snake_y, tile_size en step aan in jouw bestaande code.

# Startpositie van de slangkop
snake_x = 200
snake_y = 200
tile_size = 10
step = 1

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
    
def update():
    global snake_x, snake_y

    if keyboard.left:
        snake_x -= step
    if keyboard.right:
        snake_x += step
    if keyboard.up:
        snake_y -= step
    if keyboard.down:
        snake_y += step

ℹ️ Uitleg

update() wordt automatisch meerdere keren per seconde uitgevoerd
keyboard.left controleert of de linkerpijl is ingedrukt
Telkens als je een toets indrukt, verandert de positie van de slang
step bepaalt hoe ver de slang per stap beweegt

🛠️ Opdracht

Beweeg de slang door het scherm met de pijltjes
Pas step aan naar een andere waarde – wat merk je?
Laat de slang sneller of langzamer bewegen door minder of meer pixels per keer te verplaatsen

💡 Extra uitdaging

Laat de slang automatisch blijven bewegen in de laatst gekozen richting:

Gebruik een variabele richting die je bijwerkt met on_key_down()
Laat de slang dan elke update in die richting verder bewegen

📤 Inleveren

Leg uit wat de variable step doet.
Welke waarde heb je gekozen, waarom?

(je kunt dit inleveren in het tekst veld of in een .txt. bestandje)

3 Automatische beweging

In deze les gaan we de slang automatisch laten blijven bewegen in de richting van de laatste pijltjestoets die je hebt ingedrukt.

🔍 Wat gaan we doen?

We maken een nieuwe variabele richting.
Als je op een pijltjestoets drukt, verandert de waarde van richting.
In de update() functie verplaatst de slang zich elke keer opnieuw in de gekozen richting – ook als je de toets niet ingedrukt houdt!

🔰 Code

Gebruik deze versie als nieuwe code (je mag dit toevoegen aan of combineren met je bestaande code):

import pgzrun

WIDTH = 600
HEIGHT = 400

snake_x = 200
snake_y = 200
tile_size = 20
step = 10
richting = "right"

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")

def update():
    global snake_x, snake_y

    if richting == "left":
        snake_x -= step
    elif richting == "right":
        snake_x += step
    elif richting == "up":
        snake_y -= step
    elif richting == "down":
        snake_y += step

def on_key_down(key):
    global richting

    if key == keys.LEFT:
        richting = "left"
    elif key == keys.RIGHT:
        richting = "right"
    elif key == keys.UP:
        richting = "up"
    elif key == keys.DOWN:
        richting = "down"

pgzrun.go()

ℹ️ Uitleg

richting: deze variabele onthoudt de laatst gekozen richting
on_key_down(): dit is een functie die wordt uitgevoerd als je op een toets drukt
update(): deze functie verplaatst de slang elke keer in de gekozen richting, ook als je geen toets indrukt

🛠️ Opdracht

Test of je slang automatisch blijft bewegen nadat je een pijl indrukt
Wat gebeurt er als je twee keer snel op een andere richting drukt?
Probeer met tile_size en step te spelen voor een ander effect

💡 Extra uitdaging

Voeg grenzen toe aan je spel: laat de slang stoppen of ergens anders naartoe gaan als hij de rand van het scherm raakt.

📤 Inleveren

Leg in je eigen woorden uit wat de functie on_key_down() doet

(Lever dit in via het tekstvak of via een upload.)

4 Randbotsing en automatische richting

In deze les zorgen we ervoor dat de slang niet zomaar het scherm verlaat. Zodra hij een rand raakt, verandert hij automatisch van richting. Zo beweegt hij steeds binnen het scherm!

🔍 Wat gaan we doen?

We controleren of de slang de rand van het scherm raakt.
Als dat zo is, passen we automatisch de richting aan.

🔰 Code (let op: onvolledig!)

Hieronder zie je de code. Eén belangrijke regel ontbreekt – die moet jij toevoegen!

import pgzrun

WIDTH = 600
HEIGHT = 400

snake_x = 200
snake_y = 200
tile_size = 20
step = 5
richting = "right"

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")

def update():
    global snake_x, snake_y, richting

    if richting == "left":
        snake_x -= step
    elif richting == "right":
        snake_x += step
    elif richting == "...":
        snake_y -= step
    elif richting == "...":
        snake_y += step

    # 🧠 Hier controleren we of de slang de rand raakt
    if snake_x < 0:
        richting = "right"
    elif snake_x + tile_size > WIDTH:
        richting = "left"
    elif snake_y < 0:
        richting = "..."
    elif snake_y + tile_size > HEIGHT:
        richting = "..."

def on_key_down(key):
    global richting

    if key == keys.LEFT:
        richting = "left"
    elif key == keys.RIGHT:
        richting = "right"
    elif key == keys.UP:
        richting = "up"
    elif key == keys.DOWN:
        richting = "down"

pgzrun.go()

Als je de linker- of rechterkant raakt, dan 'stuitert' je terug. Dat gebeurt niet als je de boven- of onderkant aanraakt. Pas de code aan zodat je ook terugstuiters als je de onder-of bovenkant aanraakt.

ℹ️ Uitleg

snake_x + tile_size > WIDTH: betekent dat de slang voorbij de rechterrand gaat
Als de slang een rand raakt, verander je de variabele richting
De ontbrekende waarde is wat de slang moet doen als hij links het scherm uit dreigt te gaan

🛠️ Opdracht

Voeg de ontbrekende regel toe zodat de slang niet door de linkerkant verdwijnt
Test of de slang de andere richtingen goed oppikt
Verander eventueel de standaardrichting of startpositie om verschillende randen te testen

💡 Extra uitdaging

Laat de slang bij elke randbotsing van kleur veranderen! (Tip: maak een variabele kleur en gebruik bijvoorbeeld random.choice())

📤 Inleveren

Leg uit wat je hebt aangepast en waarom dat werkt.

(Lever dit in via het tekstvak of via een upload.)

5 Geen omkeren toegestaan

In deze les zorgen we ervoor dat de slang niet meteen omkeert. In een echte Snake-game kun je namelijk niet ineens van rechts naar links bewegen – dan zou de slang zichzelf opeten!

🔍 Wat gaan we doen?

We voorkomen dat de slang direct de tegenovergestelde richting kiest.
We vergelijken de huidige richting met de nieuwe richting voordat we die veranderen.

🔰 Code (let op: onvolledig!)

De volgende code voorkomt omkeren, maar jij moet één voorwaarde nog zelf aanvullen.

import pgzrun

WIDTH = 600
HEIGHT = 400

snake_x = 200
snake_y = 200
tile_size = 20
step = 1
richting = "right"

def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")

def update():
    global snake_x, snake_y

    if richting == "left":
        snake_x -= step
    elif richting == "right":
        snake_x += step
    elif richting == "up":
        snake_y -= step
    elif richting == "down":
        snake_y += step

def on_key_down(key):
    global richting

    if key == keys.LEFT and richting != "right":
        richting = "left"
    elif key == keys.RIGHT and richting != "left":
        richting = "right"
    elif key == keys.UP and richting != "down":
        richting = "up"
    elif key == keys.DOWN and richting != "...":
        richting = "down"

pgzrun.go()

Stuiteren tegen randen werkt niet meer

Het botsen tegen de randen wat in stap 4 is gedaan, zit niet in deze code. Dat is express gedaan. We proberen op deze manier een ding gelijktijdig uit te leggen en het voorkomt dat je op dit moment "door de bomen het bos niet meer ziet".

ℹ️ Uitleg

We gebruiken een if-voorwaarde om te voorkomen dat je teruggaat in de tegenovergestelde richting.
De ontbrekende regel is die voor keys.DOWN: welke richting is dan niet toegestaan?

🛠️ Opdracht

Vul de ontbrekende voorwaarde aan zodat de slang niet van "up" naar "down" mag keren
Test alle richtingen: kun je nog steeds normaal draaien? Keren lukt niet meer, toch?

💡 Extra uitdaging

Laat de slang een geluidje maken als je op een toets drukt, maar de richting wordt niet veranderd (bijv. als je wél op links drukt, maar dat mag niet).

Met deze code kan je ene geluidje afspelen.

sounds.beep.play()

Om een sound af te kunnen spelen moet jouw project folder een mapje maken sounds en daarin moet een beep.wav komen.

mijn_project/
├── main.py
└── sounds/
    └── beep.wav

Geluidjes toevoegen

Je kunt zelf geluidjes toevoegen, stel je hebt een geluidje bel.wav dan plaats je dat in de sounds directory en dan gebruik je het commando

souds.bel.play()

📤 Inleveren

Leg uit wat je hebt veranderd en hoe het werkt.

(Lever dit in via het tekstvak of via een upload.)

6 Appel tekenen en raken

In deze les voegen we een appel toe aan het spel. De appel verschijnt op een willekeurige plek op het scherm. Als de slang de appel raakt, verschijnt er een bericht in de console.

🔍 Wat gaan we doen?

We gebruiken de random-module om een appel op een willekeurige positie te tekenen.
We tekenen de 'appel' met een geel cirkeltje of vierkantje.
We detecteren of de slang de appel raakt.

📦 Benodigdheden

Je slangkop beweegt al automatisch over het scherm
Je hebt al gewerkt met tile_size en snake_x/snake_y

🔰 Code (let op: onvolledig!)

Onderstaande code tekent een slangkop en een appel. De botsing werkt al, maar na een botsing blijft de appel op dezelfde plek staan. Vul zelf aan wat er moet gebeuren!

import pgzrun
import random

WIDTH = 600
HEIGHT = 400

tile_size = 20
snake_x = 100
snake_y = 100
richting = "right"
step = 3

# Appelpositie (willekeurig op het grid)
apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size


def draw():
    screen.clear()
    screen.draw.filled_rect(Rect((snake_x, snake_y), (tile_size, tile_size)), "green")
    screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
    
def on_key_down(key):
    global richting

    if key == keys.LEFT and richting != "right":
        richting = "left"
    elif key == keys.RIGHT and richting != "left":
        richting = "right"
    elif key == keys.UP and richting != "down":
        richting = "up"
    elif key == keys.DOWN and richting != "up":
        richting = "down"

def update():
    global snake_x, snake_y, apple_x, apple_y

    if richting == "left":
        snake_x -= step
    elif richting == "right":
        snake_x += step
    elif richting == "up":
        snake_y -= step
    elif richting == "down":
        snake_y += step

    # Botst de slang met de appel?
    snake_rect = Rect((snake_x, snake_y), (tile_size, tile_size))
    apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))
    if snake_rect.colliderect(apple_rect):
        print("🍏 Appel geraakt!")
        # 👇 VUL HIER AAN: genereer een nieuwe positie voor de appel
        # apple_x = ...
        # apple_y = ...

pgzrun.go()

ℹ️ Uitleg

random.randint(): geeft een willekeurig geheel getal terug
De appelpositie wordt op het grid berekend, zodat deze altijd netjes uitlijnt
filled_circle(): tekent een geel rondje (je kunt ook filled_rect() gebruiken)

🛠️ Opdracht

Test of de appel op het scherm verschijnt
Beweeg de slang naar de appel – zie je de console-uitvoer?
Vul de ontbrekende regels in zodat de appel na een botsing op een nieuwe plek verschijnt

💡 Extra uitdaging

Laat de appel niet precies op dezelfde plek als de slang verschijnen wanneer hij opnieuw wordt gegenereerd!

📤 Inleveren

Lever de code in .py bestand.

7 De slang groeit

In deze les maak je van je slang een échte slang: eentje die uit meerdere blokjes bestaat en langer wordt als hij een appel eet.

🔍 Wat gaan we doen?

We veranderen de slang van één blokje naar een lijst van blokjes
De slang groeit bij het eten van een appel
We houden de lengte gelijk als er geen appel wordt gegeten

📘 Strategie

De code wordt nu iets ingewikkelder. Het is niet erg als je niet alles direct begrijpt. Probeer wel te volgen wat er gebeurt. We bespreken de strategie:

De slang bestaat uit meerdere delen. De code in de draw()-functie tekent elk stukje.
Bij elke update wordt er een nieuw blokje toegevoegd aan de kop van de slang.
Als de slang een appel raakt: dan blijft de slang langer.
Als er geen appel is geraakt: dan wordt het laatste stukje van de slang verwijderd.

Dus in het kort:

Teken de slang
Voeg een stukje toe aan de kop
Geen appel? Verwijder de staart

🔰 Code

import pgzrun
import random

WIDTH = 600
HEIGHT = 400
tile_size = 20

snake = [(100, 100)]
richting = "right"
step = 3

apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size

def draw():
    screen.clear()
    for segment in snake:
        screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
    screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")

def on_key_down(key):
    global richting
    if key == keys.LEFT and richting != "right":
        richting = "left"
    elif key == keys.RIGHT and richting != "left":
        richting = "right"
    elif key == keys.UP and richting != "down":
        richting = "up"
    elif key == keys.DOWN and richting != "up":
        richting = "down"

def update():
    global apple_x, apple_y

    head_x, head_y = snake[0]
    if richting == "left":
        head_x -= step
    elif richting == "right":
        head_x += step
    elif richting == "up":
        head_y -= step
    elif richting == "down":
        head_y += step

    new_head = (head_x, head_y)
    snake.insert(0, new_head)

    head_rect = Rect(new_head, (tile_size, tile_size))
    apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))

    if head_rect.colliderect(apple_rect):
        print("🍏 Appel geraakt!")
        apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
        apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
    else:
        snake.pop()  # staart verwijderen

    if new_head in snake[1:]: # Deze code detecteerd of de slang zichzelf raakt.
        print("🚫 Game over! De slang raakte zichzelf.")
        exit()

pgzrun.go()

ℹ️ Uitleg

snake = [(x, y), ...]: lijst van alle slangsegmenten
insert(0, new_head): voegt een nieuw blokje toe aan de voorkant
pop(): verwijdert het laatste stukje (staart)
if new_head in snake[1:]: controle of slang zichzelf raakt

Voorbeeld bij beweging:

Stap 1: slang = [(4,2), (3,2), (2,2)]
Stap 2: kop wordt (5,2) → slang = [(5,2), (4,2), (3,2)]
Stap 3: geen appel → staart eraf → slang = [(5,2), (4,2)]

📚 Waarom werkt dit zo?

Door altijd eerst een kop toe te voegen, beweegt de slang vooruit. Als er geen appel is geraakt, halen we de staart weg zodat de lengte gelijk blijft. Wordt er wél een appel geraakt, dan blijft de slang langer: we doen dan geen pop(). Dit is hoe de slang groeit!

🛠️ Opdracht

Controleer of de slang groeit als hij een appel eet
Controleer of hij even lang blijft als er geen appel wordt geraakt

📄 Inleveren

Beantwoord de vraag: Wat gebeurt er als je snake.pop() vergeet?

(Lever dit in via het tekstvak of als bestand.)

8 De slang sneller maken met vertraging

In deze les leer je hoe je de slang sneller kunt laten groeien door de step te vergroten, zonder dat het spel te snel en onspeelbaar wordt.

🔍 Wat is het probleem?

Je denkt misschien: "Ik wil dat de slang sneller beweegt, dus ik maak step groter." Maar als je step = 20 doet, wordt het spel ineens veel te snel.

Dat komt omdat update() standaard 60 keer per seconde wordt uitgevoerd. Dus je slang maakt dan 60 sprongen van 20 pixels per seconde: dat is 1200 pixels!

❌ Fout idee

step = 20  # grotere stap
# maar het spel gaat nu te snel!

✅ Goede oplossing: beweging vertragen

We laten de slang niet elke update bewegen, maar bijvoorbeeld 1x per 10 frames. Zo kun je step groter maken, zonder dat het spel onbestuurbaar wordt.

🔰 Code

import pgzrun
import random

WIDTH = 600
HEIGHT = 400
tile_size = 20
step = 20
vertraging = 10  # aantal frames wachten
frames = 0

snake = [(100, 100)]
richting = "right"

apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size

def draw():
    screen.clear()
    for segment in snake:
        screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
    screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")

def on_key_down(key):
    global richting
    if key == keys.LEFT and richting != "right":
        richting = "left"
    elif key == keys.RIGHT and richting != "left":
        richting = "right"
    elif key == keys.UP and richting != "down":
        richting = "up"
    elif key == keys.DOWN and richting != "up":
        richting = "down"

def update():
    global frames
    frames += 1
    if frames < vertraging:
        return
    frames = 0
    beweeg_slang()

def beweeg_slang():
    global apple_x, apple_y

    head_x, head_y = snake[0]
    if richting == "left":
        head_x -= step
    elif richting == "right":
        head_x += step
    elif richting == "up":
        head_y -= step
    elif richting == "down":
        head_y += step

    new_head = (head_x, head_y)
    snake.insert(0, new_head)

    head_rect = Rect(new_head, (tile_size, tile_size))
    apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))

    if head_rect.colliderect(apple_rect):
        print("\U0001F34F Appel geraakt!")
        apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
        apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
    else:
        snake.pop()

    if new_head in snake[1:]:
        print("\u274C Game over! De slang raakte zichzelf.")
        exit()

pgzrun.go()

🧠 Waarom werkt dit?

frames += 1: telt hoe vaak update() al is uitgevoerd
Pas als frames >= vertraging, beweegt de slang echt
step bepaalt nu de grootte van de stap, niet de snelheid van het spel

🚀 Opdracht

Stel step = 20 in en test of de slang nu sneller groeit
Experimenteer met vertraging = 5 of vertraging = 15
Wat is een fijne balans tussen stapgrootte en snelheid?
Test het spel; wat gebeurt er precies als de slang tegen zijn eigen staart botst?

🔎 Extra uitdaging

Laat de slang naarmate hij langer wordt automatisch steeds iets sneller bewegen (tip: verlaag vertraging bij elke appel).

📄 Inleveren

Leg uitwat er gebeurt als de slang tegen zijn staart aankomt.
Probeer te vertellen wat je zou willen veranderen; wat moet er gebeuren als de slang tegen zijn slang aan botst?

(Lever dit in via het tekstvak of als bestand.)

9 Score bijhouden en Game Over tonen

In deze les voegen we een score toe aan het spel. Elke keer als je een appel eet, krijg je 1 punt. En als de slang zichzelf raakt, laten we "Game Over" op het scherm zien en stopt het spel.

🔍 Wat gaan we doen?

Een variabele score bijhouden
De score op het scherm tonen met screen.draw.text()
Bij een botsing met jezelf: game_over = True
Het spel stoppen en "Game Over" tonen

🔰 Startercode

import pgzrun
import random

WIDTH = 600
HEIGHT = 400
tile_size = 20
step = 20
vertraging = 10
frames = 0

snake = [(100, 100)]
richting = "right"
score = 0

apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size

game_over = False

def draw():
    screen.clear()
    if game_over:
        screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2), fontsize=60, color="red")
        screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2 + 50), fontsize=40, color="white")
    else:
        for segment in snake:
            screen.draw.filled_rect(Rect(segment, (tile_size, tile_size)), "green")
        screen.draw.filled_circle((apple_x + tile_size // 2, apple_y + tile_size // 2), tile_size // 2, "yellow")
        screen.draw.text(f"Score: {score}", topleft=(10, 10), fontsize=30, color="white")

def on_key_down(key):
    global richting
    if key == keys.LEFT and richting != "right":
        richting = "left"
    elif key == keys.RIGHT and richting != "left":
        richting = "right"
    elif key == keys.UP and richting != "down":
        richting = "up"
    elif key == keys.DOWN and richting != "up":
        richting = "down"

def update():
    global frames
    if game_over:
        return
    frames += 1
    if frames < vertraging:
        return
    frames = 0
    beweeg_slang()

def beweeg_slang():
    global apple_x, apple_y, score, game_over

    head_x, head_y = snake[0]
    if richting == "left":
        head_x -= step
    elif richting == "right":
        head_x += step
    elif richting == "up":
        head_y -= step
    elif richting == "down":
        head_y += step

    new_head = (head_x, head_y)

    if new_head in snake[1:]:
        print("❌ Game over! De slang raakte zichzelf.")
        game_over = True
        return

    snake.insert(0, new_head)

    head_rect = Rect(new_head, (tile_size, tile_size))
    apple_rect = Rect((apple_x, apple_y), (tile_size, tile_size))

    if head_rect.colliderect(apple_rect):
        print("\U0001F34F Appel geraakt!")
        score += 1
        apple_x = random.randint(0, (WIDTH - tile_size) // tile_size) * tile_size
        apple_y = random.randint(0, (HEIGHT - tile_size) // tile_size) * tile_size
    else:
        snake.pop()

pgzrun.go()

🧠 Waarom werkt dit?

We tekenen de score linksboven tijdens het spel
We zetten game_over = True bij een zelfbotsing
Als game_over waar is, stoppen we de beweging en tonen een ander scherm

🚀 Opdracht

Laat de slang een paar appels eten en kijk of de score klopt
Laat de slang zichzelf raken en controleer of "Game Over" verschijnt

🔎 Extra uitdaging

Laat de score ook in de console printen bij elke appel
Laat het spel automatisch herstarten na een paar seconden (of met een toets)

📄 Inleveren

Beantwoord: Hoe weet de code dat het "Game Over" is?
Leg stap-voor-stap uit wat er gebeurt. Kijk goed naar de code!

(Lever dit in via het tekstvak of als bestand.)

10 Snake – Eindopdracht

🌯️ Houd de slang binnen het scherm

Op dit moment kan de slang zomaar van het scherm verdwijnen als je te ver naar links, rechts, boven of onder beweegt. Bedenk zelf hoe je dat kunt oplossen!

Tip: je kunt controleren of de kop van de slang buiten het scherm terechtkomt. Bijvoorbeeld:

if head_x < 0 or head_x >= WIDTH or head_y < 0 or head_y >= HEIGHT:
    game_over = True

Op deze manier ben je 'af' als je het scherm raakt. Je zou ook van richting kunnen veranderen, maar dit is wat lastiger om uit te voeren.

🛠️ Opdracht

Zorg ervoor dat de slang niet buiten het beeld kan verdwijnen. Je kunt het natuurlijk zo maken dat als je de rand raakt, het spel klaar is ("Game over").

Een ander optie is om van richting te veranderen. Dat is lastiger, weet je waarom? Hoe zou je het op een goede manier kunnen uitvoeren?

📄 Inleveren

Leg uit waarom het lastig is om de slang van richting te laten veranderen als die de rand van het scherm raakt. Je hoeft het niet te coderen, maar leg uit hoe je de slang precies van richting zou kunnen laten veranderen als die de rand raakt. En werkt dit ook in de hoeken?

🔎 Extra uitdaging

Als je goed hebt beschreven wat er precies moet gebeuren en je hebt ook rekening gehouden met de hoeken dan kun je misschien AI vragen jouw te helpen om dit echt te bouwen? Als het lukt, wordt het spel leuker om te spelen!

Snake Challenge

Snake Challenge!

Maak je eigen snake versie!

In deze laatste les ga je zelf aan de slag. Je krijgt een paar uitdagingen waar je zelf oplossingen voor moet bedenken. De code werkt al goed, maar nog niet perfect: je slang kan bijvoorbeeld zomaar uit beeld verdwijnen. En misschien wil je het spel ook leuker of spannender maken?

✨ Bedenk en bouw je eigen toevoeging

Voeg nu zelf iets toe aan het spel. Kies uit een van de onderstaande ideeën, of verzin er zelf een!

🚀 Idee 1: Maak het spel sneller

Verlaag de vertraging een beetje elke keer als je een appel eet. Dan wordt het spel steeds spannender!

vertraging = max(1, vertraging - 1)

🎈 Idee 2: Verander de kleur van de slang bij elke appel

Gebruik bijvoorbeeld random.choice(["green", "blue", "purple"]) om de kleur van de slang steeds te wisselen.

⛅️ Idee 3: Maak obstakels op het scherm

Voeg een vaste lijst toe met blokken waar de slang niet overheen mag. Als hij ze raakt: game over!

💡 Extra idee?

Heb je zelf een ander idee? Ga ervoor! Laat je creativiteit zien. Denk aan een "pauze-knop", meerdere appels tegelijk, of een level-systeem.

📄 Inleveren

Maak een korte beschrijving van wat je hebt aangepast (txt bestand)
Lever je aangepaste en werkende spel in.

Introductie AI

Introductie

In deze les leren we wat AI is en we gaan kijken naar het verschil van programmeren met en zonder AI.

We kijken naar de kracht van AI maar ook naar de tekortkomingen.

We gaan de volgende dingen leren:

Wart is AI?
Wat zijn de AI toepassingen?
AI versus klasieke ('gewone') code. Wa tis het verschil?
Voordelen van AI
Nadelen van AI
Hoe kan je AI slim gebruiken
Prompt Engineering (intro)

1, wat is AI?

Bekijk deze video:

https://www.youtube.com/watch?v=QJE_ycgR8E8

Opdracht 1

Vat in één tot drie zinnen samen wat de kernboodschap van dit filmpje is.

Inleveren

Maak de samenvatting in een text document en vul deze in. Lever een TXT document in.

2, AI toepassingen

AI is veel meer dan alleen ChatGPT. In deze video wordt uitgelegd waarvoor AI kan worden gebruikt.

Bekijk deze video:

https://www.youtube.com/watch?v=stw2upLHCuI

Theorie

AI-toepassingen per taaktype

Hieronder staan concrete voorbeelden van hoe kunstmatige intelligentie (AI) wordt toegepast in verschillende soorten taken

✦ 1. Classificatie

Wat is het?: Het toewijzen van gegevens aan een bepaalde categorie.
Voorbeeld: Een e-mailsysteem dat automatisch bepaalt of een e-mail spam is of geen spam, op basis van de inhoud, afzender en gebruikte woorden.

✦ 2. Associatie

Wat is het?: Het ontdekken van patronen of combinaties van items die vaak samen voorkomen.
Voorbeeld: Een webshop gebruikt AI om te ontdekken dat klanten die een laptop kopen ook vaak een laptophoes kopen. Op basis daarvan worden aanbevelingen gedaan: "Andere klanten kochten ook...".

✦ 3. Optimalisatie

Wat is het?: Het vinden van de beste oplossing uit veel mogelijkheden, vaak onder bepaalde voorwaarden.
Voorbeeld: Een AI-systeem voor routeplanning bepaalt de snelste bezorgroutes voor een pakketdienst, rekening houdend met afstand, verkeer en bezorgtijd.

✦ 4. Voorspelling

Wat is het?: Het voorspellen van toekomstige waarden of gebeurtenissen op basis van eerdere gegevens.
Voorbeeld: Een bakker gebruikt AI om op basis van eerdere verkoopdata te voorspellen hoeveel brood er de komende week nodig is.

✦ 5. Creatie

Wat is het?: Het genereren van nieuwe inhoud of ideeën met behulp van AI.
Voorbeeld: Een AI-systeem zoals ChatGPT of DALL·E kan een gedicht schrijven of een afbeelding maken op basis van een beschrijving, bijvoorbeeld: "Een robot die schildert in een zonnebloemenveld".

Opdracht

Bepaal van elk van de voorbeelden bij welk type AI-toep[assing (creatie, assiociatie, optimalisatie, voorpellen, creatie) dit hoort.

Netflix geeft je aanbevelingen voor films op basis van wat je eerder hebt gekeken.
Een game bepaalt of je gedrag verdacht is en je mogelijk aan het valsspelen bent.
Een routeplanner voor je fietsrit kiest de route met de minste verkeerslichten.
TikTok voorspelt welke video je het langst gaat kijken en laat die eerder zien.
Een AI-programma maakt een unieke profielfoto in cartoonstijl van jou.

Inleveren

Neem de punten over in een text document en vul deze in. Lever een TXT document in.

3, AI en 'gewone' computer code.

Wat is het verschil tussen 'gewone' code en AI-code?

Gewone code (klassieke algoritmes) is gebaseerd op vaste instructies: als je A invoert, gebeurt altijd B. Dit maakt het voorspelbaar en betrouwbaar. Denk aan een rekenmachine of een robotarm in een fabriek die elke minuut exact dezelfde beweging maakt. De computer voert precies uit wat je hebt geprogrammeerd.

AI-code werkt anders. Die is getraind op heel veel voorbeelden (zoals tekst, beelden of data) en leert daarvan zelf patronen te herkennen. Dat lijkt een beetje op hoe onze hersenen leren. AI is vaak minder voorspelbaar, omdat het zelf beslissingen neemt op basis van wat het geleerd heeft. Hierdoor kan het ook fouten maken, zeker als het iets nog niet eerder gezien heeft. ChatGPT is bijvoorbeeld een AI die voorspelt welk woord het beste past, op basis van miljarden voorbeelden.

Opdracht

Opdracht: AI-code of klassieke code? Lees de eigenschappen hieronder. Bepaal of het hoort bij klassieke code of bij AI-code. Zet er een kruisje bij:

Eigenschap	Klassieke code	AI-code	Geen van beiden
Voert altijd precies dezelfde handeling uit
Kan leren van voorbeelden
Maakt soms fouten bij onbekende situaties
Is goed in rekenen en logica
Kan patronen herkennen
Is 100% voorspelbaar
Kan nieuwe dingen maken (zoals een tekening)
Kan adviseren of je in Bitcoin moet stappen of moet verkopen
Zal altijd goed advies geven voor de aankoop/verkoop van Bitcoin
Kan jouw foto veranderen en jou in een hele vreemde situatie zetten

Inleveren

Neem de tabel over in een Word document en vul deze in. Lever een PDF document in.

4, voordelen van AI

Voordelen van AI

AI heeft een aantal sterke kanten die het nuttig maken in allerlei toepassingen:

AI kan grote hoeveelheden data analyseren en daarin snel patronen ontdekken die mensen zouden missen.
AI werkt 24/7, zonder pauzes of vermoeidheid.
AI kan gepersonaliseerde aanbevelingen geven, bijvoorbeeld op YouTube of Spotify.
AI helpt bij medische diagnoses, doordat het patronen in röntgenfoto’s of scans herkent.
AI automatiseert saaie of gevaarlijke taken, zoals kwaliteitscontrole in fabrieken of het inspecteren van pijpleidingen met drones.

Opdracht

Hieronder zie je een aantal situaties. Geef per situatie aan of AI hier een voordeel zou kunnen bieden, en leg uit waarom.

Een docent moet elke week 200 toetsresultaten controleren op fouten.
Een leerling zoekt elke dag naar nieuwe muziek die past bij zijn smaak.
Een ziekenhuis wil sneller afwijkingen op longfoto’s opsporen.
Een bedrijf wil weten welke producten waarschijnlijk snel uitverkocht raken.
Een bakker wil weten hoeveel broden hij volgende week moet bakken.

Inleveren

Neem de punten over in een text document en vul deze in. Lever een TXT document in.

5, nadelen van AI

Nadelen van AI

Hoewel AI veel voordelen heeft, zijn er ook belangrijke nadelen en aandachtspunten:

AI kan fouten maken als het situaties tegenkomt die het niet kent of niet goed begrijpt.
AI is afhankelijk van data — als de data onvolledig of bevooroordeeld is, kan het systeem verkeerde beslissingen nemen.
AI is vaak een ‘black box’ — het is soms moeilijk te begrijpen waarom een AI iets doet of beslist.
AI kan banen vervangen, vooral bij repetitieve taken, wat zorgt voor zorgen over werkgelegenheid.
AI heeft geen ethiek of gevoel — het kan geen morele afwegingen maken zoals mensen dat doen.
AI kan misbruikt worden — bijvoorbeeld voor deepfakes, spam of het beïnvloeden van meningen via sociale media.

Opdracht: Waar is AI een risico of nadeel?

Bekijk de onderstaande situaties. Geef per situatie aan of je denkt dat AI hier een risico of nadeel kan zijn, en leg kort uit waarom.

Een AI-systeem beoordeelt sollicitaties automatisch en kiest wie wordt uitgenodigd.
Een AI-chatbot geeft medisch advies zonder dat een arts meekijkt.
Een zelfrijdende auto moet een noodbeslissing nemen in het verkeer.
Een bedrijf gebruikt AI om te controleren hoeveel pauze werknemers nemen.
Een leerling gebruikt AI om al zijn schoolopdrachten te laten schrijven.

Inleveren

Neem de punten over in een text document en vul deze in. Lever een TXT document in.

6, slim gebruik van AI

Hoe benut je de voordelen en vermijd je de nadelen?

AI is een krachtig hulpmiddel, maar het is belangrijk dat je er bewust en slim mee omgaat. Dat betekent: weten wanneer je AI goed kunt inzetten, en ook herkennen wanneer het beter is om zelf na te denken of iets te controleren.

✔ Zo benut je de voordelen van AI:

Gebruik AI als assistent, niet als vervanger van je eigen denkwerk.
Laat AI je helpen bij brainstormen, schrijven of samenvatten — maar controleer altijd de output.
Gebruik AI om saaie of repetitieve taken te versnellen, zoals opmaak of vertalingen.
Combineer AI-output met je eigen kennis en creativiteit, zodat het persoonlijk blijft.

✘ Zo vermijd je de nadelen van AI:

Geloof niet alles wat AI zegt — controleer feiten en cijfers.
Gebruik AI niet voor belangrijke beslissingen zonder menselijk toezicht.
Denk na over privacy en veiligheid — deel geen persoonlijke gegevens.
Gebruik AI niet om te spieken of werk van anderen als je eigen werk in te leveren
Weet wanneer je AI niet moet gebruiken: Soms is menselijk oordeel belangrijker, bijvoorbeeld bij gevoelige onderwerpen of ethische keuzes.

Opdracht: Slim of niet slim gebruik van AI?

Lees de onderstaande situaties. Geef per situatie aan of dit slim gebruik van AI is of juist onverstandig, en leg uit waarom.

Een leerling vraagt ChatGPT om 5 ideeën voor een spreekbeurt en kiest daarna zelf het beste idee.
Iemand plakt een volledige schoolopdracht in ChatGPT en levert het antwoord in zonder iets aan te passen.
Een student laat AI een samenvatting maken van een moeilijke tekst en controleert die daarna met de originele tekst erbij.
Iemand vraagt aan een AI wat de beste medicijnen zijn voor zijn klachten, zonder met een arts te praten.
Een leerling gebruikt AI om zijn code te verbeteren, maar probeert eerst zelf te begrijpen wat het doet.

Inleveren

Neem de punten over in een text document en vul deze in. Lever een TXT document in.

7, Prompt engineering

Prompt engineering is het slim en bewust formuleren van opdrachten of vragen (prompts) voor een AI-systeem zoals ChatGPT, zodat je een zo goed mogelijk en bruikbaar antwoord krijgt.

Als jij aan een mede student vraagt of hij je met de vorige opdracht kan helpen, dan weet hij waarschijnlijk waar je het voer hebt. Een AI zoals ChatGPT weet dat niet. Omdat CHatGPT de context niet weet.

De contect is alles om een vraag heen.

Voorbeeld

"Maak een quiz."

Deze opdracht is vaag. De AI weet niet:

Over welk onderwerp?
Voor welke doelgroep?
Hoeveel vragen?
Meerkeuze of open vragen?

Voorbeeld met goede prompt engineering:

"Maak een quiz van 5 meerkeuzevragen voor leerlingen van 14 jaar over het onderwerp 'kunstmatige intelligentie'. Geef bij elke vraag vier antwoordopties en geef aan welk antwoord het juiste is."

Deze prompt:

geeft context (leeftijd, onderwerp)
is duidelijk (5 vragen, meerkeuze)
is doelgericht (quiz maken)
bevat extra details (aantal opties en juiste antwoord)

We gaan hier in de mdule prompt engineering verder mee werken, maar we gaan nu vast een oefening doen.

Opdracht, maak een prompt

Maak één prompt waarin je je AI vraagt een PHP programma dat zoveel mogelijk lijkt op:

Je hoeft geen database te maken, je hoeft alleen front-end code te maken.

Maak dit met één prompt en wees zo compleet mogelijk.

Inleveren

De door jouw gemaakte prompt
Het resultaat in code

Prompt Engineering 1

Introductie

Prompt Engineering is alsof je een buitenstaander die niets van je weet iets wilt vragen. Omdat te doen moet je dus duidelijk en geod communiceren.

We gaan leren hoe we goede prompt kunnen schrijven.

Voor een goede prompt moet je rekening houden met de volgende zaken:

1. Context - een goede propmt heeft voldoende contexrt.
2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
3. Duidelijkheid - een goede prompt is duidelijk.
4. Doelgericht - een goede prompt is doelgericht.
5. Vorm - in een geode prompt kan je de output in een bepalade vorm vragen.
6. Toon -door in de prompt de toon op te nemne, bepaal je de vorm van het antwoord.

Al deze punten worden stuk-voor-stuk behandeled. De eerste drie zijn rood omdat élke prompt altijd moet voldoen aan deze kenmerken.

Maar laten we eerst even kiijk wat nu eigelijk promting precies is.

Wat is prompting?

Prompting betekent dat je iets vraagt aan een AI, zoals ChatGPT, op een manier waardoor je een goed antwoord krijgt. Je geeft een opdracht of stelt een vraag, en dat noemen we een prompt.

Je kunt het vergelijken met hoe je een klasgenoot iets vraagt:

Als je gewoon zegt: “Doe dit,” snapt die ander misschien niet precies wat je bedoelt.
Maar als je zegt: “Kun je me helpen met deze code, want ik snap het niet?", is dat al een stukje beter.
Maar het kan nog beter: "Kun je me helpen met deze code want ik krijg een foutmelding 'unknown variable on line 23', ik snap niet wat de foutmelding betekent? '".
En zelfs dit kan nog beter want je vergeet een belangrijk detail, zie jij welke detail?

Kort gezegd: prompting is het slim stellen van een vraag of opdracht aan AI, zodat je krijgt wat je nodig hebt.

In de laatste zin staat niets over in welke omgeving en met welke programmeertaal je werkt. Ook zou je kunnen overwegen om de code of een stuk daarvan mee te sturen.

✍️ Opdracht 1

Verbeter de prompt die hierboven bij punt 4 staat.

1. Context

We hebben geleerd dat een goede prompt detail en context heeft.

Context is een soort van omgeving.

Als je vraagt om code aan passen dan moet je dus aangeven wat de 'omgeving' is, in dit geval PHP en als het je bepaalde frameworks gebruikt of andere zaken die van belang zijn dan noem je die ook.

Context betekent: de omgeving waarin iets zich afspeelt.
Bij programmeren is dat bijvoorbeeld: de taal (zoals PHP), het framework (zoals Laravel), of iets anders dat belangrijk is om te weten.
Een AI snapt je vraag beter als jij eerst vertelt wat de omgeving/context is.

✍️ Opdracht 2

Situatie

Je hebt de volgende PHP-code gekregen.

Deze code toont de huidige datum:

<?php
echo date("Y-m-d");
?>

Maar jij wil dat de datum verschijnt in het Nederlands, zoals: 9 mei 2025

De AI moet je helpen om de code aan te passen.

📝 Jouw taak:

Schrijf een prompt aan ChatGPT waarin je vraagt om deze code aan te passen zodat de datum in het Nederlands verschijnt.
Let erop dat je duidelijk aangeeft wat de context is:
- Je werkt met PHP
- De code moet draaien op een gewone server (geen framework zoals Laravel)
- Je wil de datum in het Nederlands

Inleveren

Screenshot van de prompt en het antwoord dat je hebt gekregen.
Screenshot van het resultaat in je browser.

2. Detail/Specifiek

Doel

Je leert hoe belangrijk detail en specificiteit zijn in een goede prompt. Hoe specifieker je bent, hoe beter de AI je kan helpen met het schrijven of verbeteren van PHP-code.

📚 Theorie

Een vage prompt zoals “Maak een contactformulier” geeft een vaag resultaat.
- Welke velden moeten erin?
- Wat moet er met de ingevulde gegevens gebeuren?
- Moet het formulier controle uitvoeren?
- Moet er een succesbericht komen?
  
  Een specifieke prompt vertelt precies wat je wil.

Een goede prompt bevat concrete dingen en bevat geen (of zo min mogelijk) 'vage' termen.

Test je prompt

Als je over een prompt vragen kan stellen dan is die niet 100% concreet.

Voorbeeld prompt:

Maak de bannder iets breder en verander het letter type zodat het groter is.

Wat is 'iets breder' en wat is 'groter'?

Beter zou zijn:

✍️ Opdracht 3

Situatie

Je wil een contactformulier in PHP laten maken door ChatGPT.

Jouw taak

Schrijf een prompt aan ChatGPT waarin je duidelijk vraagt om een contactformulier in PHP.

Je moet in je prompt minimaal deze 4 dingen specifiek vermelden:
- Welke velden het formulier moet hebben (bv. naam, e-mail, bericht)
- Wat er met de data moet gebeuren (bijv. opslaan, versturen, tonen)
- Of er foutcontrole moet zijn (bijv. verplicht invullen, geldig e-mailadres)
- Of er een succesmelding moet komen na het verzenden

Inleveren

Screenshot van de prompt en het antwoord dat je hebt gekregen.
Screenshot van het resultaat in je browser.

3. Duidelijkheid

Duidelijk betekent dat je prompt voldoende detail bevat. Hierdoor is het duidelijk wat je precies bedoeld.

Een duidelijke prompt zegt precies:

Wat je wil
Waarvoor je het wil
Wat de beperkingen zijn
En eventueel hoe je het eruit wil laten zien

Een voorbeeld van de punten zijn:

Je wilt een website
Je wilt een website waarin de gebruiker zijn naam en adres moet opgeven.
Alle velden moeten op één web pagina passen en bestaat uit HTML en CSS.
De velden zijn allemaal verplicht. Zodra de submot button wordt ingedrukt wordt gecontroleerd of alle velden zijn ongevuld. Als dat niet het geval is dan volgt er een aanwijzing/waarschuwing.
Het moet er eenvoudig en professioneel uitzien, Gebruik 'Tailwind' als CSS framework.

📝 Opdracht 4

Situatie

Je wil een AI vragen om een klein PHP-script te maken waarmee je een getal controleert: is het even of oneven?

Hieronder zie je een voorbeeld van een vage prompt. Lees hem goed.

“Schrijf iets in PHP dat met getallen werkt.”

Je gaat nu zelf een duidelijke prompt schrijven waarin je vraagt om een PHP-script dat:

Één getal controleert
Zegt of het getal even of oneven is
De gebruiker het getal zelf laat invoeren via een HTML-formulier

Inleveren

Screenshot van de prompt en het antwoord dat je hebt gekregen.
Screenshot van het resultaat in je browser.

4. Doelgericht

📚 Theorie

AI is niet helderziend. Als je alleen zegt “Leg dit uit”, weet de AI niet hoe uitgebreid, voor wie of in welke vorm.
- Wat wil je precies weten of krijgen?
- Wil je code, uitleg, een stappenplan, een voorbeeld, een tabel, enz.?
- Voor wie is het bedoeld? (Bijv. jezelf, een beginner, een klasgenoot?)
  
  Een doelgerichte prompt maakt duidelijk:

📝 Opdracht

Situatie

Je wil begrijpen hoe een while-loop werkt in PHP, en je wil dat de AI het aan je uitlegt.

Deel 1: Vergelijk twee prompts

Prompt A (niet doelgericht):

“Wat is een while-loop?”

Prompt B (wel doelgericht):

“Leg uit wat een while-loop in PHP doet. Geef een voorbeeld met code en uitleg in simpele taal, zodat ik het kan gebruiken in een quiz voor klasgenoten.”

🔍 Wat is het verschil tussen A en B?

Deel 2: Schrijf je eigen doelgerichte prompt

Bedenk nu een onderwerp in PHP dat jij lastig vindt (bijvoorbeeld: arrays, forms, functies, POST vs GET…).

Schrijf een doelgerichte prompt waarbij je duidelijk maakt wat je wil, in welke vorm, en voor wie het bedoeld i

Inleveren

Deel 1, leg in je eigen woorden uit wat het verschil is tussen prompt A en prompt B.
Deel 2, schrijf je eigen doelgerichte prompt (zie beschrijving deel 2).

5. Vorm

📚 Theorie (kort samengevat)

Soms weet de AI wél wat je bedoelt, maar krijg je het antwoord in een onhandige vorm:
- Alleen tekst terwijl jij voorbeeldcode wilde.
- Een lang verhaal terwijl jij liever een stappenplan had.
- Code zonder uitleg erbij.
Daarom is het slim om in je prompt te zeggen hoe je het antwoord wil zien:
- Als lijst, tabel, voorbeeldcode, uitleg in korte zinnen, enz.

Opdracht

Deel 1: Slechte prompt (voorbeeld)

“Leg uit hoe je een formulier maakt met PHP.”

Wat is hier onduidelijk over de vorm van het antwoord?

Deel 2: Schrijf zelf een betere prompt

Jij gaat nu een betere prompt schrijven waarin je duidelijk zegt in welke vorm je het antwoord wil krijgen. Kies een vorm, zoals:

Stap-voor-stap uitleg
PHP-code met uitleg onder elke regel
Een tabel met onderdelen van een formulier
Een combinatie van uitleg en voorbeeld

📌 Vergeet niet te vermelden dat je werkt met PHP, en dat het voor een beginner is.

Inleveren

....

6. Toon

📚 Theorie

De toon is hoe iets klinkt of overkomt: serieus, grappig, formeel, simpel, kinderlijk, informeel, enz.
Als je geen toon aangeeft, kiest de AI zelf. Soms is dat te zakelijk, te moeilijk of juist te speels.
In een goede prompt zeg je dus hoe de AI zich moet gedragen.

📝 Opdracht

Situatie:

Je wil dat ChatGPT uitlegt wat een functie in PHP is.

Je gaat dezelfde uitleg in verschillende tonen laten geven.

Stap 1: Schrijf drie verschillende prompts

Gebruik hetzelfde onderwerp (“Wat is een functie in PHP?”) en verander alleen de toon.

🎩 Formeel en technisch (voor iemand met programmeerervaring):
😄 Grappig en speels (alsof je het uitlegt aan een kind van 12):
💬 Duidelijk en vriendelijk (voor een klasgenoot die net begint met PHP):

Inleveren

Welke toon vond jij het meest duidelijk voor een beginner?
Welke toon past het best bij jouw klasgroep?
Welke toon past het best bij jouw klasgroep?
Wat gebeurt er als je géén toon vraagt in je prompt?

Samengevat

Een goede prompt.

Context – Geef achtergrondinformatie, zoals voor wie het is, wat het doel is, of waar het over moet gaan (welke programmeertaal?).
Detail – Hoe specifieker je bent, hoe beter het antwoord past bij wat je zoekt.
Duidelijkheid – Gebruik duidelijke en begrijpelijke taal. Vermijd vage of dubbelzinnige zinnen.
Doelgerichtheid – Geef aan wat je precies wil (bijvoorbeeld: een uitleg, een lijst, een verhaaltje, een vergelijking, enz.).
Vorm – Soms helpt het als je zegt hoe het antwoord eruit moet zien (bijvoorbeeld: “maak er een tabel van”, “gebruik korte zinnen”, “schrijf het op het niveau van een brugklasser”).
Toon/Stem – Wil je dat het grappig is? Serieus? Zakelijk? Kinderlijk? Dat kun je ook zeggen in je prompt.

Voorbeeld prompt

“Leg uit wat een if-statement is in PHP. Geef een simpel voorbeeld met uitleg in makkelijke taal. Ik ben 14 en net begonnen met PHP, dus graag zonder moeilijke woorden. Laat ook zien wat er gebeurt als de voorwaarde niet waar is.”

Opdracht 3

Maak een prompt waarin je aan AI vraagt om een programma in HTML-pagina te maken die er zo goed mogelijk lijkt op deze website template.

Probeer dit in één tekst prompt te doen (gebruik dus géén plaatje) en denk aan alle 6 eigenschappen voor een geode prompt.

Inleveren

Prompt die je hebt gemaakt (schermafdruk).
Resultant (schermafdruk van de webpage).

Prompt Engineering 2

1, Introductie

We hebben in prompt engineering 1 geleerd waaraan een goede prompt moest voldoen.

Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen!

1. Context - een goede prompt heeft voldoende contexrt.
2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
3. Duidelijkheid - een goedeprompt is duidelijk.
4. Doelgericht - een goede prompt is doelgericht.
5. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
6. Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord.

In deze module gaan we 6 advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen.

Bovendien zijn de meeste techniekken ook toepasbaar in als 'problem solving' technieken.

Isolate the problem
Focus alleen op het onderdeel dat opgelost moet worden.
Laat overbodige context of code weg, zodat de AI zich op het juiste richt.
Provide lists in bullet points
Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven.
Provide the order if you ask for multiple tasks
Geef een logische volgorde bij samengestelde opdrachten.
Geef voorbeelden (few-shot prompting)
Laat zien wat je bedoelt met een input/output-voorbeeld.
Stel voorwaarden of beperkingen
Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers".
Werk in stappen (chain-of-thought prompting)
Vraag de AI om stap voor stap te redeneren of eerst een plan te maken.

1. Isolate the problem

Uitleg

Richt je prompt op het exacte probleem. In plaats van een hele codepagina te geven, geef alleen het stuk code of de situatie waar het om draait. Hoe minder ruis, hoe beter de AI kan helpen.

Je ziet dus dat je voor een goede prompt de code goed moet kunnen lezen.

Opdracht

Je hebt een PHP-pagina met een formulier dat soms geen gegevens doorstuurt.

👉 Maak een prompt voor ChatGPT waarin je alleen het relevante deel van de code opneemt en waarin je de AI vraagt om te helpen bij het vinden van de fout.

Houd nog steeds rekening met de context, details en duidelijkheid.

In dit voorbeeld zou je makkelijk de hele code kunnen verturen, maar in de echte wereld heb je veel meer code en daarom is dit een goede oefening in het isoleren van code die relevant is.

Tip: je kan ook andersom redeneren en alle code waarvan je zeker weet die goed is of niets met het formulier te maken heeft weghaald.

<?php
$bericht = "";
$success = false;

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    if (!empty($_POST["naam"])) {
        $naam = $_POST["naam"];
        $bericht = "Hallo, " . htmlspecialchars($naam) . "!";
        $success = true;
    } else {
        $bericht = "Je moet je naam invullen.";
    }
}
?>

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Contactpagina</title>
    <style>
        body { font-family: Arial; background-color: #f0f0f0; margin: 2rem; }
        .container { background: white; padding: 2rem; border-radius: 8px; max-width: 600px; margin: auto; }
        .error { color: red; }
        .success { color: green; }
        footer { margin-top: 4rem; font-size: 0.8em; text-align: center; color: #666; }
    </style>
    <script>
        function checkForm() {
            const naam = document.getElementById("naam").value;
            if (naam.trim() === "") {
                alert("Naam is verplicht!");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>

<div class="container">
    <h1>Neem contact met ons op</h1>

    <form method="get" action="" onsubmit="return checkForm();">
        <label for="naam">Naam:</label><br>
        <input type="text" id="naam" name="naam" placeholder="Vul je naam in"><br><br>
        <label for="email">E-mail:</label><br>
        <input type="email" id="email" name="email" placeholder="voorbeeld@domein.nl"><br><br>
        <label for="vraag">Je vraag:</label><br>
        <textarea id="vraag" name="vraag"></textarea><br><br>
        <button type="submit">Verzenden</button>
    </form>

    <?php if ($bericht): ?>
        <p class="<?= $success ? 'success' : 'error' ?>"><?= $bericht ?></p>
    <?php endif; ?>
</div>

<footer>
    &copy; 2025 Webdev Company | <a href="#">Privacybeleid</a>
</footer>

</body>
</html>

Inleveren

De prompt die het probleem uiteindelijk vond en waain alleen de relevante code staat.

De prompt voldoet tevens minimaal aan de basis kenmerken van een prompt: context, details en duidelijkheid.

2, Provide lists in bullet points

Uitleg

Als je meerdere dingen van een AI vraagt, is het belangrijk om structuur aan te brengen in je prompt. Door bullet points of genummerde lijsten te gebruiken:

Maak je je prompt overzichtelijk.
Zorg je ervoor dat de AI geen onderdelen vergeet.
Help je jezelf om duidelijk te verwoorden wat je wilt.

Bullet points zijn dus niet alleen netjes — ze zijn slim.

Opdracht

Hieronder zie je een afbeelding van een eenvoudige webpagina met meerdere onderdelen.

Het plaatje kan je hirr downloaden: Berglandschap.png.

Bestudeer de afbeelding goed. Wat zie je allemaal op de pagina?
Bedenk wat je aan de AI zou vragen om precies deze pagina te laten maken.
Noteer minstens 4 onderdelen van de pagina als bullet points in je prompt.

Inleveren

Prompt
Resultaat in code
Schermafdruk van resultaat

3. Provide the order if you ask for multiple tasks

Uitleg

Als je aan de AI vraagt om meerdere dingen tegelijk te doen, dan is het belangrijk dat je duidelijk maakt in welke volgorde dat moet gebeuren.

AI volgt jouw instructies letterlijk — dus als de volgorde onduidelijk is, krijg je soms een rommelig of onvolledig resultaat.

Door een logische nummering of expliciete volgorde te geven, help je de AI om stapsgewijs te werken.

Voorbeeld (vaag):
Maak een invoerpagina met HTML en verwerk de gegevens met PHP.

Voorbeeld (duidelijker):

Maak eerst een HTML-pagina met een formulier waarin wordt gevraagd naar de tijd en de klantnaam
Voeg daarna de PHP-code toe die de ingevulde gegevens toont.

Opdracht

Je wilt de AI vragen om je te helpen met het maken van een eenvoudige contactpagina.

Die moet bestaan uit:

Een HTML-formulier waarin je je naam en e-mailadres kunt invullen
Een PHP-script dat de gegevens verwerkt en netjes op het scherm toont

Schrijf een prompt waarin je deze twee onderdelen vraagt in de juiste volgorde.
Gebruik een genummerde lijst of maak duidelijk met woorden wat “eerst” en “daarna” moet gebeuren.
Houd rekening met de context, details en duidelijkheid.

Inleveren

Je volledige prompt
De gegenereerde HTML + PHP code
Een screenshot van het resultaat in de browser

4. Geef voorbeelden (few-shot prompting)

Uitleg

Als je wilt dat de AI op een specifieke manier code genereert of uitlegt, dan helpt het enorm als je eerst een paar voorbeelden geeft. Dit heet few-shot prompting.

Je laat zien wat jij bedoelt — de AI herkent het patroon en volgt het. Dit is heel handig bij het ontwerpen van knoppen, formulieren of herhalende structuren.

Voorbeeld prompt

<button style="background-color: red;">Verwijderen</button><button 
    style="
        background-color: #dc3545; 
        color: white; 
        border: none; 
        padding: 10px 16px; 
        font-size: 16px; 
        border-radius: 4px; 
        cursor: pointer;
        transition: background-color 0.3s ease;
    "
    onmouseover="this.style.backgroundColor='#c82333'"
    onmouseout="this.style.backgroundColor='#dc3545'"
    onclick="handleDelete()"
>
    Verwijderen
</button>

Deze knop ziet er professioneel uit: rood met witte tekst, afgeronde hoeken en een vloeiend hover-effect dat de kleur donkerder maakt wanneer je erover beweegt.
Klikt de gebruiker op de knop, dan wordt de JS code handleDelete() aangeroepen.

Maak op dezelfde manier een blauwe knop 'toevoegen'.

Opdracht

Je wilt een aantal drop down menu's maken. Hier is een voorbeeld.

<style>
  .form-control {
    width: 250px;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    appearance: none; /* verwijder standaardstijl in sommige browsers */
  }

  .form-control:focus {
    border-color: #007BFF;
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  }
</style>

<select id="taalSelect" name="taal" class="form-control">
  <option value="en">Engels</option>
  <option value="nl" selected>Nederlands</option>
  <option value="fr">Frans</option>
</select>

Maak een multi-shot prompt waarbij je dit menu als voorbeeld gebruikt en waarbij je het volgende menu maakt:

Tip: denk goed na over wat je de AI precies als voorbeeld geeft, alleen de HTML of HTML met CSS? Denk hierbij ook aan Isolate the problem.

Inleveren

Je volledige prompt inclusief voorbeeld(en)
De gegenereerde knop + uitleg van de AI
Een screenshot van de knop in de browser

5. Stel voorwaarden of beperkingen

Uitleg

Soms wil je meer controle over hoe de AI iets oplevert. Je kunt dan in je prompt voorwaarden of beperkingen opnemen.

Bijvoorbeeld:

Beperk het aantal woorden of regels code
Vermijd bepaalde technieken (zoals frameworks)
Vraag om iets op een specifieke manier te doen (bijv. alleen in-line CSS)

Door deze randvoorwaarden op te nemen, stuur je de AI veel gerichter aan.

Opdracht

Je wilt een eenvoudige HTML-formulierpagina laten genereren, maar je stelt een aantal duidelijke voorwaarden.

Bedenk minstens 3 voorwaarden waaraan de code moet voldoen. Bijvoorbeeld:
- Geen externe CSS-bestanden of frameworks zoals Bootstrap
- Maximaal 30 regels HTML
- Formulier moet naam en e-mailadres bevatten, met eenvoudige styling
Schrijf een prompt waarin je deze voorwaarden duidelijk formuleert.
- Leg de context uit: “Ik wil een eenvoudig formulier…”
- Som je voorwaarden op in een bulletlijst of genummerde lijst
- Sluit duidelijk af met je verzoek: “Geef alleen de HTML-code”
Zorg dat je prompt voldoet aan de context, details en duidelijkheid.

Inleveren

Je prompt (inclusief de voorwaarden)
De gegenereerde HTML-code
Een screenshot van het formulier

6. Chain-of-thought prompting 1

Uitleg

Bij opdrachten met meerdere onderdelen is het slim om de AI eerst te laten nadenken en plannen. Dat noem je chain-of-thought prompting.

Je vraagt de AI dus om niet meteen te bouwen, maar eerst te analyseren:

Wat moet er gebeuren, welke stappen moet ik volgen?
In welke volgorde?
Wat zijn de componenten en technieken die ik moet gebruiken?

Daarna kan de AI gestructureerd de code aanleveren. Zo voorkom je onvolledige of chaotische antwoorden.

Voorbeeld

Prompt

Ik wil een formulier dat een naam opslaat.
Leg eerst uit welke stappen ik daarvoor nodig heb.
Geef dan de HTML-code.
Geef daarna de PHP-code.
Leg elke stap kort uit.

Verwachte AI-reactie

Je hebt een HTML-formulier nodig om de naam in te voeren.
Je hebt een PHP-script nodig dat de naam opvangt en verwerkt.
Je moet het formulier met method="post" versturen.
Daarna geef ik de HTML en PHP code apart, met uitleg.

Als je een stap niet snapt, of het niet eens bent, vraag dan verheldering. Vraag uitleg, bijvoorbeeld:

Prompt

Wat gebeuert er in stap 3 en waarom moet ik ene post gebruiken, zijn er alternatieven?

Op deze manier leer je een probleem in stappen opdelen en daarna de stappen één voor één op te lossen. Nu lijkt dat wellicht overbodig, maar bij grotere projecten is deze methode noodzakelijk.

Opdracht

Je wil een AI vragen om een simpele “Contact opnemen”-pagina te maken met de volgende onderdelen:

Een HTML-formulier met velden voor naam, e-mail en bericht
Een mooie layout met CSS (geen framework)
Een PHP-bestand dat het formulier verwerkt en de data netjes toont
De gegevens mogen niet verstuurd worden zonder geldige invoer

Maar: je wil niet meteen de code, je wil dat de AI eerst in stappen uitlegt hoe je dit moet aanpakken.

Schrijf een prompt waarin je aan de AI vraagt om:
- Eerst te analyseren wat deze opdracht inhoudt
- Daarna een overzicht in stappen te geven van wat er allemaal moet gebeuren (HTML-structuur, input validatie, PHP-verwerking, opmaak)
- Pas daarna per stap de juiste code te geven, met uitleg
Gebruik termen als:
- “Geef eerst een analyse van de opdracht”
- “Schrijf daarna de stappen uit in logische volgorde”
- “Geef dan pas de bijbehorende code, met uitleg per stap”
Voeg in je prompt beperkingen of voorkeuren toe, zoals:
- “Gebruik geen externe CSS-frameworks”
- “Gebruik eenvoudige PHP, geen database”
- “Geef geen code voordat alle stappen duidelijk zijn”
Zorg dat je prompt voldoet aan de kenmerken: context, details, duidelijkheid, volgorde

Inleveren

Je volledige prompt(en)
Het AI-antwoord (mag opgeknipt zijn in stappen)
De uiteindelijke werkende HTML- en PHP-code
Screenshot van de werkende pagina

7. Chain-of-thought prompting 2

In de vorige opdracht heb je een formulier laten maken.

Wat voor method heb je gebruikt in het formulier?

Vraag AI om uit te leggen welke methoden er zijn en wat de voor en nadelen zijn van bedien methoden?

Inleveren

Je volledige prompt.
In een txt bestand: Jouw eingen aanbeveling: wat zou je het beste hebben kunnen gebruiken bij de vorige opdracht. Leg uit waarom!

Prompt Engineering 3

1, Introductie

We hebben in prompt engineering 1 en 2 geleerd waaraan een goede prompt moest voldoen.

Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen!

1. Context - een goede prompt heeft voldoende contexrt.
2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
3. Duidelijkheid - een goede prompt is concreet en bevat geen vage termen zoals (mooi, groot, .....), zei hier.
4. Doelgericht - een goede prompt is doelgericht.
5. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
6. Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord.

In deze module gaan we nog meer advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen.

Bovendien zijn de meeste techniekken ook toepasbaar in als 'problem solving' technieken.

Gebruik een rol (role prompting)
Laat de AI een specifieke rol of expertise aannemen (bijv. leraar, programmeur, leerling).
Vraag om alternatieven of variaties
Stimuleer de AI om meerdere ideeën of invalshoeken te geven.
Iteratief verbeteren
Vraag de AI om haar eigen antwoord te verbeteren of herschrijven.
Gebruik prompt templates
Werk met vaste structuren zoals: context, doel, outputvorm, toon.
Vraag om zelfvragen (self-questioning)
Laat de AI zelf bedenken welke vragen nodig zijn om het probleem goed op te lossen.
Gebruik kritiek als leermoment (prompt debugging)
Laat de AI uitleggen waarom een prompt niet goed werkte en hoe je die kunt verbeteren.

1. Role Prompting

Uitleg

Je kunt de AI vragen om te reageren alsof ze een bepaalde rol heeft. Bijvoorbeeld:

een ervaren programmeur
een beginnende student
een HTML-docent
een code-reviewer

Door een rol te geven, pas je automatisch de toon, moeilijkheidsgraad en stijl van het antwoord aan. Dit helpt je om antwoorden te krijgen die beter passen bij jouw doelgroep of bij jouw situatie.

Voorbeeld

Prompt

Leg uit wat een <form>-element is in HTML, alsof je een docent bent die het uitlegt aan een groep mbo-studenten zonder programmeerervaring.

Verwachte AI-reactie

Een <form> is een stuk HTML-code waarmee gebruikers informatie kunnen invullen, zoals hun naam of e-mailadres. Denk aan een online formulier dat je invult om iets te bestellen. De informatie die je invult wordt verstuurd naar de website zodat er iets mee gedaan kan worden.

Laat de AI vragen stellen als een docent

Je kunt ook aan de AI vragen om deelvragen te stellen, zoals een goede docent dat zou doen.

Prompt

Speel de rol van een HTML-docent. Stel mij eerst drie vragen waarmee je kan inschatten hoeveel ik al weet over formulieren in HTML. Geef daarna pas een uitleg op mijn niveau.

Wat dit doet

De AI stelt vragen zoals: “Wat denk je dat een <form> doet?”, “Heb je eerder inputvelden gebruikt?”
De AI past daarna de uitleg aan op basis van jouw antwoorden (of een inschatting daarvan)

Opdracht

Je wilt dat de AI uitleg geeft over een klein stukje code, maar dan in een specifieke rol. Bijvoorbeeld: als docent, als programmeermaatje, of als code-reviewer.

Je bent een student die uitleg wil over hoe een formulier werkt in HTML
Je wilt dat de AI zich gedraagt als een docent die eerst deelvragen stelt voordat hij iets uitlegt
Schrijf een prompt waarin je duidelijk de rol beschrijft die de AI moet aannemen.

Inleveren

Je volledige prompt
Het AI-antwoord

2. Vraag om alternatieven of variaties

Uitleg

De AI geeft standaard vaak slechts één oplossing. Maar in de praktijk zijn er meestal meerdere manieren om iets te doen — zeker in programmeertalen als HTML, CSS, PHP of JavaScript.

Je kunt dus expliciet vragen om meerdere oplossingen of variaties, zoals:

“Geef 3 manieren om een knop te centreren met CSS.”
“Laat 2 varianten zien van hetzelfde formulier: één minimalistisch en één met veel opmaak.”
“Bedenk 3 manieren om input te valideren in JavaScript.”

Voordelen

Je leert alternatieve technieken kennen
Je kunt zelf kiezen welke stijl of methode bij jouw project past
Je voorkomt dat je AI-antwoorden blind overneemt zonder kritisch te zijn

Voorbeeld

Prompt

Geef 3 manieren om een knop in het midden van het scherm te tonen met behulp van CSS.

Verwachte AI-reactie (beknopt)

text-align: center op de container + display: inline-block op de knop
margin: 0 auto bij een block-level knop met vaste breedte
Flexbox op de container met justify-content: center en align-items: center

Opdracht

Je wil verschillende manieren zien om een veelvoorkomende webtaak uit te voeren.

Kies één van deze taken:
- Validatie toevoegen aan een inputveld, of
- Een PHP-script schrijven dat data toont
Schrijf een prompt waarin je de AI vraagt om minstens 3 alternatieven of varianten van die oplossing.
Gebruik in je prompt woorden als:
- “Geef meerdere mogelijkheden…”
- “Laat minstens 3 manieren zien…”
- “Toon varianten van deze code…”
- "Beschrijf van elke variant de voor- en nadelen...."
Zorg voor een goede opbouw in je prompt met:
- Context: wat ben je aan het doen en welke technieken gebruik je?
- Details: wat zijn de randvoorwaarden?
- Duidelijkheid: hoeveel oplossingen wil je?

Inleveren

Je volledige prompt
De gegenereerde alternatieven van de AI
Een korte reflectie (reflectie.txt): welke oplossing vind jij het beste, en waarom?

3. Iteratief verbeteren

Uitleg

De AI geeft vaak een eerste versie van een antwoord, maar dat hoeft niet perfect te zijn. Je kunt de AI daarom vragen om het eigen antwoord te beoordelen en te verbeteren.

Dit heet iteratief verbeteren.

Bijvoorbeeld

“Herschrijf dit zodat het eenvoudiger is voor een beginner.”
“Geef dezelfde code, maar nu met uitleg erbij.”
“Kun je deze oplossing optimaliseren voor leesbaarheid?”

Je leert zo hoe je feedback kunt geven aan de AI, en je oefent tegelijkertijd zelfkritisch denken over codekwaliteit.

Voorbeeld

Prompt

Geef me een formulier in HTML waarmee iemand zich kan inschrijven voor een nieuwsbrief. Voeg daarna uitleg toe over hoe elk onderdeel werkt.

Vervolgprompt

Herschrijf je antwoord zodat het ook begrijpelijk is voor iemand die nog nooit HTML heeft gezien.

Opdracht

Je wilt dat de AI het eigen werk verbetert — of dat jij feedback geeft, en dat de AI dat verwerkt.

Vraag de AI eerst om een korte opdracht uit te voeren. Bijvoorbeeld:
- Een stukje JavaScript schrijven dat controleert of een naam de juiste hoofdletters en punten heeft. (Dus goede namen zijn: M. Bisschop en J. K. van der Velden, onjuiste namen zijn M Bisschop (punt mist) en k. van der Velden (k is gene hoofdletter).
Lees het antwoord goed door. Stel daarna een vervolgprompt waarin je de AI vraagt om:
- het duidelijker te maken,
- het aan te passen voor beginners,
- het te herschrijven met uitleg/commentaar,
- of het korter, leesbaarder of efficiënter te maken.
Schrijf beide prompts uit:
- de eerste vraag, gebruik hierbij de few-shot prompt techniek (voorbeelden).
- de verbeteropdracht
Zorg dat je feedback duidelijk is: wat wil je precies anders of beter?
Zorg ervoor dat je de code begrijpt.

Inleveren

Je eerste prompt
Het eerste AI-antwoord
Je tweede prompt (de verbeteropdracht)
Het verbeterde AI-antwoord

Deze opdracht laat je zien aan een docent. Je laat zien wat je eerste- en twede eprompt is en je kunt zelf uitleggen hoe de code werkt.

---- vanaf hier nog corrigeren/aanvullen ----

4 Gebruik prompt templates

Uitleg

Als je regelmatig AI gebruikt voor soortgelijke taken, is het handig om te werken met een vaste structuur: een prompt template.

Een template helpt je om:

niets te vergeten in je vraag;
sneller en consistenter te werken;
betere output te krijgen van de AI.

Een goede prompt bestaat vaak uit onderdelen zoals:

Context – wat is de situatie?
Specifiek - wat wil precies je bereiken?
Duidelijk -zorg dat je prompt geen 'vage' aanwijzingen heeft
Outputvorm – in welke vorm wil je het antwoord?
Toon – formeel, informeel, eenvoudig, technisch?

Voorbeeld van een prompt template

Context: Ik werk aan een HTML-formulier
Doel: Ik wil dat de AI me helpt met het maken van een formulier voor e-mailinvoer
Outputvorm: Alleen HTML-code, zonder uitleg
Toon: Neutraal en duidelijk

Voorbeeldprompt:
Gebruik onderstaande context en geef alleen de code:
Ik wil een formulier voor e-mailadres, zonder uitleg.
Context: HTML-formulier
Output: HTML-code

Opdracht

Je gaat zelf een prompt schrijven met behulp van een prompt-template.

Gebruik het volgende sjabloon en vul de velden in:
```
Context:
Doel:
Outputvorm:
Toon:
```
Schrijf daarna een volledige prompt op basis van jouw ingevulde template.
Stuur je prompt naar de AI en bekijk het resultaat:
- Krijg je precies wat je bedoelde?
- Is de toon en vorm correct?
- Zou je iets willen toevoegen aan je template?
(Optioneel) Pas je template aan en probeer het nog eens.

Inleveren

Je ingevulde template
De volledige prompt
De output van de AI
Een korte reflectie: werkte het goed? Wat zou je verbeteren aan het sjabloon?

5. Vraag om zelfvragen (self-questioning)

Uitleg

Soms weet je nog niet goed wat je precies moet vragen, of wil je dat de AI eerst nadenkt over het probleem vóórdat het met een oplossing komt.

Dan kun je de AI vragen om eerst zelf vragen te stellen over de situatie of opdracht.

Deze techniek helpt om:

een probleem beter te begrijpen
complexe opdrachten op te breken
geen belangrijke dingen over het hoofd te zien

Deze techniek lijkt op chain-of-thought prompting, maar het verschil is:

👉 De AI stelt eerst vragen aan zichzelf of aan jou om het probleem helder te krijgen.

Voorbeeld

Prompt:
Ik wil een inschrijfformulier bouwen voor mijn website.
Stel jezelf eerst 3 vragen zodat je weet wat je precies moet bouwen.
Beantwoord die vragen.
Bouw daarna pas het formulier in HTML.

Verwachte AI-antwoord:

Welke gegevens moet de gebruiker invullen?
Moet de invoer gevalideerd worden?
Wat moet er gebeuren na het verzenden?

Daarna volgt uitleg én pas daarna de code.

Opdracht

Je wilt dat de AI een simpele programmeeropdracht uitvoert, maar eerst zelf nadenkt over wat er nodig is, door zichzelf (of jou) vragen te stellen.

Kies een opdracht, bijvoorbeeld:
- Maak een contactformulier
- Valideer een inputveld met JavaScript
- Toon resultaten in PHP
Schrijf een prompt waarin je de AI vraagt om:
- eerst 3 vragen te stellen over de opdracht,
- die vragen zelf te beantwoorden,
- daarna pas te starten met uitleg en/of code
Je kunt de prompt afsluiten met: “Geef de code pas nadat je de vragen hebt beantwoord.”

Inleveren

Je volledige prompt
De 3 vragen + antwoorden van de AI
De gegenereerde uitleg en code
Korte toelichting: hielp dit om het probleem beter te begrijpen?

6. Gebruik kritiek als leermoment (prompt debugging)

Uitleg

Niet elke prompt die je aan de AI geeft, levert direct het gewenste resultaat op. Soms krijg je:

een onvolledig antwoord,
verkeerde code,
te algemene uitleg,
of net niet wat je bedoelde.

In plaats van gefrustreerd te raken, kun je deze momenten gebruiken om van je fout te leren:

👉 Laat de AI zelf uitleggen waarom de prompt niet goed werkte, en hoe je die beter kunt formuleren.

Zo leer je hoe kleine verschillen in formulering grote impact kunnen hebben.

Voorbeeld

Slechte prompt:
Maak een mooie website

Verbeterde prompt:
Maak een eenvoudige, moderne HTML-pagina met een grote titel, een navigatiebalk bovenaan, en drie contentblokken onder elkaar. Gebruik alleen HTML en CSS, zonder externe libraries.

Prompt debugging:
Waarom gaf de AI een vage reactie op “maak een mooie website”?
Wat zou ik anders moeten vragen?

Opdracht

Je oefent met het herkennen en verbeteren van een slechte prompt.

Schrijf eerst bewust een vage of slechte prompt, zoals:
- “Maak een website”
- “Schrijf een formulier”
- “Geef uitleg over PHP”
Vraag vervolgens aan de AI:
- Waarom deze prompt niet optimaal is
- Wat er beter zou kunnen aan deze prompt
- Hoe je de prompt kunt herschrijven
Schrijf daarna een verbeterde versie van je prompt, en test het resultaat.
Reflecteer:
- Wat is het verschil in output?
- Wat leer je hiervan over duidelijkheid en specificiteit in prompts?

Inleveren

De oorspronkelijke (slechte) prompt
De analyse van de AI
De verbeterde prompt
De nieuwe output
Korte reflectie: wat is het belangrijkste inzicht?

Prompt Engineering 4

ToDo advanced oefeningen

Dynamic Prompting

Let AI create prompts

Let AI ask you questions

PHP Intro

PHP 1

1 Welkomstbericht met variabelen

Wat ga je leren?

Je leert hoe je variabelen in PHP kunt gebruiken om een persoonlijke begroeting te maken.

Daarbij leer je wat het verschil is tussen het overschrijven van een variabele en het aanpassen van de waarde.

Je gaat AI gebruiken om te controleren of jouw code correct is, en leert kritisch kijken naar AI-gegenereerde oplossingen.

Context

Je helpt een buurtvereniging met hun nieuwe website. Ze willen bezoekers welkom heten op een persoonlijke manier. Jij bouwt een testversie waarin de naam en leeftijd hardcoded zijn in PHP.

Stap 1: Bouw je PHP-script

<?php

$mijnNaam = "Random";
$mijnLeeftijd = 23;

$mijnNaam = "Foobar";
$mijnLeeftijd = $mijnLeeftijd + 1;

echo "Welkom, ik heet $mijnNaam en ik ben $mijnLeeftijd jaar oud.";

?>

Wat valt je op?

In PHP begint elke variabele met een $.
In PHP sluit je elke commando af met een ;
$mijnNaam = "Random"; stopt de waarde "Random" in de variabele $mijnNaam
$mijnLeeftijd = 23; stopt het getal in een variabele $mijnLeeftijd
Let op dat je getallen zonder "" en strings (=woorden) met "" moet beschrijven,

Vraag: Wat denk je dat dit afdrukt?

Denk eerst na zonder uit te voeren. Schrijf je verwachting op, en test het daarna in je browser.

Tip: de code wordt regel-voor-regel van boven naar beneden uitgevoerd.

Stap 2: Reflecteer

1. Wat is de waarde van $mijnNaam direct na regel 3?

Antwoord: ....

2. Wat is de waarde van $mijnLeeftijd direct na regel 4?

Antwoord: ....

3. Wat gebeurt er als je $mijnLeeftijd = $mijnLeeftijd + 1; twee keer uitvoert?

Antwoord: ....

4. Leg uit in je eigen woorden wat het verschil is tussen een waarde toekennen en een waarde verhogen.

Antwoord: ....

Stap 3: Gebruik AI

Gebruik ChatGPT om te vragen:
"Maak een PHP-script dat een naam en leeftijd toont, en volgend jaar wordt de leeftijd met 1 verhoogd."

Plak de gegenereerde code onder jouw eigen versie.
Wat doet deze code hetzelfde? Wat is anders?
Wat zou je verbeteren of verduidelijken aan de AI-versie?

Inleveren

Een PDF-document met jouw voorspellingen, antwoorden op de vragen, en je reflectie over de AI-code

2 Fouten vinden en oplossen

Wat ga je leren?

Je leert fouten herkennen in PHP-code, foutmeldingen lezen en corrigeren.

Je leert hoe je AI kunt gebruiken om foutcodes te analyseren, maar ook waarom je zelf kritisch moet blijven.

Context

Een collega heeft je gevraagd een foutje in zijn PHP-code op te lossen. Hij krijgt een wit scherm of een foutmelding, maar weet niet wat er mis is. Jij gaat deze fout opsporen en uitleggen.

Stap 1: De foute code

Plak deze code in PHP05-jouw-naam.php:

<?php

$mijnNaam = "Random";
$mijnLeeftijdNu = 23;
$mijnLeeftijdVolgendJaar = $mijnLeeftijdNu+1

echo "ik heet $mijnnaam en ik ben $mijnLeeftijd jaar oud, volgend jaar ben ik $mijnLeeftijdVolgendJaar oud.";

?>

Stap 2: Test en los op

Voer het script uit en kijk naar de foutmeldingen. Pas de code aan totdat het werkt. Als het gelukt is, zie je een zin zoals:

ik heet Random en ik ben 23 jaar oud, volgend jaar ben ik 24 oud.

Stap 3: Reflectievragen

1. Wat zijn de twee fouten in de oorspronkelijke code?

Antwoord: ....

2. Welke foutmelding kreeg je? (Plak eventueel letterlijk in)

Antwoord: ....

3. Wat betekenen die foutmeldingen?

Antwoord: ....

4. Hoe zou je dit uitleggen aan een klasgenoot?

Antwoord: ....

Stap 4: Gebruik AI

Vraag aan AI: "Wat is er fout aan deze PHP-code en hoe kan ik dit oplossen?"

<?php
$mijnNaam = "Random";
$mijnLeeftijdNu = 23;
$mijnLeeftijdVolgendJaar = $mijnLeeftijdNu+1

echo "ik heet $mijnnaam en ik ben $mijnLeeftijd jaar oud, volgend jaar ben ik $mijnLeeftijdVolgendJaar oud.";
?>

Wat zegt AI dat de fouten zijn?
Was dat duidelijk voor jou?
Was er iets dat AI níet opmerkte, maar jij wel?

Inleveren

Een PDF-document met een antwoord op de reflectievragen.

3 Strings en variabelen begrijpen

Wat ga je leren?

Je leert hoe je tekst (strings) samenvoegt in PHP met en zonder variabelen.

Je leert het verschil tussen het gebruiken van variabelen en vaste tekst.

Je leert AI inzetten om alternatieve manieren te vinden om tekst samen te voegen.

Context

Je maakt een stukje code voor een online inschrijfformulier. De gegevens van een nieuwe deelnemer worden opgeslagen in variabelen en daarna op het scherm getoond. Zo krijgt de bezoeker direct een bevestiging te zien, bijvoorbeeld: “Welkom, Ali Gaona!”

Stap 1: Test de basis

Maak een nieuw bestand PHP06-jouw-naam.php en plak deze code:

<?php
$voornaam = "Alexandra";
$achternaam = "Gaona";

echo $voornaam . " " . $achternaam;
echo "Alexandra" . " " . "Gaona";
?>

Vraag: Wat denk je dat dit afdrukt?

Verwacht je een verschil tussen regel 5 en regel 6? Test het en bekijk de output zorgvuldig.

Stap 2: Variaties testen

Wijzig regel 2 en geef $voornaam jouw eigen naam.
Wat gebeurt er met de uitvoer?
Verander ook $achternaam. Wat verandert er dan?

Reflectievragen

1. Wat is het verschil tussen regel 5 en regel 6?

Antwoord: ....

2. Waarom zou je in een echte website liever met variabelen werken?

Antwoord: ....

Stap 3: Gebruik AI

Beantwoord de reflectievragen en vraag AI of jouw antwoorden goed zijn. Als ze niet goed zijn laat AI jouw uitleggen waarom het fout is.

Inleveren

Word- of PDF-document met een copy van jouw Chat-script.

4 Strings 2 – lengte en hoofdletters

Wat ga je leren?

Je leert functies gebruiken zoals strlen() en strtoupper() om met tekst (strings) te werken.

Je begrijpt het verschil tussen een variabele en een vaste tekst in combinatie met deze functies.

Je leert AI inzetten om alternatieve manieren te ontdekken om tekst te manipuleren.

Context

Je werkt mee aan een formulier voor een sportclub. De namen van deelnemers worden verwerkt, en het systeem controleert automatisch of de naam lang genoeg is en zet hem om in hoofdletters voor op een badge. Jij maakt een testversie van dit systeem.

Stap 1: De basiscode

Maak een bestand PHP07-jouw-naam.php en plak deze code:

<?php
$voornaam = "Ali";
$achternaam = "Bakir";

echo "Naam in hoofdletters: " . strtoupper($voornaam . " " . $achternaam) . "<br>";
echo "Aantal letters in voornaam: " . strlen($voornaam);
?>

Stap 2: Test en pas aan

Verander de voornaam en achternaam naar je eigen naam.
Wat verandert er in de uitvoer?
Voeg een extra <br> toe voor betere opmaak (zoals hierboven al verwerkt).

Reflectievragen

1. Wat doet de functie strtoupper() precies?

Antwoord: ....

2. Wat geeft strlen($voornaam) als resultaat als je voornaam 'Ali' is?

Antwoord: ....

3. Wat gebeurt er als je een spatie toevoegt aan het einde van de voornaam? Verandert de waarde van strlen()? Waarom?

Antwoord: ....

Stap 3: Gebruik AI

Vraag aan ChatGPT: "Hoe kan ik in PHP een naam omzetten naar hoofdletters en de lengte van de voornaam meten?"

Wat is het verschil tussen de oplossing van AI en jouw eigen code?
Gebruikt AI andere functies of een andere aanpak?
Welke versie vind je duidelijker of beter leesbaar, en waarom?

Inleveren

PHP07-jouw-naam.php met jouw aangepaste code
PDF of Word-bestand met antwoorden op de reflectievragen en jouw korte AI-vergelijking

5 Geboortejaar berekenen met PHP

Wat ga je leren?

Je leert eenvoudige wiskundige berekeningen uitvoeren met variabelen in PHP.

Je leert hoe je het huidige jaar kunt gebruiken om af te leiden in welk jaar iemand is geboren.

Je leert AI inzetten om vergelijkbare berekeningen te controleren en te verbeteren.

Context

Je helpt bij het maken van een registratiesysteem voor een sportkamp. De organisator wil automatisch het geboortejaar laten zien op basis van de opgegeven leeftijd. Jij schrijft een klein script om dat te testen.

Stap 1: Basiscode

Maak een bestand PHP08-jouw-naam.php en plak deze code:

<?php
$leeftijd = 17;
$huidigJaar = 2025;

$geboortejaar = $huidigJaar - $leeftijd;

echo "Je bent ongeveer geboren in het jaar $geboortejaar.";
?>

Stap 2: Variaties testen

Verander de waarde van $leeftijd naar jouw eigen leeftijd.
Wat is de uitvoer? Klopt dit met jouw echte geboortejaar?
Verander $huidigJaar naar een andere waarde, bijvoorbeeld 2030. Wat gebeurt er dan?

Reflectievragen

1. Waarom werkt deze berekening alleen bij benadering?

Antwoord: ....

2. Wat zou je moeten toevoegen om rekening te houden met iemands geboortedag (dus of iemand dit jaar al jarig is geweest)?

Antwoord: ....

3. Wat gebeurt er als je leeftijd als een tekst (bijv. “zeventien”) invult? Werkt het nog?

Antwoord: ....

Stap 3: Gebruik AI

Vraag aan ChatGPT: "Schrijf in PHP een script dat het geboortejaar berekent op basis van leeftijd en het huidige jaar."

Wat doet de AI-code anders dan jouw eigen script?
Controleert de AI-versie bijvoorbeeld of het jaar actueel is via een functie zoals date("Y")?
Zo ja: begrijp je hoe dat werkt? Leg het kort uit in je eigen woorden.

Inleveren

PHP08-jouw-naam.php met jouw aangepaste code
Een PDF of Word-document met je antwoorden op de reflectievragen en jouw vergelijking met de AI-oplossing

xxx Van Scratch naar Python

Status: ai-alternatief, niet getest maar te complex

0 Wat gaan we leren?

In deze eerste les krijg je een overzicht van wat je in de komende weken gaat leren.

We gaan aan de slag met Python: een echte programmeertaal die je stap voor stap gaat begrijpen door te werken met bewegingen, logica en herhalingen.

🎯 Wat leer je in deze module?

✅ Begrijpen waarom en hoe je moet inspringen
✅ Leren wat commentaar
✅ Inzicht krijgen in het gebruik van if-statements (beslissingen in je code)
✅ Leren hoe je herhalingen maakt met loops (lussen)

🧠 Wat is het verschil met Scratch?

In Scratch gebruik je blokjes die je kunt slepen. In Python schrijf je zelf regels code.

Maar de logica is hetzelfde. Kijk maar:

In Scratch	In Python
herhaal 10 keer	`for i in range(10):`
als voorwaarde dan	`if voorwaarde:`
zet x op 100	`x = 100`

📘 Belangrijke basisprincipes

Lees dit vast door, begrijp je het nog niet helemaal dan is er niets aan de hand want we gaan er in deze les in detail op in.

🔹 Inspringen (indentation)

Python gebruikt inspringen (meestal 4 spaties) om aan te geven welke regels bij elkaar horen.

if x > 10:
    print("x is groter dan 10")  # deze regel hoort bij de if
print("klaar")  # deze regel hoort NIET bij de if

🔹 Commentaar

Met een hekje # kun je uitleg toevoegen aan je code:

# Dit is commentaar – de computer doet hier niets mee
x = 5  # We geven x de waarde 5

🔹 If-statements

Met een if-statement laat je de computer beslissingen nemen:

if score >= 10:
    print("Je hebt gewonnen!")

🔹 Loops (herhalingen)

Met een for-loop kun je iets meerdere keren herhalen:

for i in range(5):
    print("Dit gebeurt 5 keer")

🛠️ Opdracht

xxx

📤 Inleveren

xxx

1 Installatie van Python (Thonny) en pygame

Voordat we kunnen beginnen met programmeren, moeten we een paar dingen installeren.

We gaan werken met Thonny, een eenvoudige Python-omgeving die speciaal geschikt is voor beginners.

Daarnaast gebruiken we pygame (of pygame zero) om visuele dingen zoals sprites en bewegingen toe te voegen aan onze code.

🎯 Leerdoelen

Installeren van de Thonny IDE voor Python-programmeren
Installeren van de pygame-library voor grafische toepassingen
Startcode downloaden en uitvoeren om de basisstructuur van een Python-programma te begrijpen

📥 Stap 1: Thonny installeren

Ga naar de officiële website van Thonny: https://thonny.org

Klik op de juiste downloadknop voor jouw besturingssysteem (Windows/macOS/Linux).

Na installatie kun je Thonny openen. Het ziet er ongeveer zo uit:

Thonny screenshot

🧩 Stap 2: pygame (zero) installeren

In Thonny ga je naar het menu Tools → Manage packages...

Typ daar pgzero in (dit is de naam van de pygame zero bibliotheek).

Klik op Install om het te installeren.

Installeren van pgzero

📂 Stap 3: Startcode downloaden en uitvoeren

Download de startcode via de volgende link:

📥 startcode-python-scratch.zip

Pak het zip-bestand uit op een logische plek, bijvoorbeeld je bureaublad.

Open het bestand student.py in Thonny.

Druk op de groene Run-knop ▶️ om het programma uit te voeren.

🧠 Uitleg van de structuur

draw() – hiermee teken je iets op het scherm
update() – hiermee kun je bewegingen of acties herhalen
screen.blit() – hiermee plaats je een afbeelding (sprite)

🛠️ Opdracht

Installeer Thonny op je computer
Installeer de pygame zero bibliotheek via Manage Packages
Download en open het bestand student.py
Run het programma en kijk wat er gebeurt

📤 Inleveren

Maak een screenshot van het programma in actie (groene stip of sprite op het scherm zichtbaar).

Maak ook een screenshot van je Thonny-scherm met geopende code.

2 De stuiterbal

In deze les maken we een simpele animatie: een groene bal beweegt naar rechts en stuitert terug zodra hij de rand raakt.

Hiermee leer je hoe Python werkt met inspringing (indentation) en vergelijk je dat met hoe Scratch blokken groepeert.

🎯 Leerdoelen

Begrijpen van het concept ‘inspringen’ (indentation) in Python en het belang ervan
Vergelijken van Python-code met Scratch-blokken
Leren hoe je een eenvoudige animatie maakt waarbij een bal stuitert

🟢 Voorbeeldcode

from pgzrun import go
from pygame import Rect

WIDTH = 600
HEIGHT = 400

x = 100
y = 200
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "green")

def update():
    global x, richting
    if richting == "rechts":
        x += 5
    if x >= WIDTH:
        richting = "links"
    if richting == "links":
        x -= 5

go()

ℹ️ Uitleg van de code

x bepaalt de horizontale positie van de bal
update() beweegt de bal en verandert de richting bij de rand
if ...: werkt als “als ... dan” in Scratch
Let op de inspringing! Alles wat bij een if hoort moet 4 spaties inspringen

🔁 Vergelijking met Scratch

Scratch	Python
als x > 500 dan ⤷ verander richting	if x > 500: richting = "links"
herhaal steeds	def update():

🛠️ Opdracht

Voer de code uit in Thonny
Verander de beginsnelheid naar 10
Laat de bal de andere kant op starten (richting = "links")
Voeg een extra print(x) toe om te zien hoe x verandert

💡 Extra uitdaging

Laat de bal ook stuiteren aan de linkerkant (x <= 0)
Verander de kleur als de bal van richting verandert

📤 Inleveren

Maak een screenshot van je bal terwijl hij stuitert.

Schrijf in je eigen woorden wat if x >= WIDTH: doet, en wat er zou gebeuren als je de inspringing vergeet.

3 De stuiterbal – heen en weer

In deze les laten we de bal netjes heen en weer bewegen tussen de linker- en rechterrand van het scherm.

Je leert hoe je if-statements en vergelijkingsoperatoren combineert om dit voor elkaar te krijgen.

🎯 Leerdoelen

Gebruik van if-statements om bewegingen te controleren
Begrijpen van vergelijkingsoperatoren in Python (zoals >, <, ==)
Implementeren van logica om een object heen en weer te laten bewegen

🟢 Codevoorbeeld

from pgzrun import go

WIDTH = 600
HEIGHT = 400

x = 100
y = 200
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "green")

def update():
    global x, richting
    if richting == "rechts":
        x += 5
        if x >= WIDTH - 30:
            richting = "links"
    if richting == "links":
        x -= 5
        if x <= 30:
            richting = "rechts"

go()

ℹ️ Uitleg van de code

richting bepaalt of we naar links of rechts bewegen
Als de bal de rechterrand raakt, verandert richting naar "links"
Als de bal de linkerrand raakt, verandert richting naar "rechts"
We gebruiken if-statements én vergelijkingen zoals >= en <=

🛠️ Opdracht

Voer de code uit en controleer of de bal heen en weer beweegt
Verander de waarde 30 naar 50 – wat gebeurt er?
Maak de bal groter of kleiner en pas de randen aan

💡 Extra uitdaging

Laat de bal ook van kleur veranderen telkens als hij van richting verandert
Laat de bal sneller of langzamer bewegen bij elke botsing

📤 Inleveren

Maak een screenshot van het spel waarin de bal duidelijk een andere richting op beweegt.

Schrijf in één zin uit waarom er twee if-blokken zijn en wat hun functie is.

4 De vierkante beweging

In deze les gaan we de sprite laten bewegen in een vierkant patroon: eerst naar rechts, dan naar beneden, dan naar links en dan weer omhoog.

Je leert hoe je meerdere richtingen beheert met `if`-statements en hoe je beweging op basis van coördinaten controleert.

🎯 Leerdoelen

Creëren van bewegingen in een vierkant patroon
Gebruik van meerdere if-statements om richtingen te bepalen
Versterken van begrip over coördinatensystemen en beweging in twee dimensies

🟢 Codevoorbeeld

from pgzrun import go

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "orange")

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"

go()

ℹ️ Uitleg van de code

De sprite beweegt per update in een bepaalde richting
Als de sprite een hoekpunt bereikt, verandert de richting
De volgorde is: rechts → beneden → links → boven → herhaal
We gebruiken meerdere `elif`-blokken voor duidelijke richtinglogica

🛠️ Opdracht

Voer de code uit en bekijk de beweging van de sprite
Verander de vierkantsgrootte (bijvoorbeeld naar 400 bij 200)
Laat de sprite sneller of trager bewegen door de stappen aan te passen

💡 Extra uitdaging

Laat de sprite een ander kleurtje krijgen bij elke hoek
Tel hoe vaak de sprite een vierkant heeft voltooid (met een teller)

📤 Inleveren

Maak een screenshot van het spel waarin je sprite zich in een vierkant beweegt.

Schrijf in één zin hoe de richting wordt aangepast en waarom de sprite stopt of draait bij een bepaalde waarde.

5 Vierkant met sprongen op elke hoek

In deze les voegen we sprongen toe aan het vierkante bewegingspatroon.

Telkens als de sprite een hoek bereikt, laat hij een korte sprong omhoog en omlaag zien.

We gebruiken een for-loop om deze herhaalde sprongbeweging te programmeren.

🎯 Leerdoelen

Introductie tot for-loops in Python
Automatiseren van herhaalde acties met behulp van loops
Vergelijken van loops in Python met herhalingsblokken in Scratch

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "orange")

def spring():
    global y
    for i in range(5):
        y -= 10
        time.sleep(0.05)
        y += 10
        time.sleep(0.05)

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
            spring()
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
            spring()
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
            spring()
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"
            spring()

go()

ℹ️ Uitleg van de code

for i in range(5): herhaalt iets 5 keer
De functie spring() laat de sprite op en neer bewegen
We gebruiken time.sleep() om het effect van een korte sprong te laten zien
De sprong wordt telkens uitgevoerd bij een hoek van het vierkant

🔁 Vergelijking met Scratch

Scratch	Python
herhaal 5 keer ⤷ verander y met -10 ⤷ wacht 0.05 sec ⤷ verander y met 10	`for i in range(5): y -= 10 sleep(0.05) y += 10`

🛠️ Opdracht

Voer de code uit en bekijk het sprongeffect
Pas range(5) aan naar range(3) of range(10) en bekijk het verschil
Verander de spronghoogte (bijv. 20 pixels)

💡 Extra uitdaging

Laat de sprite een geluid afspelen bij elke sprong (indien geluid is ingesteld)
Laat alleen bij de rechterbovenhoek een sprong uitvoeren

📤 Inleveren

Maak een screenshot van je sprite bij een hoek van het vierkant.

Schrijf in één zin uit wat de for-loop doet in de functie spring().

6 Spring vaker op twee hoeken

In deze les laat je de sprite alleen op bepaalde hoeken van het vierkant springen. Zo leer je hoe je voorwaardelijke logica (if-statements) combineert met herhaling (loops).

🎯 Leerdoelen

Verfijnen van bewegingen met behulp van loops en conditionele logica
Begrijpen van geneste structuur: een if-statement binnen een functie met een loop
Toepassen van eerder geleerde concepten in een nieuwe context

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 100
y = 100
richting = "rechts"

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 30, "purple")

def spring():
    for i in range(3):
        global y
        y -= 15
        time.sleep(0.05)
        y += 15
        time.sleep(0.05)

def update():
    global x, y, richting

    if richting == "rechts":
        x += 5
        if x >= 500:
            richting = "beneden"
            spring()
    elif richting == "beneden":
        y += 5
        if y >= 300:
            richting = "links"
            # geen sprong hier
    elif richting == "links":
        x -= 5
        if x <= 100:
            richting = "boven"
            spring()
    elif richting == "boven":
        y -= 5
        if y <= 100:
            richting = "rechts"
            # geen sprong hier

go()

ℹ️ Uitleg van de code

De spring()-functie wordt nu alleen op twee hoeken uitgevoerd
Bijvoorbeeld: rechterbovenhoek en linkeronderhoek
Je gebruikt dus if-logica om te kiezen wanneer je de loop uitvoert

🛠️ Opdracht

Laat je sprite alleen springen bij de hoeken rechtsboven en linksonder
Verander de range() in de spring()-functie naar een groter of kleiner getal
Laat de kleur veranderen tijdens de sprong (optioneel: met een extra variabele)

💡 Extra uitdaging

Tel in een variabele hoeveel keer er gesprongen is en toon dit met screen.draw.text()
Maak het springen afhankelijk van een variabele zoals hoek_nummer

📤 Inleveren

Maak een screenshot van de sprite terwijl hij springt bij één van de actieve hoeken.

Beschrijf in 1 of 2 zinnen hoe je bepaalt waar de sprong wel of niet plaatsvindt.

7 Spiraal – stap 1

In deze les gaan we de sprite in een spiraal laten bewegen. Bij elke stap draait hij een hoek op, en de afstand die hij aflegt blijft (voor nu) steeds hetzelfde.

Het effect: een vierkante spiraalvormige beweging.

🎯 Leerdoelen

Creëren van een spiraalvormig bewegingspatroon
Gebruik van vaste richtingen en patronen in loops
Begrijpen van hoe kleine aanpassingen in code grote visuele effecten kunnen hebben

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 50

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "blue")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    time.sleep(0.4)  # animatie vertragen

go()

ℹ️ Uitleg van de code

De sprite beweegt elke keer een vaste afstand in een nieuwe richting
De richting verandert steeds in de volgorde: rechts → beneden → links → boven → herhaal
Met time.sleep() vertraag je de stappen zodat je het goed kunt volgen

🛠️ Opdracht

Voer de code uit – je ziet een sprite een vierkant patroon volgen
Verander de beginwaarde van afstand naar 30 of 70
Laat het middelpunt (x, y) ergens anders beginnen, bijvoorbeeld linksonder of rechtsboven

💡 Extra uitdaging

Laat de sprite een spoor tekenen (bijvoorbeeld met een lijst van oude posities)
Laat de kleur per stap veranderen

📤 Inleveren

Maak een screenshot van de sprite tijdens de spiraalbeweging.

Schrijf in één zin uit wat er gebeurt als je richting niet telkens verandert.

8 Spiraal – stap 2

In deze les ga je de sprite niet alleen in een spiraal laten bewegen, maar bij elke stap ook de afstand iets kleiner maken.

Het resultaat is een spiraal die langzaam naar het midden krult.

🎯 Leerdoelen

Aanpassen van spiraalbewegingen door afstanden te verkleinen
Gebruik van variabelen om bewegingen dynamisch te maken
Versterken van begrip over loops en variabele manipulatie

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "teal")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5  # afstand verkleinen bij elke stap
    if afstand <= 0:
        afstand = 0  # stop op 0, anders negatief

    time.sleep(0.4)

go()

ℹ️ Uitleg van de code

Bij elke stap verandert de richting én wordt de afstand 5 kleiner
Als de afstand 0 bereikt, stopt de sprite effectief met bewegen
Deze aanpak simuleert een vierkante spiraal die naar binnen draait

🛠️ Opdracht

Voer de code uit en bekijk het effect van de afnemende afstand
Probeer met afstand -= 2 of afstand -= 10 — hoe beïnvloedt dit de spiraal?
Verander de startpositie (x, y) en bekijk hoe het patroon verschuift

💡 Extra uitdaging

Teken het spoor van de sprite (gebruik een lijst met posities)
Laat de sprite stoppen als de afstand kleiner is dan 10

📤 Inleveren

Maak een screenshot van jouw spiraal tijdens of net voor het einde van de beweging.

Schrijf kort op hoe de afstand -= 5 regel het gedrag van de sprite beïnvloedt.

8 Spiraal – stap 2

In deze les ga je de sprite niet alleen in een spiraal laten bewegen, maar bij elke stap ook de afstand iets kleiner maken.

Het resultaat is een spiraal die langzaam naar het midden krult.

🎯 Leerdoelen

Aanpassen van spiraalbewegingen door afstanden te verkleinen
Gebruik van variabelen om bewegingen dynamisch te maken
Versterken van begrip over loops en variabele manipulatie

🟢 Codevoorbeeld

from pgzrun import go
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "teal")

def update():
    global x, y, richting, afstand

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5  # afstand verkleinen bij elke stap
    if afstand <= 0:
        afstand = 0  # stop op 0, anders negatief

    time.sleep(0.4)

go()

ℹ️ Uitleg van de code

Bij elke stap verandert de richting én wordt de afstand 5 kleiner
Als de afstand 0 bereikt, stopt de sprite effectief met bewegen
Deze aanpak simuleert een vierkante spiraal die naar binnen draait

🛠️ Opdracht

Voer de code uit en bekijk het effect van de afnemende afstand
Probeer met afstand -= 2 of afstand -= 10 — hoe beïnvloedt dit de spiraal?
Verander de startpositie (x, y) en bekijk hoe het patroon verschuift

💡 Extra uitdaging

Teken het spoor van de sprite (gebruik een lijst met posities)
Laat de sprite stoppen als de afstand kleiner is dan 10

📤 Inleveren

Maak een screenshot van jouw spiraal tijdens of net voor het einde van de beweging.

Schrijf kort op hoe de afstand -= 5 regel het gedrag van de sprite beïnvloedt.

9 Spiraal – stap 3

Tot nu toe liet je de sprite bewegen in een steeds kleinere spiraal. In deze les leer je hoe je het programma automatisch laat stoppen met een break-statement.

Zo kun je zelf bepalen wanneer een herhaling moet stoppen op basis van een voorwaarde.

🎯 Leerdoelen

Implementeren van een automatische stopconditie voor loops
Begrijpen van het gebruik van break-statements in Python
Creëren van programma’s die zelfstandig kunnen stoppen op basis van een variabele

🟢 Codevoorbeeld

import pgzrun
import time

WIDTH = 600
HEIGHT = 400

x = 300
y = 200
richting = "rechts"
afstand = 80

bewegingen = []

def draw():
    screen.clear()
    screen.draw.filled_circle((x, y), 20, "green")

def update():
    global x, y, richting, afstand

    if afstand <= 5:
        print("Spiraal gestopt.")
        exit()

    if richting == "rechts":
        x += afstand
        richting = "beneden"
    elif richting == "beneden":
        y += afstand
        richting = "links"
    elif richting == "links":
        x -= afstand
        richting = "boven"
    elif richting == "boven":
        y -= afstand
        richting = "rechts"

    afstand -= 5
    time.sleep(0.4)

pgzrun.go()

ℹ️ Uitleg van de code

De afstand wordt steeds kleiner
Als de afstand ≤ 5 is, wordt het programma automatisch gestopt met exit()
Alternatief: gebruik break in een while True-loop om zelf meer controle te houden

🔁 Variant met `while`-loop en `break`

while True:
    if afstand <= 5:
        break
    # beweging uitvoeren
    ...

🛠️ Opdracht

Laat de sprite stoppen zodra de spiraal "te klein" wordt
Gebruik exit() of break om dit netjes af te sluiten
Print “Spiraal afgelopen” op het scherm of in de console

💡 Extra uitdaging

Laat de sprite een tekst tonen op het scherm zodra hij stopt
Gebruik een teller om te tonen hoeveel stappen zijn uitgevoerd

📤 Inleveren

Maak een screenshot van de laatste positie van de sprite vóór het stoppen.

Schrijf in één zin uit waarom en wanneer de break of exit() wordt uitgevoerd.

10 Reflectie: wat heb je geleerd?

Je hebt in de afgelopen lessen veel geleerd over programmeren met Python. In deze afsluitende les kijk je terug op wat je hebt gedaan, wat je hebt geleerd en waar je nog verder in wilt groeien.

Door hierover na te denken, wordt je bewuster van je eigen leerproces en kun je gerichter verder leren.

🎯 Leerdoelen

Terugblikken op de geleerde concepten en vaardigheden
Identificeren van persoonlijke groeipunten en uitdagingen
Formuleren van doelen voor verdere ontwikkeling in programmeren

🛠️ Reflectieopdracht

Beantwoord de volgende vragen in een apart document of onderaan je Python-bestand als commentaar.

🟢 Wat vond je het leukst om te maken of uit te proberen?
🔍 Wat vond je lastig? Hoe heb je dat opgelost?
📘 Wat heb je geleerd over Python (of over programmeren in het algemeen)?
🎯 Waar ben je trots op in jouw eindresultaat?
🚀 Wat zou je de volgende keer anders willen doen of verbeteren?

📎 Extra vragen (optioneel)

🧠 Waar herken je elementen van Scratch terug in Python?
💡 Heb je zelf iets toegevoegd aan je code dat niet in de lessen stond?
🧩 Zou je dit project aan een andere leerling aanraden? Waarom (niet)?

📤 Inleveren

Lever je reflectie in bij je docent (tekstbestand, screenshot of commentaar in code)
Lever ook je laatste versie van je spiraalproject in

📄 Voorbeeld van reflectie als commentaar

# Reflectie:
# Ik vond het leuk dat je de sprite kon laten bewegen met steeds kleinere stappen.
# Het lastigst vond ik de richting goed laten wisselen, maar met hulp lukte het.
# Ik heb geleerd hoe je loops en if-statements kunt combineren.
# Ik ben trots dat mijn spiraal echt stopt aan het eind.
# Volgende keer wil ik proberen met meerdere sprites te werken.

---

1 Thonny installeren

🛠️ Je moet eerst Thonny installeren. Dat is een eenvoudige Python-omgeving voor beginners.
Ga naar https://thonny.org en volg de installatie-instructies voor jouw besturingssysteem (Windows, Mac of Linux).

📦 Als Thonny geïnstalleerd is, kun je het openen en een nieuw Python-bestand aanmaken. Plak onderstaande code in je bestand:

import pygame
import time

# Begin pygame en maak scherm
pygame.init()
screen = pygame.display.set_mode((500, 500))

# Laad een afbeelding (zorg dat 'bal.png' in dezelfde map staat)
ball = pygame.image.load("bal.png")
x = 100
y = 100

# Oneindige lus (druk op sluiten om te stoppen)
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Wis het scherm
    screen.fill((255, 255, 255))

    # Teken de bal
    screen.blit(ball, (x, y))

    # Verplaats de bal
    x += 1
    y += 1

    # Wacht even en werk het scherm bij
    pygame.display.flip()
    time.sleep(0.01)

pygame.quit()

🖼️ Je hebt een afbeelding nodig met de naam bal.png in dezelfde map als je script. Maak bijvoorbeeld een klein rondje in Paint of een andere tekenapp, sla het op als bal.png en zet het in dezelfde map.

✅ Klaar? Druk op Run (de groene afspeelknop) in Thonny. Als het goed is, zie je een venster waarin een bal diagonaal beweegt.

Digital Skills 1

01 - Introductie en start

Bouw je professionele toekomst met digitale skills!

Welkom! Als toekomstige softwareontwikkelaar is je digitale portfolio straks je visitekaartje. In deze module 'Digitale Skills' leer je de essentiële vaardigheden: effectief online werken, samenwerken en jezelf professioneel online presenteren. We bouwen gericht aan jouw portfolio, zodat jij straks vol zelfvertrouwen kunt solliciteren.

Wat kun je verwachten in de module 'Digitale Skills'?

In deze module duiken we in de digitale vaardigheden die essentieel zijn voor jouw succes als toekomstige softwareontwikkelaar. Je kunt de volgende onderwerpen en activiteiten verwachten:

Wat verwachten we van jou?

Dat je nieuwsgierig bent en dingen wilt uitproberen.
Dat je meedoet met de lessen en de opdrachten maakt.
Dat je andere studenten wilt helpen en ook zelf hulp wilt vragen.
Dat je graag wilt werken aan je eigen online portfolio.

Deze module helpt je om goed te starten in de wereld van software. We gaan je stap voor stap laten zien hoe je deze digitale skills kunt gebruiken!

Zorg ervoor dat de de opdrachten bewaar in een map met de naam Digital Skills 01. Aan het einde van deze module wordt je gevraagd hit te zippen en in te leveren.

https://www.youtube.com/watch?v=edCSAINyDYQ

Opdracht

Wat denk jij dat 'digitale skills' precies zijn en waarom zijn ze belangrijk voor jou?
Wat kunnen deze vaardigheden je opleveren, nu en in de toekomst?
Hoe goed denk je zelf dat je er nu in bent?

Inleveren - 1 pdf bestand

Schrijf je antwoorden in je eigen woorden in een Word-document (minstens 80 woorden) en lever het in als een pdf-bestand.

02 Bestandsformaten

Stel je voor dat je een brief schrijft. Je kunt die in Word schrijven, en opslaan als een ".docx"-bestand, of als een ".pdf"-bestand om hem te printen. Die ".docx" en ".pdf" zijn bestandsformaten: ze vertellen de computer hoe de informatie in het bestand is georganiseerd.

Elk type bestand heeft zijn eigen indeling, zodat de computer weet hoe het geopend en weergegeven moet worden

https://www.linkedin.com/learning/writing-a-tech-resume/file-format

02 Opdracht

Je gaat onderzoek doen naar verschillende soorten bestandsformaten. Je maakt een overzicht in een spreadsheet waarin je uitlegt wat elk formaat is, waarvoor het gebruikt wordt, en wat de voor- en nadelen zijn.

Bestandsformaten:

txt, docx, pdf, py, html, css, jpg, png, gif, mp4, zip, csv
Zoek zelf nog naar 8 andere bestandsformaten.

Beantwoord per bestandsformaat de volgende vragen (één rij per formaat):

Type data – Wat voor soort data bevat dit formaat? (Bijv. tekst, audio, video, afbeelding)
Programma’s – Welke programma’s gebruik je om dit bestand te openen of te maken?
Kenmerken – Wat zijn belangrijke eigenschappen van het formaat? (Bijv. compressie, kwaliteit, bestandsgrootte)
Gebruik – Wanneer zou jij dit bestandsformaat gebruiken?

Eisen:

Je geeft duidelijke uitleg bij elk formaat.
Je gebruikt je eigen woorden (geen copy-paste).
Je beantwoordt alle vragen per formaat.
Je werkt netjes en overzichtelijk.

Inleveren - 1 .csv bestand

Eén .csv bestand.
Bestandsnaam: voornaam_achternaam_bestandsformaten.csv

03 OneDrive

Stel je voor dat je een USB-stick hebt, maar dan online. Dat is OneDrive!

Het is een service van Microsoft waarmee je bestanden (zoals documenten, foto's en video's) kunt opslaan op het internet, in de "cloud".

Wat kun je met OneDrive?

Bestanden opslaan en openen, overal: Je kunt je bestanden openen vanaf elke computer, telefoon of tablet met een internetverbinding.
Bestanden delen: Je kunt bestanden makkelijk delen met medestudenten of docenten, bijvoorbeeld om samen aan een project te werken.
Back-ups maken: OneDrive maakt automatisch een kopie van je bestanden, zodat je ze niet kwijtraakt als je computer kapotgaat.
Samenwerken: Meerdere mensen kunnen tegelijkertijd aan hetzelfde document werken.
Offline werken: Je kunt bestanden downloaden en offline bewerken, en OneDrive synchroniseert de wijzigingen zodra je weer online bent.

Kort gezegd, OneDrive is een handige plek om je bestanden veilig op te slaan, te delen en eraan te werken, waar je ook bent.

https://www.youtube.com/watch?v=aZ_wB9V6yos

03 Opdracht

Je hebt voor de introductie les onedrive moeten instellen, nu ga je er voor zorgen dat je

Moet nog gemaakt worden.

04

Opdracht

05

Opdracht -

06

Opdracht

07

Opdracht

08

Opdracht

Eind

Eind Opdracht

test

7 Score-overzicht bij Game Over

In deze les leer je een scorescherm maken dat verschijnt als je verliest. Daarin zie je hoeveel bonuspunten je had, hoeveel negatieve stenen je raakte, en je eindscore.

In deze les geven we niet meer de gehele code maar geven we alleen aan hoe je de code moet aanpassen. Dit is een goede oefening want als code heel complex is het belangijk om te kunnen begrijpen waar wat moet staan in code.

🔧 Wat voegen we toe?

Tel hoeveel bonusstenen je hebt gevangen
Tel hoeveel daarvan positief of negatief waren
Toon een scorescherm als je Game Over bent

📌 Stap 1: Tel positieve en negatieve bonusstenen

Doel: zet de variablen waarin de scores worden bijgehouden op 0. Doe dit bij de start van je programma.

Hoe: Voeg bovenin je script de volgende variabelen toe, net onder score = 0:

bonus_hits = 0
positive_hits = 0
negative_hits = 0

Doel: In de def_update die telkens wordt uitgevoerd gaan we de scores bijwerken

Hoe: Zorg er eerst voor dat je de variabelen in de def_update kan gebruiken:

Verander de eerste regel na def_update() in

global player_x, game_over, score, bonus_hits, positive_hits, negative_hits

Hoe: werk nu de variabelen bij

Voeg in je update()-functie, bij het botsen met een bonussteen, dit toe na score += bonus["value"]:

bonus_hits += 1
if bonus["value"] > 0:
    positive_hits += 1
else:
    negative_hits += 1

📌 Stap 2: Toon scores bij game over

Pas in je draw()-functie het stuk aan waar de tekst "GAME OVER" wordt getekend. Vervang dit door het volgende:

if game_over:
    screen.draw.text("GAME OVER", center=(WIDTH // 2, HEIGHT // 2 - 60), fontsize=60, color="red")
    screen.draw.text(f"Score: {score}", center=(WIDTH // 2, HEIGHT // 2), fontsize=40, color="white")
    screen.draw.text(f"Bonusstenen geraakt: {bonus_hits}", center=(WIDTH // 2, HEIGHT // 2 + 40), fontsize=30, color="lightblue")
    screen.draw.text(f"Positief: {positive_hits}  |  Negatief: {negative_hits}", center=(WIDTH // 2, HEIGHT // 2 + 80), fontsize=30, color="yellow")
    return

ℹ️ Uitleg

bonus_hits: telt hoeveel bonusstenen je geraakt hebt
positive_hits en negative_hits: verdeling van de bonuspunten
draw.text(...): toont extra regels tekst op het scherm bij game over

🛠️ Opdracht

Voeg de drie nieuwe variabelen toe
Pas de update()-functie aan zodat je weet welke bonusstenen geraakt zijn
Pas de draw()-functie aan zodat je een eindscherm krijgt met statistieken

💡 Extra uitdaging

Toon ook hoeveel seconden je hebt gespeeld
Laat bij positieve score een groene tekst zien, en bij negatieve score een rode

📤 Inleveren

Maak een screenshot van je eindscherm
Lever je .py-bestand in