Skip to content
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

100 Commits
 
 
 
 
 
 

Repository files navigation

Banner quiz sobre Baleias

🐳 Quiz sobre Baleias

Teste os seus conhecimentos e aprenda mais sobre esses majestosos mamíferos marinhos com nosso divertido quiz desenvolvido em HTML, CSS e JavaScript!

Status: Concluído 🚀


📋 Tabela de Conteúdos


💻 Sobre o projeto

🐋 Esse quiz é um projeto de final de módulo desenvolvido para aplicar o conhecimento adquirido durante o Módulo 1 do Programadores do Amanhã. Nosso objetivo é fornecer um meio divertido e educativo para as pessoas aprenderem sobre esses magníficos animais e conscientizar sobre a importância da preservação das baleias e dos oceanos.

O quiz consiste em cinco perguntas de múltipla escolha, abordando diversos aspectos das baleias, como sua biologia, ecologia, comportamento e cultura. Cada pergunta apresenta quatro alternativas, sendo apenas uma a resposta correta. O participante avança para a próxima pergunta ao responder corretamente e retorna ao início em caso de resposta incorreta. Portanto, o objetivo é completar o quiz sem cometer erros.

Através deste projeto, esperamos transmitir informações valiosas de forma envolvente e desafiadora, assim despertando um interesse duradouro pela preservação desses seres incríveis e do meio ambiente marinho, além de testar os conhecimentos dos usuários sobre as baleias e ensinar novas curiosidades e fatos sobre elas.


⚙️ Funcionalidades

  • Tela inicial: Ao clicar no botão "Começar", os usuários devem inserir um nome válido para iniciar o quiz.
  • Progressão do Quiz: Os usuários avançam pelas perguntas, respondendo corretamente ou retornando à tela "tente novamente" ao responderem incorretamente.
  • Verificação de Respostas: Quando uma resposta é selecionada, o sistema verifica se está correta. Se a resposta estiver correta, a contagem de respostas corretas aumenta e o usuário avança para a próxima pergunta. Caso contrário, um feedback de erro é exibido.
  • Tente novamente: Ao errar uma pergunta é exibido um feedback de erro, com a contagem de respostas corretas e erradas, juntamente com a opção de tentar novamente.
  • Tela final: Completar todas as perguntas com sucesso resulta em uma mensagem de vitória, exibindo o número total de respostas corretas e a uma opção para reiniciar o quiz.
  • Sistema de pontuação: O usuário recebe um ponto por cada resposta certa e perde todos os pontos se errar alguma resposta.
  • Design responsivo: O layout do site se ajusta de acordo com o tamanho da tela do dispositivo.

🎨 Layout

📱 Mobile

layoutMobile layoutMobile

🖥️ Web

NextLevelWeek


🎮 Como Jogar

  1. Acesse o link do site para iniciar o quiz.
  2. Digite seu nome para começar.
  3. Responda as perguntas de múltipla escolha que aparecerão na tela. Cada pergunta tem quatro alternativas, mas apenas uma é a correta.
  4. Se você acertar a resposta, você ganha um ponto e avança para a próxima pergunta. Se você errar, você perde todos os pontos e volta para o início.
  5. O jogo termina quando você responder corretamente as cinco perguntas.
  6. Você pode jogar quantas vezes quiser, basta clicar em "Reiniciar" na tela final.

Será se você consegue chegar até o final sem errar? 💯


🛠️ Tecnologias utilizadas

HTML CSS JavaScript Firebase


🚀 Como executar localmente

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git e Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.

👨‍💻 Rodando a aplicação:

# 1. Instale o Git no seu computador, caso ainda não tenha.

# 2. Abra o terminal ou o prompt de comando e clone este repositório.

git clone https://github.com/Paulo-Ricard0/Quiz-Baleias.git

# 3. Acesse a pasta do projeto no seu terminal/cmd.

cd Quiz-Baleias

# 4. Instale o Node.js no seu computador, caso ainda não tenha.

# 5. Acesse a pasta public do projeto no seu terminal/cmd.

cd public

# 6. Execute o comando.

npx http-server

# 7. Isso vai iniciar o servidor local na porta 8080 e mostrar o endereço no terminal.

# 8. Acesse o site localmente digitando http://localhost:8080 ou http://127.0.0.1:8080 no seu navegador.

# 9. Ou se preferir pode executar usando a extensão "Live server" no VSCODE.

Pronto! Agora você pode ver e modificar o projeto na sua máquina.


🤝 Colaboradores

Este projeto foi desenvolvido com a colaboração de:

Foto Paulo Ricardo
Paulo Ricardo

Foto Wagner Gomes
Wagner Gomes

Foto Geovanna Mickaella
Geovanna Mickaella

Foto Flavya Devereas
Flavya Devereas

Foto Thamires Alves
Thamires Alves

Foto Ingrid Oliveira
Ingrid Oliveira

Obrigado a todos os membros da equipe por suas contribuições! 💙


💪 Como contribuir para o projeto

  1. Faça um fork deste repositório e clone o seu fork localmente.
  2. Crie um branch para as suas alterações usando o comando git checkout -b nome-do-branch.
  3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature". Siga as convenções de commit
  4. Faça um push do seu branch para o seu fork usando o comando git push origin nome-do-branch.
  5. Abra um pull request para este repositório e descreva as suas alterações.

Se você deseja contribuir para este projeto, fique à vontade para enviar pull requests. Toda contribuição é bem-vinda!


📝 Licença

Este projeto esta sobe a licença MIT.


Divirta-se jogando o quiz e aprendendo sobre as maravilhas das baleias! 🐋

voltar ao topo

About

Teste os seus conhecimentos e aprenda mais sobre esses majestosos mamíferos marinhos com nosso divertido quiz desenvolvido em HTML, CSS e JavaScript!

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages