🧠 Quiz: Svenska kulturkanon och Simrishamn

×

🔧 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 svenska kulturkanon och Simrishamn
• Progressbar som visar framsteg genom quizet
• Bildvisning med timing: 2s 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)
• Kulturkanonkopplingar i feedback-systemet

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
• Speciella kulturkopplingsboxar för att visa svenska kulturkanon-anknytningar

Kompatibilitet: Fungerar i alla moderna webbläsare

×

📄 Ursprunglig prompt

Jag vill att du återanvänder samma programmeringsteknik som finns i quiz.html filen. Använd på samma sätt HTML, JavaScript och CSS för att skapa ett snyggt och lättnavigerat quiz.

Men att du skapar ett nytt quiz i en index.html fil. Filen quiz.html ska hela tiden vara oförändrad.

Nya quiz-frågor om svenska kulturkanon:

• Vilket projekt i Simrishamns kommun kombinerade kulturmiljövård med social inkludering?
• Vilken utställning på Österlens museum hade tema om könsroller och normer?
• Vilken ekonomisk utmaning påverkar ungdomsverksamhetens matlagning?
• Vilken aktivitet planeras i Gärsnäs som folkhälsoprojekt med kulturfokus?
• Vilken föreläsning var i maj 2025 om psykisk ohälsa och ensamhet?

Kulturkanonkopplingar: Varje fråga kopplas till svenska kulturkanon med verk som Carl Larssons Sundborn, Strindbergs Fröken Julie, TV-serien "Hem till byn", Selma Lagerlöfs "Gösta Berlings saga" och Bergmans "Nattvardsgästerna".

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