ALARME A LA MINE 1 BROUILON

ALARME a la mine

Escape game du musée de la mine de Cagnac-les-Mines

Entrée

Réalisé par Laurence Bergaud, Yoann Huet, Myriam Cazor, (M2 CRN-INSPE Toulouse)

Bienvenue à l'école de la mine

CrEDITS

ENTREE

20

Ecris ton prénom

CONTINUE

• 500
• 50
• 5
• 500

Cette école est une école un peu particulière. Tu vas apprendre à utiliser un outil numérique : genially. Tu vas découvrir les types d'activités secrètes auxquelles tu seras confronté(e) lors de ta visite du Musée de la Mine.

Sois persévérant(e) et attentif(tive) aujourd'hui afin de mettre toutes les chances de ton côté le jour J. Amuse-toi bien !

Sais-tu où se situe le Musée de la Mine ?

Déjà proposé

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

MKBWKEH

Le nom d'une autre cité minière est cachée dans cette page

|CARMAUX|Carmaux

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

Champ vide

s XIX-XX

13ème siècle

treuil à bras

L'extraction du charbon à travers les siècles

17ème siècle

roue à tympan

18ème siècle

cheminée de ventilation

Fais glisser les image à la période qui convient.

19ème siècle

machine à vapeur

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

• 2
• 5
• oui

Le piqueur

FIN

Félicitations, ton apprentissage est terminé Tu peux compléter ton certificat de fin d'apprentissage ci-contre

20

Crédits

Génially réalisé avec les extensions DND, COUI3E, PEUZEUL, SCRAPE, ADD-ON 2, AUDIOH, BLOC NOTES, CAESAR, PENDU, TAPUSCRIT 2, CCX, B proposées par le collectif S'CAPE

Sons libres de droit : Pixabay et la Sonothèque

Images : https://passerelles.essentiels.bnf.fr/fr/ et sous licence CC-BY: - Par Stefdn — Travail personnel, CC BY 3.0<https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons - Florival fr, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons Autres ressources : Musée départemental de la Mine (Tarn)

Conçu et réalisé par Laurence Bergaud, Myriam Cazor et Yoann Huet

Tu peux interagir avec le décor

écris le numéro de ton équipe et tape sur le casque pour valider

|1|2|3|4|5

certains objets sont déplaçables

Bonjour, je suis Michel. Je serai ton guide pendant toute l'aventure. Donne-moi la lampe

d'autres sont invisibles et apparairont au survol ou par une pression du doigt

Merci !

#dfe8ed

• 1000
• 50
• 5
• 1000

La MISSION

https://www.cjoint.com/doc/24_04/NDgp5QZFgzk_security-alarm-80493.mp3

Depuis cette nuit, l’alarme de la mine de Cagnac sonne sans discontinuer. Personne n'ose descendre dans cette mine qu’on dit hantée et infestée de rats... Alors que faire ? Qui a déclenché l'alarme ? Un mineur serait-il resté coincé au fond depuis toutes ces années ?

https://www.cjoint.com/doc/24_04/NDkjPoPfMbk_explosion-91872.mp3

Grâce à tes connaissances sur le monde de la mine et du charbon, tu es la personne désignée pour éclaircir ce mystère. Fais vite, tu n’as que 45 minutes. Passé ce délai, la mine s’auto-détruira. Tous les tarnais comptent sur toi pour sauver leur patrimoine. Bon courage !

40

HH:MM:SS

Géologie

45

Société

Métiers

Sécurité

Energies

On peut cliquer sur les couches pour les faire disparaitre

Et si on allait voir ce qui se passe sous cette couche de galets ?

Le charbon nait suite à la transformation de plusieurs matières organiques.

Dirige-toi vers le panneau "la formation du charbon"

houille

schiste

poudingue

grès

Bien joué ! Mais au fait, sais-tu ce qu'on trouve dans le schiste ?

La vase se transforme en

Le sable se transforme en

La matière végétale se transforme en

Les galets se transforment en

Raté

Tu veux recommencer ? Aide- toi des panneaux muraux

As-tu reconnu l'image sur les panneaux ?

Retiens bien ce mot ! Il te sera utile pour la suite

Déja proposé

Raté

Tu veux recommencer ? Aide- toi des panneaux muraux

As-tu reconnu l'image sur les panneaux ?

Retiens bien ce mot ! Il te sera utile pour la suite

Déja proposé

HH:MM:SS

Géologie

Société

Métiers

Sécurité

Energies

Beaucoup d'hommes sont morts dans la mine. Quelles en sont les causes principales ?

Va voir le panneau "Les dangers : maux de la mine et accidents"

Champ vide

|éboulement|eboulement

|roulage

Les dangers sont nombreux, il faut être prudent

|chute

Je dois m'équiper avant de descendre dans la mine. Peux-tu m'aider ?

Je suis prêt, et toi ?

Un mineur a oublié sa pioche. C'est peut-être lui qui a sonné l'alarme...

Suivons ce rat

HH:MM:SS

Géologie

Société

Métiers

Sécurité

Energies

Les enfants travaillaient dans les mines de charbon comme "rouleurs" : ils poussaient les wagonnets remplis de charbon. Mais jusqu'en quelle année ?

Dirige toi vers la frise chronologique

12345

1874

BIEN JOUE

RECOMMENCE

Dirige-toi vers le panneau "Une mine pleine de mots"

Retiens bien ce mot ! Il te sera utile pour la suite

HH:MM:SS

Géologie

Société

Métiers

Sécurité

Energies

Retrouve les six images pour savoir où je vis

• 3
• 2
• oui

cité minière

plan d'eau

maison

mine

puits

score

wagonnet

Jestem Polakiem. Witam w moim domu. W domu czeka na nas mama. Pośpiesz się !

Retiens bien ce mot, il te sera utile pour la suite

ORIGINE

A vaut K

Aide-toi du panneau "Paternalisme et vie quotidienne"

RYWZC

C'est chez moi

|Homps|homps

Bien joué. Comme tu vois,l'exploitation du charbon a façonné le paysage de la région

HH:MM:SS

Géologie

Société

Métiers

Sécurité

Energies

Bonne ou mauvaise, d'or ou de charbon, on me trouve au bout des stylos à l'école. Qui suis-je ?

Montons dans ce bus vert. Il roule à l'hydrogène

|mine|la mine

Consulte le panneau "des informations pleines d'énergie"

50%

Inde

Chine

Indonésie

USA

Australie

9%

8%

Tu veux en apprendre un peu plus sur les différentes énergies ?

7,4%

7%

Les producteurs de charbon dans le monde

Retiens bien le mot en MAJUSCULES ! Il te sera utile pour la suite

HH:MM:SS

Géologie

Sauvons la mine

Société

Métiers

Sécurité

Energies

HH:MM:SS

Métiers

Géologie

Avez-vous récolté les 5 mots pour vous permettre de sauver la mine ?

Société

Energies

30

Sécurité

Le est un composé organique constitué de carbone et d’hydrogène enfouis dans le sol.

Le terme « »

|fossile

|origine

provient de l'

pendant plusieurs millions d’ années d’organismes . .

de ces qui sont issus de la lente décomposition

|charbon

|hydrocarbures

|vivants

Attention ! Vous n'avez pas le droit à l'erreur cette fois-ci. Lisez la phrase attentivement avant de valider

Métiers

HH:MM:SS

Géologie

Société

Energies

Sécurité

Bien joué ! Tous ensemble vous avez réussi à sauver la mine ! Bravo et merci

Maman m'avait dit de ne pas jouer avec le gros bouton rouge

Maman m'avait dit de ne pas jouer avec le gros bouton rouge

Vous pouvez retrouver cette phrase sur le panneau "Des informations pleines d'énergie"

Champ vide

HH:MM:SS

FONCTION COUIS3

COUIS3

Cet élément obligatoire dans une page contient toutes les foNCtions de l'extension. Il permet également d'indiquer les erreurs les plus fréquentes telles que Les erreurs de groupement.

Cet élément à placer en dehors de la première page du genially permet de masquer la partie TRANsCRIPTIONs du lien social qui affiche les réponses attendues !

COUIS3

|alternative1|alternative2

XX

XX

$tentativescouis3

XX

XX

$scorecouis3

Champ vide

le caractère pipe (|) s'obtient par :

• Alt Gr + 6 pour le clavier AZERTY Windows Français
• Alt + Maj + L sous Mac

élément Champ texte

COUIS3

Élément permettant la saisie par l'utilisateur d'une ligne de caractères. Il doit être groupé avec une zone de texte contenant la ou les réponses attendues. L'appui sur la touche entrée permet de passer au champ suivant. En absence de bouton de validation et si tous les champs sont remplis, la touche entrée valide les réponses.

Voir l'exemple

|réponse unique

La zone de texte groupée au champ texte doit commencer par le caractère | pour définir la réponse attendue ou les réponses attendues.

|alternative1|alternative2

Les différentes réponses attendues sont séparées par le caractère | .

|alternative1|alternative2|***

La succession de caractères |*** transforme le champ en champ Password dont la valeur est masquée.

Voir l'exemple

|alternative1|alternative2||1

Il est possible de créer des groupes de champs textes en les identifiant par un nombre . Cet identifiant doit être ajouté en fin de zone de texte séparé par deux caractères || .

Voir l'exemple

|réponse unique

Il est possble de personnaliser les champs-textes grâce à l'INPUT CREATOR en fin de ce Genially

VARIABLES

COUIS3

Ces éléments facultatifs permettent de paramétrer le couis3 simplement en les ajoutant dans la page.

Colorie en rouge ou vert les champs-textes si la réponse saisie est fausse ou juste.

Rend la validation insensible à la casse. On peut saisir la réponse en minuscules ou en majuscules.

Supprime les espaces en début et en fin des réponses saisies (Bug observé sur certaines tablettes).

Supprime tous les espaces dans la réponse. La modification est invisible à l'écran.

Permet de rendre indifférent l'ordre des réponses. Les champs deviennent équivalents.

Voir l'exemple

Permet de sauvegarder les réponses saises dans les champs de la page au cours d'une session.

Permet de sauvegarder les réponses saises dans les champs de la page sur plusieurs sessions (même navigateur, même compte utilisateur).

Champ vide

Permet de définir le texte à apparaître si le champ réponse est vide. Par défaut (en absence d'élément SI VIDE), le texte est "champ non rempli".

NB : les champs de texte sont automatiquement nettoyés des apostrophes courbées des claviers Mac.

VALIDATION et FEEDBACKs

COUIS3

CeS éléments facultatifs et duplicables permettent de valider les réponses saisies et d'obtenir un retour.

le caractère pipe (|) s'obtient par :

• Alt Gr + 6 pour le clavier AZERTY Windows Français
• Alt + Maj + L sous Mac

Élément à grouper avec un objet (texte, image, symbole...) pour le transformer en bouton. Cet élément est duplicable: plusieurs boutons peuvent être disposés dans la même page. Cet élément est facultatif : en absence de bouton, la validation s'effectue par un appui de la touche ENTRÉE dans le dernier champ si tous les champs sont remplis.

||1

En groupant cet élément avec une zone de texte commençant par ||, on peut définir le numéro du groupe de champs réponses qu'il valide.

Voir l'exemple

Élément à grouper avec un objet (texte, image, symbole...) à afficher quand toutes les réponses sont justes..

Élément à grouper avec un objet (texte, image, symbole...) à cacher en cas d'erreur.

||1

||1

Ces éléments peuvent être liés à un groupe de champs réponses en les groupant avec une zone de texte commençant par || et indiquant le numéro du groupe.

||global

||global

En écrivant ||global dans la zone de texte, on définit alors des feedbacks globaux.

Voir l'exemple

INPUT CREATOR

Type

COUIS3

Aperçu boîte personnalisée

Hauteur

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

Largeur

Arrondis

Couleur fond

Opacité fond

Espace interne

Style bordure

Couleur bordure

AbeeZee

Abel

Abhaya Libre

AbeeZee

Aclonica

AbeeZee

Actor

Taille bordure

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

Graisse

Paragraphe

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

Texte de substitution

HOMPS

• 4
• 3
• oui

Sauras-tu retrouver ces images ?

plan d'eau

cité minière

maison

mine

wagonnet

puis

La cité minière de Cagnac de 1950 à aujourd'hui

BRAVO

aujourd'hui

1950

Trouve les 8 differences

Score :

Géologie

Société

Métiers

Industrie

Sécurité

Un choix multiple des associations

ALARME a la mine

Escape game du musée de la mine de Cagnac-les-Mines

Réalisé par Yoann Huet, Myriam Cazor, Laurence Bergaud (M2 CRN-INSPE Toulouse)

ENTRER

45:00

00:00

Bravo, tu es très fort. Mais au fait, sais-tu ce qu'on trouve dans le schiste ?

schiste

poudingue

grès

houille

Les galets se transforment en poudingue

La vase se transforme en schiste

La matière végétale se transforme en houille

Le sable se transforme en grès

COUIS3

Réaliser les opérations

|6|six

?$scorecalcul|=|4

XX

$scorecalcul

?$scorecalcul|=|3

|2|deux

|6|six

?$scorecalcul|=|2

|24|vingt-quatre

?$scorecalcul|=|1

VALIDER

Hint 🔈

Solution 💡

Put the words in order

A great presentation keeps things clear and structured.

Write an awesome title

Contextualize your topic with a subtitle

structured.

things

clear

presentation

great

and

keeps

structured.

Visual content is a transversal, universal language, like music. We can understand images from millions of years ago, even from other cultures.

Élément À GRATTER : À grouper avec une IMAGE Genially pour la transformer en image "grattable" ou à "gommer".

Cet élément a été créé pour dépanner en espérant un retour à la normale..

REMARQUES L'élément À GRATTER doit être placé sur ou dessous l'image sans débordement. Dans le cas contraire, l'image serait déformée. L'image n'est pas réellement effacée, mais elle est rendue transparente. Il n'est pas possible de rendre interactifs les objets placés sous l'image. Ne pas placer l'image trop près des bords du Genially pour éviter certains petits soucis sur tablette.

Élément TAILLE PIECE : Élément facultatif afin de définir la taille de la "gomme". Par défaut, la taille est définie à 5. À simplement placer dans la diapo.

Cet élément peut être dupliqué et groupé à plusieurs images.

Fonctionnement identique aux éléments pour la saise de type I, par barre de défilement et confirmation par clic.

Contient le script nécessaire au fonctionnement du pendu avec selection par clavier classique. Attention, il ne convient pas au pendu avec séléction par barre de défilement.

Zone dans laquelle les lettres devront être proposées en tapant au clavier

Réutilisez !

version 1.91 du 20/08/2023

DND∞

Plus d'informations

version Lemniscape

Extension proposée par Patrice Nadam

RETROUVE LE NOM DES COULEURS

Feedbacks individuels

BLEU

ROUGE

VERT

Feedbacks globaux multiples

Un choix multiple des associations

RETROUVE LE NOM DES COULEURS

Feedbacks individuels

BLEU

ROUGE

VERT

Feedbacks globaux multiples

DND∞

Bouton de vérification retirant la validation automatique :

• Affiche les feedbacks individuels et feedbacks globaux.
• Affiche, en cas d'erreur, le feedback négatif WRONG_ON.
• Replace les objets et cibles à leurs positions d'origine en cas d'erreur (si correction présent).

NOUVEAUTES - depuis version 1.4 du 05/11/20

Trois éléments facultatifs ont été ajoutés

Variable facultative permettant de corriger les erreurs en replaçant cibles et objets à leurs positions d'origine.

Feedback global négatif : élément duplicable à grouper avec un objet Genially devant apparaître en cas de réponse fausse. Ne fonctionne qu'avec le bouton VERIFICATION

La fonction DNDoo a également été modifiée

Feedback global négatif : élément duplicable à grouper avec un objet Genially devant apparaître temporairement (3s) en cas de réponse fausse. Ne fonctionne qu'avec le bouton VERIFICATION

Si vous désirez compléter les séries, voici les scripts correspondant aux éléments.

Il suffit de modifier les numéros (et la code couleur du fond si vous le désirez)

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

Mission Complete

You've saved the base

START OVER?

Are you sure you want to go out?

You will lose progress

exit

back

MISSION FAILED

You've destroyed the base......

try again

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

Il faut grouper l'élément "image pour le puzzle" avec l'image à reconstituer. La taille du groupe formé par ces deux éléments déterminera la taille de votre puzzle. Par ailleurs, les pièces du puzzle apparaitront aléatoirement dans cet espace au chargement de la page

Ce groupe formé par un élément scripté et une liste à puce permet de définir le nombre de pièces du puzzle ainsi que l'aspect des pièces.

nombre de pièces en largeur

nombre de pièces en hauteur

oui :

non :

L'élément "Gagné" est à grouper avec quelque chose (image, forme genially, texte, ...). Cela apparaîtra une fois le puzzle complet.

OU

Contient le script du puzzle, à laisser sur la page

• 5
• 4
• oui

alarme

https://www.cjoint.com/doc/24_04/NDgp5QZFgzk_security-alarm-80493.mp3

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

ding réussite

https://www.cjoint.com/doc/24_04/NDfhJhLEQdk_ding-101492.mp3

explosion

https://www.cjoint.com/doc/24_04/NDkjPoPfMbk_explosion-91872.mp3

Exemple score et compatibilité avec VARIABL3

Il est possible de définir une variable permettant de sauvegarder le score. Cette variable est compatible avec l'extension VARIABL3. On affiche par exemple ici des ronds de couleurs différentes en fonction du score obtenu.

Jeu du pendu

Mode d'emploi

Fais défiler les lettres en cliquant dessus (à droite ou à gauche). Tu peux aller plus vite en utilisant la barre de défilement. La lettre que tu choisis est celle du milieu. Elle est plus grosse. Clique dessus pour l'insérer dans le mot.

• Si tu as perdu, tu peux retenter ta chance en cliquant sur le bouton bleu
• Si tu as gagné, tu peux continuer en cliquant sur le bouton orange

La roue de César

Mode d'emploi

Ce jeu se présente sous la forme de roues portant des lettres. Il faut tourner la roue pour trouver un mot mystère.

• L' avocat au centre est l'indice pour trouver la bonne correspondance

• Un autre indice ?

ALARME A LA MINE (04/2024)

• Escape Game pédagogoque réalisé avec les extensions DND, COUI3E, PEUZEUL, SCRAPE, ADD-ON 2, AUDIOH, BLOC NOTES, CAESAR, PENDU, TAPUSCRIT 2, CHRONOS, CCX, BRIAN, GICODE proposées par le collectif
• Auteure et collaborateurs au projet : Laurence Bergaud, Myriam Cazor et Yoann Huet (bêta testeurs)
• Sons libres de droit : Pixabay, la Sonothèque , BBC Sound Effects
• Musique de générique originale : Yoann Huet
• Images libres de droit : Pixabay
• Autres ressources : Musée départemental de la Mine (Tarn)

• Logiciels et sites utilisés : Suite Adobe, Camtasia, Audacity, Canva, Removebg, Cjoint, Roue chromatique, Animated Drawings, Leonardo AI, Text to Speech

S'CAPE