Jump to content

Question

Ola pessoal, alguém tem algum código javascript ou pode me dar algum link como referencia que tenha um questionario/quiz que use arrays e estruturas de repetição?

 

 

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Segue exemplo:

 

CÓDIGO

<!doctype html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8"/>
		<title>Quiz</title>
		
		<script type="text/javascript">
			function verificar() {
				var acertos = 0;
				var erros = 0;

				for (var p = 0; p < perguntas.length; p++) {
					var resposta = document.getElementsByName('res' + p);

					for (var alt = 0; alt < resposta.length; alt++) {
						if (resposta[alt].checked && resposta[alt].value == perguntas[p][1]) {
							acertos++;
							document.getElementById('L' + p).style = "color: #00FF00;";
						}

						if (resposta[alt].checked && resposta[alt].value != perguntas[p][1]) {
							erros++;
							document.getElementById('L' + p).style = "color: #FF0000;";
						}
					}
				}

				document.getElementById('acertos').style = "visibility: visible;";

				if (acertos == 0) {
					document.getElementById('mensagem').innerHTML = "<strong>Infelizmente você errou todas as questões! :(</strong>";
				}
				else if (acertos == 1) {
					document.getElementById('mensagem').innerHTML = "<strong>Pelo menos você acertou " + acertos + " questão. :)</strong>";
				}
				else if (acertos > 0 && acertos < perguntas.length) {
					document.getElementById('mensagem').innerHTML = "<strong>Você acertou " + acertos + " questões e errou " + erros + " questões!</strong>";
				}
				else {
					document.getElementById('mensagem').innerHTML = "<strong>PARABÉNS! Você acertou todas as " + acertos + " questões!</strong>";
				}
			}
		</script>
	</head>

	<body>
		<h1>Responda as Perguntas</h1>

		<script type="text/javascript">
			var perguntas = [
				["O planeta Terra possui dois satélite natural.", "F"],
				["O maior satélite natural do Sistema Solar é Ganimedes, lua do planeta Netuno.", "F"],
				["O planeta que apresenta maior quantidade de satélites é Júpiter (63 satélites naturais).", "V"],
				["Segundo estudos de astrofísicos, o Sistema Solar nasceu a, aproximadamente, 4,6 bilhões de anos.", "V"],
				["A estrela mais próxima do Sistema Solar é Centauri, distante cerca de 4,22 anos-luz. Ela está localizada no sistema Alpha Centauri.", "V"],
				["O planeta do Sistema Solar que está mais próximo do Sol é Mercúrio. Mercúrio é também o menor planeta do sistema solar e sua temperatura na superfície pode atingir 420ºC.", "V"],
				["Marte é o planeta mais próximo da Terra.", "V"]
			];
		
			document.write("<ol>");

			for (var linha = 0; linha < perguntas.length; linha++) {
				document.write("<li id='L" + linha + "'>" +perguntas[linha][0]+ "</li>");
				document.write("<input type='radio' name='res" + linha + "' id='v" + linha + "' value='V' /> <label>VERDADEIRO</label> <br/>");
				document.write("<input type='radio' name='res" + linha + "' id='f" + linha + "' value='F' /> <label>FALSO</label>");
			}

			document.write("</ol>");
		</script>

		<button id="enviar" onclick="verificar();">Enviar</button>

		<div id="acertos" style="visibility: hidden;">
			<p id="mensagem" style="font-size: 2em;"></p>
		</div>
	</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
    • By CyberBTW
      Eu estou começando a aprender html mas estou com um problema q n me deixa avançar http://prntscr.com/o3fb0g eu n sei oq esta dando de errado, sendo q todas as divs estão fechadas e estão é numeros pares.  Na video aula que eu estava vendo, o cara não teve esse problema então fiquei confuso, sendo q os codigos q eu digitei estão exatamente iguais ao do cara. Quem quiser saber q video é esta aqui: https://www.youtube.com/watch?v=qPYCnebQQ6U parei na parte 25:01
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.