Lorem ipsum

Lorem ipsum dolor

Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

1. Lorem ipsum dolor sit amet?
Ja
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. (richtig)
Nein
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. (falsch)
2. Consetetur sadipscing elitr?
Ja
Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. (falsch)
Nein
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. (richtig)
3. Sed diam nonumy eirmod tempor?
Ja
Invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam. (richtig)
Nein
Et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. (falsch)

Quiz

Interaktive Ja/Nein-Fragen

Die Quiz-Komponente zeigt Ja/Nein-Fragen an, bei denen Antworten beim Klick aufgedeckt werden. Die richtige Antwort wird mit einem subtilen Hinweis und leichtem Highlight angezeigt.

Codebeispiel

<Quiz
id="architecture-quiz"
title="Lorem ipsum dolor"
subtitle="Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
tagline="Lorem ipsum"
items={[
{
question: "Lorem ipsum dolor sit amet?",
yes: "Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.",
no: "Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
correct: "yes"
},
{
question: "Consetetur sadipscing elitr?",
yes: "Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
no: "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.",
correct: "no"
}
]}
columns={2}
width="xl"
isDark={false}
/>

Parameter

BezeichnerTypBeschreibungDefault
titlestringSektions-Titel'Quiz'
subtitlestringOptionaler Untertitel''
taglinestringOptionaler Tagline''
itemsarrayArray von Quiz-Fragen mit question, yes, no, correct[]
columnsnumberGrid-Spalten (1-3)1
idstringWidget-ID für Anchors-
isDarkbooleanDunkles Designfalse
widthstringContainer-Breite'lg'