Skapa ett memory-spel
En komplett guide till att skapa ett pedagogiskt memory-spel med AI — från prompt till färdig resurs.
Memory-spelet är en klassiker i klassrummet — och det finns en god anledning till det. I den här guiden visar vi hur du skapar ditt eget anpassade memory-spel med hjälp av AI, helt utan förkunskaper i programmering. Från första prompt till färdig resurs på VibeTeacher.
Varför memory-spel?
Hjärnan lär sig bäst när den aktivt försöker minnas något, inte när den passivt tar emot information. Memory-spelet bygger på just det: varje gång eleven vänder ett kort och försöker komma ihåg var matchningen finns aktiveras den process som forskning kallar aktiv återhämtning — en av de mest effektiva inlärningsstrategierna vi känner till.
Det som gör memory-formatet så kraftfullt pedagogiskt är hur flexibelt det är. Samma spelmekanik fungerar lika bra för:
- Språkinlärning — ord på svenska och engelska, eller bild och benämning
- Matematik — uttryck och svar, som "3 × 4" och "12"
- Naturvetenskap — kemiska symboler och grundämnesnamn
- Historia — årtal och händelser
- Biologi — latinska namn och svenska benämningar
Repetitionen som är inbyggd i spelet — man ser alla par flera gånger under en omgång — förstärker inlärningen utan att det känns som plugg. Elever brukar dessutom spontant vilja spela om, vilket ger ytterligare repetitionstillfällen utan extra ansträngning från din sida.
Passar alla stadier
Memory-spel fungerar från förskoleklass till gymnasiet. Anpassa svårighetsgraden genom att välja enklare eller mer komplexa par, och justera antalet kort efter åldersgrupp. Yngre elever klarar 3×4 bäst, äldre klarar 4×4 eller 5×4.
Grundprompt
Börja alltid med en tydlig och detaljerad grundprompt. En vag prompt ger ett halvdant resultat — en konkret prompt ger ett spel du kan använda direkt. Prompten nedan är din startpunkt, och du kan anpassa den fritt för ditt ämne.
Skapa ett memory-spel som en komplett HTML-fil. Spelet ska fungera utan externa bibliotek eller CDN-beroenden — all CSS och JavaScript ska vara inbäddad i samma fil.
Spelupplägg:
- Ett 4×4-rutnät med 16 kort (8 matchande par)
- Korten visas med baksidan upp vid start
- Klicka på ett kort för att vända det — det ska ha en smidig flip-animation med CSS
- Klicka på ett andra kort för att försöka matcha
- Om korten matchar stannar de synliga och markeras tydligt (t.ex. med grön ram)
- Om korten inte matchar vänds de tillbaka efter 1 sekund
- En rörelsräknare visas överst och uppdateras för varje par man vänder
- En vinstskärm visas när alla par är matchade, med antal rörelser och en "Spela igen"-knapp
Design och användbarhet:
- Färgglad och inbjudande design som passar skolmiljö
- Responsiv layout som fungerar på både dator och surfplatta
- Hela gränssnittet på svenska
- Tydliga instruktioner längst upp på sidan
Använd denna kortdata (du kan ersätta med ditt eget innehåll): Par 1: "Hund" / "Dog" Par 2: "Katt" / "Cat" Par 3: "Häst" / "Horse" Par 4: "Fisk" / "Fish" Par 5: "Fågel" / "Bird" Par 6: "Ko" / "Cow" Par 7: "Gris" / "Pig" Par 8: "Får" / "Sheep"
Kopiera prompten, klistra in den i ChatGPT eller Claude, och du får tillbaka en komplett HTML-fil. Spara filen som memory-spel.html och öppna den i webbläsaren för att testa. Om allt fungerar som det ska är det dags att ladda upp den på VibeTeacher.
Testa alltid innan du delar
Öppna HTML-filen i din webbläsare och spela igenom hela spelet — vinn det och se att vinstskärmen visas. Det tar två minuter och räddar dig från att dela en resurs som inte fungerar som tänkt.
Anpassa för ditt ämne
Grundpromptens kortdata är det enda du behöver byta ut för att skapa ett ämnesanpassat spel. Här är fyra varianter som du kan kopiera och använda direkt.
Engelska glosor
Skapa ett memory-spel som en komplett HTML-fil utan externa beroenden.
Spelet: 4×4-rutnät, flip-animation, matchningslogik, rörelsräknare, vinstskärm med "Spela igen"-knapp. Hela gränssnittet på svenska.
Kortdata — matcha svenska ord med engelska: Par 1: "måndag" / "Monday" Par 2: "tisdag" / "Tuesday" Par 3: "onsdag" / "Wednesday" Par 4: "torsdag" / "Thursday" Par 5: "fredag" / "Friday" Par 6: "lördag" / "Saturday" Par 7: "söndag" / "Sunday" Par 8: "vecka" / "week"
Design: veckodagar-tema med varma färger (gult, orange). Lägg till en liten kalenderikon som dekoration i sidhuvudet.
Kemiska grundämnen
Skapa ett memory-spel som en komplett HTML-fil utan externa beroenden.
Spelet: 4×4-rutnät, flip-animation, matchningslogik, rörelsräknare, vinstskärm. Gränssnittet på svenska.
Kortdata — matcha kemisk symbol med grundämnesnamn: Par 1: "H" / "Väte" Par 2: "O" / "Syre" Par 3: "C" / "Kol" Par 4: "N" / "Kväve" Par 5: "Fe" / "Järn" Par 6: "Au" / "Guld" Par 7: "Na" / "Natrium" Par 8: "Ca" / "Kalcium"
Design: kemilabb-tema med blå och vita färger. Symbolkorten ska se ut som periodiska systemet — mörk bakgrund med symbolen stor och centrerad, grundämnesnamn i en annan färg.
Historiska årtal
Skapa ett memory-spel som en komplett HTML-fil utan externa beroenden.
Spelet: 4×4-rutnät, flip-animation, matchningslogik, rörelsräknare, vinstskärm med "Spela igen"-knapp. Hela gränssnittet på svenska.
Kortdata — matcha årtal med händelse: Par 1: "1066" / "Slaget vid Hastings" Par 2: "1215" / "Magna Carta undertecknas" Par 3: "1492" / "Columbus når Amerika" Par 4: "1789" / "Franska revolutionen" Par 5: "1865" / "Amerikanska inbördeskriget slutar" Par 6: "1905" / "Norge lösgör sig från Sverige" Par 7: "1939" / "Andra världskriget börjar" Par 8: "1969" / "Människan landar på månen"
Design: pergament-tema med beige och bruna toner, serif-typsnitt för att ge historisk känsla.
Matematiska par
Skapa ett memory-spel som en komplett HTML-fil utan externa beroenden.
Spelet: 4×4-rutnät, flip-animation, matchningslogik, rörelsräknare, vinstskärm. Gränssnittet på svenska.
Kortdata — matcha matematiskt uttryck med svar: Par 1: "3 × 4" / "12" Par 2: "6 × 7" / "42" Par 3: "8 × 9" / "72" Par 4: "5 × 5" / "25" Par 5: "4 × 8" / "32" Par 6: "7 × 6" / "42" — OBS: detta är samma svar som par 2, byt till "2 × 6" / "12" om det skapar förvirring Par 6: "2 × 9" / "18" Par 7: "7 × 3" / "21" Par 8: "9 × 4" / "36"
Design: glad, lekfull design med starka primärfärger (röd, blå, gul). Uttryckskorten i en färg, svarskorten i en annan för att tydliggöra skillnaden.
Bygg din egen kortdata snabbt
Skriv dina par som en enkel lista — ett par per rad — och be AI:n formatera om det till rätt kortdata-format i prompten. Exempel: "Formatera dessa ordpar som kortdata till min memory-prompt: hund/dog, katt/cat..." Det sparar tid när du har många par.
Förfina resultatet
Första versionen är sällan perfekt, och det behöver den inte vara. Det smarta med att arbeta med AI är att du kan iterera snabbt. Här är de vanligaste förbättringarna och hur du ber om dem.
Lägg till svårighetsgrader
Bra jobbat! Lägg nu till en startskärm med tre svårighetsgrader:
- Lätt: 3×4-rutnät (6 par)
- Medel: 4×4-rutnät (8 par) — detta är standardläget
- Svårt: 4×5-rutnät (10 par)
Svårighetsgraden väljs innan spelet börjar. Spelet ska använda samma kortdata men visa färre eller fler par beroende på vald nivå. Lägg till en tillbaka-knapp under spelet så att spelaren kan byta svårighetsgrad utan att ladda om sidan.
Lägg till tidtagare
Lägg till en tidtagare som startar när spelet börjar och stoppar när alla par är matchade. Visa tiden i formatet MM:SS (minuter och sekunder). Tidtagaren ska visas bredvid rörelseräknaren. På vinstskärmen visas både antal rörelser och total tid. Lägg också till ett enkelt highscore-system som sparas i webbläsarens localStorage — visa de fem bästa tiderna (för den aktuella svårighetsgraden om du har det inbyggt) under "Spela igen"-knappen.
Ändra tema och färger
Uppdatera designen till ett rymtema:
- Mörk bakgrund (mörkblå, nästan svart: #0a0e1a)
- Kortet visas med rymdmotiv på baksidan (stjärnor, planeter — använd CSS och unicode-tecken, inga bilder)
- Matchade kortpar får en gyllene glödeffekt
- Typsnitt: ett rundat sans-serif (kan användas från Google Fonts om du vill, annars system-ui)
- Vinstmeddelandet ska ha en enkel konfetti-animation i CSS
Lägg till instruktionsskärm
Lägg till en instruktionsskärm som visas allra först, innan spelet startar. Skärmen ska förklara:
- Klicka på ett kort för att vända det
- Klicka på ett till kort och se om de matchar
- Om de matchar stannar de synliga — om inte vänds de tillbaka
- Försök hitta alla par med så få rörelser som möjligt
Lägg till en "Förstår jag — starta spelet!"-knapp som tar spelaren vidare. Instruktionsskärmen ska ha samma design som resten av spelet.
Vanliga problem
Även med en välformulerad prompt kan saker ibland bli fel. Här är de problem lärare stöter på oftast — och hur du löser dem.
Korten matchar inte trots att de borde
Detta händer när JavaScript-koden jämför kortvärden på fel sätt — ofta på grund av extra mellanslag eller versaler. Klistra in spelet i en ny chatt och skriv: "Korten matchar inte korrekt. Kontrollera jämförelselogiken — trimma strängar och använd case-insensitive jämförelse om möjligt." AI:n hittar felet och rättar det direkt.
Layouten ser konstig ut på mobil
Skriv: "Spelet ser bra ut på dator men på mobil klipps kortet och rutnätet ser ut som [beskriv problemet]. Gör layouten responsiv med CSS Grid och se till att kortstorleken anpassas med vw-enheter eller clamp() så att hela brädet alltid syns utan att scrolla." Ange gärna skärmstorleken du testar på.
För många kort — eleverna tappar fokus
Är du osäker på hur många kort som är lagom? Utgå från ålder: 6–8 år klarar 8 kort (4 par), 9–12 år klarar 12–16 kort (6–8 par) och äldre elever klarar 20 eller fler. Be AI:n justera: "Minska antalet kort till 12 (6 par) och använd dessa par: [lista dina enklaste par]."
Spelet fryser eller fungerar inte alls
Om spelet inte startar alls — öppna webbläsarens konsol (F12 → Console) och kolla om det finns röda felmeddelanden. Kopiera felmeddelandet och klistra in det i chatten med: "Jag får detta felmeddelande när jag öppnar spelet i webbläsaren: [klistra in fel]. Rätta det." AI:n kan vanligtvis lösa det direkt.
Pedagogiska tips
Ett välgjort spel är bara halva jobbet. Hur du använder det i undervisningen avgör om det faktiskt leder till inlärning.
Individuell övning
Låt elever spela på sin egen enhet som uppvärmning eller avslutning på en lektion. Sätt ett tydligt mål: "Försök klara det på under 20 rörelser." Det ger fokus och motiverar elever att tänka metodiskt snarare än att klicka slumpmässigt. Tidtagarfunktionen (se ovan) fungerar bra för att ge elever ett konkret mål att slå.
Parövning och samarbete
Sätt två elever vid samma enhet. En klickar, en tänker högt och strategiserar. Det skapar naturliga samtal om innehållet — "Nej, Fe är inte Guld, det är Järn!" — som förstärker inlärningen mer än tyst enskild övning. Byt roller efter varje omgång.
Helklass med projektor
Visa spelet på projektorn och låt klassen samarbeta. Dela in eleverna i lag — ena laget styr musen, andra laget ger instruktioner. Lek "Vad är regeln?" där du frågar klassen att förklara kopplingen mellan korten ni just matchade. Det förvandlar spelet från repetition till förståelseövning.
Hemläxa och föräldraengagemang
Ladda upp spelet på VibeTeacher och dela länken med eleverna. De kan spela hemma på telefon eller dator utan att ladda ner något. Uppmuntra dem att utmana sina föräldrar — föräldrar som spelar historia eller kemin med sina barn skapar samtal om skolan på ett sätt som traditionella läxor sällan gör.
Memory-spelet är ett av de snabbaste och mest pedagogiskt välmotiverade spelen du kan skapa med AI. En tydlig prompt ger dig ett fungerande spel på under fem minuter. Bygg sedan vidare steg för steg med följdprompts — lägg till tidtagare, svårighetsgrader eller ett nytt tema — och du har en resurs du kan använda om och om igen med olika ämnesinnehåll. Dela dina spel på VibeTeacher så kan kollegor bygga vidare på ditt arbete.
Nästa steg
När du är nöjd med ditt memory-spel är det dags att dela det med kollegor och fortsätta utforska vad AI kan hjälpa dig skapa.
Din första resurs på VibeTeacher
Lär dig hur du laddar upp och delar ditt memory-spel — och andra resurser — på plattformen.
Prompt-tekniker som ger bättre resultat
Gå djupare in i konsten att skriva prompts som ger välstrukturerad, pålitlig kod varje gång.
Utforska andras memory-spel
Se vad andra lärare har skapat och hämta inspiration för ditt nästa projekt.