Aplicação interativa de perguntas técnicas sobre programação, com design sci-fi, timer por questão e feedback imediato de acertos e erros.
O Tech Quiz é uma aplicação web 100% front-end desenvolvida com HTML, CSS e JavaScript puro. O objetivo é testar conhecimentos em tecnologias de programação de forma dinâmica e visualmente atrativa, com um tema dark sci-fi e efeitos animados.
- 🔐 Tela de login com nome e senha numérica
- ❓ 15 perguntas embaralhadas a cada nova partida
- ⏱️ Timer de 30 segundos por questão com barra de progresso animada
- ✅ Feedback imediato — destaca a resposta correta em verde e a errada em vermelho
- 📢 Mensagem explicativa mostrando qual era a resposta certa ao errar
- ⏰ Timeout — ao esgotar o tempo, mostra a resposta correta automaticamente
- 🏆 Tela de resultado com pontuação, estrelas e mensagem personalizada
- 🔀 Perguntas aleatórias a cada rodada (nunca a mesma ordem)
- 📱 Responsivo para mobile e desktop
| Categoria | Exemplos de Tópicos |
|---|---|
| ☕ Java | Linguagem, Spring Boot, Spring Security |
| 🌐 API | REST, JWT, Status HTTP (401, 404...) |
| 🔷 C# / .NET | Plataforma .NET, ASP.NET |
| 🐍 Python | Sintaxe, funções |
| 🗄️ Banco de Dados | SQL, conceitos |
| 🛠️ Ferramentas | Docker, IntelliJ IDEA, Clean Code |
| 🏗️ Arquitetura | Microsserviços, padrões |
- Acesse o projeto e insira seu nome e uma senha numérica
- Clique em INICIAR QUIZ
- Responda cada pergunta antes do timer zerar
- Veja o feedback imediato após cada resposta
- Confira sua pontuação final e o número de estrelas conquistadas
| Acertos | Estrelas | Título |
|---|---|---|
| 13 – 15 | ⭐⭐⭐ | Mestre do Código 🏆 |
| 9 – 12 | ⭐⭐ | Desenvolvedor(a) 🚀 |
| 6 – 8 | ⭐ | Quase lá! 📚 |
| 0 – 5 | ⭐ | Continue Tentando 💡 |
- HTML5 — estrutura da aplicação
- CSS3 — animações, efeitos visuais, design responsivo
- JavaScript (Vanilla) — lógica do quiz, timer, embaralhamento
- Google Fonts — fontes Orbitron e Rajdhani
tech_quiz/
│
└── index.html # Aplicação completa (HTML + CSS + JS em um único arquivo)
# Clone o repositório
git clone https://github.com/Mgrsantos/tech_quiz.git
# Acesse a pasta
cd tech_quiz
# Abra o arquivo no navegador
# Basta abrir o index.html diretamente no browser!Não precisa de servidor, instalação ou dependências. É 100% estático! ✅
Contribuições são bem-vindas! Se quiser sugerir novas perguntas ou melhorias:
- Faça um fork do projeto
- Crie uma branch:
git checkout -b feature/nova-pergunta - Commit suas mudanças:
git commit -m 'feat: adiciona perguntas sobre X' - Push para a branch:
git push origin feature/nova-pergunta - Abra um Pull Request
Gabriela Rondon
Feito com 💜 por Gabriela Rondon