Till innehållet
Jönköpings kommun pedagog, till startsidan

Lektioner: Skriv kod

Här hittar du förslag på lektionsingångar där AI-verktyg som Microsoft Copilot agerar som en blixtsnabb tolk som översätter idéer till fungerande kod. Varje exempel är kopplad till en kärnaffordans.

Glöm kravet på att kunna skriva perfekt kod från grunden. Med en chattbot som Copilot kan eleverna fokusera på vad de vill skapa och varför. De använder vanligt språk för att beskriva sin logik och sitt mål. Fokus flyttas från syntax till kreativitet och problemlösning.

Tips

Även om det finns specialiserade, kraftfulla verktyg för kodning som Replit eller Lovable, kan eleverna inte skapa konton på dessa. Men det går utmärkt att skapa interaktiva projekt direkt i Microsoft Copilot. Det enklaste sättet är att be AI:n att skapa all kod (HTML, CSS och JavaScript) i en enda HTML-fil.

Eleven kan sedan kopiera all kod, klistra in den i ett enkelt textprogram, som Anteckningar/Notepad, och spara filen med ändelsen .html (t.ex. mittspel.html). Filen kan sedan öppnas direkt i en vanlig webbläsare för att se och testa resultatet.

Några snabba idéer

  • Bygg en egen miniräknare: Låt eleven beskriva funktionerna för en enkel miniräknare och be AI:n att generera den som en HTML-fil.
    Nästa steg: Eleven får i uppgift att med hjälp av AI försöka lägga till en ny funktion, till exempel en rensa-knapp.
  • Skapa generativ konst: Be eleven att med ord beskriva ett visuellt mönster de vill skapa.
    Prompt: "Skapa en HTML-fil som ritar en ny, slumpmässig, olikfärgad cirkel varje gång jag klickar med musen."
    Nästa steg: Eleven experimenterar genom att be AI:n att ändra koden så att den ritar kvadrater istället för cirklar eller att färgerna bara är i olika blåa nyanser.
  • Gör ett interaktivt quiz: Eleven skriver en fråga med tre svarsalternativ. Uppgiften är att be AI:n att skapa en HTML-fil som visar frågan och knapparna och som ger feedback vid rätt/fel svar.
    Nästa steg: Eleven får i uppgift att med hjälp av AI, lägga till ytterligare en fråga och tre nya svarsknappar i sitt quiz.

Från idé till interaktiv hemsida

Varför?
Att bygga en hemsida är ett konkret och motiverande projekt. Eleverna lär sig grunderna i webbens struktur (HTML) och design (CSS) utan att fastna i detaljer.

Lektionsingång
Eleven får i uppgift att skapa en enkel one-page hemsida för ett projekt med pappersskiss som första steg och AI:n som kodgenerator.

Exempel på konversation med AI:n
Elev: "Skapa grundkoden (HTML och CSS) i en enda fil för en enkel hemsida med en vit bakgrund. Hemsidan ska ha de här [funktionerna] och innehålla de här sidorna samt den här texten [klistra in]"

Fysikens lagar i praktiken

Varför?
Ett extremt kraftfullt sätt att förstå abstrakta principer. Istället för en formel på ett papper kan eleven bygga en interaktiv modell och omedelbart se konsekvenserna av att ändra en variabel.

Lektionsingång
Eleven beskriver en enkel simulering de vill skapa, till exempel en boll som faller och ber AI:n generera koden som en HTML-fil.

Lärarens roll
Förtydliga för eleven att de kan be AI:n att skapa simuleringen med webbteknik.
Prompt: "Hjälp mig skriva ett skript i JavaScript som ritar en blå cirkel. Allt ska vara i en HTML-fil."

Exempel på konversation med AI:n
Elev: "Nu, få cirkeln att accelerera nedåt så att det ser ut som att den faller på grund av gravitation."

Elev: "Perfekt. Lägg nu till en funktion där jag kan ändra gravitationen med ett reglage"

Nästa steg
Eleven experimenterar med simuleringen och skriver en kort labbrapport som sammanfattar sin observation och kopplar den till den fysikaliska principen.

Skapa ett spel: Från spelidé till prototyp

Varför?

Att bygga ett eget spel kan vara motiverande för eleverna. Även ett enkelt spel lär ut grundläggande programmeringskoncept och tränar logiskt tänkande på ett lekfullt sätt.

Lektionsingång
Utmana eleven att i dialog med AI:n skapa ett enkelt gissa talet-spel som en HTML-fil.

Exempel på konversation med AI:n
Elev: "Jag vill skapa ett gissa talet-spel i JavaScript i en HTML-fil. Sidan ska ha ett textfält, en gissa-knapp och ett fält för feedback."
Elev: "Om jag gissar fel ska det stå 'för hög' eller 'för låg' i feedback-fältet."

Nästa steg
Eleven får i uppgift att designa och med hjälp av AI, lägga till en ny funktion i spelet, till exempel en poängräknare eller ett begränsat antal gissningar.

  • Senast uppdaterad: 14 jan 2026
Dela sidan

Relaterade nyheter

Lär dig mer
27 apr 2026 11:37
AI-tipset: Skapa eget sociala medier-flöde för att utforska källkritik
Hur formas egentligen det innehåll våra elever möter i sina flöden? Här får du lära dig att skapa ett sociala medier-flöde för att visa dina elever h...
Nyhet
16 jun 2025 07:55
Nytt poddavsnitt: Att vara lärare i en historisk tid
Vi befinner oss i ett teknikskifte där AI och digitala verktyg snabbt förändrar förutsättningarna för lärande, undervisning och kommunikation. Samtid...
Nyhet
26 maj 2025 09:52
Nytt poddavsnitt: Hur utmanar AI pedagogiken och lärarrollen?
Denna gång träffar Joel Rangsjö Maria Bäcke och samtalar om de förhoppningar, rädslor och möjligheter som AI för med sig, och om varför det är avgöra...

Fler nyheter

Relaterade blogginlägg

AI i skolan
27 feb 2026 08:22
Från Tartu med lärdom – om fundament, frihet och framtidens skola
Det är kallt i Tartu när vi landar. Rysskylan som hållit Sverige i sitt grepp den senaste månaden känns även i Estland. Med åtta mil till gränsen kän...
Forskning i praktiken
15 sep 2023 11:58
Generativt AI och det nya plagiatet
Skolverket har nyligen publicerat en nyhet kring de risker och möjligheter som AI medför, med tydliga rekommendationer kring fusk. Var är det för nya...
AI i skolan
22 feb 2024 09:32
2024 – året då AI-bubblan sprack?
År 2023 markerade en milstolpe för artificiell intelligens (AI). Detta år blev "generativ AI" och "promptning" tillägg i nyordslistan och Collins Eng...

Fler blogginlägg