Examen con imput radio

sebaweb · #1 (**permalink**) 16/06/2009, 23:42

Hola que tal, soy nuevo en esto y mi idea es hacer un mini "examen" utilizando imput radio. este es mo codigo.

Código HTML:

<script language="javascript">

function cont() {
	var c=0;
	if (document.evaluacion.radio1[0].checked)
		{
		c++;
		}
	if (document.evaluacion.radio2[2].checked)
		{
		c++;
		}
		alert('tu resultado es ' + c + ' sobre 2');
}

</script>

</head><body>

<form name="evaluation" method="">

<label>1. ¿Pregunta 1?</label>
<p>
<input type="radio" name="radio1" id="radio1" />Rta 1<br />
<input type="radio" name="radio1" id="radio1" />Rta 2<br />
<input type="radio" name="radio1" id="radio1" />Rta 3<br />
<input type="radio" name="radio1" id="radio1" />Rta 4<br />
</p><hr />
<label>2. ¿Pregunta 2?</label>
<p>
<input type="radio" name="radio2" id="radio2" />Rta 1<br />
<input type="radio" name="radio2" id="radio2" />Rta 2<br />
<input type="radio" name="radio2" id="radio2" />Rta 3<br />
<input type="radio" name="radio2" id="radio2" />Rta 4<br />
</p><hr />
<input type="button" name="result" id="result" value="Result" onclick="cont()" />


</form>

Al hacer click en el boton tendria que salir el alerta con el contador pero no hace nada el boton, me podrian ayudar?

muchas gracias =D

sebaweb · #2 (**permalink**) 17/06/2009, 00:17

Hola que tal, soy nuevo en esto y mi idea es hacer un mini "examen" utilizando imput radio. este es mo codigo.

Código HTML:

<script language="javascript">

function cont() {
	var c=0;
	if (document.evaluacion.radio1[0].checked)
		{
		c++;
		}
	if (document.evaluacion.radio2[2].checked)
		{
		c++;
		}
		alert('tu resultado es ' + c + ' sobre 2');
}

</script>

</head><body>

<form name="evaluation" method="">

<label>1. ¿Pregunta 1?</label>
<p>
<input type="radio" name="radio1" id="radio1" />Rta 1<br />
<input type="radio" name="radio1" id="radio1" />Rta 2<br />
<input type="radio" name="radio1" id="radio1" />Rta 3<br />
<input type="radio" name="radio1" id="radio1" />Rta 4<br />
</p><hr />
<label>2. ¿Pregunta 2?</label>
<p>
<input type="radio" name="radio2" id="radio2" />Rta 1<br />
<input type="radio" name="radio2" id="radio2" />Rta 2<br />
<input type="radio" name="radio2" id="radio2" />Rta 3<br />
<input type="radio" name="radio2" id="radio2" />Rta 4<br />
</p><hr />
<input type="button" name="result" id="result" value="Result" onclick="cont()" />


</form>

Al hacer click en el boton tendria que salir el alerta con el contador pero no hace nada el boton, me podrian ayudar?

muchas gracias =D

KiraSakuya · #3 (**permalink**) 17/06/2009, 01:40

En primer lugar nunca deeberias tener varios elementos de una pagina con el mismo id, eso solo traera conflictos

Mira este ejemplo a ver si te ayuda :)

http://www.desarrolloweb.com/articulos/1006.php

buzu · #4 (**permalink**) 17/06/2009, 02:08

Tienes algunos errores muy obios. Por ejemplo, para acceder a un formulario mediante el documento tienes que usar forms antes del nombre del formulario:

document.forms['evaluacion']['radio1'][0].checked

Pero antes de ese tienes otro, en tu Js pones evaluacion, pero tu formulario en realidad se llama evaluation. Por lo que pare empezar el formulario, sin importar que la sintaxis esté bien, nunca va a ser localizado.

Aquí es como lo he cambiado y quedo bien:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <script language="javascript">
 
function cont() {
    var c=0;
    if (document.forms['evaluacion']['radio1'][0].checked)
        {
        c++;
        }
    if (document.forms['evaluacion']['radio2'][2].checked)
        {
        c++;
        }
        alert('tu resultado es ' + c + ' sobre 2');
}
 
</script>
</head>
<body>
 
<form name="evaluacion" method="">
 
<label>1. ¿Pregunta 1?</label>
<p>
<input type="radio" name="radio1" id="radio1" />Rta 1<br />
<input type="radio" name="radio1" id="radio1" />Rta 2<br />
<input type="radio" name="radio1" id="radio1" />Rta 3<br />
<input type="radio" name="radio1" id="radio1" />Rta 4<br />
</p><hr />
<label>2. ¿Pregunta 2?</label>
<p>
<input type="radio" name="radio2" id="radio2" />Rta 1<br />
<input type="radio" name="radio2" id="radio2" />Rta 2<br />
<input type="radio" name="radio2" id="radio2" />Rta 3<br />
<input type="radio" name="radio2" id="radio2" />Rta 4<br />
</p><hr />
<input type="button" name="result" id="result" value="Result" onclick="cont()" />
 
 
</form>
</body>
</html>

Espero que no estés pensando hacer esto para un examen de verdad. Sería bien fácil "hackearlo" y sacar una calificación perfecta.

quimfv · #5 (**permalink**) 17/06/2009, 06:16

Intenta llamar las cosas por su nombre....

Si tienes evaluation porque le pides evaluacion... menos mal que no has puesto el acento!!!!

No te preocupes, estas tonterias nos hacen perder el tiempo a todos... usa el firefox y su consola de errores y rápidamente veras que puede estar pasando!!!

Quim

sebaweb · #6 (**permalink**) 17/06/2009, 11:28

no, simplemente estoy haciendo un examen para empezar a manejar javascript.. no estoy en condiciones de hacer un examen real =P.. muchas gracias

sebaweb · #7 (**permalink**) 17/06/2009, 11:40

muchas gracias!!! fue un error mio de sintaxis,, tenia sueño jejeje grracias! ahora funciona

buzu · #8 (**permalink**) 17/06/2009, 12:07

Ah, en todo caso, es buen ejercicio. Espero que te haya servido la respuesta que te he dado...

buzu · #9 (**permalink**) 17/06/2009, 12:18

Por que pones el mismo tema dos veces?

JavierB · #10 (**permalink**) 17/06/2009, 12:31

Temas unidos.

Saludos,

quimfv · #11 (**permalink**) 18/06/2009, 00:27

Buen ejercicio para empezar....

Al unir los temas parece que hay respuestas repetidas.... cuando yo conteste no estaban las otras...

Quim

alvaro_rodrig · #12 (**permalink**) 08/12/2010, 05:10

Cita:

Iniciado por quimfv

Buen ejercicio para empezar....

Al unir los temas parece que hay respuestas repetidas.... cuando yo conteste no estaban las otras...

Quim

Excelente enlace... me vino como anillo al dedo...
yo no soy para nada un perito en esto.. sólo quiero dar clases de español en el extranjero y monté una pequeña página para promocionarlas... asi que quería hacer un pequeño test para determinar el nivel de español del potencial alumno.

qui van mis preguntas...

1.- Es posible que al terminar el test y clicar el boton "result" se informe, en el mismo cuadro,... que nivel de español tiene la persona?
por ejemplo
de 0 a 2 respuestas positivas = nivel básico
de 3 a 5 respuestas positivas = nivel semi-intermedio
de 6 a 8 respuestas positivas = nivel intermedio

2.- es posible que se marquen las respuestas positivas al final?

saludos... y sea lo que sea
Muchas Gracias!! esto ya ha sido de gran ayuda..
Alvaro

IsaBelM · #13 (**permalink**) 08/12/2010, 08:32

este mismo tema ha sido tratado hace poco y he tomando algo del código, para adaptarlo a que pretendes hacer

Cita:

<html>
<head>
<script type="text/javascript">
var corr = ['b', 'c'];
var niv = {0 : 'Bajo', 1 : 'Medio', 2 : 'Avanzado'}
function fnc() {
var aciertos = 0;
var radio_checked = -1;
for(var j = 0, rad = document.getElementsByTagName('input'); j < rad.length-1; j++){
if(rad[j].checked) {
radio_checked++;
if (rad[j].value == corr[radio_checked]) {
document.getElementById(rad[j].parentNode.id).style.backgroundColor = '#9BFFA0';
aciertos++;
} else {
document.getElementById(rad[j].parentNode.id).style.backgroundColor = '#FF8C8C';
}
}
}
document.getElementById('nivel').innerHTML = 'Nivel: ' + niv[aciertos];
}
</script>
</head>
<body>
<form>
<label for="p1" id="rad1">Pregunta 1
<input type="radio" value="a" name="p1" />a
<input type="radio" value="b" name="p1" />b
<input type="radio" value="c" name="p1" />c
</label>
<br />
<label for="p2" id="rad0">Pregunta 2
<input type="radio" value="a" name="p2" />a
<input type="radio" value="b" name="p2" />b
<input type="radio" value="c" name="p2" />c
</label>
<div id="nivel"></div>
<input type="button" onclick="fnc()" value="comprobar" />
</form>
</body>
</html>

alvaro_rodrig · #14 (**permalink**) 08/12/2010, 12:59

Cita:

Iniciado por IsaBelM

este mismo tema ha sido tratado hace poco y he tomando algo del código, para adaptarlo a que pretendes hacer

Waw!!! te pasaste.. gracias!!
voy a trabajar sobre eso...

te cuento como me va!

Rafael · #15 (**permalink**) 08/12/2010, 16:40

Oye... En mi humilde opinión...

de 0 a 2 respuestas positivas = Pudo no entender nada, y darle click por accidente
de 3 a 5 respuestas positivas = Básico
de 6 a 8 respuestas positivas = Intermedio

Lo de semimediointermedio, como que no queda.

IsaBelM · #16 (**permalink**) 09/12/2010, 05:44

seguro que esos rangos son a modo de ejemplo, espero!! por que si no es así pudiera ser que yo no pasara del nivel básico

alvaro_rodrig · #17 (**permalink**) 09/12/2010, 21:25

Cita:

Iniciado por IsaBelM

seguro que esos rangos son a modo de ejemplo, espero!! por que si no es así pudiera ser que yo no pasara del nivel básico

Jajaja.. claro, es modo de ejemplo... gracias por la acotación!!