🧠 Projeto Quiz Interativo

📸 Demonstração

• Demostração

Bem-vindo ao projeto de Quiz Interativo! Este é um projeto básico em HTML, CSS e JavaScript que simula um quiz de perguntas e respostas, ideal para iniciantes na programação. 🎉

🚀 Funcionalidades

* Iniciar o quiz com um botão de início.
* Exibir perguntas de forma aleatória a cada rodada.
* Embaralhar as alternativas de resposta para cada pergunta.
* Marcar visualmente respostas corretas e incorretas (✅ e ❌).
* Exibir a pontuação ao final do quiz com uma mensagem de desempenho.

🎨 Layout

Este projeto utiliza um estilo simples e limpo, com um layout centrado na página. O plano de fundo é um gradiente de cores suaves, criando uma experiência visual agradável. A interface foi projetada para ser fácil de usar e intuitiva.

🛠️ Tecnologias Utilizadas

* HTML: Estrutura da página e conteúdo principal. * CSS: Estilização e layout da interface. * JavaScript: Lógica do quiz, manipulação DOM e interação com o usuário.

⚙️ Como Usar

1. Clone este repositório:

   git clone https://github.com/seu-usuario/quiz-interativo.git

2. Configure um Servidor Local

* Para rodar o quiz corretamente em um servidor local, recomendamos usar a extensão Live Server no Visual Studio Code (VS Code):

1. Abra o projeto no VS Code.
- No VS Code, instale a extensão Live Server:
- Vá até a aba Extensões (ícone de quadrado no menu lateral).
- Pesquise por "Live Server" e instale a extensão criada por Ritwick Dey.

- Com o projeto aberto, clique com o botão direito no arquivo index.html e selecione Open with Live Server.
- O Live Server abrirá o projeto automaticamente no seu navegador padrão, em um endereço local (geralmente http://127.0.0.1:5500/).

3. Usando o Quiz

* Clique em "Iniciar Quiz" para começar a responder as perguntas.
* Após selecionar uma resposta para uma pergunta, o quiz bloqueará as opções, garantindo que você não altere a resposta depois.
* Clique em "Próxima Pergunta" para continuar até completar as 10 questões.
* No final, o quiz exibirá uma mensagem de desempenho com uma avaliação divertida baseada no número de respostas corretas.
* Caso deseje, clique em "Fazer Novo teste?" para refazer o quiz. As perguntas serão reorganizadas aleatoriamente e as respostas também serão embaralhadas, proporcionando uma nova experiência.

📂 Estrutura do Projeto

quiz-interativo/
├── index.html      # Estrutura HTML da página
├── style.css       # Estilos CSS para layout e aparência
├── index.js        # Lógica do quiz e manipulação DOM
└── README.md       # Documentação do projeto

📜 Exemplo de Código

function startGame() {
  $startGameButton.classList.add("hide");
  $questionsContainer.classList.remove("hide");
  shuffleArray(questions); // Embaralha as perguntas
  displayNextQuestion();
}

🎉 Contribuição

Sinta-se à vontade para contribuir com melhorias, correções ou novos recursos para o projeto. Basta abrir uma pull request ou criar uma issue com sua sugestão!

📝 Licença

Este projeto está sob a licença MIT. Sinta-se à vontade para usá-lo e modificá-lo.