Een quiz vormgeven met eigen code

Met de instellingen van een thema kies je kleuren, lettertypen en knoppen. Wil je dat de quiz er helemaal uitziet als je eigen ontwerp, geef het thema dan eigen code: één stylesheet voor de hele quiz en, als je wilt, eigen HTML voor de startpagina, de vragen en de antwoorden. bluebarry blijft alles doen wat de quiz doet. Jij bepaalt alleen hoe het eruitziet.

Custom code openen

1. Ga naar Quizzes, klik op Edit bij je quiz en open het tabblad Design in het linkerpaneel.
2. Klik op Edit bij het thema dat deze quiz gebruikt. Custom code gaat alleen open voor dat thema, omdat de editor een preview van deze quiz laat zien.
3. Scrol helemaal naar beneden in de thema-instellingen en klik op Custom code.

De editor heeft vier tabbladen: CSS, Start page, Question en Answer. Ernaast staat een live preview van de quiz, die je wisselt tussen desktop en mobiel. De regel bovenin noemt de quizzen waarvoor dit thema is gekozen. Is het het standaardthema van je webshop, dan gebruiken quizzen zonder eigen thema het ook. Een leeg tabblad houdt de standaard lay-out, en elk tabblad heeft een knop om te beginnen met een voorbeeld of de standaard lay-out. Je code wordt vanzelf opgeslagen kort nadat je stopt met typen, zolang er geen fouten in zitten.

CSS

Eén stylesheet bepaalt de stijl van de hele quiz: de kopbalk, de startpagina, de vragen, het laadscherm, de pagina voor het resultaat, de standaard resultaatpagina en de foutpagina. Het geldt alleen binnen de quiz en wint zonder !important van de kleuren van het thema. Eigenschappen voor beweging en positie, zoals transform, opacity en transition, houden hun normale gewicht, zodat de animaties van de quiz blijven werken.

.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; }
}

• Een @media-query op breedte volgt de breedte van de quiz, niet die van het browservenster. Hij werkt dus ook in een pop-up, een zijpaneel en de mobiele preview.
• Geef toestanden een stijl met [data-selected] op een gekozen antwoord, aria-pressed bij meerkeuze, :disabled op knoppen die nog niet bruikbaar zijn en aria-invalid op een invoerveld met een fout.
• De instellingen van het thema zijn beschikbaar als variabelen die je kunt uitlezen: --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 en --bb-radius.
• Classes die met bb-q-i- beginnen zijn intern en kunnen altijd veranderen. Geef je eigen classes een naam zonder het voorvoegsel bb-.

Het vraagscherm heeft ook data-bb-display-type, zoals standard, picture of dropdown, zodat je één vraagtype apart kunt stylen. Een eigen resultaatpagina (bèta) heeft eigen code en gebruikt de classes van de resultaatpagina niet.

Startpagina

Het template voor de startpagina vervangt de lay-out van de startpagina. Het is Handlebars, dus {{title}} zet de titel van de startpagina neer. Je kunt title, description, buttonText, imageUrl, logoUrl en language gebruiken. Er moet een knop of link met data-bb-start in staan, die de quiz start.

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

Vraag

Het template voor vragen vervangt elk vraagscherm. Er moet één leeg element met data-bb-answers in staan: daar zet bluebarry de antwoorden neer, welk vraagtype het ook is, van keuzes en afbeeldingen tot een dropdown, invoervelden, de toestemming en foutmeldingen. Met een leeg element met data-bb-actions bepaal je waar de knoppen Next en Skip komen. Je kunt title, description, imageUrl, step (het nummer van de vraag in het pad van de klant) en progress (0 tot 100) gebruiken.

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

Antwoord

Het template voor antwoorden vult de binnenkant van elk standaard- of afbeeldingsantwoord. De knop eromheen maakt bluebarry zelf, dus gebruik alleen tekst en afbeeldingen, geen links, knoppen of formuliervelden. Je kunt text, description, imageUrl en index gebruiken. Opties in een dropdown en invoervelden houden hun standaard uiterlijk.

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

Knoppen en scripts

• Geef in de templates voor startpagina en vragen een eigen knop data-bb-back, data-bb-restart of data-bb-close om terug te gaan, de quiz opnieuw te starten of hem te sluiten.
• Deze twee templates mogen een inline <script> bevatten. Dat draait in de live quiz en in de preview. Scripts met src of type="module" zijn niet toegestaan.
• De quiz stuurt een bluebarry:quiz-event naar het template en naar het document. De detail.type is screen als een scherm opent, select als een meerkeuzeselectie verandert en answer als een antwoord wordt verstuurd.

<div data-bb-answers></div>
<p class="hint">Kies er zoveel als je wilt</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>

Wat bluebarry blijft regelen

Jouw code bepaalt waar alles staat en hoe het eruitziet. bluebarry regelt nog steeds het kiezen van antwoorden, meerkeuze, de controle van invoer, toestemming, het versturen van antwoorden en opnieuw proberen, terug, overslaan, vertakkingen, analytics en de winkelwagen. Een script kan geen antwoorden kiezen of versturen: gebruik daarvoor de slots.

Regels en limieten

De editor controleert je code terwijl je typt en laat onder het veld zien wat je moet aanpassen. Code met een fout wordt niet opgeslagen, zodat een live quiz nooit een kapot ontwerp krijgt. Dit wordt geweigerd:

• Een startpagina zonder knop of link met data-bb-start, of een vraagtemplate zonder precies één leeg element met data-bb-answers.
• Een <style>-element in een template. Zet CSS in het tabblad CSS.
• Links, knoppen, formuliervelden of scripts in het antwoordtemplate.
• CSS die de antwoorden of de knop Next verbergt.
• Namen voor @keyframes die de quiz zelf gebruikt, zoals spin, pulse of namen die met advisor- beginnen. Kies een eigen naam, zoals brand-fade.

Verschijnen de slots van een template op een scherm toch niet, bijvoorbeeld omdat het element voor de antwoorden in een {{#if}} staat, dan valt dat scherm terug op de standaard lay-out. De CSS mag tot 40.000 tekens lang zijn, de templates voor startpagina en vragen elk 60.000 en het antwoordtemplate 20.000.

Barry vragen

Klik bovenin de editor op Ask Barry en beschrijf de look die je wilt, bijvoorbeeld "Toon de antwoorden als kaarten met een dunne rand" of "Laat de quiz passen bij de stijl van mijn webshop". Barry schrijft de CSS en de templates, kan een Google Font kiezen voor de titels en de lopende tekst. Hij slaat elke wijziging meteen op, controleert die daarna in previews en past aan wat hem opvalt. Klik op Show code om te zien wat hij heeft geschreven. Voor een andere kleur, lettergrootte, afronding of ander logo past Barry de thema-instellingen aan in plaats van CSS te schrijven, want eigen CSS daarvoor zou die instellingen overschrijven. Je kunt ze ook zelf in de thema-instellingen aanpassen. Zie Maak kennis met Barry.

Goed om te weten

• De code hoort bij het thema en verandert dus elke quiz die het thema gebruikt. Hij zit niet in een quizversie, dus je hoeft hem niet te publiceren. De preview laat wijzigingen direct zien, live quizzen nemen ze binnen ongeveer een uur over. Wil je iets op één quiz uitproberen, kopieer het thema dan eerst. Zie Het thema en de lay-out van je quiz aanpassen.
• Zodra een thema eigen code heeft, wordt de kopbalk boven de quiz transparant, zodat je achtergrond tot bovenaan doorloopt. Geef .bb-q-header-bar een achtergrond voor een volle balk.
• Het quizcanvas in de editor houdt de standaard lay-out. Je ontwerp zie je in de preview van Custom code of via Preview.
• Custom code werkt hetzelfde op Shopify, WooCommerce, Magento en CCV Shop, omdat de quiz op elk platform in een eigen frame draait.