Kursmal
Kodinglaboratorium: Interaktive simuleringer bygg
Utvikle interaktive webprosjekter med HTML/CSS/JS.
AI-Koding som integrert utviklingsprosess
Dette kursmaterialet bruker AI-koding som kontekstbevisst støtte direkte i CodeRoom: Eksisterende kode kan spesifikt utvides, feil forklart, og endringer implementeres på en måte som er sporbar til gjeldende prosjektstatus. For lærere er utviklingsprosessen fortsatt synlig, da prompter, kodeendringer og versjoner beholdes synlige i undervisningskonteksten. Kursmaterialet ble utviklet spesielt for lære som ønsker å programmere strukturert med AI-støtte og utvikle deres kode spesifikt.
Alle moduler følger ProtoTypeFirst-formatet: Hvert prosjekt starter med en fungerende prototype som kan testes umiddelbart i nettleseren. Fra derfra utvikles datamodeller, overflater, regler og evalueringer trinn for trinn, slik at sporbar kodeutvikling og umiddelbart testbare resultater er koblet sammen.
Didaktisk mål
Templatebundelen inneholder flere interaktive webprosjekter der funksjonelle prototyper systematisk utvides til simuleringer, dashboards eller applikasjoner. Fokuset er på å bygge kompetanser i HTML-strukturering, CSS-design og JavaScript-logikk, spesielt når det gjelder håndtering av datastrukturer, tilstander, DOM-oppdateringer og interaksjon. De enkelte prosjektene viser hvordan profesjonell modellering først oversettes til egnete dataobjekter og regler, og deretter implementeres i synlige brukergrensesnitt. Profesjonelt sett skal malen knyttes til området AI-koding, modellbygging, simulering og trinnvis webapplikasjonsutvikling.
Kompetansefokuspunkter
Malen kombinerer webutvikling, datamodellering og simulering til et prosjektbasert kompetansetilbygg.
- Strukturering av webgrensesnitt: Synlige områder bygges opp med HTML og grupperes inn i gjenbrukbare deler som dashboard, kort og kontrollområder.
- Designing responsivt grensesnitt: CSS brukes til å implementere kort, layout, statusvisninger, animasjoner og mobilvisninger på en profesjonelt passende måte.
- Datamodellering med JavaScript: Arrayer og objekter utgjør sentrale tilstander som lager, pasienter, celler, koblinger, kjøretøy, pakker, partier eller applikasjonsdata.
- Implementering av interaksjon: Klikkebegivenheter, tilstandskonverteringer, filtere, kontrollknapper og DOM-metoder kobler data med synlige reaksjoner på overflaten.
- Utvikling av simuleringlogikk: Regler, tilstand, tilfeldige hendelser, timer, evalueringer og automatiske prosesser utvikles gradvis fra prototyper trinn for trinn.
- Feilanalyse og iterativ utvikling: Endringer implementeres i små trinn, testes i nettleseren og korrigeres spesifikt basert på koden.
Komponentens struktur
Komponentene varierer avhengig av applikasjonssammenhenger, men følger et felles didaktisk mønster: Et kjørbart HTML/CSS/JS-prototyp utvikles gradvis gjennom datamodellering, interaksjon, simuleringregler og evaluering trinn for trinn.
Børs-laboratoriet: Børsmarkedssimulering
Komponenten kobler dataobjekter, prisutviklinger, kjøp- og salglogikk og evaluering av dashboardelementer trinn for trinn gjennom en børs- og handelsstedssimulasjon.
Sykehuskommandosenteret
Komponenten introduserer tilstandsbehandling, prioriteringer, ventelogikk, romfordeling og visualisering basert på nøkkeltall gjennom et sykehusdashboard.
Celldefens – Conway mot invasjonen
Komponenten kobler Conways celleautomater med spillers defensive logikk og gjør rasterdata, mønstre, energi, fiendtlig bevegelse og tilstandsbytte modellbar.
Quotenlab - Risikosimulering
Dette modulen bruker en helt fiktiv risikosimulering for å implementere sannsynligheter, kvoteberegning, tilfeldighet, evaluering og kritisk modellvurdering i kode.
Sentral kontroll – Hovedstasjon
Dette modulen viser et hovedstasjonskontrollsystem, hvordan koblingsdata, spor, nøkkeltall, forstyrrelser og statusendringer er strukturert i en integrert simulering.
Trafikklys og trafikksimulering
Dette modulen modellerer trafikk over kjøretøy, trafikklystilstander, måleverdier og simuleringsskritt, og illustrerer koblingen av regler, bevegelse og visning.
Pakkepilot - Pakkesentral og leverandør-tjeneste simulering
Dette modulen utvikler en logistikk-simulering med pakkeopptak, sortering, kjøretøybelasting, leveringsstatus, hendelser og evaluering av dashboardkomponenter.
Republikkroulette - Koalisjoner, krisesituasjoner og lover
Byggeblokken bruker en helt fiktiv regjeringssimulering for å implementere seteallokering, koalisjoner, hendelser, lover, gruppereaksjoner og nye valg som et regelbasert modell.
KI App Lab: Fra idé til din egen webapplikasjon
Byggeblokken åpner strukturen for din egen webapplikasjonsidé og støtter planlegging, tilpasning av datamodeller, prototyping, interaksjon og iterativ utvidelse.
Byggeblokkene gir gjennomsiktige læreformål, gjentatte prosjektstrukturer og god kobling til serier med lekser om webutvikling, modellbygging og simulering. Ved å variere anvendelseskontekstene kan kompetansebyggingen gjøres mer fagspesifikk.
Bruk en demo-tilgang for å teste malen, velg individuelle byggeblokker og tilpasse dem til din læringssituasjon.