Ein Quiz mit eigenem Code gestalten

Mit den Theme-Einstellungen legst du Farben, Schriften und Buttons fest. Soll das Quiz ganz nach deinem eigenen Design aussehen, gibst du dem Theme eigenen Code: ein Stylesheet für das ganze Quiz und, wenn du willst, eigenes HTML für die Startseite, die Fragen und die Antworten. bluebarry kümmert sich weiter um alles, was das Quiz tut. Du bestimmst nur, wie es aussieht.

Custom code öffnen

1. Gehe zu Quizzes, klicke bei deinem Quiz auf Edit und öffne im linken Bereich den Tab Design.
2. Klicke beim Theme, das dieses Quiz nutzt, auf Edit. Custom code lässt sich nur für dieses Theme öffnen, weil der Editor genau dieses Quiz in der Vorschau zeigt.
3. Scrolle in den Theme-Einstellungen ganz nach unten und klicke auf Custom code.

Der Editor hat vier Tabs: CSS, Start page, Question und Answer. Daneben siehst du eine Live-Vorschau des Quiz, die du zwischen Desktop und Handy umschaltest. Die Zeile oben nennt die Quizze, bei denen dieses Theme ausgewählt ist. Ist es das Standard-Theme deines Shops, nutzen es auch Quizze ohne eigenes Theme. Ein leerer Tab behält das Standardlayout, und jeder Tab hat einen Button, mit dem du von einem Beispiel oder vom Standardlayout aus startest. Dein Code speichert sich kurz nach dem Tippen von selbst, solange er fehlerfrei ist.

CSS

Ein Stylesheet gestaltet das ganze Quiz: die Kopfzeile, die Startseite, die Fragen, den Ladebildschirm, die Seite vor dem Ergebnis, die Standard-Ergebnisseite und die Fehlerseite. Es gilt nur innerhalb des Quiz und setzt sich ohne !important gegen die Farben des Themes durch. Eigenschaften für Bewegung und Position wie transform, opacity und transition behalten ihr normales Gewicht, damit die Animationen des Quiz weiter funktionieren.

.bb-q-answer {
  border: 1px solid var(--bb-color-title);
  border-radius: var(--bb-radius);
}
.bb-q-answer[data-selected] {
  background: var(--bb-color-button);
  color: var(--bb-color-button-text);
}
@media (max-width: 480px) {
  .bb-q-answers { grid-template-columns: 1fr; }
}

• Eine @media-Abfrage auf die Breite richtet sich nach der Breite des Quiz, nicht nach dem Browserfenster. So passt sie auch im Pop-up, im Side panel und in der Handy-Vorschau.
• Zustände gestaltest du mit [data-selected] an einer gewählten Antwort, aria-pressed bei Mehrfachauswahl, :disabled an Buttons, die noch nicht nutzbar sind, und aria-invalid an einem Eingabefeld mit Fehler.
• Die Einstellungen des Themes kannst du als Variablen auslesen: --bb-color-button, --bb-color-button-text, --bb-color-background, --bb-color-title, --bb-color-accent, --bb-color-answer, --bb-color-answer-text, --bb-font-body, --bb-font-title und --bb-radius.
• Klassen, die mit bb-q-i- beginnen, sind intern und können sich jederzeit ändern. Eigene Klassen benennst du ohne das Präfix bb-.

Der Fragebildschirm trägt außerdem data-bb-display-type, etwa standard, picture oder dropdown. So gestaltest du einen Fragetyp gezielt. Eine eigene Ergebnisseite (Beta) hat ihren eigenen Code und nutzt die Klassen der Ergebnisseite nicht.

Startseite

Die Vorlage für die Startseite ersetzt deren Layout. Sie ist in Handlebars geschrieben, {{title}} gibt also den Titel der Startseite aus. Verfügbar sind title, description, buttonText, imageUrl, logoUrl und language. Sie braucht einen Button oder Link mit data-bb-start, der das Quiz startet.

<div class="hero">
  {{#if imageUrl}}<img src="{{imageUrl}}" alt="">{{/if}}
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <button type="button" data-bb-start>{{buttonText}}</button>
</div>

Frage

Die Vorlage für Fragen ersetzt jeden Fragebildschirm. Sie braucht ein leeres Element mit data-bb-answers. Dort setzt bluebarry die Antworten ein, egal welcher Fragetyp: Auswahl, Bilder, Dropdown, Eingabefelder, die Einwilligung und Fehlermeldungen. Mit einem leeren Element mit data-bb-actions bestimmst du, wo die Buttons Next und Skip stehen. Verfügbar sind title, description, imageUrl, step (die Nummer der Frage im Weg der Kundin) und progress (0 bis 100).

<p class="step">Frage {{step}}</p>
<h2>{{title}}</h2>
{{#if description}}<p>{{description}}</p>{{/if}}
<div data-bb-answers></div>
<div data-bb-actions></div>

Antwort

Die Vorlage für Antworten füllt das Innere jeder Standard- oder Bildantwort. Den Button drumherum baut bluebarry selbst, deshalb sind nur Text und Bilder erlaubt, keine Links, Buttons oder Formularfelder. Verfügbar sind text, description, imageUrl und index. Dropdown-Optionen und Eingabefelder behalten ihr Standardaussehen.

{{#if imageUrl}}<img src="{{imageUrl}}" alt="">{{/if}}
<span class="label">{{text}}</span>
{{#if description}}<span class="note">{{description}}</span>{{/if}}

Buttons und Skripte

• In den Vorlagen für Startseite und Fragen bekommt ein eigener Button mit data-bb-back, data-bb-restart oder data-bb-close die Funktion Zurück, Neustart oder Schließen.
• Diese beiden Vorlagen dürfen ein Inline-<script> enthalten. Es läuft im Live-Quiz und in der Vorschau. Skripte mit src oder type="module" sind nicht erlaubt.
• Das Quiz sendet ein bluebarry:quiz-Event an die Vorlage und an das Dokument. Sein detail.type ist screen, wenn ein Bildschirm erscheint, select, wenn sich eine Mehrfachauswahl ändert, und answer, wenn eine Antwort gesendet wird.

<div data-bb-answers></div>
<p class="hint">Wähle so viele, wie du magst</p>
<script>
  const root = document.currentScript.closest('.bb-q-template');
  root.addEventListener('bluebarry:quiz', (event) => {
    if (event.detail.type === 'select') {
      root.querySelector('.hint').hidden = event.detail.answerIds.length > 0;
    }
  });
</script>

Was bluebarry weiter übernimmt

Dein Code legt fest, wo etwas steht und wie es aussieht. bluebarry übernimmt weiterhin die Auswahl, Mehrfachauswahl, Prüfung der Eingaben, Einwilligung, das Senden und erneute Senden von Antworten, Zurück, Überspringen, Verzweigungen, Analysen und den Warenkorb. Ein Skript kann keine Antworten auswählen oder senden: Nutze dafür die Slots.

Regeln und Grenzen

Der Editor prüft deinen Code beim Tippen und zeigt unter dem Feld, was zu korrigieren ist. Code mit Fehlern wird nicht gespeichert, damit ein Live-Quiz nie ein kaputtes Design bekommt. Abgelehnt werden:

• Eine Startseite ohne Button oder Link mit data-bb-start oder eine Fragevorlage ohne genau ein leeres Element mit data-bb-answers.
• Ein <style>-Element in einer Vorlage. CSS gehört in den Tab CSS.
• Links, Buttons, Formularfelder oder Skripte in der Antwortvorlage.
• CSS, das die Antworten oder den Button Next ausblendet.
• @keyframes-Namen, die das Quiz selbst nutzt, etwa spin, pulse oder Namen, die mit advisor- beginnen. Wähle einen eigenen Namen wie brand-fade.

Erscheinen die Slots einer Vorlage auf einem Bildschirm trotzdem nicht, etwa weil der Antwort-Slot in einem {{#if}} steht, zeigt dieser Bildschirm das Standardlayout. Das CSS darf bis zu 40.000 Zeichen lang sein, die Vorlagen für Startseite und Fragen je 60.000 und die Antwortvorlage 20.000.

Barry fragen

Klicke oben im Editor auf Ask Barry und beschreibe den gewünschten Look, zum Beispiel „Zeig die Antworten als Karten mit dünnem Rahmen“ oder „Pass das Quiz an den Stil meines Shops an“. Barry schreibt das CSS und die Vorlagen, kann eine Google-Schrift für Titel und Fließtext setzen. Er speichert jede Änderung sofort, prüft sie dann in Vorschauen und behebt, was ihm auffällt. Mit Show code siehst du, was er geschrieben hat. Für eine andere Farbe, Schriftgröße, Eckenrundung oder ein anderes Logo ändert Barry die Theme-Einstellungen statt CSS zu schreiben, denn eigenes CSS dafür würde diese Einstellungen überschreiben. Du kannst sie auch selbst in den Theme-Einstellungen ändern. Siehe Barry kennenlernen.

Gut zu wissen

• Der Code gehört zum Theme und ändert damit jedes Quiz, das dieses Theme nutzt. Er ist nicht Teil einer Quiz-Version, du musst ihn also nicht veröffentlichen. Die Vorschau zeigt Änderungen sofort, live geschaltete Quizze übernehmen sie innerhalb von etwa einer Stunde. Willst du etwas nur an einem Quiz ausprobieren, kopiere das Theme zuerst. Siehe Theme und Layout des Quiz anpassen.
• Sobald ein Theme eigenen Code hat, wird die Kopfzeile über dem Quiz transparent, damit dein Hintergrund bis nach oben reicht. Gib .bb-q-header-bar einen Hintergrund, wenn du eine durchgehende Leiste willst.
• Die Quizfläche im Editor zeigt weiter das Standardlayout. Dein Design siehst du in der Vorschau von Custom code oder über Preview.
• Custom code funktioniert auf Shopify, WooCommerce, Magento und CCV Shop gleich, weil das Quiz auf jeder Plattform in einem eigenen Rahmen läuft.