Vamos construir um aplicativo de teste de múltipla escolha com JavaScriptReviltec

Este tutorial é a maneira perfeita de aprender alguns conceitos importantes de JavaScript. Percorreremos um guia passo a passo para criar um exemplo de aplicativo de teste de múltipla escolha usando HTML, CSS e JavaScript.

Imagine um site que não apenas apresenta informações, mas também interage com você, desafia seu conhecimento e fornece feedback instantâneo às perguntas respondidas. Um exemplo perfeito disso é um aplicativo de teste. Você pode criar questionários dinâmicos de múltipla escolha que fornecem feedback imediato e melhoram a experiência do usuário com JavaScript. Este aplicativo pode ser educativo e divertido.

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:

const questões = [
  {
    question: "What is the capital of United Kingdom?",
    choices: ["London", "Paris", "Nairobi"],
    correct: 0
  },
  {
    question: "How many days are there in a week?",
    choices: ["Five", "Three", "Seven"],
    correct: 2
  },
  {
    question: "What is the closest planet to the sun?",
    choices: ["Earth", "Mercury", "Saturn"],
    correct: 1
  },
];

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.

function showQuestion() {
  const questionText = document.getElementById("question-text");
  questionText.textContent = questions[currentQuestion].question;

  const choices = document.querySelectorAll(".choice");
  choices.forEach((choice, index) => {
    choice.textContent = questions[currentQuestion].choices[index];
  });

  const feedback = document.getElementById("feedback");
  feedback.textContent = "";
}

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.

const feedback = document.getElementById("feedback");
if (selected === questions[currentQuestion].correct) {
  feedback.textContent = "Correct!";
  correctAnswers++;
} else {
  feedback.textContent = "Incorrect!.";
}

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.

setTimeout(() => {
    currentQuestion++;

    if (currentQuestion < questions.length) {
      showQuestion();
    } else {
      const quizContainer = document.querySelector(".quiz-container");
      quizContainer.innerHTML = `You got ${correctAnswers} out of ${questions.length} questions.`;
    }
  }, 2000);
}

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	class="choice" onclick="checkAnswer(0)">Paris
2	class="choice" onclick="checkAnswer(1)">London
3	class="choice" onclick="checkAnswer(2)">Berlin

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.

Relacionado

Posted by admin

Tagged with

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	];

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	}

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	}

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	}