Componentassessment

Question Card

Stable

Enunciado, alternativas e feedback de uma questão. Não decide o que é correto: recebe `status` e devolve a escolha por callback.

Instalação

npx up-web-ds add question-card

Preview

Unanswered

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Selected

Questão 3 de 10

Respondida
Qual camada do Up Web DS resolve um problema recorrente de produto?

Letter Indicators

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Number Indicators

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Correct

Questão 3 de 10

Correta
Qual camada do Up Web DS resolve um problema recorrente de produto?

Isso mesmo. Patterns descrevem experiências recorrentes.

Incorrect

Questão 3 de 10

Incorreta
Qual camada do Up Web DS resolve um problema recorrente de produto?

Primitives são blocos fundamentais, não experiências completas.

Disabled

Respondida
Qual camada do Up Web DS resolve um problema recorrente de produto?

Avaliação encerrada.

All states

Unanswered

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Selected

Questão 3 de 10

Respondida
Qual camada do Up Web DS resolve um problema recorrente de produto?

Letter Indicators

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Number Indicators

Questão 3 de 10

Qual camada do Up Web DS resolve um problema recorrente de produto?

Correct

Questão 3 de 10

Correta
Qual camada do Up Web DS resolve um problema recorrente de produto?

Isso mesmo. Patterns descrevem experiências recorrentes.

Incorrect

Questão 3 de 10

Incorreta
Qual camada do Up Web DS resolve um problema recorrente de produto?

Primitives são blocos fundamentais, não experiências completas.

Disabled

Respondida
Qual camada do Up Web DS resolve um problema recorrente de produto?

Avaliação encerrada.

Usage

Imports de Question Card
import { Button } from '@/components/ui/button'
import { QuestionCard } from '@/components/question-card'
Question Card
<QuestionCard
  name="example-unanswered"
  prompt={prompt}
  choices={choices}
  position={{ current: 3, total: 10 }}
  footer={<Button size="sm">Responder</Button>}
/>

Props

Props de QuestionCard
PropTypeDefaultDescription
choices, obrigatóriareadonly QuestionChoice[]sem valor padrão
prompt, obrigatóriaReact.ReactNodesem valor padrãoThe question itself.
classNamestringsem valor padrão
correctChoiceIdstringsem valor padrãoRevealed only once `status` is `correct` or `incorrect`.
defaultValuestring | nullsem valor padrãoChoice selected before the caller takes ownership.
disabledbooleanfalse
feedbackReact.ReactNodesem valor padrão
footerReact.ReactNodesem valor padrão
namestringsem valor padrãoRadio group name; defaults to the card's own scope.
onValueChange((choiceId: string) => void)sem valor padrão
optionIndicatorQuestionOptionIndicatornullRenders 1/2/3 or A/B/C at the end of each choice.
position{ current: number; total: number; }sem valor padrãoPosition in the assessment, e.g. 3 of 10.
statusQuestionStatus'unanswered'
valuestring | nullsem valor padrãoCurrently selected choice id, for controlled usage.

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em tests/e2e/question-card.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Alternativas são radios nativos em um fieldset com legend, então agrupamento, setas do teclado e leitura de "x de y" vêm do HTML. A opção selecionada é controlada ou não controlada através do hook do DS; o feedback usa role="status" para ser anunciado. Correção é sinalizada por texto além da cor, e os indicadores numéricos ou alfabéticos são decorativos para não poluir o nome do radio.

Classificação

Layer
Component
Domínio
Education
Categoria
assessment
Status
Stable

Origem e distribuição

Fonte
Internal (up-web-studio)
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Badge
Usado por
Nenhum ainda