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 |
|---|
|  Image RemovedPara 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 . | Column |
|---|
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 |
|
|
|
| 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# |
|---|
|
|
|
