Todos os componentes · Categoria: Enquetes e quizzes

Quiz

Uma pergunta por tela e um resultado escolhido pelas respostas.

Um resultado por perfil ou por pontuação, com as perguntas e os perfis como props. As respostas são guardadas sem dado pessoal.

Experimente

<quiz-result>

VisãoPréviaCódigoCSS

Props

Título

DestaquePadrãoVerdeLaranjaAzul

CantosSuavesRetosRedondos

Pergunta e respostasA pergunta primeiro, depois uma resposta por linha.

quiz-result: uma pergunta por tela e um resultado escolhido pelas respostas. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

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>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

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" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 18 manda toda prop de um custom element como atributo de texto.
O evento é ouvido com addEventListener, dentro de um efeito.

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" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.
O evento é ouvido com addEventListener, dentro de um efeito.

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",
        },
      },
    }),
  ],
});

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.

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

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
O evento é ouvido com addEventListener, dentro de um efeito.

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>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

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

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
quizId	string	quiz	Tells this quiz's results apart from other quizzes of the site.
headline	string	nenhum	Replaces the default heading.
accent	color	nenhum	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	–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
answered	The visitor picked an answer.
completed	The visitor reached the result page.

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Quiz" (quiz-result): Uma pergunta por tela e um resultado escolhido pelas respostas. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

Componentes relacionados

Enquete rápida<quick-poll>
Enquete ao vivo<live-poll>
Coleta de opinião<feedback-collector>

Quiz

Experimente

Take the quiz

Question 1 of 3

Props

Eventos

Construa um com o seu agente

Componentes relacionados

Documentação