Sistema interativo de quiz para preparação de certificações técnicas, com suporte para questões AWS e COBIT.

• ✅ Quiz interativo com feedback imediato
• ✅ Suporte para múltiplas questões (AWS e COBIT)
• ✅ Sistema de grupos/partes (seleção de 3 grupos de 25 questões)
• ✅ Timer com funcionalidade de pausa/retomada
• ✅ Contadores de acertos e erros em tempo real
• ✅ Modais informativos em vez de alerts
• ✅ Design responsivo para dispositivos móveis
• ✅ Feedback visual com cores (verde = correto, vermelho = incorreto)
• ✅ Explicações para questões respondidas
• ✅ Sistema de histórico de tentativas
• ✅ Exportação de resultados para PDF
• ✅ Modo de revisão de questões
• ✅ Estatísticas detalhadas por tópico
• ✅ Sistema básico de login/usuários
• ✅ Banco de dados para armazenar resultados
• ✅ PWA (Progressive Web App) para instalação
• ✅ Testes E2E com Cypress
• ✅ Testes de acessibilidade automatizados

1. Clone o repositório:

git clone https://github.com/munizmath/Quizzes.git
cd Quizzes

2. Instale as dependências (opcional, para testes):

npm install

3. Para executar testes E2E:

npm run test:e2e
# ou para modo interativo:
npm run test:e2e:open

4. Para executar testes de acessibilidade:

npm run test:accessibility

5. Para servir localmente (para desenvolvimento):

npm run serve

1. Abra o arquivo index.html no seu navegador
2. Preencha seu nome e e-mail
3. Selecione o tipo de quiz desejado:
   • Quiz AWS: Para AWS Cloud Practitioner
   • Quiz COBIT: Para questões de Governança e Gerenciamento de TI
   • Quiz ITIL 4: Para ITIL 4 Foundations
   • Quiz AZ-900: Para Microsoft Azure Fundamentals
4. Clique em "Iniciar Prova"

1. Na página de seleção de grupos, clique nos botões "Grupo 1" até "Grupo 6" para selecionar até 3 grupos
   • Cada grupo contém 25 questões
   • Apenas combinações permitidas serão aceitas
   • Total máximo: 75 questões (3 grupos)
2. Clique em "Iniciar Quiz"

1. Responder Questões:

   • Clique nas opções para selecionar sua resposta
   • Questões de escolha única: 1 tentativa
   • Questões de múltipla escolha: 2 tentativas

2. Controles:

   • Pausar/Retomar: Pausa o timer do quiz
   • Enviar Respostas: Verifica respostas e mostra resultado
   • Reiniciar Quiz: Limpa todas as respostas e reinicia
   • Finalizar Quiz: Finaliza o quiz e mostra resultados
   • Ver Histórico: Acessa histórico de tentativas
   • Voltar à Página Inicial: Retorna à seleção de quiz

3. Timer:

   • 30 minutos para cada conjunto de questões selecionadas
   • Timer automático quando grupos são selecionados

4. Após Finalizar:

   • Visualize resultados e estatísticas
   • Exporte resultados para PDF
   • Acesse histórico de tentativas
   • Revise questões erradas

Quizzes/
├── index.html                    # Página inicial (formulário de dados)
├── select-groups.html            # Seleção de grupos de questões
├── quiz.html                     # Página principal do quiz
├── history.html                  # Histórico de tentativas
├── review.html                   # Modo de revisão de questões
├── manifest.json                 # Manifest PWA
├── sw.js                         # Service Worker (PWA)
├── package.json                  # Dependências e scripts
├── cypress.config.js             # Configuração Cypress
├── css/
│   └── styles.css                # Estilos consolidados
├── js/
│   ├── script.js                 # Lógica principal do quiz
│   ├── user-form.js              # Formulário de dados do usuário
│   ├── select-groups.js          # Seleção de grupos
│   ├── access-control.js         # Controle de acesso
│   ├── history.js                # Sistema de histórico
│   ├── history-page.js           # Página de histórico
│   ├── pdf-export.js             # Exportação para PDF
│   ├── review-mode.js            # Modo de revisão
│   ├── review-page.js            # Página de revisão
│   ├── stats.js                  # Estatísticas por tópico
│   ├── auth.js                   # Sistema de autenticação
│   └── pwa-install.js            # Instalação PWA
├── data/
│   ├── Questions_AWS.json       # Questões AWS
│   ├── Questions_COBIT.json    # Questões COBIT
│   ├── Questions_ITIL4.json    # Questões ITIL 4 Foundations
│   └── Questions_AZ900.json    # Questões AZ-900 Azure Fundamentals
├── cypress/
│   ├── e2e/
│   │   └── quiz.cy.js            # Testes E2E
│   └── support/
│       ├── e2e.js                # Suporte E2E
│       └── commands.js           # Comandos customizados
└── tests/
    ├── quiz.test.js              # Testes unitários
    ├── accessibility.test.js     # Testes de acessibilidade
    └── accessibility-runner.js    # Runner de testes

Cada arquivo JSON deve seguir este formato:

{
  "questions": [
    {
      "id": 1,
      "question": "Texto da pergunta?",
      "options": {
        "A": "Opção A",
        "B": "Opção B",
        "C": "Opção C",
        "D": "Opção D"
      },
      "correctAnswer": "A",
      "explanation": "Explicação opcional da resposta"
    }
  ]
}

• Escolha Única: correctAnswer é uma string (ex: "A")
• Múltipla Escolha: correctAnswer é um array (ex: ["A", "B"])

• Permite seleção de até 3 grupos de questões
• Cada grupo contém 25 questões
• Combinações permitidas são validadas
• Questões são embaralhadas automaticamente

• Contador de acertos em tempo real
• Contador de erros em tempo real
• Percentual mínimo configurável (padrão: 80%)
• Feedback visual imediato

• 30 minutos por conjunto de questões
• Pausa/retomada funcional
• Finalização automática ao término do tempo

• Acompanhamento de Progresso: Permite ao usuário ver sua evolução ao longo do tempo
• Identificação de Padrões: Mostra quais tipos de questões o usuário erra mais frequentemente
• Motivação: Visualizar melhorias ao longo do tempo aumenta a motivação para continuar estudando
• Análise de Desempenho: Identifica áreas que precisam de mais estudo
• Persistência: Dados salvos em IndexedDB com fallback para localStorage
• Acesse history.html para ver seu histórico completo

• Documentação: Usuário pode salvar resultados para referência futura
• Compartilhamento: Pode compartilhar resultados com professores, mentores ou colegas
• Certificação: Pode servir como comprovação de estudo para empregadores
• Análise Offline: Pode revisar resultados sem precisar estar online
• Exporte resultados após completar um quiz usando jsPDF (carregado dinamicamente)

• Aprendizado Eficiente: Focar apenas nas questões que o usuário errou
• Economia de Tempo: Não precisa refazer todo o quiz, apenas revisar erros
• Reforço de Aprendizado: Revisar questões erradas ajuda a fixar o conhecimento
• Análise Detalhada: Ver explicações e entender o porquê de cada erro
• Acesse através do histórico para revisar questões erradas

• Diagnóstico Preciso: Identifica exatamente quais áreas precisam de mais estudo
• Planejamento de Estudo: Permite criar um plano de estudo focado nas fraquezas
• Acompanhamento de Melhoria: Ver progresso em cada tópico individualmente
• Otimização de Tempo: Focar tempo de estudo onde realmente é necessário
• Visualize desempenho por tópico (EC2, S3, RDS, etc.)
• Receba recomendações de estudo baseadas em seu desempenho

• Personalização: Cada usuário tem seu próprio histórico e estatísticas
• Segurança de Dados: Protege informações pessoais e resultados
• Multi-usuário: Permite que várias pessoas usem o mesmo sistema
• Sincronização: Dados podem ser salvos na nuvem e acessados de qualquer dispositivo
• Sistema básico com IndexedDB e fallback para localStorage

• Persistência: Dados não são perdidos quando o navegador é fechado
• Análise Avançada: Permite análises complexas e relatórios detalhados
• Escalabilidade: Suporta muitos usuários simultaneamente
• Backup: Dados podem ser recuperados em caso de problemas
• IndexedDB com fallback para localStorage

• Experiência Nativa: Funciona como um app instalado no celular/tablet
• Acesso Offline: Pode funcionar sem internet (cache de questões)
• Notificações: Pode lembrar usuário de estudar
• Melhor Performance: Carrega mais rápido após primeira instalação
• Ícone no Desktop: Facilita acesso rápido
• Instale o quiz como aplicativo no seu dispositivo
• Funcione offline após primeira carga

• Testes E2E com Cypress: Testa todo o fluxo do usuário automaticamente
• Testes de Acessibilidade com axe-core: Detecta problemas de acessibilidade automaticamente
• Garantia de Qualidade: Previne regressões e garante que o sistema funciona corretamente
• Execute com npm run test:e2e e npm run test:accessibility

• HTML5
• CSS3 (com Flexbox e Media Queries)
• JavaScript (ES6+)
• JSON para armazenamento de dados
• IndexedDB para banco de dados
• localStorage para fallback
• jsPDF para exportação de PDF
• Service Worker para PWA
• Cypress para testes E2E
• axe-core para testes de acessibilidade

• ✅ Chrome/Edge (recomendado)
• ✅ Firefox
• ✅ Safari
• ✅ Dispositivos móveis (responsive)
• ✅ Leitores de tela (NVDA, JAWS, VoiceOver)
• ✅ Navegação por teclado completa

Este projeto pode ser hospedado gratuitamente no GitHub Pages usando uma conta gratuita!

Todas as 9 melhorias implementadas são 100% compatíveis com GitHub Pages:

1. ✅ Sistema de Histórico de Tentativas: IndexedDB funciona perfeitamente (HTTPS fornecido pelo GitHub Pages)
2. ✅ Exportação de Resultados para PDF: jsPDF carregado dinamicamente via CDN
3. ✅ Modo de Revisão de Questões: Puro JavaScript, funciona em qualquer ambiente
4. ✅ Estatísticas Detalhadas por Tópico: Puro JavaScript, funciona em qualquer ambiente
5. ✅ Sistema de Login/Usuários: IndexedDB funciona perfeitamente (HTTPS fornecido pelo GitHub Pages)
6. ✅ Banco de Dados (IndexedDB): GitHub Pages fornece HTTPS automaticamente
7. ✅ PWA (Progressive Web App): Service Worker e Manifest funcionam perfeitamente
8. ⚠️ Testes E2E (Cypress): Funciona localmente e em CI/CD (não executa no GitHub Pages)
9. ⚠️ Testes de Acessibilidade (axe-core): Funciona no navegador e em CI/CD

1. No seu repositório GitHub, vá em Settings (Configurações)
2. Role até a seção Pages (no menu lateral esquerdo)
3. Em Source, selecione:
   • Branch: main
   • Folder: / (root)
4. Clique em Save
5. Aguarde alguns minutos para o GitHub processar
6. Seu site estará disponível em: https://[seu-usuario].github.io/Quizzes/

• ✅ Repositório público: GitHub Pages gratuito só funciona com repositórios públicos
• ✅ Site estático: Este quiz é 100% estático (HTML/CSS/JS), perfeito para GitHub Pages
• ✅ Sem backend necessário: Todas as funcionalidades funcionam apenas no navegador
• ✅ Arquivos JSON: Funcionam normalmente via fetch() no GitHub Pages
• ✅ HTTPS: GitHub Pages fornece HTTPS automaticamente (necessário para IndexedDB e Service Worker)
• ✅ Caminhos dinâmicos: Service Worker e Manifest detectam caminho base automaticamente

• Tamanho do repositório: Até 1 GB
• Largura de banda: 100 GB por mês
• Builds: 10 builds por hora
• Repositório público necessário: Para usar o plano gratuito

Após publicar no GitHub Pages:

1. Acesse o site: https://seu-usuario.github.io/Quizzes/
2. Teste PWA:
   • Abra o DevTools → Application → Service Workers
   • Verifique se o Service Worker está registrado
   • Teste modo offline (DevTools → Network → Offline)
3. Teste Instalação:
   • No Chrome/Edge: ícone de instalação na barra de endereços
   • No mobile: prompt de instalação
4. Teste Histórico:
   • Complete um quiz
   • Acesse history.html
   • Verifique se o histórico foi salvo
5. Teste PDF:
   • Complete um quiz
   • Clique em "Exportar para PDF"
   • Verifique se o PDF é gerado

• ✅ Service Worker detecta caminho base automaticamente
• ✅ Manifest usa caminhos relativos (./)
• ✅ PWA Install detecta caminho base automaticamente
• ✅ Funciona com repositório de nome qualquer
• ✅ Funciona com subpasta (se configurado)
• ✅ Funciona na raiz do domínio (se configurado)

• Requisições: Requer HTTPS (GitHub Pages fornece automaticamente)
• Cache: Funciona apenas para recursos estáticos
• Atualizações: Pode precisar de refresh para detectar nova versão

• Limite: ~50% do espaço livre do disco (varia por navegador)
• HTTPS: Requer HTTPS (GitHub Pages fornece automaticamente)

• E2E: Não executa no GitHub Pages (apenas hospeda)
• Acessibilidade: Pode ser carregado no navegador, mas melhor em CI/CD

Se quiser executar testes automaticamente:

# .github/workflows/tests.yml
name: Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - run: npm run test:e2e
      - run: npm run test:accessibility

1. ✅ Tag <h1> não fechada corrigida
2. ✅ Referências case-sensitive corrigidas (quiz.js → script.js)
3. ✅ Valores CSS inválidos corrigidos (margin-left: 2 → removido)
4. ✅ CSS duplicado consolidado
5. ✅ Código JavaScript modernizado (ES6)
6. ✅ Tratamento de erros em fetch()
7. ✅ Prevenção de XSS com escapeHtml()
8. ✅ Modais em vez de alerts()
9. ✅ Proteção de acesso ao quiz.html
10. ✅ Atributos ARIA atualizados dinamicamente
11. ✅ Navegação por teclado implementada

• ✅ Atributos ARIA em todos os elementos interativos
• ✅ Navegação completa por teclado (Tab, Enter, Esc, Espaço)
• ✅ Contraste de cores melhorado (WCAG AA)
• ✅ Tamanho mínimo de toque (44x44px) para acessibilidade
• ✅ Foco visível em todos os elementos
• ✅ Regiões ao vivo para leitores de tela
• ✅ Estrutura semântica HTML5
• ✅ Skip links para navegação rápida
• ✅ Notificações para leitores de tela
• ✅ Labels e descrições adequadas

• ✅ Testes unitários básicos implementados
• ✅ Testes de validação de combinações
• ✅ Testes de cálculo de pontuação
• ✅ Testes de formatação de timer
• ✅ Testes de escape HTML (prevenção XSS)
• ✅ Testes de estrutura JSON
• ✅ Sistema de testes executável no navegador
• ✅ Documentação de testes em tests/README.md
• ✅ Testes E2E com Cypress
• ✅ Testes de acessibilidade com axe-core

• ✅ Proteção de acesso: quiz.html só acessível via index.html
• ✅ Prevenção de XSS com escapeHtml()
• ✅ Validação de entrada do usuário

• ✅ Sistema de histórico de tentativas (IndexedDB + localStorage fallback)
• ✅ Exportação de resultados para PDF (jsPDF)
• ✅ Modo de revisão de questões (apenas questões erradas)
• ✅ Estatísticas detalhadas por tópico
• ✅ Sistema básico de login/usuários (IndexedDB + localStorage fallback)
• ✅ Banco de dados para armazenar resultados (IndexedDB)
• ✅ PWA (Progressive Web App) para instalação (manifest.json + service worker)
• ✅ Testes E2E com Cypress
• ✅ Testes de acessibilidade automatizados (axe-core)

Por que implementar?

• Acompanhamento de Progresso: Permite ao usuário ver sua evolução ao longo do tempo
• Identificação de Padrões: Mostra quais tipos de questões o usuário erra mais frequentemente
• Motivação: Visualizar melhorias ao longo do tempo aumenta a motivação para continuar estudando
• Análise de Desempenho: Identifica áreas que precisam de mais estudo

Como usar:

• Acesse history.html para ver seu histórico completo
• Visualize todas as tentativas anteriores
• Veja estatísticas de desempenho ao longo do tempo
• Compare desempenho entre diferentes sessões de estudo

Por que implementar?

• Documentação: Usuário pode salvar resultados para referência futura
• Compartilhamento: Pode compartilhar resultados com professores, mentores ou colegas
• Certificação: Pode servir como comprovação de estudo para empregadores
• Análise Offline: Pode revisar resultados sem precisar estar online

Como usar:

• Exporte resultados para PDF após completar um quiz
• Gere relatórios detalhados com todas as questões
• Compartilhe resultados facilmente
• Crie relatórios de estudo para apresentar em entrevistas

Por que implementar?

• Aprendizado Eficiente: Focar apenas nas questões que o usuário errou
• Economia de Tempo: Não precisa refazer todo o quiz, apenas revisar erros
• Reforço de Aprendizado: Revisar questões erradas ajuda a fixar o conhecimento
• Análise Detalhada: Ver explicações e entender o porquê de cada erro

Como usar:

• Revise apenas questões que você errou
• Foque em áreas que precisam de melhoria
• Acesse através do histórico
• Estudar especificamente os tópicos onde teve dificuldade

Por que implementar?

• Diagnóstico Preciso: Identifica exatamente quais áreas precisam de mais estudo
• Planejamento de Estudo: Permite criar um plano de estudo focado nas fraquezas
• Acompanhamento de Melhoria: Ver progresso em cada tópico individualmente
• Otimização de Tempo: Focar tempo de estudo onde realmente é necessário

Como usar:

• Visualize desempenho por tópico (EC2, S3, RDS, etc.)
• Identifique áreas fracas e fortes
• Receba recomendações de estudo baseadas em seu desempenho
• Crie plano de estudo personalizado baseado em dados reais

Por que implementar?

• Personalização: Cada usuário tem seu próprio histórico e estatísticas
• Segurança de Dados: Protege informações pessoais e resultados
• Multi-usuário: Permite que várias pessoas usem o mesmo sistema
• Sincronização: Dados podem ser salvos na nuvem e acessados de qualquer dispositivo

Como usar:

• Professores podem criar contas para seus alunos
• Empresas podem usar para treinamento de equipes
• Usuário pode acessar de qualquer dispositivo (celular, tablet, PC)
• Dados protegidos e privados para cada usuário

Por que implementar?

• Persistência: Dados não são perdidos quando o navegador é fechado
• Análise Avançada: Permite análises complexas e relatórios detalhados
• Escalabilidade: Suporta muitos usuários simultaneamente
• Backup: Dados podem ser recuperados em caso de problemas

Como usar:

• Histórico de meses ou anos de tentativas
• Análises estatísticas avançadas
• Relatórios para gestores de treinamento
• Comparação de desempenho entre usuários

Por que implementar?

• Experiência Nativa: Funciona como um app instalado no celular/tablet
• Acesso Offline: Pode funcionar sem internet (cache de questões)
• Notificações: Pode lembrar usuário de estudar
• Melhor Performance: Carrega mais rápido após primeira instalação
• Ícone no Desktop: Facilita acesso rápido

Como usar:

• Instale o quiz como aplicativo no seu dispositivo
• Funcione offline após primeira carga
• Receba lembretes para estudar
• Acesso rápido com um toque no ícone

Por que implementar?

• Garantia de Qualidade: Testa todo o fluxo do usuário automaticamente
• Prevenção de Regressões: Detecta se novas funcionalidades quebraram algo existente
• Confiança em Deploys: Saber que o sistema funciona antes de publicar
• Documentação Automática: Os testes servem como documentação do comportamento esperado
• Economia de Tempo: Testes automáticos são mais rápidos que testes manuais

Como usar:

• Execute npm run test:e2e para rodar testes
• Execute npm run test:e2e:open para modo interativo
• Testa automaticamente: "Preencher formulário → Selecionar grupos → Fazer quiz → Ver resultado"

Por que implementar?

• Conformidade Legal: Atende requisitos de acessibilidade (WCAG, ADA)
• Inclusão: Garante que pessoas com deficiência possam usar o sistema
• Qualidade: Detecta problemas de acessibilidade automaticamente
• Prevenção: Evita introduzir problemas de acessibilidade em novas features
• Profissionalismo: Demonstra compromisso com inclusão

Como usar:

• Execute npm run test:accessibility para rodar testes
• Detecta automaticamente problemas de contraste, ARIA, etc.
• Encontra problemas antes que usuários reclamem

• Tab: Navegar entre elementos
• Enter: Ativar botão/links focados
• Espaço: Pausar/Retomar timer (quando focado no botão)
• Esc: Fechar modais
• Skip Link: Pressione Tab na página do quiz para pular para o conteúdo principal

1. Abra o quiz no navegador
2. Abra o Console do Desenvolvedor (F12)
3. Clique no botão "Executar Testes" no canto inferior direito
4. Veja os resultados no console

cd tests
npm install
npm test

npm run test:e2e
# ou para modo interativo:
npm run test:e2e:open

npm run test:accessibility

Veja mais detalhes em tests/README.md.

1. Modo de Revisão de Questões - Aumenta muito a eficiência do estudo
2. Estatísticas Detalhadas por Tópico - Permite estudo focado e eficaz
3. Sistema de Histórico - Fundamental para acompanhar progresso

4. Exportação para PDF - Útil para documentação e compartilhamento
5. PWA - Melhora experiência mobile significativamente
6. Sistema de Login - Necessário para multi-usuário e sincronização

7. Banco de Dados - Necessário para escalar e funcionalidades avançadas
8. Testes E2E - Importante para qualidade, mas não afeta usuário final diretamente
9. Testes de Acessibilidade - Importante para compliance, mas já temos boa base

Cada melhoria tem um propósito específico:

• Melhorias de Conteúdo: Histórico, Estatísticas, Revisão - Ajudam usuário a estudar melhor
• Melhorias de Experiência: PDF, PWA, Login - Tornam o sistema mais conveniente
• Melhorias de Infraestrutura: Banco de Dados, Testes - Permitem escalar e manter qualidade

A escolha de quais implementar depende de:

• Objetivo do projeto (pessoal, educacional, comercial)
• Recursos disponíveis (tempo, dinheiro, pessoal)
• Público-alvo (indivíduos, empresas, instituições)
• Escala esperada (poucos usuários vs. muitos usuários)

Todas as melhorias são desejáveis, mas nem todas são essenciais para o funcionamento básico do quiz. O sistema atual já funciona muito bem para estudo individual!

Este projeto é de uso livre para fins educacionais.

Desenvolvido para preparação de certificações técnicas.