🧠 Quiz: Simrishamn och Lund

×

🔧 Teknisk beskrivning

Teknologier:

• HTML5: Semantisk struktur och tillgänglighet
• CSS3: Flexbox, Grid, animationer och gradients
• Vanilla JavaScript: Ingen externa ramverk, ren ES6+
• Google Fonts: Fredoka för rubriker, Open Sans för brödtext

Funktioner:

• Interaktivt quiz med 5 frågor om Simrishamn och Lund
• Progressbar som visar framsteg genom quizet
• Bildvisning med timing: 5s början, 5s mellan frågor, 15s efter resultat
• Animerade övergångar och hover-effekter
• Responsiv design för alla enheter
• Modal-fönster med teknisk info och prompt
• Automatisk visning av rätta svar och förklaringar
• Färgkodade svar (grön för rätt, röd för fel)

Design:

• Ljusbeige/pastellblå bakgrund med gradient
• Rundade hörn och skuggor för modern look
• Färgrik progressbar och dekorativ topp-bar
• Floating action buttons nere till höger

Kompatibilitet: Fungerar i alla moderna webbläsare

×

📄 Ursprunglig prompt

Jag vill ha ett uppdaterat quiz i filen index.html om Simrishamn och Lund som studentstad i Sverige. Följ strukturen i quiz.html (ändra inte i quiz.html filen).

Jag vill att bifogad bild (bild_till_quiz1.jpg) ska visas:

• 🕐 5 sekunder inledningsvis
• 🕐 5 sekunder mellan frågorna
• 🕐 15 sekunder sist, när resultatet har redovisats under 10 sekunder

Quiz-frågor:

• Vilket år nämns Simrishamn första gången i skriftliga källor?
• Vilken är en känd naturlig sevärdhet nära Simrishamn?
• Ungefär hur många studenter har Lunds universitet?
• När grundades Lunds universitet?
• Vilken busslinje trafikerar sträckan mellan Simrishamn och Lund?

Designkrav: Samma färgtema och funktionalitet som quiz.html, med responsiv design och moderna interaktionseffekter.