Quizz Make

Framework para criação de quizzes interativos com compartilhamento de resultados.

Características Principais

• Zero dependências - JavaScript puro, sem bibliotecas externas
• Tema claro/escuro - Alternância automática baseada na preferência do usuário
• Totalmente responsivo - Funciona perfeitamente em desktop e mobile
• Animações suaves - Transições fluidas usando Web Animations API
• Compartilhamento de resultados - Links únicos para compartilhar pontuações
• Persistência automática - Salva progresso no localStorage
• Acessível - Suporte completo a leitores de tela e navegação por teclado
• Não invasivo - Não interfere no CSS/JS existente do seu site
• Navegadores Suportados - Chrome 60+, Firefox 55+, Safari 12+, Edge 79+

Instalação Rápida

Via CDN (Recomendado)

Adicione os arquivos via CDN diretamente no seu HTML:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gmasson/quizz-make@main/quizz-make.min.css">

<!-- JavaScript -->
<script type="module">
  import QuizzMake from 'https://cdn.jsdelivr.net/gh/gmasson/quizz-make@main/quizz-make.min.js';
  
  document.addEventListener('DOMContentLoaded', () => {
    new QuizzMake({ selector: '#meu-quiz' });
  });
</script>

Download Manual

1. Baixe os arquivos
2. Inclua-os no seu projeto
3. Importe e inicialize os arquivos quizz-make.min.css e quizz-make.min.js conforme o exemplo acima

Uso Básico

1. Estrutura HTML

<div id="meu-quiz" class="qm-container">
  <!-- Cabeçalho -->
  <header class="qm-header">
    <h1>Meu Quiz Incrível</h1>
    <div class="qm-controls">
      <button class="qm-theme-toggle" title="Alternar Tema">🌙</button>
      <button class="qm-reset-btn" title="Reiniciar">🔄</button>
    </div>
  </header>

  <!-- Área do Quiz -->
  <div class="qm-quiz-area">
    <!-- Barra de Progresso -->
    <div class="qm-progress">
      <div class="qm-progress-bar"></div>
    </div>

    <!-- Perguntas -->
    <div class="qm-questions-wrapper">
      <div class="qm-question">
        <h2>Qual é a capital do Brasil?</h2>
        <p>Cidade planejada construída no século XX.</p>
        <div class="qm-answers-grid">
          <button class="qm-answer" data-points="10" qm-save="q1">Brasília</button>
          <button class="qm-answer" data-points="0" qm-save="q1">Rio de Janeiro</button>
          <button class="qm-answer" data-points="0" qm-save="q1">São Paulo</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Resultados -->
  <div class="qm-result">
    <div class="qm-result-card">
      <div class="qm-result-content" data-min-score="0">
        <h2>Resultado Básico</h2>
        <p>Continue estudando!</p>
      </div>
      <div class="qm-result-content" data-min-score="8">
        <h2>Bom Resultado</h2>
        <p>Você está no caminho certo!</p>
      </div>
      
      <p class="qm-final-score-label">Sua pontuação:</p>
      <span id="qm-final-score" class="qm-final-score-number">0</span>
      
      <!-- Compartilhamento -->
      <div class="qm-share-area">
        <p>Compartilhe seu resultado:</p>
        <div class="qm-share-input-wrapper">
          <input type="text" readonly class="qm-share-link-input">
          <button class="qm-copy-btn">Copiar</button>
        </div>
        <span class="qm-copy-feedback"></span>
      </div>
    </div>
  </div>
</div>

2. Inicialização JavaScript

import QuizzMake from './quizz-make.min.js';

// Inicialização básica
const quiz = new QuizzMake({
  selector: '#meu-quiz'
});

Atributos e Classes

Atributos das Respostas

• data-points="10" - Pontos atribuídos à resposta
• qm-save="q1" - Chave para salvar a resposta no localStorage

Classes CSS Principais

• .qm-container - Container principal do quiz
• .qm-question - Pergunta individual
• .qm-answer - Botão de resposta
• .qm-result-content - Conteúdo condicional do resultado
• data-min-score="10" - Pontuação mínima para exibir o resultado

Personalização

Variáveis CSS

O Quizz Make usa CSS Custom Properties para fácil personalização:

:root {
  /* Cores principais */
  --qm-color-primary: #5a67d8;
  --qm-color-success: #38a169;
  --qm-color-bg: #f0f2f5;
  
  /* Tipografia */
  --qm-font-family: 'Segoe UI', sans-serif;
  --qm-font-size-base: 1rem;
  
  /* Espaçamentos */
  --qm-spacing-unit: 1rem;
  --qm-border-radius: 12px;
  
  /* Animações */
  --qm-transition-speed: 0.3s;
}

Tema Escuro

O tema escuro é ativado automaticamente baseado na preferência do sistema ou pode ser alternado pelo usuário:

[data-theme="dark"] {
  --qm-color-bg: #1a202c;
  --qm-color-surface: #2d3748;
  --qm-color-primary: #7f5ad5;
}

API JavaScript

Métodos Públicos

const quiz = new QuizzMake({ selector: '#quiz' });

// Reiniciar o quiz
quiz.resetQuiz();

// Alternar tema
quiz.toggleTheme();

// Copiar link de compartilhamento
quiz.copyShareLink();

Eventos Personalizados

O Quizz Make dispara eventos personalizados que você pode escutar:

document.addEventListener('quizz-make:question-answered', (event) => {
  console.log('Pergunta respondida:', event.detail);
});

document.addEventListener('quizz-make:quiz-completed', (event) => {
  console.log('Quiz finalizado:', event.detail);
});

Exemplos Avançados

Quiz com Imagens

<button class="qm-answer" data-points="10" qm-save="q2">
  <img src="logo-javascript.png" alt="Logo JavaScript">
  <span>JavaScript</span>
</button>

Resultados Condicionais

<!-- Resultado para pontuação baixa (0-5) -->
<div class="qm-result-content" data-min-score="0">
  <h2>Precisa melhorar</h2>
  <p>Continue estudando os conceitos básicos.</p>
</div>

<!-- Resultado para pontuação média (6-15) -->
<div class="qm-result-content" data-min-score="6">
  <h2>Bom trabalho!</h2>
  <p>Você tem uma base sólida.</p>
</div>

<!-- Resultado para pontuação alta (16+) -->
<div class="qm-result-content" data-min-score="16">
  <h2>Excelente!</h2>
  <p>Você domina o assunto!</p>
</div>

Contribuindo

Contribuições são bem-vindas! Para contribuir:

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature)
3. Commit suas mudanças (git commit -am 'Adiciona nova feature')
4. Push para a branch (git push origin feature/nova-feature)
5. Abra um Pull Request

Problemas Conhecidos

• Animações podem não funcionar em navegadores muito antigos
• Compartilhamento requer HTTPS em produção
• localStorage tem limite de ~5MB por domínio

Suporte

• Issues: GitHub Issues

Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.