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
OBS: O jogo inicia com volume mudo. Altere o volume após entrar no jogo, recomendo deixar um valor baixo!!!
Página Inicial (index.html)
Perguntas e Respostas (jogo.html)
Parte de registrar os pontos no seu usuário (end.html)
Ranking (recordes.html)
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.
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.