📌 Refatoração da Funcionalidade de Cadastro e Renderização de Questões

[FernandoAlmeidaPinto]

🔍 Visão Geral

No projeto Você na Facul, a funcionalidade de Simulado consome questões cadastradas no módulo do Banco de Questões. Atualmente, a experiência de cadastro e renderização dessas questões está funcional, mas limitada tanto do ponto de vista pedagógico quanto técnico. Isso nos impede de escalar a criação de questões inéditas, bem como prejudica a qualidade da experiência dos estudantes.

Dado esse cenário, propomos uma refatoração estrutural na forma como lidamos com o cadastro, a organização de metadados, a renderização e a reutilização das questões no sistema.

🎯 Objetivos

• Melhorar a flexibilidade na criação de questões (ENEM ou inéditas);
• Garantir acessibilidade e padronização na exibição das questões;
• Facilitar o trabalho de quem cadastra com uma interface mais organizada;
• Prover suporte a LaTeX e Markdown, incluindo uso de imagens posicionadas dinamicamente;
• Separar responsabilidades entre conteúdo, metadados e arquivos de apoio para maior escalabilidade.

🧱 Estado Atual

1. Cadastro da Questão

Hoje, o cadastro é feito em um único modal (vide imagem anexa), e a estrutura da questão no backend é extensa, contendo:

- Texto da questão e alternativas
- Imagem principal da questão (geralmente vinda da prova do ENEM)
- Metadados: área do ENEM, matéria, frentes, prova, número

2. Renderização atual no Simulado

Atualmente, a renderização da questão no simulado usa apenas uma imagem estática da prova original (armazenada como imageId). Não estamos utilizando o conteúdo textual nem as imagens individuais de alternativas.

🧭 Proposta de Refatoração

✅ 1. Suporte a Markdown e LaTeX

• Permitir que o textoQuestao aceite formatação Markdown e expressões em LaTeX, com preview direto no modal.
• Isso nos permitirá elaborar questões mais ricas, com tabelas, listas, ênfases e fórmulas.

✅ 2. Uso de imagens dentro do conteúdo da questão

• As imagens poderão ser inseridas dinamicamente via marcação, usando as imagens previamente carregadas no campo files[].

• Exemplo de uso no texto:

Considere o gráfico abaixo:

![Gráfico de barras](image:file1.png)

• Somente imagens cadastradas no campo files[] poderão ser usadas, garantindo controle sobre o conteúdo.

✅ 3. Alternativas com imagem

• Suporte nativo a imagens para cada alternativa, via campos imageAlternativaA até imageAlternativaE.
• Isso viabiliza questões visuais com gráficos, mapas, trechos de código, etc.

✅ 4. Novo fluxo de cadastro em etapas (Multi-aba)

Dividiremos o cadastro em etapas organizadas por abas, cada uma com responsabilidade clara:

• Aba 1: Conteúdo da Questão

  • Texto da questão (Markdown/LaTeX com preview)
  • Pergunta (separada do texto de base)
  • Alternativas (texto + imagem)

• Aba 2: Metadados

  • Classificação da questão (ENEM, matéria, frentes, número, prova)
  • Status (pendente, aprovado, recusado)

• Aba 3: Imagens

  • Upload e gerenciamento de imagens (files[])
  • Visualização das imagens disponíveis para usar no conteúdo
  • Validação: só imagens presentes aqui podem ser usadas no Markdown

A organização pode ser revista e discutida. Acima é mais um exemplo de uma primeira discussão.

📈 Impacto Esperado

• Criação mais eficiente e padronizada de questões;
• Facilidade de manutenção e reaproveitamento dos dados;
• Melhor usabilidade para quem cadastra as questões;
• Possibilidade de simulado com questões inéditas e interativas;
• Estrutura pronta para recursos de acessibilidade e responsividade futura.

🧠 Dúvidas e pontos para alinhamento

1. Queremos permitir múltiplos formatos de renderização para uma mesma questão (imagem da prova + versão textual)?
   → Exemplo: caso a imagem original do ENEM exista, ainda assim renderizar a questão pelo texto, com fallback?

2. Vamos exigir a criação de perguntas separadas do texto base (campo pergunta) em todos os casos?
   → Isso ajuda na estruturação, mas pode ser incômodo em questões mais diretas.

3. Para o Markdown com imagens, vamos adotar uma nomenclatura fixa para as referências (ex: image:file1.png)?
   → Isso impacta a validação do parser.

4. Como será a visualização da questão completa no frontend após essa mudança?
   → Ex: queremos permitir um modo "preview" antes de salvar?

Ficamos no aguardo dos comentários da equipe pedagógica, técnica e de UX/UI para dar continuidade ao desenho da nova interface e lógica de renderização.