Trabalho escolar feito por metade do 1º DS AMS - Etec ZL, baseado na ideia do "Genio-quiz" feito pelo André Birnfield.
O objetivo do quiz é acertar o máximo de alternativas possivel. Quanto mais pontos forem feitos, mais conciente você é quanto aos cuidados do Covid-19.
- Obrigando a digitar o nome
É preciso um script que não deixe o úsuario continuar sem digitar um nick no input.
Para isso foi feito um script que habilita e desabilita o botão.
HTML
<input id="nome" type="text" oninput="permitir();">
<button id="comecar" disabled>começar</button>JavaScript
let allowredirect;
function permitir(){
let caixa = document.getElementById('nome').value.trim();
let botao = document.getElementById('comecar')
if (caixa != ""){
botao.disabled = false;
allowredirect = true;
}
else{
botao.disabled = true;
allowredirect = false;
}
}- passando dados usando o Storage
O HTML5 tem novo um recurso chamado de Storage que permite que um dado seja guardado do lado do cliente. Isso faz que nessa situação não precisemos ter um back-end.
E esse foi o método usado para passar o nome da pagina inicial para a página do quiz.
//Usa o Storage para guardar o dado
function redirect(){
let nome = JSON.stringify(document.getElementById('nome').value);
sessionStorage.setItem('nome', nome);
}
//Usa o Storage para resgatar o dado guardado
function resgatarnome(){
let nome = JSON.parse(sessionStorage.getItem('nome'));
}- Embaralhando as questões
Para embaralhar as questões foi usado um script em Jquery que guarda todas as questões em um array e os embaralha de forma aleatória usando o métodos Math.floor() e Math.random().
var questoes = $(".questoes");
for (let i = 0; i < questoes.length; i ) {
let lugar = Math.floor(Math.random() * questoes.length -1) 1;
let lugar2 = Math.floor(Math.random() * questoes.length -1) 1;
questoes.eq(lugar).before(questoes.eq(lugar2));
}- trocando as questões
Para mostrar uma questão por vez, o JS guarda todas as questões em um array, e ao clicar em uma alternativa o display esconde a alternativa e mostra a próxima até que acabem as questões.
var questoes = document.getElementsByClassName('questoes');
let Nquestao = 0;
function Proximaquestao(){
if (Nquestao === questoes.length - 1){
resultado();
}
else{
questoes[Nquestao].classList.remove('questoes-visivel');
questoes[Nquestao].classList.add('questoes-invisivel');
questoes[Nquestao 1].classList.add('questoes-visivel');
Nquestao = 1;
}
}- Computando pontos
a função recebe o paramentro booleano "certo", que quando for passado para esse parametro o valor True, é incrementado um ponto.
<article class="questoes">
<button onclick="Proximaquestao()">alternativa errada</button>
<button onclick="Proximaquestao(true)">alternativa certa</button>
</article>let pontuacao = 0;
function Proximaquestao(certo){
if (certo){
pontuacao = 1;
}
}