Guide · Avancerad
Bygg ditt första digitala verktyg
Här är sajtens hemliga superkraft: Copilot kan skriva kod. Det betyder att du — utan att kunna programmera — kan beskriva ett litet verktyg i vanlig svenska och få en färdig webbsida: ett glosförhör, en slumpa-grupper-snurra, en multiplikationstränare.
Du sparar en fil, dubbelklickar, och ditt verktyg öppnas i webbläsaren. Det kallas ibland vibekodning — och det är roligare än det låter.
Varför?
Färdiga digitala verktyg är byggda för alla klassrum — vilket betyder att de sällan passar just ditt. Ett verktyg du beskriver själv gör exakt det du vill: dina glosor, dina regler, din svenska.
Och något större: när du bygger i stället för att konsumera förstår du tekniken på ett nytt sätt. Att något ser proffsigt ut betyder inte att det var svårt att göra — en insikt som är värdefull både för dig och, så småningom, för dina elever.
FILM — tyst skärminspelning från riktiga Copilot. Transkript finns under spelaren.
Visa transkript (textversion av filmen)
Filmen visar vibekodningens grunddrag: ett glosförhör beställs som en komplett HTML-fil i vanlig svenska — Copilot skriver all kod, du sparar filen och öppnar den i webbläsaren. Öppet exempel utan elevuppgifter.
Öppna Copilot och fäll ihop sidopanelen. Webbläsaren går till Copilot Chat; ☰-knappen ger ren skrivyta. Kod är bara ännu ett språk Copilot pratar.
Beställ verktyget. Följande skrivs in: ”Skriv en komplett HTML-fil med ett glosförhör för årskurs 5 på temat vatten: tio ord (t.ex. avdunstning, kondensation, nederbörd) som eleven parar ihop med rätt förklaring genom att klicka. Glad och tydlig design, stora knappar, visa poäng och ett uppmuntrande meddelande på slutet. Allt i en enda fil — HTML, CSS och JavaScript — så att jag kan spara den som glosforhor.html och öppna den i webbläsaren.” En kravlista, inte kod.
Koden växer fram. Copilot skriver hela filen i en kodvy med radnummer och kopieringsknapp — HTML, CSS och JavaScript i ett, precis som beställt. Du behöver inte förstå raderna, bara veta vad du beställde.
Kopiera, spara, öppna. Kopiera koden med kopieringsknappen, klistra in i Anteckningar, spara som glosforhor.html och dubbelklicka på filen. Strular något? Klistra in felmeddelandet i chatten och be Copilot laga.
Förstå tricket: en enda HTML-fil
En webbsida är i grunden en textfil med kod — och Copilot skriver gärna hela den filen åt dig. Nyckeln är att be om allt i en enda HTML-fil som fungerar utan internet och utan installation: då kan du spara den på datorn och öppna den direkt i webbläsaren.
Du behöver inte förstå koden som kommer. Din uppgift är att beskriva vad verktyget ska göra — som att beställa av en snickare utan att själv kunna snickra.
Formuleringen att lära sig utantill: ”allt i EN enda HTML-fil, ingen server, inga externa bibliotek”. Den gör att filen fungerar var som helst — även på klassrumsdatorn utan nät.
Beskriv ditt verktyg — och be om hela filen
Börja med något litet och konkret. Beskriv vad verktyget ska göra, hur det ska se ut och vem som ska använda det — precis som en vanlig prompt, fast beställningen är ett program.
Prova prompten nedan: ett glosförhör med dina egna glosor. Copilot svarar med ett långt kodblock — det är hela din webbsida.
Skapa ett glosförhör som en komplett webbsida i EN enda HTML-fil, utan server och utan externa bibliotek. Så här ska det fungera: glosorna visas en i taget på svenska, eleven skriver det spanska ordet och trycker Enter, rätt svar ger grön markering och fel svar visar det rätta ordet. Efter alla ord visas resultatet med uppmuntrande text. Stora knappar och stor text så det funkar på både dator och surfplatta. Använd de här glosorna: hund=perro, katt=gato, hus=casa, skola=escuela, bok=libro, vän=amigo, vatten=agua, sol=sol, äpple=manzana, lärare=profesor.
Skriv gärna dit ”fråga mig om något är oklart innan du skriver koden” — då fångar Copilot upp detaljer du glömt bestämma.
Spara som .html och öppna i webbläsaren
Nu ska koden bli ett verktyg:
- Klicka på kopiera-knappen i kodblockets hörn.
- Öppna Anteckningar (finns på alla kommundatorer).
- Klistra in koden.
- Välj Arkiv → Spara som, döp filen till till exempel glosforhor.html — och välj Alla filer som filformat, annars blir det en textfil.
- Dubbelklicka på filen. Den öppnas i webbläsaren — och där är ditt verktyg.
Grattis: du har precis byggt din första webbapp.
Hittar du inte filen? Spara på skrivbordet första gången — enklast att hitta, enkelt att flytta senare.
Iterera: bygg vidare med vanliga ord
Nu börjar det roliga. Verktyget är ditt — och ändringar beställer du i samma samtal, i vanlig svenska:
- ”Gör knapparna större och texten lättare att läsa.”
- ”Lägg till att eleven får tre försök per ord.”
- ”Slumpa ordningen på glosorna varje gång.”
- ”Lägg till en poängräknare och en glad figur som hejar på.”
Efter varje ändring: be om hela den uppdaterade filen, kopiera, klistra in över det gamla i Anteckningar, spara och ladda om sidan i webbläsaren. Runda för runda växer ditt verktyg.
Snyggt! Nu vill jag ändra tre saker: 1) slumpa ordningen på glosorna varje omgång, 2) visa en poängräknare uppe i hörnet, 3) gör designen gladare med rundade hörn och mjuka färger. Ge mig hela den uppdaterade HTML-filen — inte bara ändringarna.
Be alltid om hela filen, inte bara ändringarna. Att själv klistra in småbitar på rätt ställe i kod är där det oftast går snett.
När det strular — och det gör det ibland
Ärligt: ibland blir det fel. Sidan är vit, en knapp gör ingenting, poängen räknar baklänges. Det är normalt — även proffs får kod som strular. Så här tar du dig loss:
- Beskriv felet för Copilot, så konkret du kan: ”När jag trycker Enter händer ingenting. Ge mig hela filen, lagad.”
- Fortfarande fel? Be Copilot skriva om från grunden: ”Strunta i förra versionen — skriv en ny, enklare variant av samma verktyg.”
- Helt fast? Börja om i ett nytt samtal med din ursprungsprompt plus det du lärt dig. Andra försöket blir nästan alltid bättre.
Det är inte du som är dålig på teknik när det strular — det är så här arbetssättet ser ut, för alla.
Spara en version som fungerar innan du ber om nya finesser — döp den till glosforhor-v1.html. Då har du alltid något att gå tillbaka till.
Dela med kollegor — och tänk ett steg längre
Din HTML-fil är bara en fil: dela den via OneDrive eller lärplattformen, så kan kollegor och elever öppna den i sin webbläsare — inget konto, ingen installation. En kollega med andra glosor? Skicka med din ursprungsprompt så bygger hen sin egen variant på fem minuter.
Verktygen ska förstås inte hantera elevuppgifter — inga inloggningar, inga namnlistor, inga resultat som lagras. Glosor, tärningar, timers och quiz klarar sig utmärkt utan. Och när du känner dig varm i kläderna: en slumpa-grupper-snurra, en ljudnivåmätare med smiley, en interaktiv tallinje … det slutar sällan vid ett verktyg.
Visa gärna eleverna hur verktyget blev till — prompten, itereringen, strulet. Det är teknikundervisning och källkritik i samma paket: ser proffsigt ut betyder inte svårt att göra.
Färdiga prompter att prova
Kopiera, klistra in i Copilot och anpassa till din verksamhet.
Skapa en slumpa-grupper-snurra som en komplett webbsida i EN HTML-fil utan server och externa bibliotek: jag klistrar in en lista med förnamn (ett per rad — jag använder påhittade namn eller nummer), väljer gruppstorlek, och verktyget lottar grupper med en rolig animation. Stor tydlig text som syns på projektor.
Skapa en multiplikationstränare för åk 4 i EN HTML-fil: eleven väljer tabell (2–10), får tio blandade frågor, ser poäng och tid, och avslutas med ett peppande omdöme. Stora knappar, fungerar på surfplatta.
Skapa en lektionsskärm i EN HTML-fil att visa på projektorn: en stor nedräkningstimer jag kan ställa in, dagens schema som punktlista jag kan redigera, och en trafikljus-knapp (grönt=arbeta tyst, gult=viska, rött=lyssna). Allt ska gå att styra med stora tydliga knappar.
Skapa ett begreppsquiz i samhällskunskap för gymnasiet i EN HTML-fil: flervalsfrågor som jag enkelt kan byta ut i en lista i koden, blandad ordning varje gång, förklaring efter varje svar och resultat i procent på slutet. Kommentera i koden var jag byter frågor, så jag hittar rätt.
Skapa en exit ticket-station i EN HTML-fil: eleven väljer en av tre smileys och skriver en mening om vad hen lärt sig. Svaren visas bara på skärmen i en lista (inga namn efterfrågas, inget sparas när sidan stängs).
Tips
- Börja löjligt litet. En tärning på skärmen är ett perfekt första bygge — framgång på fem minuter ger mod till nästa.
- En sak i taget när du itererar: tre önskemål per runda går bra, tio blir kaos.
- Be Copilot förklara: ”förklara på enkel svenska vad den här filen gör” — ett gratis minilektionspass i programmering, för dig.
- Använd Think deeper-läget för större byggen — mer genomtänkt kod på första försöket, färre strulrundor.
- Dina glosor, frågor och texter i verktyget är innehåll du ansvarar för, precis som allt annat material — läs igenom innan eleverna använder det.
Säkerhet & datatumregeln
Verktyg du bygger så här ska inte hantera personuppgifter: inga elevnamn, inga inloggningar, inga resultat som lagras eller skickas någonstans. Använd nummer eller påhittade namn i grupplottaren och låt quiz och förhör vara anonyma — allt försvinner när sidan stängs, och så ska det vara. Vill du bygga något som faktiskt lagrar elevdata är det inte längre ett kvällsprojekt utan en fråga för kommunens ordinarie process för nya system.