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
| UI Steps |
|---|
| UI Step |
|---|
Elección de plantillaTras haber pulsado sobre "+ CREAR NUEVO H5P", se nos abre la ventana de selección de plantilla. Elegimos la plantilla "Arrastrar y soltar (Drag and Drop)". 
|
| UI Step |
|---|
EditorAhora debería aparecer el editor de arrastrar y soltar. El editor debería verse así: 
|
| UI Step |
|---|
Configuración
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" |
| UI Step |
|---|
TareaEn 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. 
| UI Steps |
|---|
|
| UI Step |
|---|
| UI Expand |
|---|
| En primer lugar, pulsamos sobre este icono para agregar y editar la primera zona de colocación. 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 |
|---|
|
| 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 |
|---|
|
| 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 |
|---|
| Para agregar un texto, pulsamos sobre el icono 
Tras pulsar el icono, se nos muestra una ventana como la siguiente: | Column |
|---|
|
| 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 |
|---|
| Para agregar un texto, pulsamos sobre el icono 
Tras pulsar el icono, se nos muestra una ventana como la siguiente: | Column |
|---|
|
| 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 el puntero del ratón por encima de la imagen.
- 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 |
|---|
| title | Definir 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. 
|
|
|
|
| UI Step |
|---|
Configuración del comportamiento| Column |
|---|
|
| Column |
|---|
Podemos habilitar o deshabilitar las siguientes configuraciones: |
|
| UI Step |
|---|
Retroalimentación globalLumi 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ónTras 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 LessonsSi desea saber como añadir el fichero HTML (generado en la exportación de LUMI) a Lessons, puede consultar el siguiente enlace: | UI Button |
|---|
| color | blue |
|---|
| icon | question |
|---|
| title | Añadir H5P a lessons |
|---|
| url | https://wiki.upv.es/confluence/pages/viewpage.action?pageId=771129485# |
|---|
|
|
|
...
