Javascript Formulario de perguntas utilizando HTML/JS

VCastilho · 23 de outubro de 2019

Boa Tarde
Pretendo criar um formulário de perguntas, realmente um questionário, em que o Javascript captaria a resposta e retornaria se esta correta ou errada, até mesmo contaria o tanto de respostas certas e no final falaria se o cara foi aprovado no teste, e enviar um e-mail por exemplo esse resultado...

Creio que utilizando o SE/Else seja possível, e no final um array com as respostas, dependendo do capturado pelo array ele retorna a aprovação... e enviar tudo isso que for capturado em um e-mail
Porém não estou conseguindo desenvolver esse código por não ter muita afinidade com o Se/Else... segue o código HTML utilizado, alguém tem uma ideia melhor dessa situação ou possa me dar uma luz de como desenvolver esse código?

<body>
<form id="questionario" name ="questionario" method = "post" action="resposta.php">
1) Observe o video abaixo, e assinale o que ele representa:
<p>
<label>
<input type="radio" name="questao1" value="a" /> A) Melancia;</label>
<br />
<label>
<input type="radio" name="questao1" value="b" /> B) Abobora;</label>
<br />
<label>
<input type="radio" name="questao1" value="c" /> C) Abacate;</label>
<br />
<label>
<input type="radio" name="questao1" value="d" /> D) Laranja.</label>
<br />
<br />
 
<h5 class="font_1">1) Observe o video abaixo, e assinale o que ele representa:</h5>
 
<label>
<input type="radio" name="questao2" value="a" /> A) Melancia;</label>
<br />
<label>
<input type="radio" name="questao2" value="b" /> B) Abobora;</label>
<br />
<label>
<input type="radio" name="questao2" value="c" /> C) Abacate;</label>
<br />
<label>
<input type="radio" name="questao2" value="d" /> D) Laranja.</label>
<br />
<br />
 
<h5 class="font_1">1) Observe o video abaixo, e assinale o que ele representa:</h5>
 
<label>
<input type="radio" name="questao3" value="a" /> A) Melancia;</label>
<br />
<label>
<input type="radio" name="questao3" value="b" /> B) Abobora;</label>
<br />
<label>
<input type="radio" name="questao3" value="c" /> C) Abacate;</label>
<br />
<label>
<input type="radio" name="questao3" value="d" /> D) Laranja.</label>
<br />
<br />
<input type="submit" name="enviar" id = "enviar" value="Enviar" />
</form>
</body>

DiF · 23 de outubro de 2019

@VCastilho

Se você está utilizando o PHP, basta colocar as respostas em uma tabela no banco de dados e um score de pontuação e ponto de corte.

Mas também dá para você armazenar as respostas em um JSON e depois comparar...

Pelo mais fácil, é usar o banco de dados.

Para ser em "tempo real", usa-se o ajax( requisição assíncrona)

No final, você envia os dados ao email com o php

VCastilho · 23 de outubro de 2019

@DiF Sim pensei em PHP, mas no lugar onde vou utilizar tem suporte apenas para HTML, tentei colocar PHP mas ele não reconhece

adicionado 4 minutos depois

@DiF
Achei esse código em PHP mais cedo pesquisando em alguns forums mas não funciona onde quero aplicar

<body>
 
<?php
 
$questao1 = $_POST["questao1"];
$questao2 = $_POST["questao2"];
$questao3 = $_POST["questao3"];
$questao4 = $_POST["questao4"];
$questao5 = $_POST["questao5"];
$questao6 = $_POST["questao6"];
$questao7 = $_POST["questao7"];
$questao8 = $_POST["questao8"];
$questao9 = $_POST["questao9"];
$questao10 = $_POST["questao10"];
 
echo "<b>Questao 1</b> = ".$questao1."<br>";
echo "<b>Questao 2</b>= ".$questao2."<br>";
echo "<b>Questao 3</b> = ".$questao3."<br>";
echo "<b>Questao 4</b> = ".$questao4."<br>";
echo "<b>Questao 5</b> = ".$questao5."<br>";
echo "<b>Questao 6</b> = ".$questao6."<br>";
echo "<b>Questao 7</b> = ".$questao7."<br>";
echo "<b>Questao 8</b>= ".$questao8."<br>";
echo "<b>Questao 9</b>= ".$questao9."<br>";
echo "<b>Questao 10</b> = ".$questao10."<br><br><br>";
 
$resposta1 = "c";
$resposta2 = "d";
$resposta3 = "a";
$resposta4 = "c";
$resposta5 = "d";
$resposta6 = "c";
$resposta7 = "a";
$resposta8 = "c";
$resposta9 = "b";
$resposta10 = "a";
 
$acertou = 0;
$errou = 0;
 
if ($questao1 == $resposta1)
{
    $acertou++;
    echo "<font color = blue> Questao 1 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 1 errada<br></font>";
}
 
if ($questao2 == $resposta2)
{
    $acertou++;
    echo "<font color = blue> Questao 2 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 2 errada<br></font>";
}
 
if ($questao3 == $resposta3)
{
    $acertou++;
    echo "<font color = blue> Questao 3 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 3 errada<br></font>";
}
 
if ($questao4 == $resposta4)
{
    $acertou++;
    echo "<font color = blue> Questao 4 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 4 errada<br></font>";
}
 
if ($questao5 == $resposta5)
{
    $acertou++;
    echo "<font color = blue> Questao 5 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 5 errada<br></font>";
}
 
if ($questao6 == $resposta6)
{
    $acertou++;
    echo "<font color = blue> Questao 6 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 6 errada<br></font>";
}
 
if ($questao7 == $resposta7)
{
    $acertou++;
    echo "<font color = blue> Questao 7 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 7 errada<br></font>";
}
 
if ($questao8 == $resposta8)
{
    $acertou++;
    echo "<font color = blue> Questao 8 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 8 errada<br></font>";
}
 
if ($questao9 == $resposta9)
{
    $acertou++;
    echo "<font color = blue> Questao 9 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 9 errada<br></font>";
}
 
if ($questao10 == $resposta10)
{
    $acertou++;
    echo "<font color = blue> Questao 10 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 10 errada<br></font>";
}
 
$calc = 10;
$porcent = $calc * $acertou;
 
echo "<br><br> voce <font color = blue>acertou</font> $acertou e <font color = red>errou</font> $errou.";
 
 
if ($acertou >=7)
{
echo "<br><br><b><blink>Muito bem, um total de $porcent % de acerto</blink></b>";
}
else
{
echo "<br><br><b><blink> voce nao foi muito bem, um total de $porcent% de acerto, tente novamente!</blink></b>";
}
 
?>
<br /><input type="button" value="voltar" id="botao_voltar" onclick="history.go(-1)"
</body>

DiF · 23 de outubro de 2019

@VCastilho Ok, sem php então só lhe resta usar o Javascript e JSON.

Você teria que montar o JSON com as perguntas e respostas. E então percorrer este json..

Aqui você pode pegar um exemplo de QUIZ feito com JSON

https://www.sitepoint.com/simple-javascript-quiz/

Neste link, tem dicas de como usar o jQuery para o quiz:

https://stackoverflow.com/questions/38217226/jquery-quiz-using-json

CyberPh4ntom · 23 de outubro de 2019

Mostrar conteúdo oculto

<!DOCTYPE html>
<html>
	<head>
		<title>Questionario</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Questionario</h1>
		<form name="form1">
		<p>1) Observe o video abaixo, e assinale o que ele representa:</p>
		<br>
		<input type="radio" name="questao" value="a" id="a1" /> A) Melancia;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="b" id="b1" /> B) Abobora;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="c" id="c1" /> C) Abacate;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="d" id="d1" /> D) Laranja.</label>
		<br>
		<br>
		</form>

		<form name="form2">
		<p>2) Observe o video abaixo, e assinale o que ele representa:</p>
		<br>
		<input type="radio" name="questao" value="a" id="a2" /> A) Melancia;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="b" id="a2" /> B) Abobora;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="c" id="a2" /> C) Abacate;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="d" id="a2" /> D) Laranja.</label>
		<br>
		<br>
		</form>

		<form name="form3">
		<p>3) Observe o video abaixo, e assinale o que ele representa:</p>
		<br>
		<input type="radio" name="questao" value="a" id="a3" /> A) Melancia;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="b" id="a3" /> B) Abobora;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="c" id="a3" /> C) Abacate;</label>
		<br>
		<label>
		<input type="radio" name="questao" value="d" id="a3" /> D) Laranja.</label>
		<br>
		<br>
		</form>
		<input id="botao" type="submit" value="Enviar" onclick="validarForm()">
		<br>
		<p id="resultado"></p>


		<script type="text/javascript">
			//Variaveis
			var form1;
			var form2;
			var form3;
			var acertos = 0;

			//Checagem
			function validarForm() {
				form1 = document.forms['form1'].elements['questao'];
				form2 = document.forms['form2'].elements['questao'];
				form3 = document.forms['form3'].elements['questao'];
				if (form1.value == 'b') {
					acertos++;
				}else{}

				if (form2.value == 'a') {
					acertos++;
				}else{}

				if (form3.value == 'd') {
					acertos++;
				}else{}

				document.getElementById('resultado').innerHTML = "Total de acertos: " + acertos + " de 3";

				document.getElementById('botao').disabled = true;
			}
		</script>
	</body>
</html>

Não sei se era isso que queria mais esta ai

VCastilho · 23 de outubro de 2019

@DiF Certo, não conhecia esse post, vou dar uma estudada sobre, creio que possa me atender, muito obrigado!

adicionado 0 minutos depois

@CyberPh4ntom Opa, ficou bem simples, acho que da certo sim... vou dar uma estudada também, muito obrigado!

DiF · 24 de outubro de 2019

@VCastilho Não tinha visto o código que você postou no post #03. Você adicionou mais tarde?

Enfim, é meio inviável fazer da forma apresentada, veja que há diversas perguntas e você é obrigado a fazer uma verificação com IF a cada pergunta.

Como mencionei mais acima, como você não pode usar o php e banco de dados, terá que ser feito com javascript e JOSN.

Só que tem um porém, você disse que precisa mandar por email o resultado..., então precisar do php..

Segue o exemplo do quiz com javascript e JSON:

Parte do HTML:

<h1>Exemplo de QUIZ em JS</h1>
<div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">Questão anterior</button>
<button id="next">Próxima questão</button>
<button id="submit">Enviar Quiz</button>
<div id="total"></div>
<div id="results"></div>

Javascript:

(function() {
  
  // início do JSON
  const myQuestions = [
    {
      question: "Qual o nome da substância que deixa o tomate vermelho?",
      answers: {
        a: "Ricopeno",
        b: "Licopeno",
        c: "Dicopeno",
        d: "Sicopeno"
      },
      correctAnswer: "b"
    },
    {
      question: "Quando foi a primeira aparição do Coringa?",
      answers: {
        a: "Março de 1970",
        b: "Janeiro de 1939",
        c: "Abril de 1940",
        d: "Julho de 1950"
      },
      correctAnswer: "c"
    },
    {
      question: "Na série Game of Thrones, qual é o nome da atriz da mãe dos dragões?",
      answers: {
        a: "Emilia Clarke",
        b: "Carice Van Houten",
        c: "Lena Headey",
        d: "Gwendoline Christie"
      },
      correctAnswer: "a"
    },
    {
      question: "O brasil faz fronteira com: ",
      answers: {
        a: "7 Países",
        b: "5 Países",
        c: "9 Países",
        d: "10 Países"
      },
      correctAnswer: "d"
    }
  ]; //fim do JSON

  function buildQuiz() {
    // precisaremos de um local para armazenar a saída HTML
    const output = [];

    // Percorre cada pergunta...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // queremos armazenar a lista de opções de resposta
      const answers = [];

      // e para cada resposta disponível...
      for (letter in currentQuestion.answers) {
        // ...adiciona um radio button
        answers.push(
          `<label>
             <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :
              ${currentQuestion.answers[letter]}
           </label>`
        );
      }

      // adiciona as questões e suas respostas na saída
      output.push(
        `<div class="slide">
           <div class="question"> ${currentQuestion.question} </div>
           <div class="answers"> ${answers.join("")} </div>
         </div>`
      );
    });

    // finalmente combinamos nossa lista de saída em uma string de HTML e colocamos na página
    quizContainer.innerHTML = output.join("");
  }

  function showResults() {
    // reune recipientes de respostas do nosso questionário
    const answerContainers = quizContainer.querySelectorAll(".answers");

    // acompanha as respostas do usuário
    let numCorrect = 0;

    // para cada pergunta...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // encontra a resposta selecionada
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      // Se a resposta está correta
      if (userAnswer === currentQuestion.correctAnswer) {
        // Conta o número de respostas corretas
        numCorrect++;

        // colore as respostas com verde
        answerContainers[questionNumber].style.color = "green";
      } else {
        // se a resposta estiver errada ou vazia
        // colore as respostas com vermelho
        answerContainers[questionNumber].style.color = "red";
      }
    });

    // mostra o número de respostas corretas no total
    totalContainer.innerHTML = `Acertou ${numCorrect} de ${myQuestions.length}`;
    
    // testa se o usuário acertou a metade das questões, se sim
    //podemos usar o ajax e enviar o resultado para o php e então enviar o e-mail
    (numCorrect >=2) ?  resultsContainer.innerHTML = "Passou no teste, chamar o ajax e enviar ao php no email" : resultsContainer.innerHTML = "Não passou no teste" ;
    
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove("active-slide");
    slides[n].classList.add("active-slide");
    currentSlide = n;
    
    if (currentSlide === 0) {
      previousButton.style.display = "none";
    } else {
      previousButton.style.display = "inline-block";
    }
    
    if (currentSlide === slides.length - 1) {
      nextButton.style.display = "none";
      submitButton.style.display = "inline-block";
    } else {
      nextButton.style.display = "inline-block";
      submitButton.style.display = "none";
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
  }

  const quizContainer = document.getElementById("quiz");
  const totalContainer = document.getElementById("total");
  const resultsContainer = document.getElementById("results");
  const submitButton = document.getElementById("submit");

  // Chama o quiz.
  buildQuiz();

  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  showSlide(0);

  // quando enviar, mostrará o resultado.
  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();