Kursmall
Kodningslaboratorium: Interaktiva simulationer bygger
Utveckla interaktiva webbprojekt med HTML/CSS/JS.
AI-kodning som integrerad utvecklingsprocess
Denna kursmall använder AI-kodning som kontextmedveten stöd direkt i CodeRoom: Existerande kod kan specificeras vidare, fel kan förklaras och ändringar kan genomföras på ett sätt som är spårbara mot det nuvarande projektets tillstånd. För lärare är utvecklingsprocessen fortfarande transparent eftersom prompter, kodsändringar och versioner återfinns i undervisningskontexten. Kursen har utvecklats specifikt för elever som vill programmera strukturerat med AI-stöd och utveckla sin kod specifikt.
Alla moduler följer ProtoTypeFirst-formatet: Varje projekt startar med en fungerande prototyp som kan testas direkt i webbläsaren. Från där utvecklas datamodeller, ytor, regler och bedömningar steg för steg, så att spårbar kodutveckling och genomförbara resultat direkt är kopplade till varandra.
Didaktiskt mål
Mallens innehåll består av flera interaktiva webbprojekt där funktionsprototyper systematiskt utvecklas till simuleringar, dashboards eller applikationer. Fokus ligger på att bygga kompetenser i HTML-strukturering, CSS-design och JavaScript-logik, särskilt när det gäller hantering av datastrukturer, tillstånd, DOM-uppdateringar och interaktion. De enskilda projektens syfte är att visa hur professionell modellering först översätts till lämpliga dataobjekt och regler och därefter implementeras i synliga användargränssnitt. Professionellt ska mallen kopplas till området AI-kodning, modellbyggnad, simulering och stegvis webbapplikationsutveckling.
Kompetensfokus
Mallen kombinerar webbutveckling, datamodellering och simulering till ett projektbaserat kompetensbygge.
- Strukturering av webbinnehåll: Synliga områden byggs upp med HTML och grupperas in i återanvändbara sektioner som dashboard, kort och kontrollområden.
- Design av responsiva gränssnitt: CSS används för att implementera kort, layoutar, statusvisningar, animationer och mobilvyer på ett professionellt lämpligt sätt.
- Datamodellering med JavaScript: Arrayer och objekt utgör centrala tillstånd som lager, patienter, celler, kopplingar, fordon, paket, parter eller applikationsdata.
- Implementering av interaktion: Klickhändelser, tillståndsbyten, filter, kontrollknappar och DOM-metoder kopplar data till synliga reaktioner på ytan.
- Utveckling av simuleringlogik: Regler, tillstånd, slumpmässiga händelser, timer, utvärderingar och automatiska processer utvecklas steg för steg från prototyper.
- Felanalys och iterativ utveckling: Ändringar implementeras i små steg, kontrolleras i webbläsaren och justeras specifikt baserat på koden.
Komponenternas struktur
Komponenterna varierar beroende på applikationskontext men följer ett gemensamt didaktiskt mönster: En körlig HTML/CSS/JS-prototyp utvecklas steg för steg genom data-modellering, interaktion, simuleringsregler och utvärdering.
Aktiehandelslaboratoriet – Aktiemarknadsimulator
Komponenten kopplar dataobjekt, pris-trender, köp- och säljlogik samt utvärderingsdashboardelement steg för steg via en aktiemarknads- och handelsplats-simulator.
Sjukhuskommandocentrum
Komponenten introducerar tillståndshantering, prioriteringar, väntelogik, rumstilldelning och visualisering baserat på nyckeltal via ett sjukhusskärmdashboard.
Cellförsvar – Conway mot invasionen
Komponenten kopplar Conways cellautomater med spelarens försvarslogik och gör rasterdata, mönster, energi, fiendemovning och tillståndstransitioner modellbara.
Quotenlab – Risksimulering
Detta modul använder en helt fiktiv risksimulering för att implementera sannolikheter, kvotberäkning, slumpmässighet, utvärdering och kritisk modellgranskning i kod.
Centraliserad kontroll – Huvudstation
Detta modul visar ett huvudstationskontrollsystem, hur kopplingsdata, spår, nyckeltal, störningar och statusändringar är strukturerade i en integrerad simulering.
Trafikljus och trafiksimsulering
Detta modul modellerar trafik över fordon, trafikljussignaler, mätvärden och simuleringsskrida, samt illustrerar kopplingen mellan regler, rörelse och visning.
Paketpilot – Pakethandlingscentrum och leveranssimulering
Detta modul utvecklar en logistiksimulering med paketmottagning, sortering, fordonsladdning, leveransstatus, händelser och utvärderande dashboardkomponenter.
Republikens roulette – Koalitioner, kriser och lagar
Byggnadsblocket använder en helt fiktiv regeringssimulation för att implementera sittelbrytning, koalitioner, händelser, lagar, gruppreaktioner och nya val som ett regelbaserat modell.
KI App Lab – Från idé till din egen webbapplikation
Byggnadsblocket öppnar upp strukturen för din egna webbapplikationsidé och stödjer planering, anpassning av datamodeller, prototypering, interaktion och iterativ utveckling.
Byggnadsblocken erbjuder genomskinliga lärandemål, återkommande projektstrukturer och god anslutning till serier av lektioner om webbprogrammering, modellbyggande och simulation. Genom att variera applikationskontexten kan kompetensbygget göras mer ämnesrelaterat.
Använd en demo-tillgång för att testa mallen, välj enskilda byggnadsblock och anpassa dem till din lärogrupp.