Quiz Master é projeto web de um quiz interativo desenvolvido com HTML, CSS, JavaScript e JSON, voltado para estudantes do Ensino Médio.
O objetivo é testar conhecimentos em diversas matérias, oferecendo uma experiência dinâmica e visualmente agradável, totalmente responsiva e otimizada para dispositivos móveis (Mobile First).
- 📚 Todas as matérias do ensino médio — cada matéria contém 10 perguntas exclusivas.
- 🔄 Carregamento dinâmico de perguntas — o projeto utiliza fetch() para buscar as perguntas a partir de um arquivo JSON local.
- 💯 Sistema de pontuação automática — o quiz calcula o desempenho do usuário com base nas respostas corretas.
- 😀 Feedback interativo — ao final do quiz, o resultado é exibido com emojis da OpenMoji, indicando se o usuário foi bem ou precisa estudar mais.
- 📱 Design Mobile First — interface adaptada para celulares.
| Tecnologia | Função |
|---|---|
| HTML5 | Estrutura base do projeto |
| CSS3 | Estilização e responsividade |
| JavaScript (ES6+) | Lógica e interatividade |
| JSON | Armazenamento das perguntas e alternativas |
Acesse o projeto online:
👉 Quiz Interativo - Acessar Aqui
TELA INICIAL:
PERGUNTA EM EXECUÇÃO:
RESULTADO FINAL:
O quiz realiza um fetch() para o arquivo questions.json, que contém todas as perguntas organizadas por matéria.
As perguntas são carregadas dinamicamente conforme a matéria escolhida e exibidas uma a uma.
Ao final, a pontuação é calculada e o sistema exibe uma mensagem com emojis da OpenMoji correspondentes ao desempenho do jogador.
O layout foi desenvolvido com princípios de UX simples e diretos, garantindo:
- Foco total nas perguntas e respostas.
- Ícones e cores que reforçam o feedback visual.
- Interface fluida com media queries para adaptação em qualquer tela.
- ⏱️ Adicionar temporizador para o quiz.
- 🔥 Adicionar modos fácil, médio e díficil para selecionar.
Este projeto é de uso livre para fins educacionais.
Desenvolvido com por Erick Campos.