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 Lottechar
      tenho uma funçao e quero modificar os estilos sem precisar ficar escrevendo "document bla bla" toda hora em todas as modificaçoes .style, 
      o codigo e mais ou menos isso:
       
      function teste() { var info_cor = document.getElementById('mensagemCor').value; mensagemCor.style.color = "#fff"; } ja verifiquei esta com o eveneto os IDs estao certos, mas da erro especificamente na
       
      info_cor.style.color = "#fff"; alguem pode me tirar a duvida de como é a forma correta?
    • By juniorerb21
      Tenho um site em php e quero alterar o cabeçalho e os icones do cabeçalho, e não sei muito de programação, sei o básico, não consegui alterar, quem poder me ajudar vai ser de grande ajuda!

    • By Yiuky
      Olá tenho esse código abaixo e a parte em vermelho é um HTML carregado pelo meu Arduíno, e como podem ver, ao clicar no botão LIGAR/DESLIGAR é enviado um retorno pelo <a href> porém eu gostaria de saber como posso apenas coletar esse retorno /L OU /H e carregar a pagina index / (barra vazia)? Ou se posso clicar no LIGAR/DESLIGAR e adicionar algo para que a pagina "atualize" ou vá para a /?
       
      // \r\n no final de todos os códigos AT para pular linhas e reconhecer comando
      #include "SDHT.h"
      #include "WiFiEsp.h" //INCLUSÃO DA BIBLIOTECA
      #include <SoftwareSerial.h>
      //Pino do Tx no 6, pino Rx no 7
      SoftwareSerial esp8266(6, 7);
      SDHT dht;
      char ssid[] = "2.4_GAMBATESHIMA"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
      char pass[] = "FACA2010";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
      //char ssid[] = "Ali"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
      //char pass[] = "01010101";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
      WiFiEspServer server(81); //CONEXÃO REALIZADA NA PORTA 80
      RingBuffer buf(8); //BUFFER PARA AUMENTAR A VELOCIDADE E REDUZIR A ALOCAÇÃO DE MEMÓRIA
      #define DEBUG true
        int statusLed = LOW; //VARIÁVEL QUE ARMAZENA O ESTADO ATUAL DO LED (LIGADO / DESLIGADO)
        String temperatura;
        String umidade;
        
        int status = WL_IDLE_STATUS;
        
      void lerTempUmi(){
        dht.broadcast(DHT11, A1);
        delay(500);
        temperatura = String (dht.celsius, 0);
        umidade = String (dht.humidity, 0);
         }
        
      void setup() 
      {
          Serial.begin(9600);
          esp8266.begin(9600);
          WiFi.init(&esp8266);   // initialize ESP module
          pinMode(12, OUTPUT);
          digitalWrite(12, statusLed);
        if (WiFi.status() == WL_NO_SHIELD)  // check for the presence of the shield 
        {
          Serial.println("WiFi shield not present");
          // don't continue
          while (true);
        }
        // attempt to connect to WiFi network
        while ( status != WL_CONNECTED) {
          Serial.print("Attempting to connect to WPA SSID: ");
          Serial.println(ssid);
          // Connect to WPA/WPA2 network
          status = WiFi.begin(ssid, pass);
        }
        Serial.println("You're connected to the network");
        printWifiStatus();
        
        while ( status != WL_CONNECTED) {
          Serial.print("Attempting to connect to WPA SSID: ");
          WiFi.init(&esp8266);
          WiFi.begin(ssid, pass);
          Serial.println(ssid);
          // Connect to WPA/WPA2 network
          status = WiFi.begin(ssid, pass);
        }
        //sendData("AT+RST\r\n", 2000, DEBUG); // rst
        //sendData("AT+CWMODE=1\r\n",2000, DEBUG); 
        //sendData("AT+CWJAP=\"2.4_GAMBATESHIMA\",\"FACA2010\"\r\n", 5000, DEBUG);
            
        //sendData("AT+CIFSR\r\n", 2000, DEBUG);//You will get the IP Address of the ESP8266 from this command. 
        //sendData("AT+CIPMUX=1\r\n", 2000, DEBUG);
        //sendData("AT+CIPSERVER=1,80\r\n", 2000, DEBUG);
        //sendData("AT+CIPSTART=0,\"TCP\",\"192.168.0.120\",37777\r\n",1000, DEBUG);                          // escolhe entre conexao TCP ou UDP 
        //delay(1000); 
        //sendData("AT+CWDHCP=1,0\r\n",1000, DEBUG);                                                        // configura ESP8266 para receber um IP do roteador conectado
        //delay(1000);
        //sendData("AT+CIPSTA_DEF=\"192.168.2.5\",\"192.168.2.1\",\"255.255.255.0\"\r\n",1000, DEBUG);      // configura novo IP a ser escolhido - IP fixo, IP do roteador, Mascara da Rede (lembrando que o IP a ser escolhido deve estar na mesma faixa do roteador);
        //delay(1000);   
        //sendData("AT+CIFSR\r\n", 1000, DEBUG);                                                              // Mostra o endereco IP
        //delay(3000);
        
        // Configura para multiplas conexoes
        //sendData("AT+CIPMUX=1\r\n", 1000, DEBUG);                                                           // Abre multiplas conexoes
        //delay(2000);
        //sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG);
        delay(1000);
        server.begin();
        
      }
      void loop() 
      {
             WiFiEspClient client = server.available(); //ATENDE AS SOLICITAÇÕES DO CLIENTE
            if (client) { //SE CLIENTE TENTAR SE CONECTAR, FAZ
            buf.init(); //INICIALIZA O BUFFER
            boolean currentLineIsBlank = true;
            while (client.connected()){ //ENQU
            if(client.available()){ //SE EXISTIR REQUISIÇÃO DO CLIENTE, FAZ
              char c = client.read(); //LÊ A REQUISIÇÃO DO CLIENTE
              buf.push(c); //BUFFER ARMAZENA A REQUISIÇÃO
               //IDENTIFICA O FIM DA REQUISIÇÃO HTTP E ENVIA UMA RESPOSTA
              if(buf.endsWith("\r\n\r\n") && currentLineIsBlank) {
       //         lerTempUmi();
                WebPage2(client);
                break;
              }else if(buf.endsWith("GET /H")){ //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "H", FAZ 
                  digitalWrite(12, HIGH); //ACENDE O LED
                  statusLed = HIGH; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
              }else if (buf.endsWith("GET /L")) { //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "L", FAZ
                        digitalWrite(12, LOW); //APAGA O LED
                        statusLed = LOW; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
                   }
                   }
                   
                   }
                   delay(10);
            client.stop();
      //sendData("AT+CIPCLOSE=0\r\n", 1000, DEBUG);
                    }
      if (status != WL_CONNECTED) {
        setup();}
      }
      void WebPage2(WiFiEspClient client){
        client.print(
          "HTTP/1.1 200 OK\r\n"
          "Content-Type: text/html\r\n"
       //   "Connection: close\r\n"  // the connection will be closed after completion of the response
          "\r\n");
        client.println("");
        client.println(F("<!DOCTYPE HTML>")); //INFORMA AO NAVEGADOR A ESPECIFICAÇÃO DO HTML
        client.println(F("<html><head><meta charset=\"utf-8\">")); //ABRE A TAG "html"
        client.println(F("<link rel='stylesheet' type='text/css' href='http://blogmasterwalkershop.com.br/arquivos/artigos/sub_wifi/webpagecss.css' />\n"
        "<link rel=\"icon\" type=\"image/png\" href=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\">\n"
      "  <title>GAMBATESHIMA ARDUINO WORK</title>"));
        
        //AS LINHAS ABAIXO CRIAM A PÁGINA HTML
        client.println(F("<body class=\"htmlNoPages\">\n"
      "  <img alt=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\" style=\"width: 150px; height: 150px; margin-top: 50px;\">\n"
      "  <p style=\"line-height: 2;\" class=\"gwd-p-pzi3\"><font>WEBSERVER GAMBATESHIMA</font></p><p>ESTADO ATUAL DO LED: \n"));
          if (statusLed == HIGH) {
      client.println(F(" <strong><font color=\"green\">LIGADO</font></strong></p>\n"
            "<a href=\"/L\" style=\"margin-bottom:50px;\">DESLIGAR</a>\n"));
          }else {
            if (statusLed == LOW) {
      client.println(F(" <strong><font color=\"red\">DESLIGADO</font></strong></p>\n"
            "<a href=\"/H\" style=\"margin-bottom:50px;\">ACENDER</a>\n"));
          }}
                lerTempUmi();
      client.println(F( 
      "  <hr width=\"250\">\n"
      "  <p style=\"line-height: 0;\"><font color=\"red\">TEMPERATURA: </font>"));
      client.print(temperatura);
      client.println(F(" ºC</p>\n <hr width=\"250\">\n"
      "  <p style=\"line-height: 0;\"><font color=\"red\">UMIDADE: </font>"));
      client.print(umidade);
      client.println(F(" %</p>\n <hr width=\"250\">\n"
      "<a href=\"/\">ATUALIZAR</a>\n"
      "</body>\n"
      "</html>
×

Important Information

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