Extensiones Plantillas

Extensiones de

para

9. Agrupant (clicar en grupos de cosas comunes)

1. Magnum (opciones texto desplegable)

10. CaC CRUZ (clicar en zonas de imagen o texto correctas)

2. Mannix (opciones imágenes desplegable)

3. Temporizador

11. Memory

4. Click & Bye (clicar opciones correctas)

12. DND ADDA (arrastrar texto/imagen a zonas correctas)

13. V-FIL (unir puntos con líneas)

5. URL diapositiva

6. Couise (escribir respuesta correcta)

14. PUZLE

15. Generador de Audios

7. Millonario (plantilla basada en el juego de TV)

8. Dobble (plantilla basada en el juego de cartas)

Ejemplo MAGNUM:

¡Adelante!

¡Adelante!

10 pulsos

13 pulsos

• 13 pulsos
• 6 pulsos
• 12 pulsos
• 10 pulsos

• 10 pulsos
• 12 pulsos
• 9 pulsos
• 11 pulsos

XX

XX

10 pulsos

• 10 pulsos
• 8 pulsos
• 11 pulsos
• 9 pulsos

Comprobar

AbeeZee

Abel

Hauteur

Abhaya Libre

Largeur

AbeeZee

Aclonica

Taille bordure

AbeeZee

Aperçu boîte personnalisée

Actor

Opacité fond

Style bordure

Couleur bordure

Se mettre en mode prévisualisation pour changer les paramètres

Couleur fond

Couleur police

Taille police

Nom police

Petit rappel, il faudra que la police soit présente sur la page ou vous mettrez vos boîtes pour qu'elle soit prise en compte

Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé

Lista de respuestas en lista con viñetas

Cuadro de respuestas generadas con Input Creator

• respuesta1 (correcta)
• respuesta2
• respuesta3
• etc....

Obligatorio agrupar correcto

Obligatorio agrupar incorrecto

Obligatorio Agrupar

Obligatorio agrupar comprobar

XX

Obligatorio, NO BORRAR(si no queremos que aparezca, sacarlo fuera de la diapositiva)

XX

Obligatorio Es el cerebro del juego (No aparece en la visualización)

Ejemplo MANNIX

• #19D30D#CCAAFF
• oui
• oui
• oui
• #FF2222
• 15
• 70

¡ Muy bien!

Lo siento

XX

Elemento agrupado en una lista que se utiliza para definir: - el color del menú - el color del elemento colocado sobre el menú - mantener las proporciones de las imágenes (distorsión si "no") - la visualización de comentarios cuando todo está completo o cada vez - indicación de errores mediante una cruz - el color de las cruces - el grosor de la cruz - el tamaño de la cruz en% de la imagen

Elemento de lienzo agrupado en un cuadro de texto Para mostrar las imágenes seleccionadas por el reproductor El número (de 0 a ....) corresponde al de la respuesta esperada

Elemento para copiar y pegar y agrupar con una de las imágenes para elegir respuesta

Elemento para agrupar con un objeto Genially para hacer un botón de reinicio

Elemento para agrupar con cuadro de texto para mostrar el número de errores

Elemento para agrupar con un objeto Genially que se mostrará cuando todo esté completo

Elemento que se agrupará con un objeto Genially que se mostrará en caso de error.

Elemento para agrupar con un objeto Genially que se mostrará cuando todo esté bien

Elemento obligatorio para colocar en la página

• #AAAAAA
• #CCAAFF
• oui
• oui
• oui
• #FF2222
• 15
• 70

TEMPORIZADOR (Clik)

Es fundamental que este elemento no esté agrupado con nada y que lo coloquemos DENTRO de la diapositiva.

Formato de texto del temporizador. El texto puede editarse libremente pero luego debe quedar agrupado a este objeto. (código verde)

00:00:00

0.1

Edita el número sin desagrupar. Indica los minutos del temporizador.

Agrupar este objeto con el botón que debe iniciar el temporizador.

Agrupar este objeto con lo que deseemos mostrar cuando agotemos el tiempo dado.

11

HH:MM

11

HH:MM:SS

HH:MM:SS

HH:MM:SS

SS

Reloj/Cronómetro/Temporizador

Para cambiar el color del texto lo único que tenéis que hacer es crear un nuevo Texto y agruparlo con el objeto correspodiente (HH:MM o HH:MM:SS)

Inicializa la duración del temporizador.

reinicia el temporizador

Visualización del TEMPORIZADOR en el formato deseado

dos formatos para ver la hora agrupar con un cuadro de texto para definir el formato

Visualización del cronómetro (tiempo empleado) RE-INIT permite restablecer el cronómetro

Mostrar un elemento al final del tiempo

Elemento que se oculta cuando se haya terminado el tiempo.

Ejemplo CLIK & BYE

pulsa solo en los instrumentos de Percusión

¡ Muy bien!

Lo siento

X/N

ERR

Tot

CLICK & BYE

00:00:00

El texto puede editarse libremente pero luego debe quedar agrupado a este objeto.

Agrupar este objeto con lo que deseemos mostrar cuando agotemos el tiempo dado.

Agrupar este objeto con lo que deseemos ocultar cuando agotemos el tiempo dado.

Agrupar este objeto con lo que deseemos ocultar cuando iniciemos el temporizador.

Agrupar este objeto con el botón que debe iniciar el temporizador (opcional). Si no se incluye, el tiempo empezará a correr automáticamente al cargar la pantalla.

Agrupar este objeto con el botón que reiniciará la pantalla.

Agrupar este objeto con lo que deseemos mostrar al pulsar un elemento ROJO.

Agrupar este objeto con lo que deseemos mostrar al pulsar todos los elementos VERDES.

Powered by

CLICK & BYE

Es fundamental que este elemento no esté agrupado con nada y que lo coloquemos DENTRO de la diapositiva.

0.1

Edita el número sin desagrupar. Indica los minutos del temporizador. OPCIONAL

X/N

Agrupar con el texto que muestra el número de elementos eliminables (verdes). OBLIGATORIO (si no queremos que aparezca, sacarlo fuera de la diapositiva)

ERR

Muestra el número de elementos rojos. Se puede desagrupar y editar el texto. OBLIGATORIO (si no queremos que aparezca, sacarlo fuera de la diapositiva)

Tot

Agrupar con el texto que muestra el número de elementos totales. OBLIGATORIO (si no queremos que aparezca, sacarlo fuera de la diapositiva)

Agrupar con los elementos que deben ocultarse al ser pulsados. Una vez desaparezcan todos, se muestran los grupos FDBK_GLOBAL

Agrupar con los elementos que deben mostrar los grupos FDBK_DISP

Powered by

Obtener URL de una página concreta

En modo edición

Copie y pegue el marco azul en una página para obtener su referencia

Copie y pegue el marco rojo en una página para obtener su URL

Copie y pegue el marco verde en una página para obtener su iframe de integración

El resultado se obtiene inmediatamente en modo de visualización y en modo de vista previa. Si da problema para copiar la dirección entonces copie el cuadro y váyase al modo visualización. Ahí ya le dejará siempre copiar el texto. Los Genially deben ser públicos para para poder integrar una página en otra.

Ejemplo COUSIE

¡¡Cuidado con las tildes!!

COMPROBAR

INPUTCREATOR

COUISE

AbeeZee

Hauteur

Abel

Largeur

Abhaya Libre

Générateur de champs-réponse

AbeeZee

Taille bordure

Aclonica

AbeeZee

Opacité fond

Actor

Aperçu boîte personnalisée

Style bordure

Couleur bordure

Couleur fond

Se mettre en mode prévisualisation pour changer les paramètres

Couleur police

Taille police

Petit rappel, il faudra que la police soit présente sur la page ou vous mettrez vos boîtes pour qu'elle soit prise en compte

Nom police

Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé

Obligatorio que estén dentro de la diapositiva

COUISE

Casillas de respuestas que salen de "INPUTCREATOR"

COMPROBAR

Modificar el script de la interactividad de este botón para añadir las respuestas correctas Ver página siguiente...

Agrupar con objeto si aciertan

Agrupar con objeto si fallan

COUISE

EXPLICACIÓN DE LOS VALORES DE CONFIGURACIÓN EN SCRIPT: var ordre = 1; // 0 ou 1 - tapez 1 si l'ordre des réponses est important (on peut vouloir faire retrouver des mots mais les champs réponses sont équivalents ) escriba 1 si el orden de las respuestas es importante (es posible que desee encontrar palabras pero los campos de respuesta son equivalentes var espace = 0 ; //0 ou 1 - tapez 1 si les réponses doivent être nettoyées des espaces de début et fin escriba 1 si las respuestas deben limpiarse de espacios iniciales y finales var casse =0; // 0 ou 1 - tapez 1 si la casse (majuscules/minuscules) doit être respectée escriba 1 si se deben respetar las mayúsculas y minúsculas var correct=0; // 0 ou 1 - tapez 1 pour visualiser les erreurs (couleurs rouge / vert) escriba 1 para ver los errores (colores rojo/verde) var tentative=0; // 0 ou 1 - tapez 1 pour afficher le nombre des tentatives escriba 1 para mostrar el número de intentos var maxtentative=3; // 0 pour illimité - tapez le nombre des tentatives maximales autorisées (tentative doit être à 1) escriba el número máximo de intentos permitidos (el intento debe ser 1) var unefois=0; //0 ou 1 - tapez 1 pour empêcher de recommencer lors d'une session (le couise sera bloqué) (tentative doit être à 1) escriba 1 para evitar reiniciar durante una sesión (el curso se bloqueará) (el intento debe ser 1)

Aciertos:

Dobble Instrumentos Musicales

Dobble Instrumentos Musicales

Powered by

10

Icon made by Freepik from www.flaticon.com

• Nombre de la figura que solo tiene "cabeza"
• Redonda
• Blanca
• Negra
• Corchea
• Semicorchea
• Nombre de la figura que tiene 2 corchetes
• Semicorchea
• Redonda
• Blanca
• Negra
• Corchea
• ¿Cuántas Familias de instrumentos hay?
• 3
• 2
• 4
• 5
• 6
• 8
• Compositor de "Los Fósiles"
• Camile Saint Sans
• L.V. Beethoven
• Maluma
• A. Vivaldi
• Rosalía
• W.A. Mozart
• Notas de la Escala Pentatónica de DO
• DO-MI-SOL-LA-RE
• DO-MI-FA-LA-RE
• DO-RE-MI-FA-SOL
• DO-RE-MI-SOL-SI
• LA-MI-FA-RE-LA
• DO-RE-MI-LA-SI
• ¿Cuántos pulsos ocupan 4 corcheas y 3 negras?
• Cinco
• Seis
• Siete
• Ocho
• Cuatro
• Once
• Quince
• ¿Cuántos pulsos ocupan 16 semicorcheas?
• Cuatro
• Ocho
• Nueve
• Doce
• Seis
• Ciento dos
• ¿Cuántos pulsos ocupan 2 blancas, 2 negras, 4 corcheas y 4 semicorcheas?
• Nueve pulsos
• Ocho pulsos
• Siete pulsos
• Doce pulsos
• Diez pulsos
• Cinco pulsos
• Familia del Saxofón
• Viento madera
• Viento metal
• Percusión
• Cuerda Frotada
• Cuerda pulsada
• Familia del Xilófono
• Percusión madera
• Percusión metal
• Cuerda
• Viento madera
• Percusión parche
• Viento metal

ORDENADO

50:50

false

audioON

ESP

Powered by

• Nombre de la figura que solo tiene "cabeza"
• Redonda
• Blanca
• Negra
• Corchea
• Semicorchea
• Nombre de la figura que tiene 2 corchetes
• Semicorchea
• Redonda
• Blanca
• Negra
• Corchea
• ¿Cuántas Familias de instrumentos hay?
• 3
• 2
• 4
• 5
• 6
• 8
• Compositor de "Los Fósiles"
• Camile Saint Sans
• L.V. Beethoven
• Maluma
• A. Vivaldi
• Rosalía
• W.A. Mozart
• Notas de la Escala Pentatónica de DO
• DO-MI-SOL-LA-RE
• DO-MI-FA-LA-RE
• DO-RE-MI-FA-SOL
• DO-RE-MI-SOL-SI
• LA-MI-FA-RE-LA
• DO-RE-MI-LA-SI
• ¿Cuántos pulsos ocupan 4 corcheas y 3 negras?
• Siete
• Seis
• Cinco
• Ocho
• Cuatro
• Once
• Quince
• ¿Cuántos pulsos ocupan 16 semicorcheas?
• Cuatro
• Ocho
• Nueve
• Doce
• Seis
• Ciento dos
• ¿Cuántos pulsos ocupan 2 blancas, 2 negras, 4 corcheas y 4 semicorcheas?
• Nueve pulsos
• Ocho pulsos
• Siete pulsos
• Doce pulsos
• Diez pulsos
• Cinco pulsos
• Familia del Saxofón
• Viento madera
• Viento metal
• Percusión
• Cuerda Frotada
• Cuerda pulsada
• Familia del Xilófono
• Percusión madera
• Percusión metal
• Cuerda
• Viento madera
• Percusión parche
• Viento metal

ALEATORIO

50:50

true

audioON

ESP

Powered by

Ejemplo AGRUPANT

Agrupa los ritmos con el mismo número de pulsos

TAREA

Ejemplo CAC CRUZ

¡MALA SUERTE!HAS FRACASADO EN LA TAREA Y EL IMPOSTOR HA GANADO.

EL NAVEGADOR SE HA ESTROPEADO Y PARA REPARARLO HEMOS DE COLOCAR LAS COORDENADAS CORRECTAS. MARCA CON UN "X" LAS CIFRAS ADECUADAS PARA QUE SE REACTIVE EL NAVEGADOR.

¡ENHORABUENA!HAS COMPLETADO LA TAREA. HAS CONSEGUIDO UNA PISTA Y UNA CIFRA PARA LA CONTRASEÑA DE REUNIÓN.

PISTA: EL IMPOSTOR TIENE UN NÚMERO DE 2 CIFRAS.CIFRA CONTRASEÑA: __ + (__ x __) - __ : __ + (__ - 15) = CONTRASEÑA

25374

438027

VALIDAR

@fernando_marti7

Ejemplo CAC CRUZ

SUBIDA TÓNICA

¡BIEN HECHO!SEGUIMOS...

Toca las sílabas tónicas de cada palabra para poder ascender por la ladera de la montaña hasta el cráter sin peligro.

¡AY! ¡QUE NOS QUEMAMOS!

CORRÍGELO RÁPIDO...

DE-BUT

BI-CI-CLE-TA

COMPROBACIÓN

AS-CEN-SOR

E-SÓ-FA-GO

DO-CU-MEN-TAL

RE-MO-LI-NO

PER-DIZ

TÓM-BO-LA

@fernando_marti7

Funciones a mantener agrupadas- no tocar

objetos para agrupar con un elemento de Genially

El recuadro rojo lo podemos eliminar

Solo aparece cuando el recuadro rojo y verde está agrupado con algún elemento de genially

Casillas de verificación(respuestas Correctas e incorrectas) Agrupar con un elemento de Genially

Botón para validar.

No borrar. Esconder si no quieres que aparezca

Hay posibilidad de duplicar tantas veces como se quiera

Número de respuestas correctas Número de respuestas incorrectas Total de respuestas correctas e incorrectas

genially.villaMates.es

@profeVillaMates

VALIDER

Percusión:

¡ Muy bien!

Lo siento

COMPONENTES

Los elementos bic y boc (duplicables mediante copiar / pegar) deben agruparse con sus diferentes elementos. El bic y el boc del mismo índice deben corresponder a los dos elementos de un par. Cuidado, agrupar y desagrupar modifica el índice del bolígrafo y boc, por lo que se recomienda agrupar un bolígrafo con un objeto, luego boc con su gemelo y repetir la operación hasta que todos los objetos "debajo de las cartas" estén correctamente agrupados.

Para agrupar con una IMAGEN correspondiente al reverso de las tarjetas del memory. El tamaño de este grupo se verá reflejado en los objetos que esconde por lo que debe ser igual o mayor que éstos. La mejor práctica es utilizar grupos bic y boc del mismo tamaño que el grupo de "dorso de tarjeta".

Agruparse con los elementos Genially que muestre el feedback de éxito.

Agrupar con los elementos Genially que deben aparecer temporalmente tras un mal emparejamiento

Este es el elemento necesario para el funcionamiento del Memory y debe estar ubicado dentro de la página. Como los demás elementos, será invisible durante la ejecución. Desde V1.1, permite la mezcla de cartas en cada partida.

Reto 3:

Arrastra cada elemento a la Cualidad del Sonido correcta

Duración

[4]

Altura

[4]

Cuerda

Re

Violín

Débil

Negra

Largo

Pájaro

Agudo

Mezzopiano

Intensidad

[3]

Timbre

[5]

Forte

Grave

Madera

Corto

Corchea

Viento

Fa

COMPROBAR

1, precision, rnd

ARTICULACIONES

arrastrA lAs ARTICULACIONES a su lugar

PERFECTO!!

Siguiente

muñeca

cabeza

tobillo

codo

NO, NOOO

brazo

cadera

rodilla

pie

hombro

cuello

Comprobar

Reiniciar

Mezclar

El parámetro numérico establece el número de decimales que emplearemos. 1 o nada mostrará 2 decimales, pero redondeado a la décima.

Suma de elementos ponderados (imagen)

$[1-2.5]

1, precision

NÚMEROS DECIMALES

comprobar

$[2-4]

$C1€

$C2€

*2

*2

*2

*2

*2

*2

*2

*2

*2

*2

*2

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*1

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.5

*0.2

*0.2

*0.2

*0.2

*0.2

*0.2

*0.2

*0.2

*0.2

*0.2

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

*0.1

$TC €

Total:

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

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

1, precision, rnd

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

OBJET1

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

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

CIBLE2

OBJET3

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

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

WRONG_ON

ON2

OFF2

ONOFF2

OFFON2

WRONG_TEMP

ODD OBJET

CIBLE3

REASIGNAR SIRVE PARA MEZCLAR LAS POSICIONES DE LOS OBJET

OFF3

OFFON3

ONOFF3

ON3

Mezclar

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

Comprobar

RECOMMENCER SIRVE PARA REINICIAR TODO

Función para colocar en cada página donde se use DND

Tuto DND∞ Parte 1

Agrupar con un objeto genially. Se puede duplicar. Todos los duplicados son intercambiales, es decir se pueden poner en cualquier CIBLE1

Todos los elementos se pueden duplicar

FEEDBACK globales (elementos opcionales)

Agrupar con un objeto genially. Será el objetivo para el Objet1

FEEDBACK individuales (elementos opcionales)

Agrupar con un objeto genially que aparecerá en caso de todas las respuesta sean correctas. Ya no volverá a desaparecer.

Agrupar con un objeto genially que aparecerá en caso de una buena respuesta. Ya no volverá a desaparecer.

Agrupar con un objeto genially que desaparecerá en caso de todas las respuesta correctas. Ya no volverá a aparecer.

Agrupar con un objeto genially que desaparecerá en caso de una buena respuesta. Ya no volverá a aparecer.

Agrupar con un objeto genially que aparecerá en caso de todas las respuesta correctas. Volverá a desaparecer si hay respuestas incorrectas.

Agrupar con un objeto genially que aparecerá en caso de una buena respuesta. Volverá a desaparecer si la respuesta es incorrecta.

Agrupar con un objeto genially que desaparecerá en caso de todas las respuesta correctas. Volverá a aparecer si hay respuestas incorrectas.

Agrupar con un objeto genially que desaparecerá en caso de una buena respuesta. Volverá a aparecer si la respuesta es incorrecta.

Tuto DND∞ Parte 2

Más elementos opcionales

• Botón de verificación que elimina la validación automática
• Muestra comentarios individuales y comentarios generales.

• Muestra el comentario negativo WRONG_ON en caso de error.
• Devuelve los objetos y objetivos a sus posiciones originales en caso de error (si hay corrección).

Variable opcional que permite corregir errores devolviendo objetivos y objetos a sus posiciones originales.

Retroalimentación negativa global: elemento duplicable que se agrupará con un objeto Genially para aparecer en caso de una respuesta falsa. Solo funciona con el botón VERIFICAR

Retroalimentación negativa global: elemento duplicable que se agrupará con un objeto Genially para que aparezca temporalmente (3s) en caso de una respuesta falsa. Solo funciona con el botón VERIFICAR

1, precision, rnd

1, precision, rnd

Título 2

• #3262d5
• 8
• 99
• non
• oui

Ejemplo V-FIL

Aciertos

• V0V9
• V1V4
• V2V5
• V6V3
• V7V10
• V8V11

Errores

Deshacer

Reiniciar

2 éléments canvas (indispensables) dans lesquels vont se dessiner les éléments graphiques (traits/flèches) et ronds de sélection respectivement. À placer en arrière plan.

Ce groupe indispensable formé d'un élément scripté et d'une liste à puces permet de régler les différents paramètres du V-fil.

Règle la couleur des traits, peut prendre la forme #FF0000 ou red ou rgb(255,0,0) entre autres.

Largeur des traits en pixel.

Nombre maximal de traits/flèches qui peuvent être connectés à un point V X.

Mode vecteur oui/non ==> flèches ou traits. En mode vecteur, l'ordre dans lequel deux points sont reliés entre eux importe.

Arrêt aux bords oui/non ==>

non :

oui :

Les points V X duplicables par copier/coller peuvent s'utiliser groupés, auquel cas tout le groupe est cliquable et le centre du groupe est pris comme référence ; ou seuls, auquel cas vous pouvez changer la taille de l'objet pour avoir une zone de clic invisible qui vous convienne. Le groupage/dégroupage réinitialise la numérotation de l'élément.

Élément optionnel qui se groupe avec un texte genially. Il affichera le nombre de réponse(s) juste(s) une fois que le nombre d'associations sera supérieur ou égal au nombre d'associations attendues.

Élément optionnel qui se groupe avec un texte genially. Il affichera le nombre de réponse(s) erronée(s) une fois que le nombre d'associations sera supérieur ou égal au nombre d'associations attendues.

Élément optionnel qui se groupe avec quelque chose. Le groupe sera affiché une fois que le nombre d'associations sera supérieur ou égal au nombre d'associations attendues.

Élément indispensable composé d'un élément scripté et d'une liste à puces, il doit contenir toutes les associations attendues sous la forme Vn°depart Vn°fin. Par exemple le point 2 lié au 5 se traduira par V2V5.

Élément optionnel apparaissant si toutes les associations attendues sont effectuées et aucune autre.

Élément optionnel apparaissant quand il y a autant d'associations ou plus que le nombre attendu et au moins 1 erreur.

Élément optionnel à grouper avec quelque chose. Le groupe formé permettra le retour à 0 sur clic.

Élément optionnel à grouper avec quelque chose. Le groupe permet de revenir d'une association en arrière sur clic.

Élément indispensable qui contient le script de l'extension, à laisser sur la page.

• #000000
• 3
• 99
• non
• oui

• V0V1
• V1V2

• 4
• 2
• oui

<div class="nePasRetirerPuzzle" style="background-color:orange;"> A ne pas retirer, contient le script du puzzle - PIECES SANS BRODURE </div> <script> var inEditor = (window.location.pathname.split("/")[1]=="editor" ? true : false); const limite=5; function getViewItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,18)=="genially-view-item") { trouve =true; } } } return objet; } function getAnimatedItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,25) == "genially-animated-wrapper") { trouve =true; } } } return objet; } if (!inEditor) { var NPR = document.querySelector(".nePasRetirerPuzzle"); NPR.setAttribute("class","fini"); NPR.style.display="none"; var divConsignesPuzzle = document.querySelector(".consignesPuzzle"); divConsignesPuzzle.setAttribute("class","fini"); divConsignesPuzzle.innerHTML=""; var groupeConsignes = getViewItem(divConsignesPuzzle); groupeConsignes.style.display="none"; var lignesConsignes = groupeConsignes.getElementsByTagName("li"); var nbColonnes=parseInt(lignesConsignes[0].innerText); var nbLignes=parseInt(lignesConsignes[1].innerText); var piecesLisses = (lignesConsignes[2].innerText=="oui" ? false : true); var divImagePuzzle = document.querySelector(".imagePuzzle"); divImagePuzzle.setAttribute("class","fini"); divImagePuzzle.innerHTML=""; var groupeImagePuzzle=getAnimatedItem(divImagePuzzle); var racine=groupeImagePuzzle.parentNode; var largeurPuzzle=groupeImagePuzzle.offsetWidth; var hauteurPuzzle=groupeImagePuzzle.offsetHeight; var coinGauche=groupeImagePuzzle.offsetLeft; var coinHaut=groupeImagePuzzle.offsetTop; var indexZ = groupeImagePuzzle.style.zIndex; var imageConsigne=groupeImagePuzzle.getElementsByTagName("img").item(0); imageConsigne.onload=imageChargee; var divGagne=document.querySelectorAll(".gagnePuzzle"); var groupeGagne=[]; divGagne.forEach(elt=> { elt.setAttribute("class","fini"); elt.innerHTML=""; let groupe=getViewItem(elt); groupeGagne.push(groupe); groupe.style.display="none"; }); var pieces=[]; var moveActif=-1; var xAppel; var yAppel; function imageChargee() { var largeurConsigne=imageConsigne.naturalWidth; var hauteurConsigne=imageConsigne.naturalHeight; for (var j=0;j<nbLignes;j++) { for (var i=0;i<nbColonnes;i++) { let newDiv = document.createElement("div"); let gauche=coinGauche+i*largeurPuzzle/nbColonnes; let haut=coinHaut+j*hauteurPuzzle/nbLignes; let largeur=largeurPuzzle/nbColonnes; let hauteur=hauteurPuzzle/nbLignes; let xStartOri=i/nbColonnes*largeurConsigne; let yStartOri=j/nbLignes*hauteurConsigne; let largeurOri=largeurConsigne/nbColonnes; let hauteurOri=hauteurConsigne/nbLignes; if (!piecesLisses) { if (i<nbColonnes-1) { largeur*=1.2; largeurOri*=1.2; } if (j<nbLignes-1) { hauteur*=1.2; hauteurOri*=1.2; } } newDiv.setAttribute("style","position:absolute;left:"+ gauche +"px;top:" + haut +"px;height:" + hauteur + "px;width:" + largeur +"px;z-index:"+ indexZ +";"); let newPattern = document.createElement("canvas"); newPattern.height=hauteur; newPattern.width=largeur; let patternCtx=newPattern.getContext('2d'); patternCtx.drawImage(imageConsigne,xStartOri,yStartOri,largeurOri,hauteurOri,0,0,largeur,hauteur); let newCanvas = document.createElement("canvas"); newCanvas.height=hauteur; newCanvas.width=largeur; let ctx=newCanvas.getContext('2d'); newDiv.appendChild(newPattern); newDiv.appendChild(newCanvas); racine.appendChild(newDiv); largeur=largeurPuzzle/nbColonnes, hauteur=hauteurPuzzle/nbLignes, pieces.push({ physique:newDiv, pattern:newPattern, ctx:ctx, largeur:largeur, hauteur:hauteur, appartenance:i+j*nbColonnes, bougeant:false, xStart:gauche, yStart:haut, gDSize:largeur*0.15, gDelta:hauteur*0.12, gRMid:hauteur/2.4, dDSize:largeur*0.15, dDelta:hauteur*0.12, dRMid:hauteur/2.4, hDSize:hauteur*0.15, hDelta:largeur*0.12, hRMid:largeur/2.4, hDSize:hauteur*0.15, bDelta:largeur*0.12, bRMid:largeur/2.4 }); } } for (var i=0;i<pieces.length;i++) { if (i%nbColonnes!=nbColonnes-1) { var alea = (Math.random()*9+10)/100; pieces[i].dDSize=alea*pieces[i].largeur; pieces[i+1].gDSize=alea*pieces[i].largeur; alea = (Math.random()*10+5)/100; pieces[i].dDelta=alea*pieces[i].hauteur; pieces[i+1].gDelta=alea*pieces[i].hauteur; alea = (Math.random()*0.6+0.2); pieces[i].dRMid=alea*pieces[i].hauteur; pieces[i+1].gRMid=alea*pieces[i].hauteur; } if (i<pieces.length-nbColonnes) { var alea = (Math.random()*9+10)/100; pieces[i].bDSize=alea*pieces[i].hauteur; pieces[i+nbColonnes].hDSize=alea*pieces[i].hauteur; alea = (Math.random()*10+5)/100; pieces[i].bDelta=alea*pieces[i].largeur; pieces[i+nbColonnes].hDelta=alea*pieces[i].largeur; alea = (Math.random()*0.6+0.2); pieces[i].bRMid=alea*pieces[i].largeur; pieces[i+nbColonnes].hRMid=alea*pieces[i].largeur; } } for (var i=0;i<pieces.length;i++) { var pattern = pieces[i].ctx.createPattern(pieces[i].pattern,"no-repeat"); pieces[i].ctx.fillStyle=pattern; pieces[i].ctx.beginPath(); pieces[i].ctx.lineWidth = 0.1; pieces[i].ctx.strokeStyle = "#000000"; pieces[i].ctx.moveTo(0,0); if (!piecesLisses &&i>=nbColonnes) { pieces[i].ctx.lineTo(pieces[i].hRMid-pieces[i].hDelta,0); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid-2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,pieces[i].hDSize); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid+2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid+pieces[i].hDelta,0); } pieces[i].ctx.lineTo(pieces[i].largeur,0); if (!piecesLisses && i%nbColonnes!=nbColonnes-1) { pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].dRMid-pieces[i].dDelta); pieces[i].ctx.bezierCurveTo(pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid+0.5*pieces[i].dDelta,1.10*pieces[i].largeur,pieces[i].dRMid-2*pieces[i].dDelta,pieces[i].largeur+pieces[i].dDSize,pieces[i].dRMid); pieces[i].ctx.bezierCurveTo(1.10*pieces[i].largeur,pieces[i].dRMid+2*pieces[i].dDelta,pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid-0.5*pieces[i].dDelta,pieces[i].largeur,pieces[i].dRMid+pieces[i].dDelta); } pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].hauteur); if (!piecesLisses&&i<pieces.length-nbColonnes) { pieces[i].ctx.lineTo(pieces[i].bRMid+pieces[i].bDelta,pieces[i].hauteur); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid+2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+pieces[i].bDSize); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid-2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid-pieces[i].bDelta,pieces[i].hauteur); } pieces[i].ctx.lineTo(0,pieces[i].hauteur); if (!piecesLisses&&i%nbColonnes!=0) { pieces[i].ctx.lineTo(0,pieces[i].gRMid+pieces[i].gDelta); pieces[i].ctx.bezierCurveTo(0.3*pieces[i].gDSize,pieces[i].gRMid-0.5*pieces[i].gDelta,0.10*pieces[i].largeur,pieces[i].gRMid+2*pieces[i].gDelta,pieces[i].gDSize,pieces[i].gRMid); pieces[i].ctx.bezierCurveTo(0.10*pieces[i].largeur,pieces[i].gRMid-2*pieces[i].gDelta,0.3*pieces[i].gDSize,pieces[i].gRMid+0.5*pieces[i].gDelta,0,pieces[i].gRMid-pieces[i].gDelta); } pieces[i].ctx.lineTo(0,0); pieces[i].ctx.fill(); pieces[i].ctx.stroke(); pieces[i].pattern.style.display="none"; } pieces.forEach(function (elt,indice) { elt.physique.addEventListener('mousedown',function (evt) {enfonce(evt,indice)}); elt.physique.addEventListener('touchstart',function (evt) {enfonceTactile(evt,indice)}); elt.physique.addEventListener('touchmove',function (evt) {tactileDeplace(evt,indice)}); elt.physique.addEventListener('touchend',function (evt) {tactileFin()}); elt.physique.addEventListener('touchleave',function (evt) {tactileFin()}); }); groupeImagePuzzle.style.display="none"; shuffle(); } function shuffle() { var xMin=coinGauche; var xMax=coinGauche+largeurPuzzle*(nbColonnes-1)/nbColonnes; var yMin=coinHaut; var yMax=coinHaut+hauteurPuzzle*(nbLignes-1)/nbLignes; pieces.forEach(elt=> { let alea=Math.random()*(xMax-xMin)+xMin; elt.physique.style.left=alea+"px"; alea=Math.random()*(yMax-yMin)+yMin; elt.physique.style.top=alea+"px"; }); } function enfonce(evt,qui) { evt.preventDefault(); moveActif=qui; xAppel=evt.clientX; yAppel=evt.clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } function enfonceTactile(evt,qui) { if (moveActif==-1) { evt.preventDefault(); moveActif=qui; xAppel=evt.changedTouches[0].clientX; yAppel=evt.changedTouches[0].clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } } document.addEventListener('mouseup',function() { moveActif=-1; }); function tactileFin() { moveActif=-1; } document.addEventListener('mousemove',sourisDeplace) function sourisDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.clientX)/contours.width*1200; var deltaY=(yAppel-evt.clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.clientX,evt.clientY); } }); } } function tactileDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.changedTouches[0].clientX)/contours.width*1200; var deltaY=(yAppel-evt.changedTouches[0].clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.changedTouches[0].clientX,evt.changedTouches[0].clientY); } }); } } function checkForNeighbours(numero,x,y) { if (numero%nbColonnes>0) { if ((Math.abs(pieces[numero].physique.offsetLeft-pieces[numero].largeur-pieces[numero-1].physique.offsetLeft)<limite) && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero-1].physique.offsetTop)<limite) && !pieces[numero-1].bougeant) { pieces[numero-1].physique.style.left=(pieces[numero].physique.offsetLeft-pieces[numero].largeur)+"px"; pieces[numero-1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero-1); xAppel=x; yAppel=y; pieces[numero-1].bougeant=true; return; } } if (numero%nbColonnes<nbColonnes-1) { if ((Math.abs(pieces[numero].physique.offsetLeft+pieces[numero].largeur-pieces[numero+1].physique.offsetLeft))<limite && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero+1].physique.offsetTop)<limite)&& !pieces[numero+1].bougeant) { pieces[numero+1].physique.style.left=(pieces[numero].physique.offsetLeft+pieces[numero].largeur)+"px"; pieces[numero+1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero+1); xAppel=x; yAppel=y; pieces[numero+1].bougeant=true; return; } } if (numero>=nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero-nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero-nbColonnes].physique.offsetTop-pieces[numero].hauteur)<limite && !pieces[numero-nbColonnes].bougeant) { pieces[numero-nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero-nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop-pieces[numero].hauteur)+"px"; repositionGroupe(numero-nbColonnes); xAppel=x; yAppel=y; pieces[numero-nbColonnes].bougeant=true; return; } } if (numero<pieces.length-nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero+nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero+nbColonnes].physique.offsetTop+pieces[numero].hauteur)<limite && !pieces[numero+nbColonnes].bougeant) { pieces[numero+nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero+nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop+pieces[numero].hauteur)+"px"; repositionGroupe(numero+nbColonnes); xAppel=x; yAppel=y; pieces[numero+nbColonnes].bougeant=true; return; } } } function switchAppartenance(transfuge) { pieces.forEach(elt=> { if (elt.appartenance==transfuge) { elt.appartenance=moveActif; } }); pieces.forEach(elt=> { elt.xStart=elt.physique.offsetLeft; elt.yStart=elt.physique.offsetTop; }); checkGagne(); } function checkGagne() { var premier=pieces[0].appartenance; var cBon=true; for (var i=1;i<pieces.length;i++) { if (pieces[i].appartenance!=premier) { cBon=false; } } if (cBon) { groupeGagne.forEach(elt=>elt.style.display="block"); } } function repositionGroupe(refferent) { var xRef=pieces[refferent].physique.offsetLeft; var yRef=pieces[refferent].physique.offsetTop; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[refferent].appartenance) { pieces[i].physique.style.left=xRef+(i%nbColonnes - refferent%nbColonnes)*pieces[0].largeur+"px"; pieces[i].physique.style.top=yRef+(Math.floor(i/nbColonnes)-Math.floor(refferent/nbColonnes))*pieces[0].hauteur+"px"; } } switchAppartenance (refferent); } } </script>

Es necesario agrupar el elemento "imagen del rompecabezas" con la imagen a reconstituir. El tamaño del grupo formado por estos dos elementos determinará el tamaño de tu rompecabezas. Además, las piezas del rompecabezas aparecerán aleatoriamente en este espacio cuando se cargue la página.

Este grupo formado por un elemento con guión y una lista de viñetas te permite definir el número de piezas del rompecabezas así como la apariencia de las piezas.

número de piezas de ancho

número de piezas en altura

oui :

non :

El elemento "Ganado" se debe agrupar con algo (imagen, forma genial, texto, ...). Esto aparecerá una vez que el rompecabezas esté completo.

OU

Contiene el guión del rompecabezas, que se dejará en la página.

• 5
• 4
• oui

Generador de Audios

Solo funciona en modo visualización o previsualización

Pulsa este audio de ejemplo para comprobar tus ajustes. Puedes modificar el volumen mientras se reproduce.

URL Audio:

Texto visible:

Delay:

Volumen:

Click/Tap

Copia el texto generado en este cuadro e insértalo en la página deseada (Insertar - </> Otro). Luego, agrúpalo con el elemento que quieras que reproduzca el sonido al ser pulsado, al pasar el ratón por encima o al hacerse visible en caso de elegir feedback. Déjalo sin agrupar si eliges la opción autoplay.

Autoplay

Feedback

Hover