Imprimir Página - Multiple choice dinamico con javascript

Título: Multiple choice dinamico con javascript
Publicado por: astinx en 23 Octubre 2011, 17:47 pm

Hola, estoy haciendo una pagina web donde necesito permitirle al usuario crear preguntas multiple choice para luego guardarlas en una base de datos.

Osea la idea es que el usuario ingresa el nombre de la pregunta, luego en un combo box ingresa la cantidad de respuestas, al ingresar la cantidad de respuestas aparecen debajo un grupo de choosers cada uno con un check box a la derecha para indicar cual de todas es la respuesta correcta y una casilla de texto para indicar la respuesta, debajo de todo esto debe tener un boton "Agregar otra pregunta" que hace que se habilite otra casilla de texto, debajo de esta, para ingresar otra pregunta y así sucesivamente.

Obviamente no les pido el código de un javascript así :xD, nada mas quisiera saber si se puede implementar esto con javascript, porque pese a que he estado leyendo bastante y buscando no he encontrado ningún ejemplo similar o una idea para la resolución de mi problema.

Si alguno tiene un código vagamente parecido, se de una idea mas o menos de como hacerlo, o conoce alguna fuente puntual donde pueda encontrar información, se lo agradecería un montón.

Desde ya, gracias por detenerse a leer.

Título: Re: Multiple choice dinamico con javascript
Publicado por: Mr. Crowley en 28 Octubre 2011, 06:40 am

Hola, hice un ejemplo algo rápido usando JQuery. Sólo lo probé en Opera.

Código

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
</head>
<body>
	<div id="divPreguntas">
		<!-- aqui se van a colocar las preguntas -->
	</div>
	<input type="button" id="btnAgregar" value="Agregar una pregunta">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script>
		var iPregunta=0;
		$(document).ready(function(){
			$('#btnAgregar').click(function(){
				//le pedimos la cantidad de respuestas al usuario
				var iCantidad_Respuestas=prompt('Por favor, digite la cantidad de respuestas:',3)
 
				if(iCantidad_Respuestas!=null && iCantidad_Respuestas>0){
					iPregunta++; //aumentamos el numero de pregunta (para los IDs)
					var strPregunta; //aqui se almacena la plantilla de la pregunta
 
						strPregunta='<form id="frmPregunta_'+iPregunta+'">'+
						'<fieldset><legend>Pregunta #'+iPregunta+'</legend>'+
						'<strong>Descripci&oacute;n:</strong><br>'+
						'<input type="text" id="txtPregunta_'+iPregunta+'" size="100">'+
						'<br><strong>Respuestas:</strong><br>';
 
						//aqui se agregan los radios/text para las respuestas
						for(var iCont=1;iCont<=iCantidad_Respuestas;iCont++){
							strPregunta+='<input type="radio" id="radRespuesta_'+iPregunta+
							'" name="radRespuesta'+iPregunta+'" checked><input type="text" '+
							'id="txtRespuesta_'+iPregunta+'"><br>';
						}
 
						strPregunta+='</fieldset></form>';
 
						//agregamos la nueva pregunta (con todo y respuestas) a la capa divPreguntas
						$('#divPreguntas').append(strPregunta);
				}else{
					//no pasa nada
				}
			});
		});
	</script>
</body>
</html>

Explicación rápida (jejejeje):

1. En el documento hay una capa llamada divPreguntas, en ella es donde se van a agregar todas las preguntas que el usuario genere.
2. Por medio del botón btnAgregar se agregan las preguntas a dicha capa.
3. El código javascript genera las preguntas, con la cantidad de respuestas que el usuario indique (para eso el prompt).

En realidad es simple, se almacena en una variable una especie de "template" del form que va a contener las respuestas, con sus campos y todo. Para agregar las respuestas nada más se recorre de 1 a X (cantidad de respuestas indicada por el usuario) y se concatena a la variable que contiene el "template".

Al final se agrega el contenido de la variable strPregunta (código HTML) a la capa divPreguntas.

OJO: la variable iPregunta definida al principio, se utiliza para llevar el conteo de cuántas preguntas existen en el documento. De esta forma se le asignan IDs distintos a los elementos creados. Ahora lo único que le faltaría es recorrer los forms con sus respectivos campos.

Espero le sirva. Saludos desde Costa rica ;)

Edito: lo hice con radios porque se supone que sólo una respuesta es la correcta. El checkbox en este caso no sería de mucha utilidad, ya que se podrían marcar varias o todas las respuestas como correctas.

Título: Re: Multiple choice dinamico con javascript
Publicado por: astinx en 29 Octubre 2011, 05:49 am

¡Buenisimo!.

Al final era relativamente facil (lo digo porque lo entendí por la manera en la que me lo explicaste), creo que esto deja descubierta mi poca experiencia de javascript :xD :-[

Muchas gracias! Saludos!

Título: Re: Multiple choice dinamico con javascript
Publicado por: Mr. Crowley en 29 Octubre 2011, 18:27 pm

Sí, claro; estaba sencillo ;)
Sería interesante darle al usuario la opción de eliminar una pregunta. Es decir,
si agrega un form (con el código anterior) y luego se arrepiente, entonces que
pueda removerlo.

Saludos :P

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: astinx en 23 Octubre 2011, 17:47 pm