KATEGORI · 8 STATIONER· 3 GRUNDLÄGGANDE + 5 AVANCERADE

Skapa med kod

Be AI:n bygga spel, simuleringar och appar åt dig. En HTML-fil, dubbelklicka — funkar direkt.

KÖR PROMPTERNA I → SKOLUP AIeller ChatGPT/Claude/Snap My AI

💻 SÅ HÄR FÅR DU AI:S KOD ATT FAKTISKT FUNGERA

Den här kategorin är annorlunda än de andra — du får TILLBAKA en hel fil. Läs detta EN gång, så vet du flödet för alla prompter nedan.

Kopiera & kör prompten
Tryck KOPIERA på prompten nedan. Klistra in i Skolup AI eller ChatGPT.
AI ger dig kod
Du får antingen en NEDLADDNINGSBAR FIL (om AI:n stödjer det) eller ett stort kodblock med HTML, CSS och JS i samma fil.
Får du fil? Hoppa till 4. Får du kodblock?
Markera HELA koden (Cmd+A inuti kodblocket eller scroll + dra). Tryck Cmd+C eller Ctrl+C för att kopiera.
Skapa filen själv om du fick text
Öppna en textredigerare. Klistra in. Spara som spel.html — INTE .txt. Dubbelklicka filen → öppnas i webbläsaren.

🪟 WINDOWS / CHROMEBOOK

Öppna Anteckningar (Notepad). Klistra in. Filer → Spara som… → välj "Alla filer" i listan, skriv namnet som spel.html. Tryck Spara. Dubbelklicka filen.

🍎 MAC

Öppna TextEdit. Tryck Cmd+Shift+T så blir det vanlig text (inte rich text). Klistra in. Arkiv → Spara → namn spel.html. Avbryt om Mac frågar om .txt. Dubbelklicka.

⚠️ VANLIGT FEL

Filen heter spel.html.txt? Då sparades den som textfil. Byt namn så det slutar på .html och försök igen.

★ TIPS: Får du fel? Klistra in HELA felmeddelandet tillbaka i AI:n och be om en fix. Du behöver inte förstå koden för att felsöka — du frågar AI:n.

Memory-spel med ditt eget tema

Klassiskt memory — fast med dina favoriter. Funkar i webbläsaren direkt.

VARFÖRMemory är en av de FÖRSTA programmen man brukar bygga. Det har precis lagom mycket logik (matchning, kort-vändning, vinst-tillstånd) för att lära sig hur en hel app hänger ihop.

1. FYLL I DET GULA · 2. KOPIERA · 3. KLISTRA IN I AI:N

Bygg ett MEMORY-SPEL som webbsida. TEMA på korten: ANTAL PAR: FÄRGSCHEMA: SPELET ska: - Visa korten upp-och-ner i ett snyggt rutnät - När jag klickar ett kort: vänd det med en smooth flip-animation - Klicka två kort i rad — om match: båda stannar uppvända. Om inte: båda vänder ner igen efter cirka 1 sekund. - Räknare som visar antal försök - När alla par är hittade: GAME WON-meddelande med slutpoäng + "Spela igen"-knapp som blandar om korten - Lätta animationer och hover-effekter KORT-INNEHÅLL: använd EMOJIS som passar temat (inga bilder från internet). TEKNISKT KRAV — MYCKET VIKTIGT: - En ENDA HTML-fil. ALL JavaScript inuti <script>-taggar. ALL CSS inuti <style>-taggar. - Inga externa bibliotek. Inget React, inget jQuery, inga CDN-länkar. - Inga bilder från internet — bara emojis och CSS. - Lämna mig BARA den färdiga koden i ETT block. Ingen förklaring mellan kodbitarna — jag vill kunna kopiera ALLT i ett enda svep. - Korta kommentarer bara där du gör något smart, så jag förstår. - Filen ska heta typ "memory.html" — när jag dubbelklickar ska den fungera direkt.

KLISTRA IN I SKOLUP AI ELLER CHATGPT — KÖR KODEN I DIN WEBBLÄSARE

SEN: GRANSKA · TÄNKARTRAPPAN STEG 3

?1Funkar spelet när du dubbelklickar HTML-filen? Om inte: läs felmeddelandet och be AI:n fixa just det.
?2Vänder två icke-matchande kort ner igen automatiskt — eller hänger de uppe?
?3Funkar 'Spela igen'-knappen? Blandas korten om?

Klick-spelet där knappen flyr

En knapp. Du klickar. Den flyttar sig. Den krymper. Du svär lite. Du klickar igen.

VARFÖRSnabb dopamin — och lärorikt. Bygger på event-listening, slumptal, koordinater och game-states. Tar 30 sekunder att starta, 5 minuter att finslipa.

1. FYLL I DET GULA · 2. KOPIERA · 3. KLISTRA IN I AI:N

Bygg ett ROLIGT KLICK-SPEL som webbsida. MÅL: klicka knappen gånger så snabbt du kan. REGLER: - En stor färgglad knapp dyker upp i mitten av skärmen - När jag klickar: räknaren ökar med 1, knappen FLYTTAR till en ny slumpmässig position - Knappen blir LITE MINDRE för varje klick (men aldrig osynlig — minst ungefär 40px) - Knappen STANNAR INOM den synliga skärmen - En timer räknar sekunder från första klicket - Efter klick: GAME OVER-skärm med slutpoäng (tid + klick) och "Försök igen"-knapp TEMA: EXTRA KRYDDA: DESIGN: - Stor, läsbar text - Mjuka animationer när knappen flyttar (cirka 0.2 sek) - Mobilvänlig TEKNISKT KRAV — MYCKET VIKTIGT: - En ENDA HTML-fil. ALL JavaScript i <script>, ALL CSS i <style>. - Inga externa bibliotek, inga CDN, inga bilder från internet. - Använd emojis eller CSS-grafik. - Bara den färdiga koden i ETT block — ingen text mellan kodblocken. - Funkar direkt när jag dubbelklickar filen.

KLISTRA IN I SKOLUP AI ELLER CHATGPT

SEN: GRANSKA · TÄNKARTRAPPAN STEG 3

?1Stannar knappen INOM skärmen — eller försvinner den utanför ibland?
?2Funkar timern? Stoppas den vid GAME OVER?
?3Är knappen LÄSBAR även när den krymper? (Om inte — säg åt AI:n att hålla minsta storleken större.)

Din egen personliga hemsida

En riktig webbsida om DIG. Funkar i webbläsaren. Vad du vill ha med — du bestämmer.

VARFÖRAtt bygga sin egen sida är klassisk webbutbildning. Du lär dig HTML-struktur, sektioner, smooth-scroll. Du kan gå tillbaka och ändra över tid.

1. FYLL I DET GULA · 2. KOPIERA · 3. KLISTRA IN I AI:N

Bygg en PERSONLIG HEMSIDA om mig — en enda webbsida. INNEHÅLL: - Mitt namn: - Min ålder: - Jag bor i: - Tre saker jag gillar (en mening om varje): - En sak jag är riktigt bra på: - Mitt mål nästa år: - En rolig fakta om mig: SEKTIONER (i ordning från toppen): 1. HERO med stort namn, en kort presentation, och en stor knapp "Lär känna mig" som smooth-scrollar ner 2. OM MIG — kort presentation 3. MINA FAVORITER — tre snygga kort med mina tre intressen, varje kort i sin egen färg 4. JAG ÄR BRA PÅ — en specifik prestation med stor text 5. MITT MÅL — ett kort som lyser upp när jag hover:ar 6. ROLIGT — den roliga faktan i en "slumpat"-stil DESIGN: - Färgschema: - Estetik: - Smooth-scroll mellan sektionerna - Mjuka hover-effekter på korten - En "top"-knapp längst ner som tar mig till toppen - Mobilvänlig INTERAKTIVITET: - En enda hemlig knapp någonstans (välj själv var) — när jag klickar dyker en överraskning upp (välj något kul: confetti i CSS, en hemlig text, en gif med emojis). TEKNISKT KRAV — MYCKET VIKTIGT: - En ENDA HTML-fil. ALL JS i <script>, ALL CSS i <style>. - Inga externa bibliotek, inga bilder från internet — använd emojis eller CSS-figurer. - Bara den färdiga koden i ETT kodblock — ingen text mellan blocken. - Funkar direkt när jag dubbelklickar.

KLISTRA IN I SKOLUP AI ELLER CHATGPT — SPARA SIDAN, DELA MED KOMPISAR

SEN: GRANSKA · TÄNKARTRAPPAN STEG 3

?1Visas alla sektioner — eller har AI:n hoppat över något?
?2Funkar smooth-scroll, eller blir det hopp?
?3Hittar du den hemliga överraskningen? Och funkar den?

Alla kategorier Mellanstadiet