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
13 mar 2026 10:09
AI-tipset: Gör Copilot lite smartare
Får du svar från Copilot som inte känns riktigt logiska? Med en enkel inställning kan du göra Copilot smartare och mer användbar när du ställer en fr...
Nyhet
30 jan 2023 11:09
Chat GPT - vad är det?
Vad är Chat GPT och hur kan du använda den i undervisningen? Joel Rangsjö, lärare på Bäckadalsgymnasiet, förklarar mer för dig som är nyfiken.
Lär dig mer
25 sep 2024 07:02
Nyfiken på AI? - Kolla in vårt nya utbildningsmaterial
Sedan några veckor tillbaka har utbildningsförvaltningen en verksamhetsutvecklare med fokus på AI. Det innebär att du som pedagog inom förskolan, gru...

Fler nyheter

Relaterade blogginlägg

Forskning i praktiken
20 jan 2023 13:23
Ett perspektiv på ChatGPT och AI i undervisningen
2022 var ett spännande år i AI-communityt. En ny generation av algoritmer utvecklades som kan skapa text, bild och till och med video. Det mest uppmä...
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...
IT och specialpedagogik
3 feb 2026 16:02
AI som assisterande teknik - hur påverkar det elever?
I mitt arbete får jag allt oftare frågor om hur vi kan använda assisterande teknik för att stötta elever. Verktyg som talsyntes, inlästa böcker och s...

Fler blogginlägg