See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/267831853

GENERACIÓN EN JAVASCRIPT DE EJERCICIOS CON DATOS ALEATORIOS

PARA SU USO EN ASIGNATURAS DE MATEMÁTICAS

Article

CITATIONS READS

0 107

1 author:

Germán Sáez
Universitat Politècnica de Catalunya
59 PUBLICATIONS   865 CITATIONS   

SEE PROFILE

All content following this page was uploaded by Germán Sáez on 07 January 2016.

The user has requested enhancement of the downloaded file.

 GENERACIÓN EN JAVASCRIPT DE EJERCICIOS CON DATOS
ALEATORIOS PARA SU USO EN ASIGNATURAS DE
MATEMÁTICAS
Germán Sáez
Escola Tècnica Superior d'Enginyeria de Telecomunicacions de Barcelona
(UPC)
german@mat.upc.es

Resumen. En este trabajo se presenta una generación en página web por

medio de HTML y JavaScript de ejercicios con datos aleatorios para su uso en
asignaturas de matemáticas. Los tipos de ejercicios a los que se les puede
aplicar esta técnica tienen que ser fácilmente parametrizables. El alumno abre
la página web con un visualizador cualquiera y se le presenta el enunciado de
un ejercicio acabado con un botón para generar la solución del ejercicio. Cada
vez que se abre la página web aparece un ejercicio con datos nuevos. Además
de presentar algunos ejemplos de ejercicios, se discute la posible utilización de
este material TIC.

1. GENERACIÓN DE EJERCICIOS
En este apartado presentamos un procedimiento para crear una página web
que propone ejercicios a los estudiantes. Este ejercicio corresponde a un
modelo dado, pero cada vez que se visualiza la página aparece con datos
nuevos. Para establecer los datos nuevos, el visualizador utiliza un generador
de números aleatorios. Dividimos la realización de esta página web en tres
fases que describiremos en las secciones siguientes. En la primera sección
explicaremos la primera fase consistente en la elección del ejercicio tipo y su
resolución. En la segunda sección detallaremos las mínimas instrucciones
HTML que se necesitan para poder escribir el enunciado y la resolución del
ejercicio. La tercera fase consiste en la introducción de la aleatoriedad en los
datos del ejercicio por medio del uso de JavaScript.

1.1. Elección del ejercicio y redacción de su resolución

En esta sección presentamos los condicionantes a la hora de elegir el ejercicio
tipo. Estas restricciones vienen dadas, fundamentalmente, por las limitaciones
del método y de los propios lenguajes HTML [1] y JavaScript [4].

No se puede pensar que con cualquier ejercicio se puede realizar una página
web aleatorizada. En primer lugar debe ser un ejercicio que sea fácil de escribir
en HTML. Así no son recomendables los ejercicios que se deban acompañar
con gráficos que dependan de los datos. Las herramientas que se requieren
para este tipo de ejercicios son mucho más complejas que las que
presentaremos aquí. En segundo lugar debe ser un ejercicio que para distintos
datos sea significativamente diferente. Con significativamente diferente nos
referimos a que parezca diferente a nuestros estudiantes. Los distintos
ejercicios que se generen corresponderán a un mismo tipo con datos
diferentes. Con el uso de instrucciones del tipo if, se puede conseguir
diferencias en las resoluciones que puedan dar una cierta variabilidad al
ejercicio.

El ejercicio elegido y su resolución deben ser fácilmente parametrizables. Es

decir, debe ser un ejercicio que con una parametrización de los datos, admita
una solución fácil en función de estos. Además, la flexibilidad de JavaScript
permite que haya más de una solución en función de los datos.

Un ejemplo de ejercicio que cumple todas estas condiciones es el cálculo del

de límite de una sucesión dada por un cociente de polinomios. A lo largo de las
siguientes secciones detallaremos el diseño de este ejercicio como ejemplo.

1.2. Traducción a HTML

En esta sección introduciremos las mínimas instrucciones para poder escribir
una página web con el enunciado de un ejercicio de matemáticas y su
resolución. No nos ocuparemos aquí de cómo obtener una tipografía
matemática de acuerdo con los estándares más aceptados. Se introducirán las
herramientas para poder escribir polinomios, fracciones, etc. Daremos un
ejemplo de utilización con un enunciado de ejercicio concreto.

El lenguaje HTML (Hypertext Markup Language) [1] es un híbrido entre un

lenguaje de programación y un tratamiento de textos. Consiste en una
descripción de un documento para ser visto con un visualizador como puede
ser Netscape Navigator, Internet Explorer, Mozilla, etc. A diferencia de los
programas de tratamiento de texto usuales, se suele trabajar con editores que
no son totalmente WYSIWYG (What You See Is What You Get ).

A continuación introduciremos unas pocas instrucciones HTML para escribir

expresiones matemáticas. En ningún caso tendremos como objetivo la
descripción sistemática de HTML y de todas sus instrucciones. Una de las
instrucciones más utilizadas en HTML a la hora de escribir matemáticas son los
subíndices y los superíndices. Para escribir un subíndice, se encierra éste entre
los delimitadores

<SUB>subíndice</SUB>

Para escribir superíndices se procede de la misma manera con:

<SUP>superíndice</SUP>

Por ejemplo, si se quiere escribir an = 2n3 − 5n 2 + 6n + 1 se codifica como:

a<SUB>n</SUB>=2n<SUP>3</SUP>-5n<SUP>2</SUP>+6n+1

Para describir un cálculo en HTML suele ser conveniente utilizar una tabla. En
cada celda escribiremos una expresión como puede ser una fracción, el signo =
para conectar expresiones, etc. Por ejemplo, la afirmación lim n →∞ an = ∞ se
escribe:
<TABLE ALIGN='CENTER'>
<TD>lim<SUB>n-->oo</SUB>a<SUB>n</SUB>=oo</TD>
</TABLE>

Como se puede imaginar, una tabla centrada se construye con los

delimitadores:

<TABLE ALIGN='CENTER'>
celdas_tabla
</TABLE>

Para indicar al visualizador el contenido de cada celda de la tabla, se usan los

delimitadores:

<TD>celda</TD>

Una manera simple de escribir una celda que contenga una fracción es la
siguiente:

<TD NOWRAP='NOWRAP' ALIGN='CENTER'>

numerador
<DIV CLASS='HRCOMP'><HR NOSHADE='NOSHADE' SIZE='1'/></DIV>
denominador
</TD>

2n3 − 5n 2 + 6n + 1
Así, por ejemplo, podemos visualizar lim n→∞ escribiendo:
−7 n3 + 8n 2 + 5n − 9

<TABLE ALIGN='CENTER'>
<TD>lim<SUB>n-->oo</SUB></TD>
<TD NOWRAP='NOWRAP' ALIGN='CENTER'>
2n<SUP>3</SUP>-5n<SUP>2</SUP>+6n+1
<DIV CLASS='HRCOMP'><HR NOSHADE='NOSHADE' SIZE='1'/></DIV>
-7n<SUP>3</SUP>+8n<SUP>2</SUP>+5n-9
</TD>
</TABLE>

Existen editores para escribir en HTML de forma cómoda, como por ejemplo
Homesite o DreamWeaver. Los ficheros que debemos generar son ficheros de
texto que se pueden escribir con un editor cualquiera. No debemos olvidar que
hay que guardar el fichero como un fichero de texto sin formato. Los ficheros
en HTML se deben comenzar y finalizar con unas instrucciones a las que aquí
no daremos más importancia:

<HTML>
<HEAD><TITLE>
título que aparecerá en la barra superior del visualizador
</TITLE></HEAD>
<BODY>
instrucciones_HTML
</BODY>
</HTML>

Por ejemplo la página con la tabla anterior:

<HTML>
<HEAD><TITLE>
Ejercicios de cálculo de límites
</TITLE></HEAD>
<BODY>
Calcular el límite siguiente:
(...tabla anterior...)
</BODY>
</HTML>

se visualizará como:

Una de las principales limitaciones de HTML es que produce documentos

estáticos, además de ser muy dificultosa la escritura de fórmulas matemáticas.

1.2. Dinamización y aleatorización del ejercicio

En esta sección introduciremos alguna de las herramientas de JavaScript que

nos serán útiles para la dinamización del ejercicio y para la generación de los
datos aleatorios. En primer lugar necesitaremos interrumpir el flujo en la
visualización de la página para dar tiempo al estudiante a pensar la solución del
ejercicio. En segundo lugar explicaremos cómo generar los datos aleatorios
con JavaScript y todas las complicaciones que ello comporta.

JavaScript [4] es un lenguaje de programación pensado para su utilización

dentro de páginas HTML. El objetivo de este lenguaje es dotar a la página web
de un cierto dinamismo e interacción con el usuario. JavaScript tiene un gran
parecido formal con el lenguaje C y con Java.
La manera de introducir instrucciones de JavaScript es por medio de las
instrucciones

<SCRIPT LANGUAGE="Javascript">
instrucciones_de_JavaScript
</SCRIPT>
Como ejemplo de su utilización escribimos con la ayuda de JavaScript la
página HTML que tenemos construida hasta ahora:

<HTML>
<HEAD>
<TITLE>
Ejercicios de cálculo de límites
</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
var texto;
texto="Calcular el límite siguiente:<TABLE ALIGN='CENTER'>
<TD>lim<SUB>n-->oo</SUB></TD> <TD NOWRAP='NOWRAP'
ALIGN='CENTER'>2n<SUP>3</SUP>-5n<SUP>2</SUP>+6n+1<DIV
CLASS='HRCOMP'><HR NOSHADE='NOSHADE' SIZE='1'/></DIV>-
7n<SUP>3</SUP>+8n<SUP>2</SUP>+5n-9</TD> </TABLE>";
document.write(texto);
</SCRIPT>
</BODY>
</HTML>
Vemos que en primer lugar se ha declarado una variable texto. En segundo
lugar se ha inicializado con todo el código que teníamos escrito para el
enunciado del ejercicio como si fuera una tira de caracteres. Después se ha
ejecutado una instrucción JavaScript (instrucción document.write(texto);)
que escribe una página web con todo el texto que contiene la variable texto. Si
se desea, se puede ver el código fuente en el menú correspondiente del
visualizador para comprobar que JavaScript ha escrito una página web con
estas instrucciones. Un punto importante a tener en cuenta es que en la
definición de la tira de caracteres texto no puede haber ningún control de carro
por lo que debe estar escrita en una sola línea.
Ahora nos ocuparemos del control del flujo del programa para poder dar la
oportunidad al estudiante de realizar el ejercicio. La página que estamos
construyendo se puede entender como una página generadora de ejercicios
junto con su solución. Pero queremos que el estudiante tenga la oportunidad de
hacer el ejercicio antes que la máquina genere la solución. Para ello
utilizaremos dos herramientas: una de HTML como son los botones de
formularios y otra las funciones definidas en JavaScript.
Los formularios en HTML se utilizan en muchas situaciones en las que se
necesita una cierta interacción con el usuario. La forma del formulario que
utilizaremos es la siguiente:

<FORM>
<INPUT TYPE=BUTTON VALUE='SOLUCIÓN'
onClick="javascript:solucion(texto);return true;">
</FORM>
Este formulario colocado a continuación del bloque de instrucciones de
JavaScript pone un botón rotulado con la palabra SOLUCIÓN. Si el estudiante
hace clic sobre el botón se ejecutará la función de JavaScript solucion con
variable de entrada texto. Esta ejecución generará la solución del ejercicio. A
diferencia de HTML, JavaScript es Case Sensitive, es decir, distingue entre
mayúsculas y minúsculas. Así no es lo mismo escribir 'solucion(texto);'
que 'solucion(TEXTO);'.

Introduzcamos las funciones de JavaScript para generar la solución del

ejercicio. Las funciones en JavaScript se definen como en otros lenguajes de
programación, como por ejemplo C, por medio de la sintaxis:

function nombre(variables)
{
instrucciones;
}
En nuestro ejemplo la función 'solucion', junto con el resto de la página web,
queda:

<HTML>
<HEAD>
<TITLE>
Ejercicios de cálculo de límites
</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="Javascript">
var texto;
texto="Calcular el límite siguiente:<TABLE ALIGN='CENTER'>
<TD>lim<SUB>n-->oo</SUB></TD> <TD NOWRAP='NOWRAP'
ALIGN='CENTER'>2n<SUP>3</SUP>-5n<SUP>2</SUP>+6n+1<DIV
CLASS='HRCOMP'><HR NOSHADE='NOSHADE' SIZE='1'/></DIV>-
7n<SUP>3</SUP>+8n<SUP>2</SUP>+5n-9</TD></TABLE>";
document.write(texto);
function solucion(texto)
{
document.clear();
document.open("text/html");
document.write("<HTML><HEAD><TITLE>Ejercicios de cálculo de
límites</TITLE></HEAD><BODY>");
document.write(texto+"<BR><BR><B>SOLUCIÓN</B>");
document.write("<BR><BR>Aquí viene la solución...");
}
</SCRIPT>
<FORM>
<INPUT TYPE=BUTTON VALUE='SOLUCIÓN'
onClick="javascript:solucion(texto);return true;">
</FORM>
</BODY>
</HTML>

Se observa que la función solucion cierra la página que tenemos abierta

(instrucción document.clear();) y crea otra con el enunciado del problema
(guardado en la variable texto) seguido de la solución que escribiremos.
Además hemos utilizado la instrucción de HTML para saltar línea <BR> y los
delimitadores <B> y </B> para marcar letra en negrita. La ejecución antes y
después de hacer clic en el botón es la siguiente:

Ocupémonos ahora de la introducción de la aleatoriedad en el ejercicio. En

primer lugar definiremos una función que nos devuelve un número aleatorio en
un cierto rango:

function aleatorio( maximo )

/* devuelve un número entero aleatorio entre -maximo y
maximo< 10^10 */
{
var num_aleat;
num_aleat=Math.floor(10000000000*Math.random())%(2*maximo);
return (num_aleat-maximo);
}
En esta función hemos introducido un comentario aclaratorio entre los
delimitadores /* ... */. Además, hemos recurrido a las funciones propias
de JavaScript Math.random() (que devuelve un número real aleatorio del
intervalo [0,1]), Math.floor() (parte entera) y '%' (resto de la división). La
manera de utilizar esta función para generar un coeficiente del polinomio es:

for(contador=0; contador<=3;contador++)
{
coef=0;
while(coef==0){coef=aleatorio(12)};
pol_num[contador]=coef;
}

El funcionamiento de las instrucciones for, while, etc. es el mismo que en C

y otros lenguajes de programación. Con estas líneas de código nos hemos
asegurado que obtenemos un número aleatorio no nulo menor que 12 en valor
absoluto. Esta limitación para cada coeficiente del polinomio pol_num[] nos
ha parecido razonable.

Para introducir estos coeficientes aleatorios en nuestro código de JavaScript

debemos tener en cuenta que estas variables contienen un número entero y no
un carácter. Para hacer su conversión a carácter utilizaremos el vector auxiliar:

caracter=new Object( 25 );
caracter[-12]="-12";
caracter[-11]="-11";
...
caracter[10]="10";
caracter[11]="11";
caracter[12]="12";

Así, los coeficientes-caracteres del polinomio se obtendrán como

'pol_num_car[...]=caracter[pol_num[...]]'. Si se desea que no
aparezcan expresiones indeseables como por ejemplo +1n3 − 5n 2 − 1n + 2
deberemos añadir una líneas de código que eliminen estos problemas. Una
solución posible es la siguiente:

for(contador=0; contador<=3;contador++)
{
coef=0;
while(coef==0){coef=aleatorio(12)};
pol_num[contador]=coef;
if(coef<0)
{
pol_num_car[contador]=caracter[pol_num[contador]];
if(contador!=0 && coef==-1) pol_num_car[contador]="-";
}
else
{
pol_num_car[contador]="+"+caracter[pol_num[contador]];
if(contador!=0 && coef==1) pol_num_car[contador]="+";
if(contador==3 && coef==1) pol_num_car[contador]="";
if(contador==3 && coef!=1)
pol_num_car[contador]=caracter[pol_num[contador]];
};
};

Con estas líneas de código eliminamos todos los casos indeseables en la

escritura de un polinomio de tercer grado. Al final de la ejecución de estas
líneas se obtiene el vector de coeficientes numéricos 'pol_num[]' y el vector
de coeficientes-caracteres arreglados 'pol_num_car[]'. Procederemos de
la misma manera con los coeficientes del polinomio del denominador
'pol_denom_car[]' y 'pol_denom_car[]'.

La introducción de los coeficientes aleatorios en nuestros polinomios se

consigue concatenando tiras de caracteres con la instrucción de concatenación
'+'. Por ejemplo, en el polinomio numerador '2n<SUP>3</SUP>-
5n<SUP>2</SUP>+6n+1' tendremos que hacer las substituciones:

2Æ"+pol_num_car[3]+"
-5Æ"+pol_num_car[2]+"
+6Æ"+pol_num_car[1]+"
+1Æ"+pol_num_car[0]+"

Como se puede ver, conforme se completa el programa, la complejidad del

código aumenta mucho. Una buena solución para dar claridad, sería
encapsular bloques de instrucciones por medio de funciones. Un ejemplo de
esto sería la utilización de una función para escribir una fracción:

function fraccion(numerador,denominador)
{
var tira_car;
tira_car="<TD NOWRAP='NOWRAP' ALIGN='CENTER'>"+numerador+
"<DIV CLASS='HRCOMP'><HR NOSHADE='NOSHADE' SIZE='1'/></DIV>
"+denominador+"</TD>";
return (tira_car);
}

Una vez redactada la solución completamente, podemos plantear la inclusión

de diferentes modelos de ejercicios. Por ejemplo, límite de cociente de
polinomios de diferentes grados que se eligen aleatoriamente. También
podemos mejorar el aspecto utilizando fuentes adecuadas. Así para escribir el
símbolo → podemos utilizar la variable flecha="<FONT
FACE='SYMBOL'>&#174</FONT>"; o para el símbolo ∞ la variable
infinito="<FONT FACE='SYMBOL'>&#165</FONT>";.

A continuación se pueden ver algunas ejecuciones de la versión definitiva:

2. OTRO EJEMPLO
En esta sección presentamos un ejemplo más, realizado con la metodología
anterior. Esta metodología se podría utilizar en muchos otros problemas. El
ejemplo que presentamos con una captura de pantalla, sin más aclaraciones,
es el del cálculo de una integral racional de tipo arcotangente:

Para este ejemplo definimos la función que escribe el símbolo de integral:

function integral(integrando,diferencial)
{
var tira_car;
tira_car="<TD NOWRAP='NOWRAP' ALIGN='CENTER'> <FONT
FACE='SYMBOL'>ó<BR />õ<BR /></FONT></TD>" + integrando+
diferencial;
return (tira_car);
}

3. UTILIZACIÓN
Esta propuesta está indicada para ejercicios de tipo calculista o para aquellos
en los que el razonamiento es muy sistematizable. Al contrario que con los
libros de ejercicios resueltos, aquí los ejemplos de un determinado tipo no se
acaban ‘nunca’, ya que cada vez que se abre la página aparecen unos datos
nuevos.

Los tipos de enseñanza en los que se puede utilizar este material van desde
las presenciales hasta las virtuales. En el caso de enseñanza de tipo virtual,
estos materiales pueden suponer una buena herramienta. La experiencia del
autor con un material de este tipo[2] en una enseñanza virtual ha sido muy
positiva. Pero además estos materiales pueden jugar un buen papel en las
enseñanzas presenciales. El objetivo en este caso puede ser el de refuerzo de
unos temas que los alumnos tengan poco asimilados o no hayan trabajado
nunca. Otra posibilidad de utilización es para aquellos estudiantes que
necesitan más práctica en determinados ejercicios.

No olvidemos que cuando elegimos los ejercicios para proponer a nuestros

alumnos también hacemos una simplificación al elegir una determinada batería
de tipos. También a la hora de prepararlos nos vemos obligados a pensar qué
datos ponemos para que los cálculos no se enreden demasiado. Tenemos que
procurar que no se pierda de vista lo que queremos que nuestros alumnos
practiquen. En el ejemplo desarrollado en las secciones anteriores hemos
elegido para los coeficientes de nuestros polinomios números enteros de -12 a
12. Esta limitación nos ha parecido natural, de la misma manera que en la
mayoría de ejemplos que proponemos en clase, no se nos ocurre poner
números decimales con 3 cifras en el cálculo de un límite.

4. CONCLUSIONES Y TRABAJO FUTURO

Hemos presentado una propuesta para generar un material TIC útil para las
asignaturas de matemáticas. El material propuesto se programa con muy pocos
conocimientos de HTML y JavaScript. Estas aplicaciones se utilizan con
cualquier visualizador (Netscape,Explorer,Mozilla, etc.) ya que tienen formato
de página web. Básicamente se trata de una página web en la que se presenta
el enunciado de un ejercicio con datos que han sido generados aleatoriamente
por el sistema. Al final del enunciado se encuentra un botón para generar la
solución. Formalmente, el resultado es parecido a los ejercicios resueltos que
se pueden encontrar en libros de problemas: ejercicios tipos y diferentes
versiones de ellos que difieren en los datos.

La elaboración del material sigue una metodología de diseño descendente

dadas las especiales características de JavaScript y el tamaño reducido de la
aplicación. Se parte de un ejercicio tipo que los estudiantes tienen que resolver.
Ejemplos de estos ejercicios pueden ser la conversión de números entre
diferentes bases numéricas [2], el estudio de la monotonía de una sucesión
dada por un cociente de polinomios de primer grado, la demostración de que
una sucesión cociente de dos polinomios de primer grado tiene un cierto límite
(técnicas de ε − n0 ), cálculo de primitivas de funciones racionales cociente de
dos polinomios de segundo grado, desarrollo de Laurent de una función del tipo
1 dividido por un polinomio de segundo grado, etc. Este ejercicio tipo debe
tener datos que sean fáciles de parametrizar sin que la parametrización dificulte
 mucho la resolución del ejercicio. Tras el enunciado parametrizado, se debe
redactar la resolución razonada. Cada vez que la página es actualizada
aparece un problema con datos nuevos. El flujo del programa se interrumpe
con una petición de si se desea ver la solución. El estudiante realiza el ejercicio
y tras pedir la solución, aparece en pantalla el desarrollo tal como lo hemos
redactado, pero con los parámetros que el sistema ha generado. Aunque el
lenguaje JavaScript es muy simple, permite que en la resolución se incorpore
texto según ciertas peculiaridades especiales de los parámetros (por medio de
instrucciones tipo ‘if’).

En nuestra propuesta no nos hemos preocupado de mejorar la escritura de

símbolos matemáticos. Una posible vía para mejorar este aspecto puede ser la
utilización de MathML[5,6]. Si lo que se quiere es mejorar no sólo la escritura
matemática, quizás se debería utilizar Flash sobretodo para incluir gráficos y
animaciones. Otra posible vía es la elaboración de estos ejercicios con algunas
funcionalidades que tiene ScientificNotebook. En todo caso, no hemos
pretendido ser tan potentes como un manipulador algebraico. Por tanto, a no
ser que escribamos muchas líneas de código, obtendremos en nuestros
ejercicios resultados del estilo de 8/4. Además nuestros polinomios tendrán
siempre todos sus exponentes consecutivos. Otro aspecto que no hemos
explotado en nuestra propuesta es la capacidad de crear links de HTML. Tanto
hacia páginas de dentro de la propuesta, como hacia a una dirección
cualquiera de Internet. En el material [2,3] sí que se ha utilizado esta
funcionalidad. Una de las utilidades de estos links es la de organizar toda una
serie de aclaraciones a la carta para el estudiante. Finalmente sería deseable
que todo el procedimiento de programación fuese lo más transparente para el
diseñador del ejercicio de forma que no tenga que vérselas con estas
instrucciones de HTML ni de JavaScript.

6. REFERENCIAS
[1] Alvarez García, A. HTML Creación de páginas Web. Anaya Multimedia.
1996.

[2] P. Cruells y G. Sáez. Sistemes de numeració. Material docente en formato

hipertexto en HTML y JavaScript para la asignatura de Álgebra Lineal de
Ingeniería Técnica en Informática de la UOC. UOC (1999).

[3] P. Cruells y G. Sáez. El sistema binari és un joc. Primer premio de creación

virtual de la UOC en su edición de 1999. Material escrito en HTML y JavaScript.

[4] González Moreno, O. Programación en JavaScript. Anaya Multimedia.

1997.

[5] http://dessci.com/en/support/tutorials/mathml/gitmml/

[6] http://www.w3.org/Math/XSL/

View publication stats