Conceitos de JavaScript para construir um aplicativo de teste
JavaScript é uma biblioteca muito poderosa que permite aos desenvolvedores criar sites dinâmicos. É também uma linguagem ampla com muitos conceitos para aprender e dominar antes de construir aplicações simples e complexas. Aqui usaremos alguns desses conceitos para construir nosso aplicativo de questionário múltiplo.
Matrizes e objetos
Matrizes e objetos são úteis para organizar dados. Aqui vamos usá-los para armazenar perguntas, escolhas e respostas corretas em formatos estruturados para fácil recuperação e manipulação. Dê uma olhada no método array usado neste aplicativo de teste:
1 |
const questões = [ |
2 |
{
|
3 |
question: "What is the capital of United Kingdom?", |
4 |
choices: ["London", "Paris", "Nairobi"], |
5 |
correct: 0 |
6 |
},
|
7 |
{
|
8 |
question: "How many days are there in a week?", |
9 |
choices: ["Five", "Three", "Seven"], |
10 |
correct: 2 |
11 |
},
|
12 |
{
|
13 |
question: "What is the closest planet to the sun?", |
14 |
choices: ["Earth", "Mercury", "Saturn"], |
15 |
correct: 1 |
16 |
},
|
17 |
];
|
Neste aplicativo de teste, a variável questions é um array que armazena a coleção de objetos de pergunta. Como você já deve saber, os arrays estão entre colchetes [ ]. Nisso questions array, existem elementos dentro dele e cada um desses elementos é um objeto representando uma pergunta do quiz. Os objetos são representados por chaves { }.
Cada um desses objetos possui vários propriedades que se relacionam com cada questão. As propriedades são:
-
question: contém uma string que representa a pergunta real. -
choices: contém uma matriz de strings que representa as opções de resposta. -
correct: contém um número que representa o índice da resposta correta na matriz de escolhas.
Resumindo, você está usando uma série de objetos para representar uma coleção de perguntas do quiz. Cada um desses objetos contém propriedades que definem a pergunta, as opções de resposta e o índice da resposta correta. Essa estrutura de dados é bem organizada, facilmente acessível e gerenciável.
Manipulação de DOM
A manipulação do DOM é um princípio fundamental para a construção de páginas da web e aplicativos da web interativos. No contexto deste aplicativo de teste, você poderá usar a manipulação do DOM para atualizar dinamicamente o conteúdo dos elementos da página, como os textos das perguntas e os botões de escolha. Você também usará a manipulação do DOM para exibir perguntas, escolhas e comentários aos usuários.
1 |
function showQuestion() { |
2 |
const questionText = document.getElementById("question-text"); |
3 |
questionText.textContent = questions[currentQuestion].question; |
4 |
|
5 |
const choices = document.querySelectorAll(".choice"); |
6 |
choices.forEach((choice, index) => { |
7 |
choice.textContent = questions[currentQuestion].choices[index]; |
8 |
});
|
9 |
|
10 |
const feedback = document.getElementById("feedback"); |
11 |
feedback.textContent = ""; |
12 |
}
|
Portanto, no código acima, primeiro criamos um showQuestion função. Então nós vamoset uma referência ao elemento DOM que queremos manipular. Neste caso, trata-se de um elemento com o ID “texto-pergunta”. Este foi especificado no arquivo HTML e é o elemento onde será exibido o texto da pergunta.
O próximo é para vocêatualize o conteúdo do texto do elemento “texto-pergunta” usando o textContent propriedade. No trecho de código, questionText.textContent é definido como o texto da pergunta atual obtido da matriz de perguntas definida na parte superior do arquivo JavaScript. Isso altera o conteúdo do elemento para exibir a pergunta atual.
O próximo passo é usar o document.querySelectorAll(".choice") para selecionar todos os elementos com a classe de “escolha”. No arquivo HTML, todos os botões possuem a classe “escolha”.
Depois de selecionar os elementos de escolha, você usa um forEach loop para iterar cada escolha e atualizar seu conteúdo de texto. O conteúdo do texto de cada escolha é definido com base no texto da escolha correspondente na matriz de perguntas.
Finalmente, você limpa o feedback anterior. Você faz isso obtendo uma referência ao elemento com o ID “feedback” (esta é uma tag de parágrafo especificada no arquivo HTML) e definindo seu textContent para uma string vazia. Isso garantirá que a mensagem de feedback seja apagada antes de exibir novos comentários para a pergunta atual.
Declarações Condicionais
Ao criar aplicativos como esse, você não pode presumir que os usuários sempre clicarão em uma opção específica, então você precisa criar instâncias para quando eles selecionarem opções diferentes. As declarações condicionais geralmente têm 2 valores: true ou false. Declarações condicionais, como if, else ife switch, são essenciais para avaliar a entrada do usuário e determinar se as respostas estão corretas ou incorretas. Feedback e pontuações serão fornecidos usando esta lógica no aplicativo de teste.
No trecho de código abaixo, você está usando um if instrução para verificar se o valor de “selecionado” (resposta escolhida pelo usuário) é igual ao índice da resposta correta armazenado em questions[currentQuestion].correct. Se a condição for true, o código entre chaves é executado, indicando que a resposta do usuário está correta. O texto do feedback está definido como “Correto!” e a correctAnswers contador é incrementado em um.
Se a condição for falseo código entre chaves após o else instrução é executada, indicando que a resposta do usuário está incorreta. O texto do feedback está definido como “Incorreto!” e a correctAnswers counter não está lá, então não será incrementado.
1 |
const feedback = document.getElementById("feedback"); |
2 |
if (selected === questions[currentQuestion].correct) { |
3 |
feedback.textContent = "Correct!"; |
4 |
correctAnswers++; |
5 |
} else { |
6 |
feedback.textContent = "Incorrect!."; |
7 |
}
|
Há mais perguntas?
A segunda instância em que uma instrução condicional é usada neste aplicativo é para determinar se há mais perguntas depois que os usuários respondem a uma pergunta. O trecho de código é mostrado abaixo.
Um if declaração avalia se o índice da pergunta atual (currentQuestion) é menor que o número total de perguntas (questions.length). Se a condição currentQuestion < questions.length é true, o código dentro do primeiro conjunto de chaves será executado. Então você liga para o showQuestion() função para exibir a próxima pergunta no questionário.
Se a condição for false, entretanto, o código dentro do bloco else será executado. Neste bloco, você está acessando o elemento DOM com a classe “quiz-container” (especificada no arquivo HTML) usando document.querySelector(".quiz-container"). Em seguida, você modifica o conteúdo HTML deste elemento usando o comando innerHTML propriedade.
1 |
setTimeout(() => { |
2 |
currentQuestion++; |
3 |
|
4 |
if (currentQuestion < questions.length) { |
5 |
showQuestion(); |
6 |
} else { |
7 |
const quizContainer = document.querySelector(".quiz-container"); |
8 |
quizContainer.innerHTML = `You got ${correctAnswers} out of ${questions.length} questions.`; |
9 |
}
|
10 |
}, 2000); |
11 |
}
|
Este novo conteúdo que você está adicionando ao elemento é uma string que inclui a pontuação do usuário (correctAnswers) e o número total de perguntas (questions.length) no questionário.
Literais de modelo são usados para incorporar expressões diretamente em uma string usando o ${...} sintaxe. Isso torna seu código mais legível em vez de usar o + operador para concatenar strings. Neste caso, permite-lhe insira facilmente os valores das variáveis (correctAnswers e questions.length) diretamente na string sem a necessidade de sintaxe adicional.
Essas instruções condicionais estão todas dentro de uma função chamada "checkAnswer".
Janela setTimeOut Método
O setTimeout função nos permite atrasar a execução do código. Neste aplicativo, usamos isso para introduzir uma pausa de 2 segundos antes de passar para a próxima pergunta e para exibir feedback antes que a pontuação final do usuário seja exibida.
1 |
setTimeout(() => { |
2 |
// ...
|
3 |
}, 2000); // (2000milliseconds = 2 seconds) |
Manipulação de eventos
Este é outro conceito central que será utilizado na criação deste aplicativo. Com JavaScript, você pode criar sites que permitem responder às interações do usuário, como clicar em botões, inserir valores em um campo de texto e enviar formulários. Os ouvintes de eventos permitem acionar ações específicas quando os usuários interagem com elementos do questionário, como opções de perguntas.
Neste aplicativo, usaremos o manipulador de eventos onClick nos botões de escolha para acionar o checkAnswer funciona quando um botão é clicado.
1 |
|
2 |
|
3 |
|
Portanto, conseguimos construir um aplicativo de teste interativo simples usando todas essas funções e métodos JavaScript.
Conclusão
Yay! Você construiu com sucesso um aplicativo de teste interativo usando HTML, CSS e JavaScript. Seguindo este tutorial, você adquiriu conhecimento sobre como conceitos de JavaScript, como manipulação de DOM, manipulação de eventos, instruções condicionais e comportamento assíncrono, como setTimeout pode ser usado para construir aplicativos da web interativos.
Sinta-se à vontade para melhorar ainda mais este projeto personalizando o estilo do aplicativo, adicionando mais perguntas e mais recursos. Criar um aplicativo de teste interativo envolve os usuários e permite que você aplique algumas habilidades de JavaScript para criar sites dinâmicos, então sinta-se à vontade para experimentar.
[ad_2]
