Skapa miniquiz inuti text med AI: Skillnad mellan sidversioner

Nuvarande version från 29 december 2025 kl. 20.13

Ett sätt att låta lässvaga elever öva på innehållet i delar av en text är att skapa en liten miniquiz för varje del i texten. Ofta är läroböcker uppdelade i ett rubrik + ett kort textstycke så det blir naturligt var ett quiz placeras. För att inte bryta flödet i läsningen är alla quiz på sidan dolda från början.

Förbered hemsidan genom att skapa div-taggar med unika id på alla platser där du vill skapa olika quiz i texten. Varje id bör ha enkla citattecken runt sig = ' för att javascriptet ska fungera som det ska.

lägg in ett script i botten på sidan för att visa och gömma de olika quizen beroende på vilket id de har.

function toggleDiv(idnamn) {
 const mittElement = document.getElementById(idnamn);
 
 if (mittElement.style.display === "none") {
   mittElement.style.display = "block";
 } else {
   mittElement.style.display = "none";
  }
}

Varje knapp måste ha ett eget script: onclick="toggleDiv('quiznamn')"

Och slutligen måste varje div-tagg dessutom ha: style="display:none;" så att quizen inte syns i början.

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}

{DIVID}Mellandessadivtaggar{/DIVID}

{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 under

taggen 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 det mellan script-taggar för att det ska fungera.

Det är en god idé att lägga ut alla div-taggar och knappar innan du lägger ut scripten.

AI:n lägger ibland in kommentarer mitt i scripten, vilket gör att de inte går att köra. Kika alltid igenom scriptet AI:n skapat för att se att det inte finns "vanlig" text insprängd någonstans innan du sparar hemsidans kod.

@@ Rad 1: / Rad 1: @@
+[[File:Quiz keyboard.jpg|600px]]
+'''Ett sätt att låta lässvaga elever öva på innehållet i delar av en text är att skapa en liten miniquiz för varje del i texten. Ofta är läroböcker uppdelade i ett rubrik + ett kort textstycke så det blir naturligt var ett quiz placeras. För att inte bryta flödet i läsningen är alla quiz på sidan dolda från början.'''
+Förbered hemsidan genom att skapa div-taggar med unika id på alla platser där du vill skapa olika quiz i texten. Varje id bör ha enkla citattecken runt sig = ' för att javascriptet ska fungera som det ska.
+lägg in ett script i botten på sidan för att visa och gömma de olika quizen beroende på vilket id de har.
+ function toggleDiv(idnamn) {
+  const mittElement = document.getElementById(idnamn);
+  if (mittElement.style.display === "none") {
+    mittElement.style.display = "block";
+  } else {
+    mittElement.style.display = "none";
+   }
+ }
+Varje knapp måste ha ett eget script: onclick="toggleDiv('quiznamn')"
+Och slutligen måste varje div-tagg dessutom ha: style="display:none;" så att quizen inte syns i början.
 PROMPT
@@ Rad 5: / Rad 30: @@
 :{PREFIX}uniktordförjustdettaquiz{/PREFIX}
-:{NEXTHEADING}Rubrikenunderquizet{/NEXTHEADING}
+:{DIVID}Mellandessadivtaggar{/DIVID}
 :{TEXT}inkopieradtext{/TEXT}
@@ Rad 24: / Rad 49: @@
 :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.
+:Skapas så att koden för scriptet placeras i botten av sidan, men quizzet ska visas under <DIV id="{DIVID}"> taggen 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"
@@ Rad 42: / Rad 67: @@
-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.
+OBS!
+:Det är inte alltid som scriptet också skapar script-taggarna. Ser du scriptet som text på hemsidan måste du lägga in det mellan script-taggar för att det ska fungera.
+:Det är en god idé att lägga ut alla div-taggar och knappar innan du lägger ut scripten.
+:AI:n lägger ibland in kommentarer mitt i scripten, vilket gör att de inte går att köra. Kika alltid igenom scriptet AI:n skapat för att se att det inte finns "vanlig" text insprängd någonstans innan du sparar hemsidans kod.
 [[Kategori:AI]]

Skapa miniquiz inuti text med AI: Skillnad mellan sidversioner

Från Skolbok

Nuvarande version från 29 december 2025 kl. 20.13