Ditt första projekt
Steg-för-steg: skapa ett interaktivt quiz på 10 minuter med hjälp av AI — ingen kodkunskap krävs.
Du har hört att det går att skapa interaktiva övningar med AI utan att kunna programmera. Nu är det dags att prova — på riktigt. I den här guiden bygger vi ett fungerande quiz om Sveriges geografi, från första prompten till ett quiz du kan öppna i webbläsaren. Det tar ungefär tio minuter.
Vad vi ska bygga
Vi skapar ett interaktivt geografi-quiz för mellanstadiet om Sveriges landskap. Quizet kommer att:
- Ha tio flervalsfrågor om svenska landskap, städer och älvar
- Visa direkt feedback — grön bock för rätt, rött kryss för fel
- Räkna poäng och visa en summering i slutet
- Fungera i alla webbläsare utan installation
- Se ut som en riktig, väldesignad övning — inte som en tråkig textfil
Resultatet är en enda HTML-fil som du kan spara på datorn, dela med kollegor eller ladda upp på VibeTeacher. Eleverna behöver ingen inloggning — de öppnar filen och kör igång.
Varför just quiz?
Quiz är ett perfekt första projekt: de är enkla att beskriva för AI:n, lätta att testa och omedelbart användbara i klassrummet. När du förstår hur det fungerar kan du bygga allt möjligt — memory-spel, interaktiva tidslinjer, ordövningar och mer.
Steg 1: Välj ett AI-verktyg
Du behöver ett AI-chattverktyg. Alla alternativen nedan fungerar utmärkt för det här projektet:
- ChatGPT — gå till chat.openai.com. Gratiskontot räcker.
- Claude — gå till claude.ai. Gratiskontot räcker.
- Gemini — gå till gemini.google.com. Är du van vid Google-verktyg är detta ett naturligt val.
Har du redan ett konto någonstans? Börja där. Skillnaderna är små för det här ändamålet och du kan alltid prova de andra senare.
Vilket verktyg är bäst?
Alla tre ger bra resultat. Claude tenderar att vara extra duktig på att skriva HTML-kod i ett enda kodblock, vilket gör det lite enklare att kopiera. Men välj det du känner dig bekväm med — resultatet beror mer på prompten än på vilket verktyg du använder.
Logga in och öppna en ny konversation. Du behöver inte ändra några inställningar.
Steg 2: Skriv din första prompt
Nu kommer det viktiga: prompten. En bra prompt beskriver vad du vill ha, för vem och hur det ska fungera. Kopiera prompten nedan och klistra in den i AI-verktyget.
Skapa ett interaktivt HTML-quiz om Sveriges geografi för elever i årskurs 4–6. Quizet ska ha 10 flervalsfrågor om svenska landskap, städer och älvar. Varje fråga ska ha fyra svarsalternativ (A, B, C, D). Visa direkt om svaret är rätt eller fel med grön eller röd färg. Räkna poäng och visa en summering i slutet med totalpoäng och uppmuntrande text beroende på resultatet. Designen ska vara färgglatt och barnvänlig med tydliga knappar. Allt ska ligga i en enda komplett HTML-fil — inga externa filer, inga CDN-länkar. Mobilanpassat.
Varför fungerar den här prompten bra? Den talar om:
- Vad — ett quiz med flervalsfrågor
- Om vad — Sveriges geografi, specifikt landskap, städer och älvar
- För vem — årskurs 4–6
- Hur det ska bete sig — direkt feedback, poängräkning
- Tekniska krav — en enda HTML-fil, mobilanpassat
Ju mer specifik du är, desto bättre blir resultatet. Skriv gärna in ämnet och målgruppen för just din klass.
Steg 3: Kopiera koden
AI:n svarar med HTML-kod. Det ser ut som en lång vägg av text full med taggar och tecken — det är helt normalt. Du behöver inte förstå den.
Så här kopierar du koden:
I ChatGPT: Koden visas i ett grått kodblock. Klicka på knappen "Copy code" i det övre högra hörnet av blocket. Den dyker upp när du hovrar över blocket.
I Claude: Koden visas ofta i en "artifact" — ett eget fönster till höger. Klicka på kopiera-ikonen (två överlappande rutor) längst upp i det fönstret.
I Gemini: Koden visas i ett kodblock med en kopiera-ikon i övre hörnet. Klicka på den.
Kopiera allt
Se till att du kopierar hela koden — från <!DOCTYPE html> längst upp till </html> längst ner. Om du missar delar av koden fungerar quizet inte korrekt.
Steg 4: Testa resultatet
Nu ska vi spara koden som en HTML-fil och öppna den i webbläsaren.
Öppna en textredigerare
På Windows: sök efter "Anteckningar" i startmenyn och öppna det. På Mac: öppna "TextEdit" och se till att du är i läget "Oformaterad text" (Format-menyn → Gör oformaterad text).
Klistra in koden
Klistra in den kopierade koden (Ctrl+V på Windows, Cmd+V på Mac). Hela textredigeraren fylls med HTML-kod — det är rätt.
Spara filen
Välj Arkiv → Spara som. Ge filen namnet geografi-quiz.html. Viktigt: se till att filtillägget är .html och inte .txt. I Anteckningar kan du välja "Alla filer" i rullgardinsmenyn "Filformat" och sedan skriva .html i filnamnet.
Öppna i webbläsaren
Hitta filen i Utforskaren (Windows) eller Finder (Mac). Dubbelklicka på den. Quizet öppnas direkt i din webbläsare — Chrome, Firefox, Edge eller Safari fungerar alla.
Testa quizet
Klicka igenom frågorna och se att feedback, poängräkning och summering fungerar som förväntat. Hittar du något som inte stämmer? Bra — då är det dags för nästa steg.
Om allt fungerar: bra jobbat! Du har precis skapat ditt första vibekodade undervisningsmaterial.
Steg 5: Förbättra med uppföljningsprompt
Sällan är första versionen perfekt. Det fina med att arbeta med AI är att du enkelt kan be om ändringar — utan att röra koden själv. Gå tillbaka till AI-verktyget (behåll samma konversation så att AI:n minns vad den skapade) och beskriv vad du vill ändra.
Här är några exempel på saker du kan be om:
Bra! Kan du lägga till en synlig poängräknare högst upp som uppdateras live när eleven svarar, samt en nedräkningstimer på 30 sekunder per fråga? Om tiden går ut ska frågan räknas som fel och nästa fråga visas automatiskt.
Andra saker du kan be om i uppföljningspromptar:
- "Gör knapparna större så att det fungerar bättre på surfplatta"
- "Lägg till en startskärm med instruktioner innan quizet börjar"
- "Byt färgtemat till blå och gul"
- "Lägg till ljud när eleven svarar rätt"
- "Gör om quizet till att handla om Norrlands geografi istället"
Iterera utan rädsla
Det kostar ingenting att be AI:n om ändringar. Varje gång du skickar en uppföljningsprompt får du en ny version av koden. Spara versioner du är nöjd med (byt namn på filen, t.ex. geografi-quiz-v2.html) innan du ber om nya ändringar, så att du alltid kan gå tillbaka.
Vanliga problem och lösningar
Quizet ser konstigt ut eller är trasigt
Det händer ibland att AI:n inte genererar komplett kod, särskilt om svaret är långt. Be om det igen: "Koden verkar ofullständig. Kan du generera hela HTML-filen på nytt, komplett från början till slut?" Skicka sedan den nya koden.
Filen öppnas som text istället för quiz
Det här beror nästan alltid på att filen sparades med fel filändelse — troligen som geografi-quiz.html.txt. Byt namn på filen i Utforskaren och se till att den slutar på .html, inte .txt. I Windows kan du behöva aktivera "Filnamnstillägg" under Visa-menyn i Utforskaren för att se och ändra tillägget.
Frågorna i quizet stämmer inte geografiskt
AI:n kan ibland hitta på fakta. Läs igenom frågorna och svaren innan du använder quizet med elever. Hittar du fel kan du antingen rätta dem manuellt i koden (sök efter frågetexten och ändra svaret) eller be AI:n: "Fråga 4 har fel svar. Rätt svar är Vänern, inte Vättern. Kan du rätta det?"
AI:n vägrar generera koden
Händer det att AI:n svarar med förklaringar men ingen kod? Förtydliga: "Jag behöver den faktiska HTML-koden som jag kan kopiera och spara som en fil. Vänligen generera hela koden utan förklaringar."
Nästa steg
Du har nu skapat ditt första interaktiva undervisningsmaterial med hjälp av AI. Det är en färdighet som du kan bygga vidare på i din egen takt.
Vibekodning handlar om att beskriva vad du vill ha, testa resultatet och iterera. Du behöver inte förstå koden — du behöver förstå din undervisning. Och det kan du redan.
Härifrån kan du gå åt flera håll:
5 prompter som fungerar direkt
Färdiga promptmallar för quiz, memory-spel, flashcards och mer — sorterade efter ämne och stadium.
Skapa ett memory-spel
Fördjupa dig med ett mer avancerat projekt: ett memory-spel där elever matchar begrepp med definitioner.
Dela det du skapade
Ladda upp ditt quiz till VibeTeacher så att andra lärare kan hitta och använda det.
Quizet du just byggde är ett bra första bidrag till gemenskapen. Andra lärare letar efter precis den typen av resurser — för sina elever, för sina ämnen. Dela det du skapar.