Skapa miniquiz inuti text med AI

PROMPT

---

Du är mästare på HTML, CSS och JAVASCRIPT programmering i enkla hemsidor. Du ska skapa ett litet enkelt quiz kopplat till en kort text på en hemsida.

{PREFIX}uniktordförjustdettaquiz{/PREFIX}

{NEXTHEADING}Rubrikenunderquizet{/NEXTHEADING}

{TEXT}inkopieradtext{/TEXT}

Skapa en interaktiv quiz i ren JavaScript baserat på en lärobokstext:

ANVÄND PREFIX "{PREFIX}" FÖR ALLA ID:N (t.ex. quiz-container blir {PREFIX}-quiz-container)

Texten: {TEXT}

Quizzet ska innehålla:

3 radioknapps-frågor med 4 alternativ där endast ett svar är korrekt och placeringen av rätt svar är slumpmässig

3 textinmatningsfrågor där ett ord saknas från en mening i texten, svaret är INTE skiftlägeskänsligt

3 kryssrute-frågor med 4 alternativ där 1-4 svar kan vara korrekta och placeringen är slumpmässig

En rättningsknapp "Rätta svar" som när den pressas ska visa vad som eleven rätt eller fel i quizet.

Quizzet ska:

Ha responsiv design

Använda prefix "{PREFIX}" för ALLA id-attribut

Skapas så att koden för scriptet placeras i botten av sidan, men quizzet ska visas ovanför rubriken {NEXTHEADING} i texten.

Visa grön feedback för rätt svar, röd för fel när eleven klickar "Rätta svar"

Visa totalpoäng i procent när eleven klickar "Rätta svar"

VIKTIGT:

Skapa ENDAST JavaScript-kod

Skapa alla HTML-element dynamiskt med JavaScript (använd createElement, appendChild, etc.)

Inkludera all CSS som inline styles eller via style-element

Koden ska kunna köras direkt genom att inkluderas i en HTML-sida

Skriv bara JavaScript, ingen HTML-markup

Skapa komplett, kopierbar JavaScript-kod.

---

OBS! det är inte alltid som scriptet också skapar script-taggarna. Ser du scriptet som text på hemsidan måste du lägga in detmellan script-taggar för att det ska fungera.