Want to create interactive content? It’s easy in Genially!
Tutorial personalizado basado en DND ADDA S'cape + Sandbox
Alfonso Peña
Created on November 26, 2022
Aprendemos desde cero cómo funciona la extensión DND que nos permite mostrar y hacer desaparecer elementos arrastrando y soltando unos elementos sobre otros
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Tutorial basado en la extensión DND ADDA de Sandbox Educación: https://sandboxeducacion.es/dnd-adda Las 5 últimas páginas están extraídas de ese Genially
CAJONES DE CÓDIGO VARIOS QUE TIENEN QUE ASOCIARSE A ELEMENTOS DE NUESTRAS PÁGINAS
EXTENSIONES
CEREBRITO
drag and drop-->arrastrar y soltar
Cuando ponga un elemento sobre otro aparezca un tercer elemento...
Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación
Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación. Y si no he acertado, que salga un mensaje temporal de error...
Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación, con botones personalizados
Comprobar
recomenzar
Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación, con botones personalizados
Comprobar
recomenzar
Cuando ponga un elemento sobre otro desaparezca un tercer elemento...
¡A ver si lo consigues!
Cuando ponga un elemento sobre otro desaparezca un tercer elemento... Y aparezcan varios más...
¡¡¡Conseguido!!!
¡A ver si lo consigues!
Cuando ponga un elemento sobre otro aparezca un elemento y desaparezca otro elemento, pero al volver a quitarlo desaparezca el elemento que apareció y aparezca el elemento que desapareció.
¡A ver si lo consigues!
Que haya dos grupos de arrastre, y cuando se cumplan las dos condiciones aparezca un elemento y desaparezca otro
Lo has conseguido al menos una vez
CONSIGUE LA PASTA
Lo has conseguido al menos una vez
Cuidado con la pasta
comprobar
Caja de la ONU
Mete 5 países
[5]
rnd
comprobar
Caja de la ONU
Mete $C1 países
[1-5]
500
*500
100
*100
comprobar
200
*200
Caja de la ONU
1000 millones € de inversión en ODS
900
*900
100
*100
50
*50
%[1000]
10
*10
200
*200
100
*100
400
*400
300
*300
100
*100
500
*500
100
*100
comprobar
200
*200
Caja de la ONU (aletorio)
%C1 millones € de inversión en ODS
900
*900
100
*100
50
*50
%[200-1000]
10
*10
200
*200
100
*100
400
*400
300
*300
100
*100
100
*100
100
*100
100
*100
100
*100
100
*100
100
*100
100
*100
%C1 PAÍSES
Sumando elementos
500
100
200
%[1-5]
comprobar
900
100
50
10
200
100
%C2 PAÍSES
%[1-5]
%TC PAÍSES
400
300
100
rnd, HLP: 3
comprobar
Une silueta con nombre
españa
italia
portugal
india
grecia
GLOBAL_OFFON DESAPARECE SÓLO CUANDO TODOS LOS OBJECT ESTÁN EN SUS CIBLE
rnd, precision
GLOBAL_ON APARECE SÓLO CUANDO TODOS LOS OBJECT ESTÁN EN SUS CIBLE
CORRECTION CEREBRO QUE DEVUELVE LOS OBJECT A SU POSICIÓN INICIAL
FONCTION ES EL CEREBRO, SIN ÉL NADA FUNCIONA. 1 Decimales, precisión del cible, rnd mezclar
OBJET1
Los CIBLE son los recipientes donde tendremos que llevar los OBJECT
GLOBAL_ONOFF
GLOBAL_ON
GLOBAL_OFF
GLOBAL_OFFON
CIBLE1
OBJET2
ON APARECE CUANDO SU OBJECT ESTÁ EN SU CIBLE
OFF DESAPARECE CUANDO NO ESTÁ SU OBJECT EN SU CIBLE
WRONG_ON APARECE CUANDO NO ESTÁN TODOS LOS OBJECT EN SUS CIBLE, YA NO DESAPARECE
ONOFF1
OFFON1
OFF1
ON1
WRONG_TEMP APARECE SI NO CUANDO NO ESTÁN TODOS LOS OBJECT EN SUS CIBLE Y DESAPARECE SI DEJÁN DE ESTARLO
OFFON DESAPARECE CUANDO EL OBJECT ESTÁ EN SU CIBLE Y APARECE CUANDO NO ESTÁ.
CIBLE2
ONOFF APARECE CUANDO EL OBJECT ESTÁ EN SU CIBLE Y DESAPARECE CUANDO NO ESTÁ.
OBJET3
WRONG_ON
ON2
OFF2
OFFON2
ONOFF2
REASIGNAR SIRVE PARA MEZCLAR LAS POSICIONES DE LOS OBJET
WRONG_TEMP
ODD OBJET
CIBLE3
OFF3
ON3
OFFON3
ONOFF3
VERIFICATION SIRVE PARA VERIFICAR SI LOS OBJET ESTÁN EN SUS CIBLE
RECOMMENCER SIRVE PARA REINICIAR TODO
Mezclar
Comprobar
Powered by
TUTORIALES
1, precision, rnd
Más opciones de tiempo para WRONG TEMP
Aquí encuentras los scripts para completar las series de elementos hasta el número deseado.
Únicamente habrá que cambiar los números (en el ejemplo el 21) por el deseado. Una vez modificado, copiaremos uno a uno en el cuadro de la pestaña Insertar </> Otros y pulsaremos el botón INSERTAR.
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="objet" class="objet21" data-num="21">OBJET21</div><script></script>
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="cible" class="cible21" data-num="21">CIBLE21</div><script></script>
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="on" class="ON21" data-num="21">ON21</div><script></script>
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="off" class="OFF21" data-num="21">OFF21</div><script></script>
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="on" class="ONOFF21" data-num="21">ONOFF21</div><script></script>
<div style="width:100%;height:100%;text-align:center;color:white;background-color:tomato" data-auteur="scape" data-ref="off" class="OFFON21" data-num="21">OFFON21</div><script></script>