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
17 jan 2025 08:25
Veckans AI-tips: Skapa visualiseringar i Napkin.ai
Napkin.ai är ett verktyg som med några knapptryckningar kan göra en text mer visuell och tillgänglig för dina elever.
Lär dig mer
20 dec 2024 06:53
Veckans AI-tips: Skriva mejl i Copilot med hjälp av rösten
Ibland kan det både vara enklare och gå snabbare att tala in det man vill säga än att själv formulera i skrift. Här får du lära dig hur du kan skriva...
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.

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...
AI i skolan
12 jan 2024 08:38
"Det här förändrar ju fan allting, nu har jag ju alltid någon att fråga"
Det är mars 2023. En regngrå tråkig tisdag. Referatskrivarväder. Förberedelser inför nationella prov och syrefattig som bara en eftermiddagslektion i...
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...

Fler blogginlägg