Quiz - Radio Button

13 de maio de 2012 3 respostas

Stormpbi 13 de maio de 2012

Bom dia,

Meu objetivo e que se a opção correta for marcada ou se a opção errada for marcada o texto que acompanha o Radio Button mude para verde ou vermelho após o botão “conferir” se submetido. Mas só funciona com 2 blocos de “if”, e tenho 5 radio button para cada opção, se tento completar a função da erro.

Assim funciona:

<script> 

function exercicio2(form2){
score=0;

if(document.form2.e21[0].checked){
score=score+1;
(window.certo.style.color="00ff00")
alert("Acertou "+score);

}else{
if(document.form2.e21[0].checked){
(window.certo.style.color="ff0000")
}
}
}
</script>
<body>
<form name="form2">

<span class="exemplo1"> A dissonância será bela.<span>

<span class="exemplo2">
<input type="radio" name="e21" value"a"> <span id="certo"> VL </span> 
<input type="radio" name="e21" value"b"> <span id="certo"> VI </span> 
<input type="radio" name="e21" value"c"> < VTI 
<input type="radio" name="e21" value"d">  VTD
<input type="radio" name="e21" value"e">  VTDI 
</span>
<input type="button" name="conferir2" onClick="exercicio2(this.form)">

</form>
</body>
</html>

3 Respostas

thiagof 14 de mai. de 2012

Fala Stormpbi!

Cara não sei se é bem o que vc precisa mas roda isso aqui num browser ai para ver o resultado:

<html>
	<head>
		<title>Exercicio 2</title>
		<script type="text/javascript">
			function checkOpt(){				  
				var i = 0,
				    optCorrect = "a",
					rdos = document.getElementsByName("ex2");
				for(i in rdos) {
					rdos[i].parentElement.style.backgroundColor = "";
					if(rdos[i].checked) {
						if(rdos[i].value == optCorrect) {
							rdos[i].parentElement.style.backgroundColor = "00FF00";
						} else {
							rdos[i].parentElement.style.backgroundColor = "FF0000";
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<span>Exercicio 2: Questao???</span>
		<ul>
			<li><input type="radio" name="ex2" value="a" /><span>VL</span></li>
			<li><input type="radio" name="ex2" value="b" /><span>VI</span></li>
			<li><input type="radio" name="ex2" value="c" /><span>VTI</span></li>
			<li><input type="radio" name="ex2" value="d" /><span>VTD</span></li>
			<li><input type="radio" name="ex2" value="e" /><span>VTDI</span></li>
		</ul>
		<input type="button" value="Conferir" onclick="checkOpt()" />
	</body>  
</html>

Stormpbi 15 de mai. de 2012

Obrigada Thiago, além de você ninguém respondeu, sua ideia foi boa, mas teria que colocar as questões dentro de uma tabela e trocar a cor de fundo das células, e não é o que eu queria, minha idéia era que o texto que acompanha o Radio button mudasse conforme a naturaza da opção certo ou errado.

Não estava dando certo por causas dos IDs(é usado para identificar uma coisa única ou tag na sua página), então crie um id para cada opção.

<html><head><title>Estrutura Sintática</title>


<link rel="stylesheet" type="text/css" href="estilos.css"/>


<script>

function exercicio2(form2){
score=0;
	
	if(document.form2.e21[0].checked){
		score= score + 1;
		(window.certo1.style.color="00ff00")
				
}

		if(document.form2.e21[1].checked){
			(window.errado11.style.color= "ff0000")
				
				}

		if(document.form2.e21[2].checked){
			(window.errado12.style.color= "ff0000")
		

		}
	if(document.form2.e21[3].checked){
		(window.errado13.style.color= "ff0000")
			
		}
	if(document.form2.e21[4].checked){
		(window.errado14.style.color= "ff0000")
			
		}	
	
	if(document.form2.e22[0].checked){
		(window.errado20.style.color="ff0000")
		}
	
	if(document.form2.e22[1].checked){
		(window.errado21.style.color="ff0000")
		}
	
	if(document.form2.e22[2].checked){
		(window.errado22.style.color="ff0000")
		}

	if(document.form2.e22[3].checked){
			score= score + 1;
		(window.certo2.style.color="00ff00")		
		}

	if(document.form2.e22[4].checked){
		(window.errado24.style.color="ff0000")
		}

	if(document.form2.e23[0].checked){
		(window.errado30.style.color="ff0000")
		}

	if(document.form2.e23[1].checked){
			score= score + 1;
		(window.certo3.style.color="00ff00")
		}
	
	if(document.form2.e23[2].checked){
		(window.errado32.style.color="ff0000")
		}

	if(document.form2.e23[3].checked){
		(window.errado33.style.color="ff0000")
		}

	if(document.form2.e23[4].checked){
		(window.errado34.style.color="ff0000")
		}

	if(document.form2.e24[0].checked){
		(window.errado40.style.color="ff0000")
		}

	if(document.form2.e24[1].checked){
		(window.errado41.style.color="ff0000")
		}
	
	if(document.form2.e24[2].checked){
		(window.errado42.style.color="ff0000")
		}

	if(document.form2.e24[3].checked){
		(window.errado43.style.color="ff0000")
		}

	if(document.form2.e24[4].checked){
			score= score + 1;
		(window.certo4.style.color="00ff00")
		}
		
	if(document.form2.e25[0].checked){
			score= score + 1;
		(window.certo5.style.color="00ff00")
		}

	if(document.form2.e25[1].checked){
		(window.errado51.style.color="ff0000")
		}
	
	if(document.form2.e25[2].checked){
		(window.errado52.style.color="ff0000")
		}

	if(document.form2.e25[3].checked){
		(window.errado53.style.color="ff0000")
		}

	if(document.form2.e25[4].checked){
		(window.errado54.style.color="ff0000")
		}
		
	if(document.form2.e26[0].checked){
		(window.errado60.style.color="ff0000")
		}

	if(document.form2.e26[1].checked){
			score= score + 1;
		(window.certo6.style.color="00ff00")
		}
	
	if(document.form2.e26[2].checked){
		(window.errado62.style.color="ff0000")
		}

	if(document.form2.e26[3].checked){
		(window.errado63.style.color="ff0000")
		}

	if(document.form2.e26[4].checked){
		(window.errado64.style.color="ff0000")
		}
		
	if(document.form2.e27[0].checked){
		(window.errado70.style.color="ff0000")
		}

	if(document.form2.e27[1].checked){
		(window.errado71.style.color="ff0000")
		}
	
	if(document.form2.e27[2].checked){
		(window.errado72.style.color="ff0000")
		}

	if(document.form2.e27[3].checked){
		(window.errado73.style.color="ff0000")
		}

	if(document.form2.e27[4].checked){
			score= score + 1;
		(window.certo7.style.color="00ff00")
		}	
		
	if(document.form2.e28[0].checked){
		(window.errado80.style.color="ff0000")
		}

	if(document.form2.e28[1].checked){
		(window.errado81.style.color="ff0000")
		}
	
	if(document.form2.e28[2].checked){
			score= score + 1;
		(window.certo8.style.color="00ff00")
		}

	if(document.form2.e28[3].checked){
		(window.errado83.style.color="ff0000")
		}

	if(document.form2.e28[4].checked){
		(window.errado84.style.color="00ff00")
		}		
		
	if(document.form2.e29[0].checked){
		(window.errado90.style.color="ff0000")
		}

	if(document.form2.e29[1].checked){
		(window.errado91.style.color="ff0000")
		}
	
	if(document.form2.e29[2].checked){
		(window.errado92.style.color="ff0000")
		}

	if(document.form2.e29[3].checked){
			score= score + 1;
		(window.certo9.style.color="00ff00")
		}

	if(document.form2.e29[4].checked){
		(window.errado94.style.color="ff0000")
		}	
		
	if(document.form2.e210[0].checked){
			score= score + 1;
		(window.certo10.style.color="00ff00")
		}

	if(document.form2.e210[1].checked){
		(window.errado101.style.color="ff0000")
		}
	
	if(document.form2.e210[2].checked){
		(window.errado102.style.color="ff0000")
		}

	if(document.form2.e210[3].checked){			
		(window.certo10.style.color="00ff00")
		}

	if(document.form2.e210[4].checked){
		(window.errado104.style.color="ff0000")
		}		
		
	if(document.form2.e211[0].checked){			
		(window.errado110.style.color="ff0000")
		}

	if(document.form2.e211[1].checked){
			score= score + 1;
		(window.certo11.style.color="00ff00")
		}
	
	if(document.form2.e211[2].checked){
		(window.errado112.style.color="ff0000")
		}

	if(document.form2.e211[3].checked){			
		(window.errado113.style.color="ff0000")
		}

	if(document.form2.e211[4].checked){
		(window.errado114.style.color="ff0000")
		}	
		
	if(document.form2.e212[0].checked){			
		(window.errado120.style.color="ff0000")
		}

	if(document.form2.e212[1].checked){
		(window.errado121.style.color="ff0000")
		}
	
	if(document.form2.e212[2].checked){
		(window.errado122.style.color="ff0000")
		}

	if(document.form2.e212[3].checked){			
		(window.errado123.style.color="ff0000")
		}

	if(document.form2.e212[4].checked){
			score= score + 1;
		(window.certo12.style.color="00ff00")
		}	
		
		alert("Você acertou  "+score+ "  de 12 questões!" );																		
}


</script>

</head>

<body>
</form>

<h2>02. Classifique, quanto à predicação, os verbos das orações de 1 a 12:</h2>


<form name="form2">
<span class="exemplo1">01. ?A dissonância será bela.</span>

<span class="exemplo2"> 
a)<input type="radio" name="e21"  value="a"><span id="certo1"> VL</span>
b)<input type="radio" name="e21"  value="b"> <span id="errado11" > VI </span>
c)<input type="radio" name="e21"  value="c"> <span id="errado12" >  VTI </span> 
 
d)<input type="radio" name="e21"  value="d">  <span id="errado13" >  VTD </span> 
e)<input type="radio" name="e21"  value="e">  <span id="errado14" >  VTDI </span> 
 </span> 


<span class="exemplo1"> 02. ? Eu vejo um novo começo de era.?</span>


<span class="exemplo2">a)
<input type="radio" name="e22" value="a"> <span id="errado20" >  VL </span>
b)<input type="radio" name="e22" value="b"> <span id="errado21" > VI </span>
c)<input type="radio" name="e22" value="c"> <span id="errado22" >  VTI </span> 
d)<input type="radio" name="e22" value="d"> <span id="certo2"> VTD</span>
c)<input type="radio" name="e22" value="e"> <span id="errado24" >  VTDI </span>
</span>



<span class="exemplo1"> 03. ?Hoje o tempo voa, amor.? </span>

<span class="exemplo2">a)
<input type="radio" name="e23" value="a"> <span id="errado30" >  VL </span>
b)<input type="radio" name="e23" value="b"> <span id="certo3"> VI</span>
c)<input type="radio" name="e23" value="c"> <span id="errado32" >  VTI </span> 
d)<input type="radio" name="e23" value="d"> <span id="errado33" >  VTD </span> 
c)<input type="radio" name="e23" value="e"> <span id="errado34" >  VTDI </span>
</span>



<span class="exemplo1"> 04.A noite oferece todos os sonhos aos jovens. </span>

<span class="exemplo2">a)
<input type="radio" name="e24" value="a"> <span id="errado40" >  VL </span>
b)<input type="radio" name="e24" value="b"> <span id="errado41" >  VI </span>
c)<input type="radio" name="e24" value="c"> <span id="errado42" >  VTI </span> 
d)<input type="radio" name="e24" value="d"> <span id="errado43" >  VTD </span> 
c)<input type="radio" name="e24" value="e"> <span id="certo4"> VTDI</span>
</span>


<span class="exemplo1"> 05.A natureza estava tão triste. </span>

<span class="exemplo2">
a)<input type="radio" name="e25" value="a"> <span id="certo5"> VL </span>
b)<input type="radio" name="e25" value="b"> <span id="errado51" >  VI </span>
c)<input type="radio" name="e25" value="c"> <span id="errado52" >  VTI </span> 
d)<input type="radio" name="e25" value="d"> <span id="errado53" >  VTD </span> 
c)<input type="radio" name="e25" value="e"> <span id="errado54"> VTDI </span>
</span>



<span class="exemplo1"> 06. ? O bicho estava perto.? </span>

<span class="exemplo2">a)
<input type="radio" name="e26" value="a"> <span id="errado60" >  VL </span>
b)<input type="radio" name="e26" value="b"> <span id="certo6"> VI </span>
c)<input type="radio" name="e26" value="c"> <span id="errado62" >  VTI </span> 
d)<input type="radio" name="e26" value="d"> <span id="errado63" >  VTD </span> 
c)<input type="radio" name="e26" value="e"> <span id="errado64"> VTDI </span>
</span>


<span class="exemplo1"> 07. ?O tempo trouxe a sua ação benéfica ao meu coração.? </span>

<span class="exemplo2">a)
<input type="radio" name="e27" value="a"> <span id="errado70" >  VL </span>
b)<input type="radio" name="e27" value="b"> <span id="errado71"> VI</span>
c)<input type="radio" name="e27" value="c"> <span id="errado72" >  VTI </span> 
d)<input type="radio" name="e27" value="d"> <span id="errado73" >  VTD </span> 
c)<input type="radio" name="e27" value="e"> <span id="certo7"> VTDI </span>
</span>


<span class="exemplo1"> 08. ?... pensei no seminário...? </span>

<span class="exemplo2">a)
<input type="radio" name="e28" value="a"> <span id="errado80" >  VL </span>
b)<input type="radio" name="e28" value="b"> <span id="errado81"> VI</span>
c)<input type="radio" name="e28" value="c"> <span id="certo8"> VTI</span>
d)<input type="radio" name="e28" value="d"> <span id="errado83" >  VTD </span> 
c)<input type="radio" name="e28" value="e"> <span id="errado84"> VTDI </span>
</span>


<span class="exemplo1"> 09. ?Ouvimos passos no corredor...? </span>

<span class="exemplo2">a)
<input type="radio" name="e29" value="a"> <span id="errado90" >  VL </span>
b)<input type="radio" name="e29" value="b"> <span id="errado91"> VI </span>
c)<input type="radio" name="e29" value="c"> <span id="errado92" >  VTI </span> 
d)<input type="radio" name="e29" value="d"> <span id="certo9"> VTD </span>
c)<input type="radio" name="e29" value="e"> <span id="errado94"> VTDI </span>
</span>


<span class="exemplo1"> 10.Todos viviam muito cansados naquela época. </span>

<span class="exemplo2">a)
<input type="radio" name="e210" value="a"> <span id="certo10"> VL </span>
b)<input type="radio" name="e210" value="b"> <span id="errado101"> VI</span>
c)<input type="radio" name="e210" value="c"> <span id="errado102" >  VTI </span>
d)<input type="radio" name="e210" value="d"> <span id="errado103" >  VTD </span> 
c)<input type="radio" name="e210" value="e"> <span id="errado104"> VTDI </span>
</span>


<span class="exemplo1"> 11. ?Vivo à margem da vida.? </span>

<span class="exemplo2">a)
<input type="radio" name="e211" value="a"> <span id="errado110"> VL </span>VL
b)<input type="radio" name="e211" value="b"> <span id="certo11"> VI </span>
c)<input type="radio" name="e211" value="c"> <span id="errado112" >  VTI </span>
d)<input type="radio" name="e211" value="d"> <span id="errado113" >  VTD </span> 
c)<input type="radio" name="e211" value="e"> <span id="errado114"> VTDI </span>
</span>


<span class="exemplo1"> 12.Mandei recado a sua mãe agora mesmo.</span> </span>

<span class="exemplo2">a)
<input type="radio" name="e212" value="a"> <span id="errado120"> VL</span>VL
b)<input type="radio" name="e212" value="b"> <span id="errado121"> VI</span>
c)<input type="radio" name="e212" value="c"> <span id="errado122" >  VTI </span>
d)<input type="radio" name="e212" value="d"> <span id="errado123" >  VTD </span> 
c)<input type="radio" name="e212" value="e"> <span id="certo12"> VTDI </span>
</span>

<br>
<input type="button" name="conferir2" value="Conferir" onClick="exercicio2(this.form)">
</form>
</body>
</html>

Marlon_Meneses 15 de mai. de 2012

fera…
não complica!
usa jquery!!

<html><head><title>Estrutura Sintática</title>


<link rel="stylesheet" type="text/css" href="estilos.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
	$(document).ready(function(){
           var total = $('span.exemplo1').length
           var acertos = 0
	   $('input[type=button]').click(function(){
		$('span.exemplo2').each(function(){
                        var q = $(this)
			var alternativas = $(this).children("input[type=radio]")
                        for(var i = 0; i < alternativas.length; i++){
			    if(alternativas[i].checked){
                              if($(alternativas[i]).val() == $(q).attr('name') ){
                                 acertos++
		                 $($(q).children('span')[i]).css('color', 'green')
                              }else{
                                 $($(q).children('span')[i]).css('color', 'red')
                              }
                            }
                        }
		})
		alert('Voce acertou ' + acertos + ' de ' + total)
    	   })
           
     })
</script>

</head>

<body>
</form>

<h2>02. Classifique, quanto à predicação, os verbos das orações de 1 a 12:</h2>


<form name="form2">
<span class="exemplo1">01. ?A dissonância será bela.</span><br>

<span class="exemplo2" name="a"> 
a)<input type="radio" name="e21"  value="a"><span id="certo1"> VL</span><br>
b)<input type="radio" name="e21"  value="b"> <span id="errado11" > VI </span><br>
c)<input type="radio" name="e21"  value="c"> <span id="errado12" >  VTI </span><br> 
 
d)<input type="radio" name="e21"  value="d">  <span id="errado13" >  VTD </span><br> 
e)<input type="radio" name="e21"  value="e">  <span id="errado14" >  VTDI </span><br> 
 </span><br> 


<span class="exemplo1"> 02. ? Eu vejo um novo começo de era.?</span><br>


<span class="exemplo2" name="c">
a)<input type="radio" name="e22" value="a"> <span id="errado20" >  VL </span><br>
b)<input type="radio" name="e22" value="b"> <span id="errado21" > VI </span><br>
c)<input type="radio" name="e22" value="c"> <span id="errado22" >  VTI </span><br> 
d)<input type="radio" name="e22" value="d"> <span id="certo2"> VTD</span><br>
c)<input type="radio" name="e22" value="e"> <span id="errado24" >  VTDI </span><br>
</span><br>



<span class="exemplo1"> 03. ?Hoje o tempo voa, amor.? </span><br>

<span class="exemplo2" name="d">
a)<input type="radio" name="e23" value="a"> <span id="errado30" >  VL </span><br>
b)<input type="radio" name="e23" value="b"> <span id="certo3"> VI</span><br>
c)<input type="radio" name="e23" value="c"> <span id="errado32" >  VTI </span><br> 
d)<input type="radio" name="e23" value="d"> <span id="errado33" >  VTD </span><br> 
c)<input type="radio" name="e23" value="e"> <span id="errado34" >  VTDI </span><br>
</span><br>



<span class="exemplo1"> 04.A noite oferece todos os sonhos aos jovens. </span><br>

<span class="exemplo2" name="b">
a)<input type="radio" name="e24" value="a"> <span id="errado40" >  VL </span><br>
b)<input type="radio" name="e24" value="b"> <span id="errado41" >  VI </span><br>
c)<input type="radio" name="e24" value="c"> <span id="errado42" >  VTI </span><br> 
d)<input type="radio" name="e24" value="d"> <span id="errado43" >  VTD </span><br> 
c)<input type="radio" name="e24" value="e"> <span id="certo4"> VTDI</span><br>
</span><br>


<span class="exemplo1"> 05.A natureza estava tão triste. </span><br>

<span class="exemplo2" name="d">
a)<input type="radio" name="e25" value="a"> <span id="certo5"> VL </span><br>
b)<input type="radio" name="e25" value="b"> <span id="errado51" >  VI </span><br>
c)<input type="radio" name="e25" value="c"> <span id="errado52" >  VTI </span><br> 
d)<input type="radio" name="e25" value="d"> <span id="errado53" >  VTD </span><br> 
c)<input type="radio" name="e25" value="e"> <span id="errado54"> VTDI </span><br>
</span><br>

<input type="button" name="conferir2" value="Conferir">
</form>
</body>
</html>

desse jeito vai funcionar com N questões

OBS.: coloca a alternativa correta na tag name do span com o class exemplo2

Criado 13 de maio de 2012

Ultima resposta 15 de mai. de 2012

Respostas 3

Participantes 3

3 Respostas

Topicos relacionados