Test con javascript

foroworld · #1 (**permalink**) 25/09/2010, 12:40

Hola a todos,

He creado un test y su correción en la misma página por medio de javascript.

Aquí os dejo el código:

Código HTML:

<html>
<head>
<title>Corrección de un test</title>
</head>


<body>

<FORM name="Preguntas">

  <p>
<!-- Primera pregunta -->
    1.- Este es el enunciado de la primera pregunta del test.  </p>

  <p>
    <input type="radio" name="pregunta1" id="p11" value="A" /> Texto de la respuesta A.  </p> <p>
    <input type="radio" name="pregunta1" id="p12" value="B" /> Texto de la respuesta B.  </p> <p>
    <input type="radio" name="pregunta1" id="p13" value="C" /> Texto de la respuesta C.  </p> <p>
    <input type="radio" name="pregunta1" id="p14" value="D" /> Texto de la respuesta D.  </p>
  <p></p>

    
<!-- Segunda pregunta -->   
    2.- Este es el enunciado de la segunda pregunta del test.  </p>

  <p>
    <input type="radio" name="pregunta2"  id="p21" value="A" /> Texto de la respuesta A.  </p> <p>
    <input type="radio" name="pregunta2"  id="p22" value="B" /> Texto de la respuesta B.  </p> <p>
    <input type="radio" name="pregunta2"  id="p23" value="C" /> Texto de la respuesta C.  </p> <p>
    <input type="radio" name="pregunta2"  id="p24" value="D" /> Texto de la respuesta D.  </p>
   <p></p>

    
<!-- Tercera pregunta -->
3.- Este es el enunciado de la tercera pregunta del test.   </p>

  <p>
    <input type="radio" name="pregunta3"  id="p31" value="A" /> Texto de la respuesta A.  </p> <p>
    <input type="radio" name="pregunta3"  id="p32" value="B" /> Texto de la respuesta B.  </p> <p>
    <input type="radio" name="pregunta3"  id="p33" value="C" /> Texto de la respuesta C.  </p> <p>
    <input type="radio" name="pregunta3"  id="p34" value="D" /> Texto de la respuesta D.  </p>
   <p></p>

  
</FORM>


<FORM name="boton">
    <input type="button"  name="boton" value=" CORREGIR " onclick="corregir()"/>
</FORM>


<br><br>

<b>RESULTADO DEL TEST</b> <P>
<form name="resultado" action="">
	
Has acertado <input type="text" size="3" name="aciertos" value=""/> preguntas <br>
Has fallado en <input type="text" size="3" name="fallos" value=""/> preguntas <br>
Has dejado de responder <input size="3" name="blancos" type="text"  value=""/> preguntas <P>
PUNTUACIÓN: <input type="text" size="5" name="puntuacion" value=""/> puntos

</form>


</body>
</html>

No sé en que estoy fallando, pero cuando ejecuto no hay forma de que aparezca la correción del test en la parte de abajo de la página.

¿Alguien sabe donde estoy fallando?

Muchas gracias.

Adler · #2 (**permalink**) 25/09/2010, 12:51

Hola

No puedes hacer referencia al form si usar getElementById

Cita:

document.resultado.getElementById('aciertos').value = aciertos;

Quita esa parte

Suerte

foroworld · #3 (**permalink**) 25/09/2010, 13:23

Perdonen, al volver a editar el primer mensaje he dejado solo la parte de HTML, aquí vuelvo a pegar la página completa con el javaScript:

Código HTML:

<html>
<head>
<title>Corrección de un test</title>
<script language="JavaScript">
function corregir(){
var p1
var p2
var p3
var aciertos = 0
var fallos = 0
var blancos = 0
var nota
var notaFinal
<!-- 1º pregunta-->
if (document.getElementById('p11').checked==true) {
   p1 = 1;
   aciertos++;
}else if (document.getElementById('p12').checked==true){
      p1 = -0.5;
         fallos++;
}else if (document.getElementById('p13').checked==true){
      p1 = -0.5;
        fallos++;
}else if (document.getElementById('p14').checked==true){
      p1 = -0.5;
         fallos++;
}else{
      p1= -0.1;
      blancos++;
      }
      
<!-- 2º pregunta-->
if (document.getElementById('p21').checked==true) {
   p2 = 1;
   aciertos++;
}else if (document.getElementById('p22').checked==true){
      p2 = -0.5;
         fallos++;
}else if (document.getElementById('p23').checked==true){
      p2 = -0.5;
         fallos++;
}else if (document.getElementById('p24').checked==true){
      p2 = -0.5;
         fallos++;
}else{
      p2= -0.1;
      blancos++;
         }
      
<!-- 3º pregunta-->
if (document.getElementById('p31').checked==true) {
   p3 = 1;
   aciertos++;
}else if (document.getElementById('p32').checked==true){
      p3 = -0.5;
         fallos++;
}else if (document.getElementById('p33').checked==true){
      p3 = -0.5;
        fallos++;
}else if (document.getElementById('p34').checked==true){
      p3 = -0.5;
         fallos++;
}else{
      p3= -0.1;
      blancos++;
      }
      
nota = p1+p2+p3;
if(nota<0){
puntuacion = 0;
}else{
puntuacion = nota;
}
[COLOR="Red"]document.resultado.getElementById('aciertos').value = aciertos;
document.resultado.getElementById('fallos').value = fallos;
document.resultado.getElementById('blancos').value = blancos;
document.resultado.getElementById('puntuacion').value = puntuacion;[/COLOR]
}
</script>
</head>
<body>
<form name="preguntas">
<p><!-- Primera pregunta -->
    1.- Este es el enunciado de la primera pregunta del test.  </p>
<p>
    <input type="radio" name="pregunta1" id="p11" value="A"> Texto de la respuesta A.  </p>
<p>
    <input type="radio" name="pregunta1" id="p12" value="B"> Texto de la respuesta B.  </p>
<p>
    <input type="radio" name="pregunta1" id="p13" value="C"> Texto de la respuesta C.  </p>
<p>
    <input type="radio" name="pregunta1" id="p14" value="D"> Texto de la respuesta D.  </p>
<p> </p>
<!-- Segunda pregunta -->2.- Este es el enunciado de
la segunda pregunta del test.
<p> </p>
<p>
    <input type="radio" name="pregunta2" id="p21" value="A"> Texto de la respuesta A.  </p>
<p>
    <input type="radio" name="pregunta2" id="p22" value="B"> Texto de la respuesta B.  </p>
<p>
    <input type="radio" name="pregunta2" id="p23" value="C"> Texto de la respuesta C.  </p>
<p>
    <input type="radio" name="pregunta2" id="p24" value="D"> Texto de la respuesta D.  </p>
<p> </p>
<!-- Tercera pregunta -->3.- Este es el enunciado de
la tercera pregunta del test.
<p> </p>
<p>
    <input type="radio" name="pregunta3" id="p31" value="A"> Texto de la respuesta A.  </p>
<p>
    <input type="radio" name="pregunta3" id="p32" value="B"> Texto de la respuesta B.  </p>
<p>
    <input type="radio" name="pregunta3" id="p33" value="C"> Texto de la respuesta C.  </p>
<p>
    <input type="radio" name="pregunta3" id="p34" value="D"> Texto de la respuesta D.  </p>
<p> </p>
</form>
<form name="boton">
	<input type="button"  name="boton" value=" CORREGIR " onclick="corregir()"/> 
</form>
<br><br>
<b>RESULTADO DEL TEST</b>
<p>
<form name="resultado" action="">
    
Has acertado <input size="3" id="aciertos"> preguntas <br>
Has fallado en <input size="3" id="fallos"> preguntas <br>
Has dejado de responder <input size="3" id="blancos"> preguntas
<p>
PUNTUACIÓN: <input size="5" type="text" id="puntuacion" />  puntos
</form></p>
</body>
</html>

foroworld · #4 (**permalink**) 25/09/2010, 13:31

Cita:

Iniciado por Adler

Hola

No puedes hacer referencia al form si usar getElementById

Quita esa parte

Suerte

no sé a que te refieres, si quito esa parte que debo poner.

Muchas gracias

Adler · #5 (**permalink**) 25/09/2010, 13:32

Hola

Cita:

Iniciado por foroworld

Perdonen, al volver a editar el primer mensaje he dejado solo la parte de HTML, aquí vuelvo a pegar la página completa con el javaScript:

Nada tú continua desguazando el código. Cambia esto

Cita:

document.resultado.getElementById('aciertos').value = aciertos;

por esto

Cita:

document.getElementById('aciertos').value = aciertos;

Suerte

foroworld · #6 (**permalink**) 25/09/2010, 13:38

OK, muchisimasssss graciasssssss!!!!

Eowyn4 · #7 (**permalink**) 16/11/2015, 14:21

Hola

Subo este post porque repasando ejercicios básicos de javascript me he topado con este código.

Lo ando trasteando y me ha surgido una duda. Si quisiera añadir una imagen (p.e un check verde, en caso de acierto o una cruz, en caso de fallo) ¿dónde añadiría el código? He estado haciendo pruebas con document.getelementby(id).src pero creo que voy por el mal camino ¿no?

Saludos