Comprobar un test con javascript

kl4nd3s · #1 (**permalink**) 26/11/2010, 02:18

Muy buenas. Tengo una duda con javascript. Os comento aver si alguien me puede echar una mano.

Estoy haciendo un test, de 3 respuestas cada pregunta y siempre 1 verdadera.

<td id="c1">
<input type="radio" id="p1f" name="p1">opcion a<br>
<input type="radio" id="p1v" name="p1">opcion b<br>
<input type="radio" id="p1f" name="p1">opcion c</td>
</td>

<td id="c2">
<input type="radio" id="p2f" name="p2">opcion a<br>
<input type="radio" id="p2f" name="p2">opcion b<br>
<input type="radio" id="p2v" name="p2">opcion c
</td>

etc etc.... ( las respuestas con id=pXv son las respuestas correctas)

En el javaScript, quiero crear una funcion que vaya recorriendo todas las respuestas, y en caso de que haya acertado, el fondo de la celda se cambie a color verde y si no a color rojo. La funcion javaScript que estoy haciendo es algo asi.

function resolver()
{
for(var i = 1; i <= 50; i++) {
var verdadero="p"+i+"v";
if (document.forms.s8p1.verdadero.checked == true)
document.getElementById("c"+i).style.backgroundCol or="#9BFFA0";
else
document.getElementById("c"+i).style.backgroundCol or="#FF8C8C";
*/
}
}

Pero no hace nada.
Si alguien me puede aconsejar se lo agradeceria.

Muchas gracias de antemano y un saludo!

sysmadryn · #2 (**permalink**) 26/11/2010, 06:56

Fijate que el problema mas serio lo tienes en el if :

<html>
<head>

<title></title>
<script>
function resolver()
{
for(var i = 1; i <= 2; i++) {
var verdadero="p"+i+"v";
if (document.getElementById(verdadero).checked == true)
document.getElementById("c"+i).style.backgroundCol or="#9BFFA0";
else
document.getElementById("c"+i).style.backgroundCol or="#FF8C8C";
}
}
</script>

</head>
<body>
<table border="1">

<tr>
<td id="c1">
<input type="radio" id="p1f" name="p1">opcion a<br>
<input type="radio" id="p1v" name="p1">opcion b<br>
<input type="radio" id="p1f" name="p1">opcion c</td>
</td>
</tr><tr>
<td id="c2">
<input type="radio" id="p2f" name="p2">opcion a<br>
<input type="radio" id="p2f" name="p2">opcion b<br>
<input type="radio" id="p2v" name="p2">opcion c
</td>
</tr>
</table>
<br/>
<button onclick="resolver();">resolver</button>
</body>
</html>

Saludos

sysmadryn · #3 (**permalink**) 26/11/2010, 06:57

Ahh, no deberias tener dos elementos con el mismo id. Para el script, puedes dejar sin id las opciones falsas.

saluti

kl4nd3s · #4 (**permalink**) 26/11/2010, 07:13

El problema es que no se puede concatenar para llamar a un objeto no?
he estado mirando por internet y me parece que ese es el problema. pero... como lo podria hacer entonces?

Tienes razon en cuanto a las id de las opciones falsas, ya las he quitao. :)

sysmadryn · #5 (**permalink**) 26/11/2010, 08:23

Fijate que en el ejemplo que te puse, concateno para formar el string que es en realidad lo que tu hiciste originalmente y funciona sin problema. En realidad el ejemplo que te puse funciona, dime cual es tu duda ahora.

Saludos

IsaBelM · #6 (**permalink**) 26/11/2010, 08:44

no sería más sencillo y en cuestión de rendimiento más eficaz, usar una matriz literal con todos los valores verdaderos?? a esto se le añade el uso de getElementsByTagName para obtener la colección de todos los input, se recorre el bucle y se valida que radio esta marcado. aquel que esté marcado, se compara con el elemento de la matriz que corresponda. no sé si me he explicado bien

sysmadryn · #7 (**permalink**) 26/11/2010, 11:00

La verdad que no lo probe pero de olfato creo que es mas rapido lo que usa kl4nd3s (que nombre !!!) porque de la forma que tu propones debes crear el puntero a todos los objetos radio mientras que de la otra solo a los radios verdaderos. Eso es 1/3 del trabajo. La matriz y el IF de chekeo lo tienen que hacer los dos metodos. Y la logica la veo igualmente robusta.

Pero siempre uno puede equivocarse dijo alguien por hispania !! jajaja

Saludos

_Adrian_ · #8 (**permalink**) 26/11/2010, 12:06

Hola. He hecho un test; aqui he puesto 5 preguntas con 3 respuestas cada una, pero puedes modificarlo:

Código Javascript:

Ver originalvar respuesta = new Array;
var explicacionRespuesta = new Array;
var tuRespuesta = new Array;
var puntuacion = 0;
 
//aqui pones las respuestas de las preguntas (puedes agregar mas o quitar)
respuesta[1] = "a";
respuesta[2] = "a";
respuesta[3] = "b";
respuesta[4] = "a";
respuesta[5] = "c";
 
//aqui dices cual respuesta es corecta
explicacionRespuesta[1]="La respuesta corecta era A\n";
explicacionRespuesta[2]="La respuesta corecta era A\n";
explicacionRespuesta[3]="La respuesta corecta era B\n";
explicacionRespuesta[4]="La respuesta corecta era A\n";
explicacionRespuesta[5]="La respuesta corecta era C\n";
 
 
function Motor(pregunta, respuesta){
   tuRespuesta[pregunta]=respuesta;
}
 
function Puntuacion(){
var textoRespuesta = "Asi lo has hecho:\n";
puntuacion=0;
for(i=1;i<=5;i++){
   textoRespuesta=textoRespuesta+"Pregunta "+i+": ";
   if(respuesta[i] != tuRespuesta[i]){
      textoRespuesta=textoRespuesta+explicacionRespuesta[i];
   }
   else{
      textoRespuesta=textoRespuesta+"Has respondido correctamente!\n";
      puntuacion++;
   }
}
 
textoRespuesta=textoRespuesta+"PUNTUACION FINAL : "+puntuacion+"\n";
 
textoRespuesta=textoRespuesta+"Comentario : ";
if(puntuacion <= 4){textoRespuesta=textoRespuesta+"Necesitas estudiar mas!";}
if(puntuacion >= 5 && puntuacion <= 6){textoRespuesta=textoRespuesta+"Te falta poco!";}
if(puntuacion >= 7 && puntuacion <= 8){textoRespuesta=textoRespuesta+"Bien!";}
if(puntuacion > 8){textoRespuesta=textoRespuesta+"Muy bien!";}
 
alert(textoRespuesta);
}

Código HTML:

Ver original<form name="test">
 
Pregunta I<br>
<input type="radio" name="p1" value="a" onClick="Motor(1, this.value)">
a) respuesta 1<br>
<input type="radio" name="p1" value="b" onClick="Motor(1, this.value)">
b) respuesta 2<br>
<input type="radio" name="p1" value="c" onClick="Motor(1, this.value)">
c) respuesta 3
<!-- puedes agregar mas si quieres, o quitar -->
<br>
 
Pregunta II<br>
<input type="radio" name="p2" value="a" onClick="Motor(2, this.value)">
a) respuesta 1<br>
<input type="radio" name="p2" value="b" onClick="Motor(2, this.value)">
b) respuesta 2<br>
<input type="radio" name="p2" value="c" onClick="Motor(2, this.value)">
c) respuesta 3
<br>
 
Pregunta III<br>
<input type="radio" name="p3" value="a" onClick="Motor(3, this.value)">
a) respuesta 1<br>
<input type="radio" name="p3" value="b" onClick="Motor(3, this.value)">
b) respuesta 2<br>
<input type="radio" name="p3" value="c" onClick="Motor(3, this.value)">
c) respuesta 3
<br>
 
Pregunta IV<br>
<input type="radio" name="p4" value="a" onClick="Motor(4, this.value)">
a) respuesta 1<br>
<input type="radio" name="p4" value="b" onClick="Motor(4, this.value)">
b) respuesta 2<br>
<input type="radio" name="p4" value="c" onClick="Motor(4, this.value)">
c) respuesta 3
<br>
 
Pregunta V<br>
<input type="radio" name="p5" value="a" onClick="Motor(5, this.value)">
a) respuesta 1<br>
<input type="radio" name="p5" value="b" onClick="Motor(5, this.value)">
b) respuesta 2<br>
<input type="radio" name="p5" value="c" onClick="Motor(5, this.value)">
c) respuesta 3
<br>
<input type="button" value="Puntuacion" onClick="Puntuacion()">
 
</form>

Que hace este codigo: cuando seleccionas una respuesta, lo agrega al vector tuRespuesta; cuando pulsas el boton 'Puntuacion' comprueba si tuRespuesta es igual a respuesta; si lo es, es correcto, si no, dice lo que hay en el vector explicacionRespuesta.

Si no te funciona algo, dimelo.
Saludos

_cronos2 · #9 (**permalink**) 26/11/2010, 14:43

Bueno sólo comentar un par de cosas. @_Adrian_, los arrays empiezan en 0, ¿por qué empiezas todos en 1? En vez de hacer un for así a pelo, poniendo el número hasta el que hay que ir, yo lo pondría así (en el caso del código de @sysmadryn) :

Código Javascript:

Ver originalfor(i=1; ele=document.getElementById('p'+nb+'v'), tbl=document.getElementById('c'+nb); i++)

Para que el for continúe mientras exista un elemento con esa id. Y por último, y lo más importante, hacer una validación de un test con JS no tiene mucho sentido, porque el que lo haga puede ver las respuestas cuando quiera, ya sé que la mayoría de la gente no lo hace, pero como te topes con uno que sí sabe malo.
Saludos (:

IsaBelM · #10 (**permalink**) 26/11/2010, 15:42

a esto es a lo que me refería, hecho de una manera rápida. ahora solo es cuestión de comprobar cual de las dos opciones consume menos recursos

Cita:

<html>
<head>
<script>
var corr = ['b', 'c'];
function fnc() {
radio_checked = -1;
for(var j = 0, rad = document.getElementsByTagName('input'); j < rad.length; j++){
if(rad[j].checked) {
radio_checked++;
if (rad[j].value == corr[radio_checked]) {
document.getElementById('c_'+radio_checked).style. backgroundColor='#9BFFA0';
} else {
document.getElementById('c_'+radio_checked).style. backgroundColor='#FF8C8C';
}
}
}
}
</script>

</head>
<body>
<table>
<tr id="c_0">
<td>
<input type="radio" value="a" name="p1" />a
<input type="radio" value="b" name="p1" />b
<input type="radio" value="c" name="p1" />c
</td></tr>
<tr id="c_1">
<td>
<input type="radio" value="a" name="p2" />a
<input type="radio" value="b" name="p2" />b
<input type="radio" value="c" name="p2" />c
</td>
</tr>
<tr>
<td>
<input type="button" onclick="fnc()" value="comprobar" />
</td>
</tr>
</table>
</body>
</html>

_Adrian_ · #11 (**permalink**) 26/11/2010, 15:51

@_cronos2, al final, el alert(textoRespuesta);, dice asi:

Código:

Pregunta 1: ... ...
Pregunta 2: ... ...

Si empiezo los arrays en 0, dice:

Código:

Pregunta 0: ...
Pregunta 1: ...

Y para que no sea necesario poner otro for (para que empieze por 'Pregunta 1'), he empezado directamente los arrays en 1.
No importa, el [0] es null, pero no lo lee.

Saludos

_cronos2 · #12 (**permalink**) 26/11/2010, 15:59

Bueno pero puedes poner (i+1) para que empieze en 1, esque se me hace raro ver un array empezando por 1, aunque es correcto igualmente.