- -
Oficina de Aprendizaje Digital

Árbol de páginas

Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

Arrastrar y soltar permite al alumno asociar dos o más elementos y hacer conexiones lógicas de forma visual. Esto nos permite trabajar con imágenes de circuitos, herramientas o estructuras que estemos trabajando en nuestras asignaturas.

  • Agrupar elementos que van juntos o tienen algo en común

  • Relacionar un objeto con otro objeto

  • Poner los elementos en el orden correcto

  • Coloque los elementos en una posición correcta


Image Added



Image Removed

Para adjuntar un audio, arrastramos el archivo sobre "Archivos fuente" o pegamos el enlace del audio.

Hay tres diseños de reproductor disponibles: minimista, completo y transparente. En la casilla de "Modo de reproducción", elegiremos el que más se adapte a nuestras necesidades.

Las casillas "Ajustar al marco" y "Habilitar reproducción automática", hacen lo mismo que ne el formato video.

UI Steps


UI Step

Elección de plantilla

Tras haber pulsado sobre "+ CREAR NUEVO H5P", se nos abre la ventana de selección de plantillaplantilla. Elegimos la plantilla  "Arrastra las palabras Arrastrar y soltar (Drag the Wordsand Drop)".

Image RemovedImage Added


UI Step

Editor

Ahora debería aparecer el editor de arrastra las palabrasrrastrar y soltar. El editor debería verse así:

Image RemovedImage Added


UI Step

Configuración


Image Added

En configuración podemos añadir una imagen de fondo y especificar las dimensiones (en px) del área de juego.

Para seguir al siguiente paso, pulsamos sobre "Tarea"


Image Removed

Image Removed

1. Titulo

2. Fuentes de video: en este espacio arrastraremos el video que queramos subir  o también podemos copiar la URL de un video de youtube.

3. Añadir imagen al video.

4. Con esta casilla activada, el reproductor ocupará todo el espacio disponible. De lo contrario, se respetará la proporción original del video compartido.

5. Con esta casilla activada, se mostrarán los controles de video (play, pausa...).

6. Al marcar esta casilla, el video se reproducirá automáticamente al abrir la actividad.

7. Esta casilla, habilita la opción de reproducir el video en bucle.

8. Añadir pista de audio. Esta pestaña nos da la opción de superponer un audio al video. Como podría ser, por ejemplo, una voz en off, narrando o explicando los contenidos del video.

Imagen:

UI Step

Tarea

En esta pestaña configuramos las zonas de colocación[1] (zona en la ventana de la tarea donde podemos arrastrar los elementos), así como los textos[2] e imágenes[3] que se pueden arrastrar.

Image Added

UI Steps
sizesmall


UI Step


UI Expand
titleZonas de colocación

En primer lugar, pulsamos sobre este icono para agregar y editar la primera zona de colocación.Image Added Para añadir más zonas de colocación, pulsaremos este mismo icono.


Tras pulsar el icono, se nos muestra una ventana como la siguiente:

Column

Image Added



Column

Configuraciones:

    • Etiqueta: nombre de la zona de colocación.
    • Mostrar etiqueta
    • Opacidad del Fondo: del 0 al 100, siendo 0 transparente y 100 opaco.
    • Esta zona de colocación solo puede contener un elemento: solo existe una respuesta correcta para esta zona.
    • Habilitar alineación automática: al activar esta casilla, se alinearán automáticamente todos los elementos colocados en esta zona

Column



Image Added



Column



La ventana "Pistas y retroalimentación", nos brinda tres herramientas opcionales:

1. Texto de pista: en esta casilla, escribimos una pista para el usuario que aparecerá antes de que el usuario compruebe sus respuestas.

2. Mensaje mostrado en coincidencia correcta: El mensaje aparecerá debajo de la tarea en "revisar" si el elemento colocado es el correcto.

3. Mensaje mostrado en coincidencia incorrecta: El mensaje aparecerá debajo de la tarea en "comprobar" si el elemento colocado es incorrecto.




UI Step


UI Expand
titleTexto

Para agregar un texto, pulsamos sobre el icono Image Added


Tras pulsar el icono, se nos muestra una ventana como la siguiente:

Column

Image Added


Column


Configuraciones:

    • Texto: texto que se puede arrastrar a las zonas de colocación.
    • Seleccionar zonas de colocación: marcamos las casillas de las zonas en las que queremos que sea posible situar el texto.
    • Opacidad del Fondo: del 0 al 100, siendo 0 transparente y 100 opaco.
    • Número infinito de instancias de elementos: Clonar este elemento para que pueda ser arrastrado a múltiples zonas de colocación.





UI Step


UI Expand
titleImagen

Para agregar un texto, pulsamos sobre el icono Image Added


Tras pulsar el icono, se nos muestra una ventana como la siguiente:

Column

Image Added


Column


Configuraciones:

    • Con el botón "Añadir" cargamos la imagen
    • Decorativo solamente: habilitamos esta opción si la imagen es puramente decorativa y no añade información al contenido de la página. Será ignorada por los lectores de pantalla y no se le dará ningún texto alternativo.
    • Texto alternativo: Si el navegador no puede cargar la imagen, se mostrará este texto en su lugar. Usado también por lectores de pantalla.
    • Texto al pasar el ratón por encima: Opcional. Este texto se muestra cuando el usuario pasa

Medios

En la pestaña "Medios", podemos agregar archivos de imagen, video o audio relevantes para la pregunta.

Image Removed

Video:

Column
Column

Image Removed

Column
Column

Para adjuntar una imagen, simplemente pulsamos sobre el botón "+ Anadir".

Si la imagen contiene información importante para la actividad, deberemos escribir esta información en la casilla de "Texto alternativo". Este texto se mostrará en el caso de que el navegador no pueda mostrar la imagen.

Por el contrario, si lo único que aporta la imagen es meramente decorativo y no influye a la realización de la actividad, marcaremos la casilla "Decorativo solamente". De esta forma, podemos prescindir del "Texto alternativo".

La información que incluyamos en la casilla "Texto al pasar el ratón por encima", es opcional y se mostrará cuando el usuario pase
    • el puntero del ratón por encima de la imagen.

Por defecto, la imagen que pongamos en la actividad, se puede ampliar al pulsar sobre ella. Si no queremos que exista esta opción de zoom, activamos la casilla "Deshabilitar acercamiento de imagen".

Audio:

Column
Column
UI Step
    • Selecciona zonas de colocación: marcamos las casillas de las zonas en las que queremos que sea posible situar la imagen.
    • Opacidad del Fondo: del 0 al 100, siendo 0 transparente y 100 opaco.
    • Número infinito de instancias de elementos: Clonar este elemento para que pueda ser arrastrado a múltiples zonas de colocación.





UI Step


UI Expand
titleDefinir la coincidencia correcta

Para definir qué coincidencia entre la zona de caída y los elementos arrastrables es correcta, presionamos dos veces en la zona de colocación. Se nos abrirá el editor de la zona de colocación sobre la que hemos hecho doble clic, pero ahora, tras haber añadido elementos arrastrables, nos aparece la opción "Seleccionar elementos correctos".

Marcamos las casillas de los textos o imágenes que correspondan a esta zona. Repetimos este proceso con todas las zonas de colocación.

Image Added





Texto

El  campoTexto es donde escribimos el ejercicio.

Image Removed

Instrucciones de texto:

      • Las palabras que se pueden arrastrar se agregan con un asterisco (*) al frente y detrás de la palabra / frase correcta.
      • Puedes agregar una sugerencia textual, usando dos puntos (:) antes de la sugerencia.
      • Por cada hueco vacío solo hay una palabra correcta.
      • Puedes agregar retroalimentación que se mostrarán cuando se complete la tarea. Utiliza '\+' para retroalimentación en caso de respuesta correcta '\-' para retroalimentación para las incorrectas.

Ejemplo: El contenido de H5P se puede editar utilizando un *navegador:¿Qué tipo de programa es Chrome?*.
               El contenido de H5P es *interactivo\+Correcto! \-Incorrecto, prueba de nuevo!*

Image Removed

Column
Column
Info
UI Step

Configuración del comportamiento

Column


Image RemovedImage Added


Column

Podemos habilitar o deshabilitar las siguientes configuraciones:

    • Botón intentar de nuevo: permite al alumno volver a realizar la tarea
    • Dar un punto a toda la tarea: cuando hay varias respuestas correctas, habilita dar un punto total a la tarea
    • Aplicar penalizaciones: Aplicar penalizaciones por elementos colocados en las zonas de colocación incorrectas. Debe habilitarse cuando los mismos elementos pueden colocarse en múltiples zonas de colocación, o si solamente hay una zona.
    • Botón mostrar solución: enseña el resultado cuando se pulsa el botón "Comprobar".
    • Si esto no está habilitado, los alumnos podrían hacer coincidir todos los elemento con todas las zonas de colocación y siempre recibirían la puntuación completa.
    • Habilitar explicación de puntuación: Mostrar una explicación de la puntuación al usuario al comprobar sus respuestas (si se ha seleccionado la opción "Aplicar penalizaciones").
    • Opacidad del fondo para elementos a colocar: Si este campo está activado, anulará la opacidad configurada en todos los elementos a colocar. Debería ser un número entre 0 y 100, donde 0 significa transparencia completa y 100 significa sin transparencia
    • Resaltado de zona de colocación: Elegir cuando resaltar las zonas de colocación. Tres opciones: al arrastrar, siempre y nunca.
    • Espaciado para auto-alineado (en px)
    • Habilitar Pantalla Completa: Activar esta opción para habilitar el botón de pantalla completa.
    • Mostrar resultados de puntuación: Mostrar puntos obtenidos por cada respuesta. No disponible cuando está habilitada la opción 'Dar un punto para todo la tarea'.

    • Mostrar Título: Desactivar esta opción si no queremos que se muestre este título. El título solamente se mostrará en resúmenes, estadísticas, etcRetroalimentación instantánea: esta configuración elimina el botón "comprobar". La función del botón "comprobar" se ejecuta automáticamente cada vez que se coloca una palabra.



UI Step

Retroalimentación global

Lumi nos da la opción de mostrar un mensaje de retroalimentación al finalizar la tarea. Podemos personalizar el mensaje en base a la puntuación que ha obtenido el alumno. Ejemplo: 0-20% Mala puntuación, 21-91% Puntuación Media, 91-100% ¡Puntuación Estupenda!


UI Step

Exportación

Tras haber completado la tarea en el editor, procederemos a exportarla en HTML, pulsando sobre [Archivo>Exportar] situado en la esquina superior izquierda de la pantalla.



Se nos mostrará la siguiente ventana:


  

Dejamos todos los valores por defecto, simplemente pulsamos "EXPORTAR AHORA".


UI Step

Añadir H5P a Lessons

Si desea saber como añadir el fichero HTML (generado en la exportación de LUMI) a Lessons, puede consultar el siguiente enlace:

UI Button
colorblue
iconquestion
titleAñadir H5P a lessons
urlhttps://wiki.upv.es/confluence/pages/viewpage.action?pageId=771129485#