Se før du skriver
Diagrammer, spil og simuleringer gør programforløb og systemadfærd konkrete, før eleven møder hele implementationen.
Det pædagogiske mål
Målet er ikke blot, at eleverne skal kunne trykke på en simulation. Målet er, at de skal kunne forbinde en visuel model med en algoritme, en datastruktur eller en tekstlig beskrivelse – og derefter forklare, hvilke antagelser modellen bygger på.
Eksperimentér kontrolleret
Skyderne, knapperne og trinene inviterer til at ændre én parameter, forudsige resultatet og sammenligne med det, der faktisk sker.
Sæt ord på modellen
Forklaringsbokse, kodefelter og opgaver hjælper eleverne fra “det virker” til “jeg kan forklare hvorfor”.
Mulig undervisningsrytme
1 · ForberedLæs bogens begreber og forudsig et resultat.
2 · UndersøgÅbn laboratoriet og ændr én ting.
3 · ForklarBrug observationer, kode og diagrammer.
4 · OverførSkriv eller forbedr Python-koden.
Hvordan er laboratorierne bygget?
Projektet er bevidst bygget som en samling selvstændige HTML-sider. Det betyder, at en lærer kan linke direkte til et laboratorium fra bogens hjemmeside, LMS eller en QR-kode.
| Lag | Teknologi | Rolle i undervisningen |
|---|---|---|
| Side og layout | HTML og CSS | Strukturerer forklaringer, kontroller, lærreder, kodefelter og responsivt layout. |
| Interaktion | Vanilla JavaScript | Håndterer klik, drag-and-drop, animationer, trinvis kørsel, beregninger og visualiseringer. |
| Visualisering | Canvas, SVG og DOM | Canvas bruges til grafer og simuleringer; SVG bruges til diagrammer og flytbare elementer; DOM bruges til tekstlige interaktioner. |
| Python i browseren | Brython og JavaScript | Nogle laboratorier afvikler Python direkte i browseren via Brython. Andre bruger JavaScript til selve visualiseringen, mens Python-koden vises, forklares og kan downloades. |
| Hosting | GitHub Pages | Filerne kan serveres direkte fra et repository. Der kræves ingen build-pipeline, database eller backend. |
| Eksterne ressourcer | Udvalgte links og vendor-filer | Eksempelvis links til træningssider og Blockly. De interaktive demoer bruger lokale data, hvor det er nødvendigt for stabil offline-adfærd. |
Vigtigt om Python i browseren: Python kan godt afvikles direkte i browseren, blandt andet med Brython eller Pyodide/WebAssembly. Det kræver dog, at det enkelte laboratorium indlæser en sådan Python-runtime og de biblioteker, koden bruger. I laboratorier, hvor visualiseringen er skrevet i JavaScript, er Python-koden stadig ægte kode, men den køres først, når eleven kopierer eller downloader den til en Python-installation – medmindre laboratoriet specifikt tilbyder en Python-kørsel i browseren.
En vigtig præcisering: Conway, Kryds og bolle, Pong, Snake, Turtle, Robot og chatbot-laboratoriet har undervisningsvenlige Python-editorer eller Python-lignende skabeloner, men deres browserdemoer bruger JavaScript eller en begrænset fortolker. De kræver ingen Python-installation for at bruge laboratoriet. Det er kun laboratorier, der tydeligt siger, at elevens Python afvikles med en Python-runtime, der kører ægte Python direkte i browseren.
Hvad betyder det i praksis?
- En side kan åbnes direkte fra GitHub Pages eller lokalt som HTML, uden login og uden elevdata.
- Tilstanden ligger normalt i browserens hukommelse, mens eleven arbejder. Et diagram eller en kodefil kan downloades, hvis laboratoriet tilbyder det.
- Der er ingen fælles database, hvor elevprojekter automatisk gemmes. Eleverne bør gemme eksporterede filer eller screenshots efter behov.
- Webscraping-laboratoriet viser indlejrede træningsudsnit i browseren, fordi direkte browserkald til andre domæner kan være begrænset af CORS. Den tilhørende Python-kode viser den rigtige server-/lokale arbejdsgang.
- Hvis skolen bruger filtrering eller blokerer GitHub Pages, kan læreren hente repository’et og servere filerne lokalt eller fra skolens eget webhotel.
Forslag til lærerbrug
Fælles demonstration
Projicér et laboratorium, bed eleverne forudsige næste trin, og lad dem argumentere for parameterændringer.
Pararbejde
Lad én elev styre interaktionen og én elev føre en observationslog. Byt roller efter hver ændring.
Dokumentation
Brug Mermaid-syntaks, Python-downloads eller screenshots som udgangspunkt for en kort faglig forklaring.
Copyright, kreditering og tredjepartsindhold
Ophavsret til dette materiale: Laboratoriernes originale tekst, illustrationer, layout, JavaScript og øvrige undervisningsdesign er krediteret i projektet til Henrik Sterner og Kathrine Bohus Madsen. De enkelte sider har copyright-angivelser i deres footere, hvor det er relevant.
Der er ikke fundet en separat open-source-licens for hele repository’et. Derfor bør materialet behandles som ophavsretligt beskyttet: Det er i orden at linke til laboratorierne og bruge dem i undervisningen, men genudgivelse, systematisk kopiering, ændring eller videredistribution bør aftales med rettighedshaverne, medmindre en tydelig licens senere angiver andet.
Tredjepart: Blockly ligger i vendor/blockly og er angivet som Apache License 2.0 i den medfølgende README. Den licens og eventuelle medfølgende notices skal respekteres ved videre distribution. Python-biblioteker som requests, numpy, matplotlib, scikit-learn og BeautifulSoup har deres egne licenser, når den viste kode køres uden for browseren.
Træningssider: Links til Quotes to Scrape og Books to Scrape bruges som pædagogiske eksempler. Følg altid de pågældende websteders regler, begræns forespørgsler, og brug ikke laboratoriet som begrundelse for masseindsamling af data.
Dette er en praktisk krediteringsvejledning og ikke juridisk rådgivning. Ved udgivelse af en modificeret eller samlet version bør skolen eller udgiveren afklare licens- og ophavsretsspørgsmål særskilt.