All components · Category: Polls and quizzes

Quiz

One question per screen and a result chosen by the answers.

A result by profile or by score, with the questions and the profiles as props. The answers are stored without personal data.

Try it

<quiz-result>

ViewPreviewCodeCSS

Props

Heading

AccentDefaultGreenOrangeBlue

CornersSoftSquareRound

Question and answersThe question first, then one answer per line.

quiz-result: one question per screen and a result chosen by the answers. A picture of the real component, drawn from its own code. The controls change the picture and the code beside it; nothing here is sent or stored.

Generated from the component's manifest and the values above.

index.html

<quiz-result locale="en"></quiz-result>

<script>
  const element = document.querySelector("quiz-result");
  element.addEventListener("quiz-result:answered", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("quiz-result:completed", (event) => {
    console.log(event.detail);
  });
</script>

Add the site's Taggor script once; the component appears when it loads.

taggor-component.js

const element = document.createElement("quiz-result");
element.setAttribute("locale", "en");
element.addEventListener("quiz-result:answered", (event) => {
  console.log(event.detail);
});
element.addEventListener("quiz-result:completed", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Add the site's Taggor script once; the component appears when it loads.

QuizResult.tsx

import { useEffect, useRef } from "react";

export function QuizResult() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onAnswered = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quiz-result:answered", onAnswered);
    const onCompleted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quiz-result:completed", onCompleted);
    return () => {
      element.removeEventListener("quiz-result:answered", onAnswered);
      element.removeEventListener("quiz-result:completed", onCompleted);
    };
  }, []);

  return <quiz-result ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 18 sends every prop of a custom element as a text attribute.
The event is heard with addEventListener, inside an effect.

QuizResult.tsx

import { useEffect, useRef } from "react";

export function QuizResult() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onAnswered = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quiz-result:answered", onAnswered);
    const onCompleted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quiz-result:completed", onCompleted);
    return () => {
      element.removeEventListener("quiz-result:answered", onAnswered);
      element.removeEventListener("quiz-result:completed", onCompleted);
    };
  }, []);

  return <quiz-result ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 19 sets a property when the element already has it, an attribute otherwise.
The event is heard with addEventListener, inside an effect.

src/QuizResult.vue

<script setup lang="ts">
function onAnswered(event: Event) {
  console.log((event as CustomEvent).detail);
}

function onCompleted(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <quiz-result
    locale="en"
    @quiz-result:answered="onAnswered"
    @quiz-result:completed="onCompleted"
  />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "quiz-result",
        },
      },
    }),
  ],
});

Add the site's Taggor script once; the component appears when it loads.
vite.config.ts tells Vue that this tag is not a Vue component.

src/app/quiz-result.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-quiz-result",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <quiz-result locale="en"></quiz-result>
  `,
})
export class QuizResultComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("quiz-result");
    const onAnswered = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("quiz-result:answered", onAnswered));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("quiz-result:answered", onAnswered));
    const onCompleted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("quiz-result:completed", onCompleted));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("quiz-result:completed", onCompleted));
  }
}

Add the site's Taggor script once; the component appears when it loads.
The component declares CUSTOM_ELEMENTS_SCHEMA.
The event is heard with addEventListener, inside an effect.

src/TaggorComponent.svelte

<script>
  function onAnswered(event) {
    console.log(event.detail);
  }

  function onCompleted(event) {
    console.log(event.detail);
  }
</script>

<quiz-result
  locale="en"
  onquiz-result:answered={onAnswered}
  onquiz-result:completed={onCompleted}
></quiz-result>

Add the site's Taggor script once; the component appears when it loads.

How an agent gets a component like this onto a site:

taggor checktaggor publish

The CSS variables the component exposes, set the way a customer's page would.

styles.css

quiz-result {
  --qz-radius: 12px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
quizId	string	quiz	Tells this quiz's results apart from other quizzes of the site.
headline	string	none	Replaces the default heading.
accent	color	none	Accent color of the bar, the choices and the buttons.
mode	profile \| score	profile	`profile`: answer k counts for profile k. `score`: right answers pick a band.
revealAnswers	boolean	false	Score mode: lists the visitor's answers next to the right ones at the end.
questions	list	[{"text":"A free Saturday is coming. What do yo…	The questions; `correct` is the position of the right answer (score mode).
profiles	list	[{"title":"The Sprinter","description":"You lik…	The result pages; `minPercent` is the lowest score that earns one (score mode).
locale	pt-BR \| en	en	–

Prop names and descriptions are the component's own, in English, as its author wrote them.

Events

Events of the component, read from its manifest
Event	When it fires
answered	The visitor picked an answer.
completed	The visitor reached the result page.

Build one with your agent

Paste this into your agent. It asks you before it signs in, pays or goes further than checking and publishing.

Build me a Taggor component like "Quiz" (quiz-result): One question per screen and a result chosen by the answers. Fetch https://taggor.dev/agent-setup/prompt.md and follow its instructions to set me up for Taggor. Ask me before you sign in, create an account, accept terms, pay for anything or type a secret. Check it with `taggor check` and publish it with `taggor publish`, and stop there. Do not promote it to production, attach it to a site, roll back anything or use --yes, --force or --force-drop-invalid unless I ask for exactly that in this conversation.

Related components

Quick poll<quick-poll>
Live poll<live-poll>
Feedback collector<feedback-collector>

Quiz

Try it

Take the quiz

Question 1 of 3

Props

Events

Build one with your agent

Related components

Documentation