hogwarts house quiz
1.0.0
Como o nome sugere, este aplicativo da web, que eu construí usando HTML, CSS e Vanilla Typescript, oferece aos usuários a chance de ver em qual casa de Hogwarts eles provavelmente seriam classificados. Abaixo, descrevo como funciona. Para mais detalhes, consulte meu código e os comentários dentro.
Uma imagem aleatória é exibida como o fundo da página. Eu armazenei vários URLs de imagem do Unsplash em uma matriz e entrei nela, selecionando um aleatório quando a página carrega e quando uma nova pergunta é exibida. Defino um fundo específico na página de resultados.
Após o carregamento da página, o usuário é recebido e solicitado a clicar em um botão para iniciar o questionário, quer ele queira reproduzir o curto (15 perguntas) ou a versão mais longa (30 perguntas).
Ao iniciar o teste, a saudação está oculta e a primeira pergunta é exibida. Para cada pergunta, exibo a pergunta que apresenta perguntas totais, que eu guardo como objetos dentro de uma matriz, para que ela seja exibida como: Índice da Pergunta / duração das perguntas A matriz, que também é randomizada, exceto pela última questão de O questionário, que pede ao usuário a preferência da casa. Quando o usuário reproduz a versão mais curta, 14 perguntas aleatórias não sobre a preferência da casa são selecionadas e adicionadas à matriz de perguntas. Se a versão curta ou a longa é reproduzida, a pergunta sobre sua preferência é anexada à matriz de perguntas.
A questão em si, que é uma propriedade do objeto da pergunta dada dentro da matriz que contém todas as perguntas, exibe sob a contagem. As opções de resposta são ordenadas aleatoriamente.
Dentro do objeto de cada pergunta, também adicionei uma propriedade de 'peso', que é um número indicando a importância da questão para determinar a casa do usuário. Quando o usuário seleciona uma opção, essa propriedade 'Peso' é adicionada ao total de pontos para a casa correspondente, que são armazenados em uma matriz.
Ao passar para a próxima pergunta (que acontece imediatamente quando o usuário seleciona uma opção de pergunta, as informações para essa pergunta são liberadas do DOM e, se houver uma pergunta seqüencial, as informações para essa pergunta preenche o DOM; se houver Nenhuma dúvida a seguir, a área de perguntas é removida das exibições da área de DOM e resultados.
No final do teste, a casa com o total de pontos mais alta é selecionada e seu Crest & Heading correspondente aparece. Para isso, adicionei algumas animações legais.
Se você está curioso para experimentar, clique aqui: https://whats-my-hogwartshouse.netlify.app/
Fico feliz em ouvir qualquer feedback, seja sobre a experiência de usar este aplicativo ou no meu código. Obrigado pela leitura!
