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

EXTENSIONES

CEREBRITO

CAJONES DE CÓDIGO VARIOS QUE TIENEN QUE ASOCIARSE A ELEMENTOS DE NUESTRAS PÁGINAS

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

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

¡A ver si lo consigues!

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

CONSIGUE LA PASTA

Lo has conseguido al menos una vez

Lo has conseguido al menos una vez

Que haya dos grupos de arrastre, y cuando se cumplan las dos condiciones aparezca un elemento y desaparezca otro

Cuidado con la pasta

Caja de la ONU

Mete 5 países

[5]

comprobar

Caja de la ONU

Mete $C1 países

[1-5]

comprobar

rnd

Caja de la ONU

1000 millones € de inversión en ODS

%[1000]

100

500

*500

*100

50

100

comprobar

*100

200

*50

*200

900

10

300

*300

100

*100

400

*10

*400

*900

100

*100

200

*200

Caja de la ONU (aletorio)

%C1 millones € de inversión en ODS

%[200-1000]

100

500

*500

*100

50

100

comprobar

*100

200

*50

*200

900

10

300

100

*100

100

*100

100

100

*100

*300

100

*100

100

100

*100

100

*100

*100

*100

400

*10

*400

*900

100

*100

200

*200

%[1-5]

%[1-5]

%C2 PAÍSES

100

500

comprobar

%TC PAÍSES

50

100

200

900

10

300

100

400

100

200

%C1 PAÍSES

Sumando elementos

Une silueta con nombre

comprobar

italia

españa

grecia

india

portugal

rnd, HLP: 3

Comprobar

Mezclar

CIBLE3

CIBLE2

CIBLE1

GLOBAL_OFFON

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

OBJET2

ODD OBJET

OBJET3

OBJET1

GLOBAL_ONOFF

GLOBAL_ON

GLOBAL_OFFON

GLOBAL_OFF

ON1

ONOFF1

OFFON1

OFF1

WRONG_TEMP

WRONG_ON

ON2

WRONG_ON

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

ONOFF2

OFFON2

OFF2

OFF3

OFFON3

ONOFF3

ON3

rnd, precision

ON APARECE CUANDO SU OBJECT ESTÁ EN SU CIBLE

OFF DESAPARECE CUANDO NO ESTÁ SU OBJECT EN SU CIBLE

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

REASIGNAR SIRVE PARA MEZCLAR LAS POSICIONES DE LOS OBJET

RECOMMENCER SIRVE PARA REINICIAR TODO

Los CIBLE son los recipientes donde tendremos que llevar los OBJECT

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

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

GLOBAL_ON

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

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

TUTORIALES

Powered by

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.

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

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