Diferencias

Muestra las diferencias entre dos versiones de la página.

--- es:manual:items:interactivos [2021/06/12 11:37] – root
+++ es:manual:items:interactivos [2023/02/09 13:36] – [Alternativas a las preguntas interactivas] root
@@ Línea 1: / Línea 1: @@
 ===== Preguntas interactivas =====
-Llamaremos //preguntas interactivas// a todas aquellas preguntas que disponen de un interfaz propio para elaborar la respuesta, implementado normalmente mediante un programa en [[wp>javascript]]. Esta técnica flexibiliza la respuesta del alumno y puede mejorar sensiblemente la interfaz con lo que se pueden evaluar mejor cierto tipo de conocimiento. El siguiente es un ejemplo simple de un ítem interactivo:
+Llamaremos //preguntas interactivas// a todas aquellas preguntas que disponen de un interfaz propio para elaborar la respuesta, implementado normalmente mediante un programa en [[wpes>javascript]]. Esta técnica flexibiliza la respuesta del alumno y puede mejorar sensiblemente la interfaz con lo que se pueden evaluar mejor cierto tipo de conocimiento.
-{{ es:manual:items:interactiva-ejemplo1-1.png?400 |}}
+El siguiente ejemplo ilustra bien la necesidad de ítems interactivos: Se quiere preguntar al usuario si conoce la distribución geográfica de cierta especie (Pinus nigra). Para este tipo de preguntas no sirve una pregunta de multiple opción, ni tan siquiera una pregunta de respuesta libre, por lo que se decidió construir un [[wpes>Applet_Java|Applet en Java]] ((Lamentablemente la tecnologia de [[wpes>Applet_Java|Applet en Java]], asi como la tecnología [[wpes>Adobe_Flash_Player|Flash]] están ya en desuso y no está soportada por la mayoría de  los modernos navegadores, por lo que requiere su reimplementación en [[es:manual:items:interactivos:evaluacion|javascript]])) que permitiera al alumno dibujar sobre un mapa el área de distribución. Para corregir este ejercicio basta comparar el procentaje del área que conincide con un área patrón, obteniendo asi un resultado numérico que puede considerarse como respuesta a una pregunta con posible crédito parcial.
-En este ejemplo el alumno debe seleccionar de una lista de nombre y apellidos de físicos famosos, el nombre y apellidos del autor de la teoría de la relatividad. El interfaz de previsualización muestra el ejemplo de respuesta correcta. El código correspondiente a esta pregunta es es siguiente:
+{{ es:manual:items:item-applet-mapa.png?400 | }}
-<code html>
+El [[es:manual:items:interactivos:evaluacion|desarrollo de ítems con javascript]] requiere cierto conocimiento de programación por parte del profesor. No obstante, para algunas de las interacciones comunes en la respuesta a preguntas de evaluación como la ordenación, el emparejamiento, etc. se ha desarrollado una [[es:manual:items:interactivos:xitems|biblioteca de preguntas interactivas]] que facilitan al no programador incluiir preguntas interactivas en sus cuestionarios.
-Seleccione los valores adecuados para obtener el nombre del
-científico que propuso la teoría de la relatividad<br/><br/>
-<center>
-    <select name="nombre"  id="nombre">
-        <option value=""></option>
-        <option value="Isaac">Isaac</option>
-        <option value="Albert">Albert</option>
-        <option value="Niels">Niels</option>
-        <option value="David">David</option>
-    </select>
-    <select name="apellido"  id="apellido">
-           <option value=""></option>
-             <option value="Bohr">Bohr</option>
-            <option value="Newton">Newton</option>
-            <option value="Einstein">Einstein</option>
-           <option value="Hilbert">Hilbert</option>
-   </select>
-    <span id='corregir'></span>
-    <div id='solucion'></div>
-</center>
-</code>
-==== Función evaluacion() ====
+==== Ítem base ====
-Para que este ítem funcione, el profesor (diseñador del ítem) debe proporcionar una función que tras la interacción del usuario responda como si lo hiciera el alumno en un campo de texto, es decir, debe concatenar el nombre y el apellido y devolverlo como respuesta. Para ello debe incluir en el enunciado la función ''evaluacion()'' y devolver este valor.
+Todas la pregunta interactivas se basan en capturar la respuesta del alumno a la pregunta de una forma diferente a la selección de una opción o a la introducción de un texto de respuesta, es decir, son preguntas en las que en vez de que el alumno tenga que responder directamente, lo hace a través de un código en javascript que se encarga de hacer llegar un texto a Siette que Siette interpretará como la respuesta del alumno. Como se verá mas adelante, esta respuesta se obtiene mediante una [[es:manual:items:interactivos:evaluacion#funcion evaluacion|funcion de evaluación]].
-<code javascript>
+Por tanto los ítems generativos no son mas que ítems básicos de Siette modificados para no presentar las opciones de respuesta clásicas. A estos ítems los llamamos //item base//, y pueden ser [[es:items|cualquier clase de ítem]] de Siette.
-   function evaluacion() {
-     var cnombre = document.getElementById("nombre");
-     var capellido =  document.getElementById("apellido");
-     var respuesta = cnombre.value + " " + capellido.value;
-     return respuesta;
-   }
-</code>
-En el editor, en la pestaña [[Avanzado]] debe indicarse a Siette que se trata de un [[ítem interactivo]] con javascript, lo que hace Siette no incluya el campo de texto para la respuesta y que cuando se pulse el botón de ''Siguiente pregunta'', llame en su lugar a la función ''evaluacion()'' para obtener este valor.
+En los casos en los que el //item base// sea un item de [[es:manual:items:tiposbasicos:respuesta_unica|múltiple opción]], la respuesta recibida se compara con cada una de las opciones de respuesta para determinar a que opción corresponde. En el caso de las [[es:manual:items:tiposbasicos:respuesta_libre|preguntas de respuesta libre]], el texto devuelto como resultado de la interacción es direcatmente la respuesta del alumno, que se compara con los [[es:manual:items:patrones|patrones]] de respuesta que tenga el //ítem base//.
+==== Alternativas a las preguntas interactivas ====
-Una vez hecho esto, Siette procede como si se tratase de cualquier otro ítem de respuesta libre, intentando encajar con el patrón de respuesta que se haya introducido para determinar si la respuesta es o no correcta. En el ejemplo anterior, y puesto que solo hay las posibles combinaciones de respuesta dadas por la interfaz de respuesta, puede usarse un simple [[patrón de correspondencia]]. Al igual que en cualquier otra pregunta, Siette vuelve a cargar la pregunta y muestra la respuesta del alumno y la corrección:
+En general, simplemente para modificar la disposicón de las respuestas en pantalla no es necesario el uso de ítem interactivos, que muchas veces puede simularse mediante la maquetación de código, estilos y [[es:manual:items:enlinea|respuestas alineadas con el texto]] del enunciado, como por ejemplo:
-{{ es:manual:items:interactiva-ejemplo1-2.png?400 |}}
+{{ es:manual:items:item-neurona.png?400 | }}
-==== Función de resolver() ====
+Aunque actualmente para este tipo de preguntas es mas comodo configurarlas usando una pregunta de [[es:manual:items:interactivos:xitems:etiquetado|etiquetado de imágenes]] de la [[es:manual:items:interactivos:xitems|biblioteca de ítem interactivos]].
-Dependiendo del tipo de ítem interactivo, puede que la respuesta del alumno, que desde el punto de vista de Siette  siempre es una cadena de texto, al contrario de lo que sucede en el ejemplo anterior, no sea legible, por ejemplo en el caso de que la cadena de respuesta sea una secuencia de acciones, unos indicdores numéricos, un fichero xml o cualquier otra circunstancia.
+Por otra parte, no todas las preguntas que contienen [[wp>javascript]] son preguntas interactivas. Cualquier pregunta puede contener en su enunciado o en las respuestas trozos de codigo HTML, y por tanto, dentro de estos trozos puede haber codigo en [[wp>javascript]]. Lo que diferencia a las preguntas interactivas es que el alumno no utiliza los controles de respuesta de Siette para las preguntas básicas, sino que construye la solución utilizando este código y la respuesta se pasa a Siette directamente a partir de esta interacción.
-En estos casos, de cara a mejorar la interfaz, la respuesta del alumno se vuelve a pasar al ítem cuando se está mostrando la corrección, de manera que el propio ítem pueda reproducir y corregir la respuesta del alumno. Para ello en el enunciado de la pregunta debe incluirse una función ''resolver'' que tiene dos parámetros, el primero de ellos es la respuesta dada por el alumno y el segundo la correccion realizada por Siette, expresada como una variable booleana. Por ejemplo, en el caso anterior se incluye esta función:
-<code javascript>
-   function resolver(respuesta, correccion) {
-      var cnombre = document.getElementById("nombre");
-      var capellido =  document.getElementById("apellido");
-      var elem = respuesta.split(" ");
-      cnombre.value = elem[0];
-      capellido.value = elem[1];
-      corregir = document.getElementById("corregir");
-      if (correccion) {
-          corregir.innerHTML= '&#x2705;';
-      } else {
-          corregir.innerHTML= '&#x274c;';
-      }
-      return false;
-   }
-</code>
-Esta funcion recibe dos parámetros ''respuesta'' que contiene la cadena de texto que el ítem compuso anteriormente como respuesta del alumno, y ''correccion'' que siguiendo con el ejemplo anterior  tomaria el valor ''false'', ya que la respuesta construida no encaja con el patrón establecido en Siette.
-{{ es:manual:items:interactiva-ejemplo1-3a.png?400 |}}
-Siette llama a la función ''resolver'' cuando tiene que presentar la corrección de la respuesta al alumno. Si la función no existe no ocurre nada, simplemente el contenido del ítem no se actualiza, ni se ejecutará ningun código javascript. En el ejemplo anterior, la función ''resolver'' añade simplemente un icono a la izquierda para indicar si la respuesta ha sido o no correcta.
-Si el ítem considera que la acción realizada por la funcion ''resolver'' es suficiente para informar al usuario sobre su corrección y que la información que muestra Siette por defecto no es necesaria, basta con que cambie el valor devuelto (última línea del código anterior) por ''return true'', lo que indica que Siette no necesita mostrar la corrección, por lo que se presentaría de esta manera:
-{{ es:manual:items:interactiva-ejemplo1-3b.png?400 |}}
-==== Función de solucion() ====
-Otra función similar a la anterior es la función ''solucion'', que es llamada por Siette cuando es necesario mostrar la respuesta correcta al alumno.
-Siette es capaz de mostrar la respuesta correcta de una pregunta de respuesta libre usando para ello el campo ''ejemplo'', que contiene una posible respuesta correcta al ítem; pero al igual que en el caso de la [[Función de resolver()|función resolver]], puede que el ítem sea una mejor opción para presentar la solución.
-La función ''solucion'' recibe un solo parámetro ''respuestaCorrecta'' que contiene el ejemplo que se haya incluido en la pregunta de Siette. El siguiente código corresponde al ejemplo anterior:
-<code javascript>
-   function solucion(rrespuestaCorrecta) {
-          correccion = document.getElementById("corregir").innerHTML.charCodeAt(0);
-          if (correccion == 0x274C ) {
-              document.getElementById("solucion").innerHTML =
-                      '&#x274e;' + rrespuestaCorrecta;
-         }
-        return false;
-    }
-</code>
-En este caso la función muestra la solución como una cadena de texto precedida de un caracter que indica que esta era la respuesta correcta. Nótese que la función puede recuperar indirectamente el valor de la corrección, ya que antes de llamar a esta función Siette debe haber llamado a la funcion ''resolver''.
-{{ es:manual:items:interactiva-ejemplo1-4a.png?400 |}}
-La funcion ''solucion'' puede devolver un valor ''true'' si considera que ya se ha mostrado la solución y que por tanto Siette no necesita volver a hacerlo. La siguiente imagen muestra como quedaría el ítem si ambas funciones devuelven ''true'':
-{{ es:manual:items:interactiva-ejemplo1-4b.png?400 |}}
-==== Biblioteca de ítems interactivos ====
-Evidentemente, para construir este tipo de preguntas hay que saber un poco de programación, pero como veremos mas adelante, una biblioteca de ítems ya preparados facilitan su utilización por no programadores.
-==== Alternativas al uso de ítems interactivos ====
-En general, simplemente para modificar la disposicón de las respuestas en pantalla no es necesario el uso de ítem interactivos, que muchas vecs puede simularse mediante la maquetación de código, estilos y respuestas alineadas con el teto del enunciado.
-No todas las preguntas que contienen [[wp>javascript]] son preguntas interactivas. Cualquier pregunta puede contener en su ennunciado o en las respuestas trozos de codigo HTML, y por tanto, dentro de estos trozos puede haber codigo en [[wp>javascript]]. Lo que diferencia a las preguntas interactivas es que el alumno no utiliza los controles de respuesta de Siette para las preguntas básicas, sino que construye la solución utilizando este código y la respuesta se pasa a Siette directamente a partir de esta interacción.