Ăversikt av processen
Varje fredag publiceras ett nytt quiz pĂ„ kentlundgren.se/program/quiz/. Processen för att skapa dessa quiz Ă€r ett praktiskt exempel pĂ„ hur olika AI-verktyg kan samarbeta och komplettera varandra â dĂ€r Claude (info) ansvarar för innehĂ„llet och Cursor (info) skapar den tekniska implementationen.
Processen i tvÄ steg
InnehÄllsskapande med Claude
Skapa quizfrÄgor och svarsalternativ
Teknisk implementation med Cursor
Bygga interaktiv webbapplikation
đ Steg 1: InnehĂ„llsskapande med Claude
Claude AIVad hÀnder i detta steg?
I det första steget anvÀnds Claude AI för att generera sjÀlva quizinnehÄllet. Claude Àr sÀrskilt lÀmplig för denna uppgift eftersom den Àr trÀnerad för att:
- FörstÄ och analysera komplexa Àmnen
- Skapa vÀlavvÀgda och genomtÀnkta frÄgor
- Generera relevanta och utmanande svarsalternativ
- SÀkerstÀlla faktisk korrekthet
Exempel pÄ prompt till Claude
Exempel prompt:
"Jag vill att du skapar ett quiz om [ĂMNE]. Quizet ska innehĂ„lla 5 frĂ„gor med 4 svarsalternativ vardera. FrĂ„gorna ska vara varierade i svĂ„righetsgrad och tĂ€cka olika aspekter av Ă€mnet. För varje frĂ„ga ska du ocksĂ„ ange vilket alternativ som Ă€r det korrekta svaret och ge en kort förklaring."
Temaexempel för fredagsquiz:
- Kommunal ekonomi och budget
- Svensk politik och riksdag
- Lokal historia och kultur
- AllmÀnbildning och aktuella hÀndelser
- SĂ€songsteman (Halloween, jul, etc.)
Vad fÄr du frÄn Claude?
Claude levererar strukturerad data som innehÄller:
- 5 vÀlformulerade frÄgor om det valda Àmnet
- 4 svarsalternativ per frÄga (A, B, C, D)
- Korrekt svar markerat för varje frÄga
- Förklaringar som kan anvÀndas för att ge feedback
đĄ Tips: Spara Claudes svar i ett dokument för att enkelt kunna referera till det i nĂ€sta steg.
đ» Steg 2: Teknisk implementation med Cursor
Cursor AIVad hÀnder i detta steg?
I det andra steget anvÀnds Cursor AI för att omvandla quizinnehÄllet till en fullt funktionell webbapplikation. Cursor Àr optimerad för:
- Att skriva och strukturera kod (HTML, CSS, JavaScript)
- Att skapa responsiva och anvÀndbara grÀnssnitt
- Att implementera interaktiv funktionalitet
- Att organisera kod i separata filer enligt best practice
Exempel pÄ prompt till Cursor
Exempel prompt:
"Jag vill att du i princip ÄteranvÀnder samma programmeringsteknik som finns i
tidigare quiz. Skapa ett interaktivt quiz med följande innehÄll frÄn Claude:
[HĂR KLISTRAS INNEHĂ
LLET FRĂ
N CLAUDE]
Skapa separata filer:
- index.html (struktur)
- styles.css (design)
- script.js (funktionalitet)
AnvÀnd samma stil och layout som tidigare quiz pÄ kentlundgren.se/program/quiz/"
Vad skapar Cursor?
Cursor genererar en komplett webbapplikation med:
đ Filstruktur
- index.html Semantisk HTML5-struktur med tillgÀngligt markup
- styles.css Responsiv design som fungerar pÄ alla enheter
- script.js Interaktiv logik för quiz-funktionalitet
âš Funktioner som implementeras
đŻ Varför denna uppdelning fungerar sĂ„ bra
Claude â InnehĂ„llsexperten
Styrkor:
- Djup förstÄelse för Àmnen och kontext
- Kan skapa engagerande och pedagogiska frÄgor
- SÀkerstÀller faktisk korrekthet
- Anpassar svÄrighetsgrad och ton
Cursor â Kodningsexperten
Styrkor:
- Optimerad för kodgenerering
- FörstÄr webbstandarder och best practices
- Skapar ren, underhÄllbar kod
- Implementerar interaktivitet och UX
đ Synergieffekten
Genom att kombinera Claudes innehÄllskompetens med Cursors kodningsförmÄga fÄr du:
- Högkvalitativt innehÄll: VÀl genomtÀnkta frÄgor och svar
- Professionell kod: Ren, strukturerad och underhÄllbar implementation
- Snabb utveckling: FrÄn idé till fÀrdigt quiz pÄ kort tid
- Konsekvent kvalitet: Samma höga standard varje vecka
- Flexibilitet: Enkelt att anpassa och uppdatera
đ Komplett Workflow - Steg för steg
1. VĂ€lj tema
BestÀm vilket Àmne veckans fredagsquiz ska handla om.
2. Prompta Claude
AnvÀnd Claude för att generera 5 frÄgor med 4 svarsalternativ vardera. Spara resultatet i ett dokument.
3. Granska innehÄllet
Kontrollera att frÄgorna Àr korrekta och passar din mÄlgrupp. Gör eventuella justeringar.
4. Prompta Cursor
Klistra in quizinnehÄllet i Cursor och be den skapa HTML, CSS och JavaScript-filer.
5. Testa quizet
Ăppna index.html i webblĂ€saren och testa att alla funktioner fungerar korrekt.
6. Publicera
Ladda upp filerna till din webbserver i rÀtt mapp (t.ex. /program/quiz/13/ för quiz nummer 13).
7. Dela med vÀrlden
Ditt nya fredagsquiz Ă€r live och redo att anvĂ€ndas! đ
đĄ Tips och Best Practices
đ För Claude-prompten
- Var specifik om Àmne och svÄrighetsgrad
- Be om varierande frÄgetyper
- Inkludera önskad ton (formell/informell)
- BegÀr förklaringar till rÀtta svar
- Specificera mÄlgrupp om relevant
đ» För Cursor-prompten
- Referera till tidigare quiz för konsekvent stil
- Be om separata filer (HTML/CSS/JS)
- Specificera responsiv design
- Inkludera tillgÀnglighetskrav
- Be om kommentarer i koden
đš För design och UX
- HĂ„ll konsekvent stil mellan olika quiz
- Testa pÄ olika enheter (mobil/tablet/desktop)
- AnvÀnd tydliga fÀrger för feedback
- SÀkerstÀll god lÀsbarhet
- Inkludera bilder dÀr relevant
⥠För effektivitet
- Skapa mallar för dina prompts
- Spara standardstilar i ett bibliotek
- Dokumentera din process
- Bygg upp en samling av teman
- à teranvÀnd fungerande strukturer
đŻ Se tidigare fredagsquiz
HÀr Àr nÄgra exempel pÄ quiz som skapats med denna process:
đĄ Samarbete mellan mĂ€nniska och AI â dĂ€r mĂ€nsklig kreativitet möter maskinell effektivitet
đ Sammanfattning
Genom att kombinera olika AI-verktyg efter deras styrkor kan du skapa högkvalitativa webbapplikationer snabbt och effektivt. Claude bidrar med djup förstÄelse och kvalitativt innehÄll, medan Cursor levererar professionell kod och implementation.
Denna arbetsmetod illustrerar framtidens sÀtt att arbeta: inte att vÀlja mellan olika AI-verktyg, utan att kombinera dem pÄ smartast möjliga sÀtt för att uppnÄ bÀsta resultat.