Want to make creations as awesome as this one?

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

Transcript

Tutorial basado en la extensión DND ADDA de Sandbox Educación: https://sandboxeducacion.es/dnd-addaLas 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

CEREBRITO

EXTENSIONES

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...

recomenzar

Comprobar

Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación, con botones personalizados

recomenzar

Comprobar

Cuando ponga un elemento sobre otro aparezca un tercer elemento... Pero solo cuando pulse sobre un botón de verificación, con botones personalizados

Cuando ponga un elemento sobre otro desaparezca un tercer elemento...

¡A ver si lo consigues!

¡¡¡Conseguido!!!

Cuando ponga un elemento sobre otro desaparezca un tercer elemento... Y aparezcan varios más...

¡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!

Cuidado con la pasta

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
Lo has conseguido al menos una vez

CONSIGUE LA PASTA

comprobar

[5]

Mete 5 países

Caja de la ONU

rnd

comprobar

[1-5]

Mete $C1 países

Caja de la ONU

*200
200
*100
100
*900
*400
*10
400
*100
100
*300
300
10
900
*200
*50
200
*100

comprobar

100
50
*100
*500
500
100

%[1000]

1000 millones € de inversión en ODS

Caja de la ONU

*200
200
*100
100
*900
*400
*10
400
*100
*100
*100
100
*100
100
100
*100
100
*300
*100
100
100
*100
100
*100
100
300
10
900
*200
*50
200
*100

comprobar

100
50
*100
*500
500
100

%[200-1000]

%C1 millones € de inversión en ODS

Caja de la ONU (aletorio)

Sumando elementos

%C1 PAÍSES

200
100
400
100
300
10
900
200
100
50

%TC PAÍSES

comprobar

500
100

%C2 PAÍSES

%[1-5]

%[1-5]

rnd, HLP: 3

portugal

india

grecia

españa

italia

comprobar

Une silueta con nombre

OFFON DESAPARECE CUANDO EL OBJECT ESTÁ EN SU CIBLE Y APARECE CUANDO NO ESTÁ.

WRONG_TEMP APARECE SI NO CUANDO NO ESTÁN TODOS LOS OBJECT EN SUS CIBLE Y DESAPARECE SI DEJÁN DE ESTARLO

GLOBAL_ON APARECE SÓLO CUANDO TODOS LOS OBJECT ESTÁN EN SUS CIBLE

FONCTION ES EL CEREBRO, SIN ÉL NADA FUNCIONA. 1 Decimales, precisión del cible, rnd mezclar

CORRECTION CEREBRO QUE DEVUELVE LOS OBJECT A SU POSICIÓN INICIAL

ONOFF APARECE CUANDO EL OBJECT ESTÁ EN SU CIBLE Y DESAPARECE CUANDO NO ESTÁ.

Los CIBLE son los recipientes donde tendremos que llevar los OBJECT

RECOMMENCER SIRVE PARA REINICIAR TODO

REASIGNAR SIRVE PARA MEZCLAR LAS POSICIONES DE LOS OBJET

VERIFICATION SIRVE PARA VERIFICAR SI LOS OBJET ESTÁN EN SUS CIBLE

OFF DESAPARECE CUANDO NO ESTÁ SU OBJECT EN SU CIBLE

ON APARECE CUANDO SU OBJECT ESTÁ EN SU CIBLE

rnd, precision

ON3

ONOFF3

OFFON3

OFF3

OFF2

OFFON2

ONOFF2

WRONG_ON APARECE CUANDO NO ESTÁN TODOS LOS OBJECT EN SUS CIBLE, YA NO DESAPARECE

ON2

WRONG_ON

WRONG_TEMP

OFF1

OFFON1

ONOFF1

ON1

GLOBAL_OFF

GLOBAL_OFFON

GLOBAL_ON

GLOBAL_ONOFF

OBJET1

OBJET3

ODD OBJET

OBJET2

GLOBAL_OFFON DESAPARECE SÓLO CUANDO TODOS LOS OBJECT ESTÁN EN SUS CIBLE

CIBLE1

CIBLE2

CIBLE3

Mezclar

Comprobar

Powered by

TUTORIALES

Más opciones de tiempo para WRONG TEMP

1, precision, rnd

<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>

<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="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="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="cible" class="cible21" data-num="21">CIBLE21</div><script></script>

Ú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>

Aquí encuentras los scripts para completar las series de elementos hasta el número deseado.