Introducción al lenguaje JavaScript

Un quiz en tu web

Descripción
	Esta sencilla aplicación te permitirá incorporar un juego tipo quiz o trivial a tus páginas web. Es el clásico juego de preguntas con respuestas alternativas. El jugador deberá escoger cual es la correcta.

Como usarlo

Es muy simple, tan sólo debes preocuparte de definir una lista de preguntas y respuestas, incorporar un cuadro con posicionamiento absoluto en tu página y hacer una llamada a una función de inicio al cargar la página. Para que no te pierdas he aquí en detalle cada una de estas fases:

1. Las listas de preguntas y respuestas.
Construye la lista de preguntas y sus respuestas. Por ejemplo si quieres llamar a esta lista misPreguntas, deberás crearla con el siguiente código

misPreguntas = new Array();

Ahora la rellenas

misPreguntas[0] = new Array();
misPreguntas[0][0] = "Este es el texto de la primera pregunta.";
misPreguntas[0][1] = "Respuesta numero 1";
misPreguntas[0][2] = "Respuesta numero 2";
misPreguntas[0][3] = "Respuesta numero 3";
misPreguntas[0][4] = "Respuesta numero 4";
misPreguntas[0][5] = 2;

Esta parte lo deberás repetir para las restantes preguntas, cambiando misPreguntas[0] por misPreguntas[1], misPreguntas[2], etc.

2. Incorporar el cuadro del quiz.

Esto es cuestión de código HTML. Debes incoporar un elemento DIV con posicionamiento absoluto:

<DIV id="miquiz" style="position:absolute; left: 100px, top: 200px">
Preparando preguntas...</div>

Este es el código mínimo para un cuadro donde presentar el quiz. Si quieres que tenga un aspecto determinado, con color o imagen de fondo, un determinado tipo y estilo de letra, bordes, etc. lo más aconsejable es que definas un estilo CSS y le asignes ese estilo al elemento DIV. Por ejemplo, las siguienres líneas definen un estilo de nombre quiz

Recuerda el ID usado para este cuadro, es un valor necesario para poner en marcha la aplicación.

3. Ejecución del script.
Cuando la página esté completamente cargada se llama a la función que define y prepara las preguntas:

Como ves la función de inicio del quiz lleva cuatro argumentos:
- Nombre del elemento DIV, o sea, el valor que le hayamos dado en el atributo ID
- Nombre de la lista donde hayamos almacenado las preguntas y respuestas
- Nombre del estilo usado para el cuadro (Esto es a causa de Netscape 4)
- Un color para una linea de separación entre preguntas y respuestas.

Como funciona

Esta aplicación aprovecha los elementos DIV de las páginas HTML. El contenido de estos bloques puede modificarse durante la exposición de la página utilizando la propiedad innerHTML, contemplada por las últimas versionaes de los exploradores más habituales. Como Javascript es incapaz de acceder a bases de datos, las preguntas y respuestas que irán pasándose por la página se almacenan en un array bidimensional, esta es la forma más sencilla de implementar un pseudo base de datos con este lenguaje de programación. Estos array como debes saber poseen dos índices: el primero se usa para almacenar las preguntas y el segundo para las respuestas alternativas. Recuerda que este tipo de arrays puedes verlo como una lista normal donde cada elemento es a su vez otra lista. Así cada elemento de esa lista principal posee una serie de elementos: el primero es la pregunta, los cuatro siguientes contienen las respuestas alternativas y el último contiene el número de la respuesta correcta. Como estructura HTML para constener el quiz se utiliza un elemento formulario.
Es un aplicación muy sencilla de utilizar y su análisis te permitirá aprender algunas cositas nuevas sobre Javascript y DHTML.


	Bajarlo	Verlo