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
14 jan 2026 07:36
AI-tipset: Skapa din egen agent i Copilot
Visste du att du kan skapa smartare arbetsflöden med egna AI-agenter? Lär dig hur du bygger en agent i Microsoft Copilot som automatiserar återkomman...
Nyhet
3 apr 2025 06:32
Nytt poddavsnitt: AI i förskolan
Nu finns ett nytt avsnitt ute av podden Från A till AI. Denna gång handlar det om AI i förskolan och podden gästas av Melinda Schälin, förstelärare p...
Lär dig mer
14 mar 2025 12:56
Veckans AI-tips: Jobba med källkritik
Undervisning i källkritik är en viktig del i skolans arbete, inte minst nu när AI skapar helt nya möjligheter och utmaningar. Källkritik är inte en g...

Fler nyheter

Relaterade blogginlägg

AI i skolan
29 nov 2023 10:25
Få ChatGPT att höra och prata!
Har du funderat på hur du kan börja använda AI som verktyg i din undervisning? Om ja, tycker jag det är extra roligt att just du har hittat hit! I de...
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...
IT och specialpedagogik
14 aug 2023 07:37
AI som assisterande teknik
Det är nog få i skolans värld som missat begreppen ChatGPT och AI denna vår. ChatGPT slog verkligen ner som en bomb i skolvärlden i vintras med många...

Fler blogginlägg