Lab Alfa Wireframe v3
Protótipo de interação. Telas baseadas nos PDFs de desenvolvimento (lobby, unidades, sala de espera). A unidade 1006 é conteúdo de referência, não aula aprovada. O painel do professor é uma proposta simulada.
Texto

Paciente 1006 Energia baixa · tratamento pendente Energia do paciente: 20 por cento.

Missão 1006 · Laboratório de clorofila

Lousa IA em modo missão — conteúdo HTML refluível

Trilha padrão
1 de 5

ETAPA 1 · RECEBER AMOSTRA

Conheça o problema do slime

O slime 1006 chegou ao laboratório com pouca energia. Ele se alimenta das folhas que cultiva dentro do corpo, e essas folhas pararam de produzir alimento.

A sua tarefa é descobrir qual parte da célula vegetal deixou de funcionar e preparar o tratamento certo.

O que você vai aprender

Identificar o cloroplasto e explicar por que ele é necessário para a planta produzir o próprio alimento.

Ficha do paciente

Identificação
Slime 1006
Sintoma
Energia baixa
Folhas
Amareladas
Amostra
Pedaço de folha

As 5 etapas da missão

  1. Receber amostraEtapa atual
  2. ObservarAnalisador de células
  3. Testar hipóteseComparar estruturas
  4. RegistrarEscrever a conclusão
  5. TratarPreparar o remédio
Preciso saber alguma coisa antes?

Você já viu que as plantas são seres vivos e que precisam de luz. Nesta missão você vai olhar de perto o lugar da célula onde a luz vira alimento.

Se você não lembrar de alguma palavra, ela fica sublinhada no texto — passe o cursor ou use o leitor de tela para ouvir a definição.

Não existe resposta errada que faça você perder a missão. Você pode tentar de novo.

Etapa 1 de 5 · Receber amostra

Notas do protótipo (para a equipe — não faz parte da tela do estudante)

O que é fixture e o que é referência

  • Lobby, seleção de unidade e sala de espera reproduzem os PDFs do pacote de desenvolvimento Lab Alfa. As imagens são decorativas (aria-hidden); todo o texto e todos os controles são HTML.
  • A unidade 1006 (“Função da clorofila e dos cloroplastos”) vem do guia interno de desenvolvimento. Não é uma das unidades aprovadas para setembro e não representa validação científica nem de dificuldade.
  • As unidades 1007 a 1011 aparecem como “em preparação” porque só a 1006 tem conteúdo autorado. Nenhum título foi inventado.
  • O painel do professor não tem tela de referência no pacote de desenvolvimento. É uma proposta simulada, criada a pedido do usuário em 2026-09-09, que substitui o adiamento P1 decidido na rodada R21.

Como a adaptação funciona aqui

  • A pergunta 1 tem 2 tentativas. Ao errar, o console entra na trilha de reforço: a explicação da etapa 2 fica disponível na etapa 3 e a pergunta 2 é apresentada em versão com mais apoio e menos alternativas.
  • Ao acertar as duas perguntas na primeira tentativa, o console entra na trilha de aprofundamento e a pergunta 2 usa a versão com quatro alternativas.
  • O gabarito, as explicações dos distratores e a nota do professor ficam no fechamento do JavaScript e só são inseridos no DOM depois da resposta (ou apenas na visualização de professor). No produto, essa correção acontece no servidor.

Libras

  • O botão Libras carrega o VLibras, o avatar oficial de língua de sinais do governo brasileiro, sob demanda. É a mesma integração usada no painel de acessibilidade em /celepar/sim-demo/.
  • O avatar é a camada de apoio da interface. No produto, a Libras do conteúdo da aula é interpretação humana com revisão de pessoas surdas — o avatar não substitui essa interpretação.
  • O VLibras é um serviço: a tradução, o dicionário de sinais e a telemetria ficam em servidores do governo (vlibras.gov.br). Se ele não carregar, o texto e as respostas da missão permanecem completos.
  • O avatar tem movimento por natureza e por isso não é ativado automaticamente em baixo estímulo nem com prefers-reduced-motion. Quem precisa dele liga pelo botão.

Contratos de acessibilidade mantidos (R21)

  • Mesmo DOM em todos os modos: data-view, data-font, data-stim, data-contrast. Nenhuma cópia de conteúdo, nenhuma perda de resposta.
  • Refluxo em coluna única a 320 px, 150%, 200% e no modo leitura, sem transform: scale() e sem rolagem horizontal de página.
  • Troca de etapa move o foco para o título e anuncia “Etapa n de 5” em região status. Navegação só por botões explícitos anterior/próximo.
  • As áreas roláveis do console e do painel do professor recebem tabindex="0" para serem alcançáveis só com teclado.
  • Estado de resposta nunca é transmitido apenas por cor: cada alternativa corrigida recebe também a marca “Certo”, “Ainda não” ou “Resposta certa”.
  • Alvos de toque: todos os controles do produto (alternativas, registrar, anterior/próxima, CTAs verdes, navegação da jornada) têm 44 px ou mais. A barra cinza superior é chrome do protótipo, com 36 px, e não faz parte da interface do estudante.
  • Sem overflow horizontal de página: verificado em 100 combinações a 320 px (5 telas × 100%/150%/200% × jogo/leitura × estímulo × contraste), com as notas abertas.
  • Baixo estímulo e prefers-reduced-motion escondem barra de energia, ticker e recompensa, mantendo o estado de aprendizagem.

Fora do escopo deste protótipo

  • Esquema de produção LessonDocument.presentation, API e banco.
  • Conta de estudante, perfil de acessibilidade no servidor, roster real, reconexão real.
  • Validação manual com NVDA, VoiceOver e switch, e teste com estudantes de 5º ano.