Fragetyp HTML/CSS/JS-Code

 

Über den Fragetyp HTML/CSS/JS-Code

Mit dem Fragetyp HTML/CSS/JS-Code können Sie beliebige Inhalte direkt per Code in den Fragebogen einbetten – sei es zur flexiblen Gestaltung, für benutzerdefinierte interaktive Elemente oder für die Integration externer Komponenten.

Dieser Fragetyp eignet sich ideal, wenn Sie Inhalte benötigen, die über klassische Fragetypen und Gestaltungsmöglichkeiten hinausgehen. Er bietet Ihnen die Möglichkeit, HTML zur Strukturierung, CSS zur Gestaltung und JavaScript zur Interaktivität einzusetzen – direkt im Fragebogen.

Typische Anwendungsbeispiele:

• Countdown bis zum Start oder Ende eines Events
• Anzeige dynamischer Inhalte je nach Antwortverhalten
• Integration externer Widgets (z. B. Kalender, Karten, Diagramme)
• Gestaltung besonderer Informationsblöcke mit eigenen Stilen
• Logikabhängige Visualisierungen mit JavaScript

👉 Ähnlich wie beim Fragetyp Info-Block kann auch dieser Block über Anzeigelogik sichtbar gemacht oder ausgeblendet werden.
👉 Zusätzlich ist es möglich, Inhalte aus anderen Fragen per Piping in den Code zu übernehmen und dort dynamisch weiterzuverarbeiten.

Bitte beachten Sie: Dieser Fragetyp dient ausschließlich zur Darstellung – er sammelt keine Eingaben der Teilnehmenden. Wenn Sie Benutzerinteraktionen erfassen möchten, benötigen Sie zusätzliche versteckte Fragen oder externe Speicherlösungen.

 

Einstellungen des Fragetypen HTML/CSS/JS-Code

Die Einstellungen dieses Fragetypen konzentrieren sich auf die Codebearbeitung:

1. Thema des Code-Editors
   Wählen Sie zwischen einem hellen oder dunklen Editor-Theme, je nach persönlicher Vorliebe:
   • Light Theme
   • Dark Theme
2. Zeileneinzug
   Geben Sie an, wie viele Leerzeichen beim Drücken der Tabulatortaste verwendet werden sollen (z. B. 2 oder 4).
3. Code-Bereiche: HTML, CSS, JS
   Über die Reiter im Editor können Sie zwischen den drei Code-Bereichen umschalten:
   • HTML: Struktur und Inhalte
   • CSS: Gestaltung
   • JS (JavaScript): Interaktive Funktionen

 

Beispiel eines HTML/CSS/JS-Code-Blocks

Damit Sie sehen, wie ein solcher Block in der Praxis eingesetzt werden kann, finden Sie hier ein eingebettetes Beispiel – eine einfache analoge Uhr, die mit HTML strukturiert, per CSS gestaltet und durch JavaScript animiert wird.

Beispiel-Vorschau in einem neuen Fenster öffnen

---