Para a elaboração do projeto, foram usadas as tecnologias:
-
JavaScript
-
HTML
-
CSS
Aplicação consiste em uma página de quiz com cinco perguntas sobre javascript, tendo a opção de verdadeiro ou falso. As perguntas são pegas de um arquivo JSON, podendo adicionar mais perguntas se nescessários, tornando a quantidade de perguntas alterável.
Fiz esse projeto para treinar meus conhecimentos em javascript, principalmente sobre módulos e requisição http(feath). Criei uma alteração entre as páginas sem precisar recarregar a página.
Neste projeto, criei a troca de página sem precisar recarregar a mesma. Para fazer isso, primeiro criei as três páginas HTML. São elas:
- index.html - página principal, onde se iniciará o quiz;
- quizPage.html - página onde vão ser colocadas as perguntas;
- paginaDeRecomecar.html - página final, onde pode-se recomeçar o quiz;
Depois, separei o javascript em módulos pois achei melhor para trabalhar e depois dar manuntenção ao código. Então criei o arquivo "trocarDePagina.js" onde ficará o código para trocar de página. Nele, primeiro criei uma variável que pegará o elemento que tiver a classe "buttonStart"(botao para iniciar o quiz).
Logo após, no botão adiciono o evento de click com o método ".addEventListener()" para chamar a função cliqueAleatorio()
Passando como parâmetro o "event", ela é responsável por pegar qualquer clique no botão e chamar a função pegarUrl() passando como parâmetro o href do event. Nela também é passado o mesmo link no history para mudar a URL do navegador sem dar refresh na página.
Essa é a função responsável por pegar a url através da requisição http feach e transformá-la em texto. Ou seja, ela vai pegar o html da página de destino e transformar em texto. Como é uma requisição, a função é assincrona e o que retorna é uma promise, utilizei o async e o await. No final, a função trocarDePagina é chamada passando o html em texto como argumento.
Essa função é responsável por fazer a troca de página sem atualizar a mesma. Ela possui o parâmetro "html" que é o HTML em forma de texto passado pela função pergarUrl(). Na função, primeiro é criada a variável "novoHtml" que cria um elemento section, depois o novoHtml recebe o html em texto com um .innerHTML.
Depois, mais duas variáveis são criadas, "antigoConteudo" que pega o conteiner onde ficará o novo HTML, e "novoConteudo" que pega o mesmo conteiner só que do HTML novo(Os dois HTML's tem que ter o mesmo elemento com a classe ".conteiner"). Depois o titulo da página recebe o titulo novo e é feito um innerHTML passando o conteudo novo para o que já está na página.
O arquivo do código das perguntas foi importado neste. Depois executado ao final da troca de página, pois assim evita que ocorra o erro do código carregar mais rápido que a trocar de página, então é executado somente quando a página carregar, ou seja, na função "trocaDePagina()".
Para armazenar as peguntas, criei um arquivo JSON. Nele, possui objetos com as perguntas com suas respostas, armezenando um valor booleano. Ele possui cinco perguntas, porém é possível adicionar ou remover perguntas, pois o código é flexivel nesse quesito.
Primeiro, para a elaboração do código para exibir e responder as perguntas, criei cinco variáveis imprtantes. São elas:
- numeroIndicadorDaPergunta - Pega o h1 onde ficará o número indicador da pergunta. EX: Pergunta 1º, 2º ...;
- paragrafoDaPergunta - Paragrafo onde será colocado a pergunta;
- botoesResposta - Botões para responder a pergunta. (verdadeiro ou falso);
- perguntaSelecionada - Variável que armazenará a pergunta do arquivo JSON;
- contadorDaPergunta - variável onde ficará o número que indicará qual é a pergunta que o usuário está, começando com 0 pois é a partir dos index de uma array.
Depois disso, a função colocarPerguntas() é executada.
A função colocarPerguntas é assincrona. Ela serve para pegar as peguntas do arquivo JSON e exibilas na tela de acordo com o valor da variável contadorDaPergunta. Nela usei a seguinte lógica: Atribui o valor da variável contadorDaPergunta em outra variável(numeroDaPergunta), então toda a vez que o código é iniciado o contadorDaPergunta recebe +1, porém o numeroDaPergunta ainda continua com seu valor anterior; Por exemplo, na primeira execução o contador começa como 0, pegando o primeiro objeto(pergunta) do arquivo JSON e exibindo em tela, na segunda execução começa com +1 e pega o segundo objeto(pergunta) e assim sucessivamente.
Seguindo, a variável perguntaSelecionada recebe o objeto com a pergunta para ser utilizado mais a frente no código. Para identificar que as perguntas acabaram e recomeçar o quiz, criei uma estrutura condicional utilizando a seguinte lógica: Se o número da pergunta for igual ao número de perguntas no arquivo json(jsonPerguntas), executa a função "recomecarQuiz" passando o href da página de recomeçar.
A função responderPergunta serve para pegar a resposta do usuário (verdadeiro ou falso) e comparar com a resposta da pergunta, acertando ou errando. Dependendo da resposta ela da um play em um efeito sonoro de errado ou correto.
Para executar a função, primeiro fiz um forEach na variável botoesResposta onde para cada botão é adicionado um evento de clique que chama a função responderPergunta().
Nela, primeiro peguei o valor do botão clicado. Fiz isso pegando o valor do atributo "data", onde o botão de verdadeiro possui o valor "true" e o de falso possui o valor "false"
Seguindo, é criado a variável conteinerDaPergunta que seleciona toda a section da pergunta. Depois, são criadas duas variáveis usando o construtor new Audio(), são elas:
- somDeErrado - armazena o áudio que será tocado quando a reposta for incorreta.
- somDeCorreto - armazena o áudio que será tocado quando a resposta for correta.
Para fazer a validação da resposta utilizei uma estrutura condicional, utilizando a seguinte condição: Se o valor do botão clicado for igual ao valor da resposta, primeiro remove a classe "respostaErrada" do conteiner, depois dá um ".play()" no audio de correto e executa novamente a função "colocarPergunta()" para seguir para a proxima pergunta. Se não, ou seja, se a reposta for errada adiciona a classe "respostaErrada" no conteiner e da um ".play()" no áudio de errado.
A função recomecarQuiz serve para exibir a tela de recomaçar o quiz assim que a ultima pergunta for respondida. Ela é chamada na função colocarPergunta e tem como parâmetro o href da página HTML "paginaDeRecomecar". Sendo assim, é atribuido esse href no botão de verdadeiro. Quando é clicado, o código trocarDePagina é acionado trocando a página.
