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 lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By quimera
      O problema seria simples se o script da página permitisse o autopreenchimento usando javascript, masssssssssssss...
      O site em questão não permite que o campo seja preenchido dinamicamente ou seja usando script (ele identifica a digitação do teclado para impedir isso)
      Eles devem usar algo como: onkeypress ou onkeyup e acumular os valores digitados numa variável para dispor isso no post/get
      Por que nesse caso, se foi simplesmente colado ou preenchido via script não vai aceitar já que provavelmente é acumulativo e não verificado se o campo foi preenchido.
      Então como preencher dinamicamente o campo usando javascript nesse caso?
    • By Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
    • By AndersonWS
      Boa tarde, já tentei muitas formas mas não consigo retirar o atributo required.
      O resultado que eu preciso é, quando retiro o required de um (name="posicao") o outro fica com required e vice-versa e também um aparece e outro some.
       
      Segue o código HTML.
      <select name="posicao" class="form-control option_escolhida" style="display:none" id="2" required="" disabled> <option value="" selected>Selecione</option> <option value="1">Espaco</option> <option value="2">Cursos</option> </select> <select name="posicao" class="form-control option_escolhida" style="display:none" id="4" required="" disabled> <option value="" selected>Selecione</option> <option value="4">Políticas de privacidade</option> </select> <div class="sem_option"><code>Sem posição definida</code></div> <div class="ini_option"><code>Posição inicial</code></div> <div class="main_option" style="display:none"> <input name="apelido" class="form-control apelido" placeholder="Nome do grupo" type="text" required="" disabled> </div> Segue o código javascrpt:
      $('.select_escolhida').on({change: listChildren}).trigger('change'); function listChildren() { if ( $(this).val() != '' ) { children = $('option').val(); $(".ini_option").show(); $(".option_escolhida").hide(); $(".option_escolhida").attr("disabled", true); $("#" + $(this).val() ).show(); $("#" + $(this).val() ).removeAttr("disabled"); $(".sem_option").hide(); if( ($(this).val() == '1')||($(this).val() == '3') ){ $(".main_option").show(); $(".apelido").removeAttr("disabled"); } else { $(".main_option").hide(); $(".apelido").attr("disabled", true); $(".ini_option").hide(); } } else { $(".sem_option").show(); $(".ini_option").hide(); $(".apelido").hide(); } }  
×

Important Information

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