luccazx12/mpb-quiz

Quiz sobre músicas brasileiras organizado em CARDS que consomem dados de um JSON.

MPB QUIZ

Trabalho Acadêmico da matéria LIMA realizado Individualmente para fechamento do primeiro semestre do Curso Técnico de Desenvolvimento de Sistemas do Senai. Quiz contendo HTML, CSS, JS e JSON.

O "MPB" Quiz se trata de um jogo de múltiplas escolhas baseado nas Músicas populares Brasileiras, fazendo uma brincadeira com o gênero MPB, onde o usuário tem que adivinhar qual é a música ou o cantor através de um Videoclipe. O site conta com várias funcionalidades, a partir das imagens abaixo, vou explicar como jogar o jogo, registrar seu score e disputar com outras pessoas!!

  Link do jogo: https://luccazx12.github.io/mpb-quiz/mpb_quiz/index.html

 

Manual

 

Para Melhor Vizualização:

 

OBS: O jogo inicia com volume mudo. Altere o volume após entrar no jogo, recomendo deixar um valor baixo!!!

 

 

 

Wireframe

  Página Inicial (index.html)

 

Perguntas e Respostas (jogo.html)

 

Parte de registrar os pontos no seu usuário (end.html)

 

Ranking (recordes.html)

 

 

INTRODUÇÃO

Nos foi solicitado a criação de um site responsivo que com utilização de Html, JavaScript e CSS formaria assim um quiz de perguntas e respostas sobre quaisquer temas que escolhêssemos.

No começo confesso que fiquei meio perdido em relação aos temas, queria fazer algo diferente e que me trouxesse algum desafio. E por isso decidi fazer um Quiz que utilizasse de vídeos e do JSON para consumir os dados que faziam parte do meu Quiz.

Para isso, primeiramente pensei sobre o projeto e desenvolvi um WireFrame sobre o que pensava em fazer, depois pesquisei as músicas e deixei elas com um tamanho reduzido para conseguir alocar localmente. Após isso, comecei a desenvolver meu JSON e o consumi para printar o Título, vídeo e as alternativas na tela dentro do meu card.

Logo após, foquei nas estruturas de decisão para conseguir validar as perguntas, a parte de redirecionamento e o LocalStorage para conseguir guardar localmente a pontuação obtida pelo usuário.

CONCLUSÃO

Executar essa série de passos para conseguir formular um site de um Quiz, que mesmo sendo básico é algo trabalhoso, me trouxe bastante conhecimento sobre consumir informações de um banco de dados, ou então pelo menos uma ideia do que vem pela frente, em relação a API, Banco de dados etc.

Utilizar o JSON na aplicação e entrar ainda mais, de cabeça, no mundo do JavaScript está me ajudando a desenvolver bastante o meu back-end, que foi algo que nosso grupo de Python teve bastante dificuldade quando fomos criar nosso primeiro projeto em conjunto, o site da hamburgueria Silvers Burguer.