Como Desenhar Perguntas e Opções de Quiz
Este guia cobre como construir etapas de pergunta no AtomicQuiz — texto das opções, mídia, seleção única vs múltipla e layout visual — usando o Construtor para conteúdo e Design para aparência.
Use-o depois de criar as etapas e antes de finalizar a ramificação no Fluxo.
Antes de Começar
Certifique-se de ter:
- Um quiz aberto no AtomicQuiz com pelo menos uma etapa de pergunta adicionada.
- Decidido se cada pergunta permite uma resposta ou várias respostas.
- Imagens ou ícones prontos se as opções usarem mídia.
- Um plano de como as respostas afetam resultados ou próximas etapas (configurado depois no Fluxo).
Veja Construtor de Quiz e Design de Quiz.
Passo 1: Selecionar a Etapa da Pergunta
- Abra o quiz no Construtor de Quiz.
- No trilho de etapas, clique na etapa que deve conter a pergunta.
- Confirme que o canvas exibe o layout dessa etapa.
Mantenha uma pergunta principal por etapa quando possível — taxas de conclusão caem em telas sobrecarregadas.
Passo 2: Adicionar Blocos de Pergunta
Na biblioteca de blocos, adicione o tipo de bloco que corresponde à sua pergunta:
| Tipo de bloco | Use quando |
|---|---|
| Opção de quiz (estilo escolha única) | Visitante escolhe uma resposta de uma lista. |
| Múltipla escolha (estilo checkbox) | Visitante seleciona uma ou mais opções. |
| Texto / mídia | Título, explicação ou imagem acima das opções. |
| Botão | Continuar quando as opções sozinhas não avançam automaticamente. |
Arraste blocos para o canvas da etapa dentro de um container que mantenha as opções alinhadas no mobile.
Veja Opção de Quiz e Múltipla Escolha.
Passo 3: Configurar Opções de Escolha Única
- Clique no bloco de opção de quiz no canvas.
- No painel de edição, defina o texto da pergunta ou prompt.
- Adicione opções — cada linha normalmente inclui:
- Texto da opção (rótulo curto que o visitante toca)
- Referência / ID (para lógica, resultados ou copy dinâmica)
- Mídia opcional (imagem ou ícone por opção)
- Defina comportamento obrigatório se o visitante deve responder antes de continuar.
- Escolha o comportamento de navegação (continuar ao selecionar vs botão separado) conforme os controles do produto.
Dicas:
- Mantenha rótulos curtos — opções longas quebram mal no mobile.
- Use mídia apenas quando ajuda o reconhecimento (produtos, sintomas, estilos).
Passo 4: Configurar Opções de Múltipla Escolha (Checkbox)
- Adicione um bloco de Múltipla escolha ou defina o tipo de opção como Checkbox quando disponível.
- Ative Multi seleção quando mais de uma resposta for permitida.
- Edite cada linha de opção (texto, referência, mídia).
- Defina obrigatório se pelo menos uma seleção for mandatória.
Use o modo checkbox para perguntas "selecione todas que se aplicam". Use escolha única quando exatamente um caminho deve prevalecer para ramificação.
Passo 5: Usar Referências de Campo Obrigatório (Quando Disponível)
Alguns campos de quiz expõem referências de copy como [abc1234] depois que você marca campos como obrigatórios.
Use referências para:
- Personalizar texto de resultado com uma resposta anterior
- Alimentar lógica ou mensagens em etapas posteriores
Copie referências depois que campos obrigatórios estiverem configurados e teste na Visualização.
Passo 6: Refinar o Layout no Modo Design
Quando a estrutura funcionar, abra Design no cabeçalho do quiz:
| Tarefa de design | Por quê |
|---|---|
| Espaçamento e padding | Evita opções apertadas no mobile. |
| Tipografia | Alinha fontes da marca e tamanhos legíveis. |
| Cores e bordas | Destaca estados selecionado vs padrão das opções. |
| Alternadores responsivos | Compara layouts desktop vs mobile. |
Alterações no Design mudam apenas a apresentação — respostas e lógica permanecem no Construtor e Fluxo.
Veja Design de Quiz.
Passo 7: Visualizar e Salvar
- Clique em Salvar.
- Abra Visualizar e teste:
- Envio sem seleção (validação obrigatória)
- Cada caminho de escolha única
- Múltiplas seleções quando habilitadas
- Áreas de toque no mobile
- Confirme que os valores das respostas aparecem como esperado para leads ou copy de resultados.
Depois abra o Fluxo para conectar cada opção ou botão à próxima etapa correta.
Boas Práticas
- Limite opções a 4–6 por tela quando possível.
- Coloque a pergunta mais difícil depois de etapas de aquecimento fáceis.
- Use estilo de card de opção consistente entre etapas.
- Evite excluir campos usados em lógica sem revisar o Fluxo depois.
Solução de Problemas
| Problema | O que tentar |
|---|---|
| Não consigo adicionar segunda opção de quiz no mesmo lugar | Use containers ou etapas separadas; siga as regras de posicionamento exibidas. |
| Checkbox permite apenas uma seleção | Ative Multi seleção nas configurações da opção. |
| Validação obrigatória nunca libera | Confirme referências de opção e ação de continuar no bloco. |
| Aba Design ausente | Use controles de layout do Construtor; algumas contas exibem abas limitadas. |
| Lógica quebrou após reordenar | Reabra o Fluxo; reconecte caminhos das opções afetadas. |
Resultado
Suas etapas de quiz contêm perguntas e opções claras com layout legível no desktop e mobile — prontas para ramificação no Fluxo, webhooks e publicação.
Documentação Relacionada
- Construtor de Quiz
- Design de Quiz
- Fluxo de Quiz
- Opção de Quiz
- Múltipla Escolha
- Como configurar fluxo e lógica de ramificação do quiz
FAQ
Construtor vs Design para perguntas?
Construtor edita conteúdo e opções da pergunta. Design edita layout visual. Use ambos: estrutura primeiro, polimento depois.
Escolha única vs múltipla escolha?
Use escolha única quando uma resposta determina a próxima etapa. Use múltipla escolha quando visitantes podem escolher vários itens em uma etapa.
Alterações de design afetam pontuação?
Não. Design muda apenas apresentação. Lógica e respostas são configuradas no Construtor e Fluxo.
Posso reutilizar uma pergunta em outra etapa?
Duplique a etapa ou bloco de opção no Construtor e ajuste textos e links do Fluxo.
Onde fica a lógica avançada do quiz?
Navegação por elemento mais o mapa do Fluxo. Veja Como configurar fluxo e lógica de ramificação do quiz.