thermae romanae

thermae romanae

SALVETE AMICI ! VOS EXPECTABAM. IN THERMAS VENITE !

Recommencer

AVANT DE COMMENCER : tu peux faire des pauses dans ton travail ! Tu verras deux boutons dans les pages suivantes : si tu cliques, ce marque-page apparaît au clic, tu reprends là où tu t'es arrêté(e), même plusieurs jours plus tard (sur le même ordinateur).

Pour les étourdis, lien vers le cours à compléter !

karine.untermarzoner@ac-grenoble.fr

Entrée principale

chaufferie

baignoire

SALVE ! Tout d'abord, rendons-nous à l'apodyterium.

Plan des thermes de Stabies

Entrée des femmes

Ce sont les VESTIAIRES ! C'est ici que nous déposons nos vêtements dans des casiers surveillés par un esclave.

Clique sur le baigneur pour continuer la visite.

Entrée principale

chaufferie

baignoire

Maintenant que nous sommes "en tenue", place au sport : allons à la palaestra ou à la natatio.

Plan des thermes de Stabies

Entrée des femmes

Un peu de sport pour transpirer ! C'est à la palaestra que nous faisons du sport : jeux de balles, course à pied ou haltérophilie. On peut aussi nager dans la natatio.

Entrée principale

chaufferie

baignoire

On commence le soin du corps en allant ensuite au tepidarium.

Plan des thermes de Stabies

Mosaïque du IIème siècle p.C., Algérie

BENE LAVA = lave-toi bien !

Entrée des femmes

https://drive.google.com/drive/folders/15cyWbZraE36nN-0bhQgivime3E-h7QZm?usp=sharing

Le tepidarium est la salle tiède pour transpirer, où le corps s'habitue peu à peu à la chaleur. On peut également s'y faire masser par l'unctor ou épiler par l'alipilus.

Entrée principale

chaufferie

baignoire

Maintenant, allons transpirer un peu au caldarium !

Plan des thermes de Stabies

Mosaïque du IIème siècle p.C., Algérie

BENE LAVA = lave-toi bien !

Entrée des femmes

https://drive.google.com/drive/folders/15cyWbZraE36nN-0bhQgivime3E-h7QZm?usp=sharing

Le caldarium est la salle chaude où la chaleur est étouffante.

SVDATORIVM

LABRVM

ALVEVS

Passe ta souris sur les 3 étiquettes.

On s'oint le corps d'huile parfumée que contient l'ARYBALLE.

ARYBALLE

On utilise le STRIGILE (strigilis) pour se racler la peau et enlever l'excédent d'huile.

STRIGILE

EPONGE

Le SVDATORIVM est l'espace vide de la pièce qui fait penser au hammam aujourd'hui. Il est parfois situé dans une pièce mitoyenne au CALDARIVM.

Le LABRVM est un bassin d'eau fraîche que l'on puise pour s'asperger.

L'ALVEVS est le bain d'eau chaude.

Entrée principale

chaufferie

baignoire

Les soins sont bientôt terminés : rendons-nous au frigidarium.

Plan des thermes de Stabies

Entrée des femmes

Mosaïque du IIème siècle p.C., Algérie

BENE LAVA = lave-toi bien !

https://drive.google.com/drive/folders/15cyWbZraE36nN-0bhQgivime3E-h7QZm?usp=sharing

Comme tu peux le voir , pour se rendre au frigidarium, on repasse par le tepidarium pour éviter une transition trop brutale ! On élimine dans le frigidarium la sueur, les onguents, on raffermit la peau et on resserre les pores !

CALDARIVM

TEPIDARIVM

Entrée principale

chaufferie

baignoire

Mais comment ça marche ??? Pour le savoir, allons à la chaufferie...

Plan des thermes de Stabies

Entrée des femmes

Regarde la zone encadrée ; c'est l'HYPOCAUSTE (hypocaustum).Tu peux constater que plus tu t'en éloignes, moins les salles sont chaudes.

Comme tu le vois, c'est un chauffage par le sol : le praefurnium est la pièce où les esclaves entretiennent le fourneau qui chauffe l'eau.

35°

de 50 à 60°

de 0 à 18°

Entrée principale

chaufferie

baignoire

Et si nous allions vers le PERISTYLVM maintenant ?

Plan des thermes de Stabies

Entrée des femmes

Les thermes nous permettent également de profiter de beaux jardins où nous retrouvons des amis, de flâner dans la bibliothèque...

Entrée principale

Entrée des femmes

chaufferie

baignoire

Plan des thermes de Stabies

Tu as sans doute remarqué que les hommes et les femmes n'ont pas les mêmes bains ?

Comme tu as pu le constater, quand nous avons déposé nos vêtements dans l'APODYTERIVM, nous y avons TOUT déposé...

Mosaïque « des femmes en bikini » de la Villa du Casale, Sicile, IIIe siècle p. C.

Les femmes- en bikini déjà !-, s'y amusent tout autant que nous ! Fais glisser ta souris sur la masaïque.

Jeu de balle

Course

Haltères

Une des jeunes filles est couronnée et tient dans ses mains la palme de la victoire, équivalent antique de nos coupes et médailles.

Maintenant que tu sais tout sur nos thermes, place aux JEUX !!!!

• 1000
• 30
• 10
• 500

FRIGIDARIVM

CALDARIVM

TEPIDARIVM

PALAESTRA

APODYTERIVM

NATATIO

HYPOCAVSTVM

PERISTYLVM

Déplace les étiquettes au bon endroit.

• 1000
• 30
• 10
• 500

NATATIO

PALAESTRA

FRIGIDARIVM

APODYTERIVM

VNCTOR / ALIPILVS

TEPIDARIVM

STRIGILIS

SVDATORIVM

CALDARIVM

HYPOCAVSTVM

PRAEFVRNIVM

Déplace les étiquettes au bon endroit. Passe ta souris sur les points vers pour en apprendre davantage.

Le PORTICVS encadre les vastes parcs et jardins où il est agréable de flâner et de discuter avec des amis.

Le DESTRICTARIVM est une salle tiède, où le baigneur s'enduit d'huile, se racle la peau et bénéficie de soins divers.

Les TVBVLI sont des conduits qui permettent de chauffer par les murs et pas uniquement par le sol.

La SVSPENSVRA est un sol « suspendu » formé d'une épaisse couche de mortier de tuileau, souvent doublé d'un lit de briques. Ce sol épais, s'il était long à chauffer, conservait mieux la chaleur et les baigneurs devaient chausser des sandales à semelles de bois pour se déplacer.

Les PILAE sont des briques superposées de forme majoritairement carrée dont la hauteur varie selon la température qu'on souhaite obtenir.

• 1000
• 30
• 10
• 500

AQVA, AE : eau

BALNEVM, I, n. sg : bain

Retrouve dans les phrases suivantes les mots français qui viennent du latin.

• Nom d'une ville du Sud de la France signifiant "eaux mortes":

• Cette ville de Savoie est connue pour ses thermes :

• Pierre précieuse de couleur bleu clair évoquant l'eau de mer :

• Jean Valjean, dans Les Misérables de Victor Hugo, pour avoir volé du pain, va en prison, le

• Il a passé toutes ses vacances dans une station

• Prends plutôt une douche : ce n'est pas très écologique de prendre un

• Pour soigner tes problèmes de jambes lourdes, tu peux être soigné par la

• Risque encouru sur une route mouillée :

• Aigues-Mortes
• Aix-les-Bains
• Aigue-Marine
• aquaplaning

• Aigue-Marine
• Aigues-Mortes
• Aix-les-Bains
• aquaplaning

• Aix-les-Bains
• Aigue-Marine
• aquaplaning
• Aigues-Mortes

• aquaplaning
• Aigue-Marine
• Aigues-Mortes
• Aix-les-Bains

• bagne
• balnéaire
• bain
• balnéothérapie

• bain
• balnéaire
• bagne
• balnéothérapie

• balnéothérapie
• balnéaire
• bagne
• bain

• balnéaire
• bagne
• bain
• balnéothérapie

• 1000
• 30
• 10
• 500

THERMAE, ARVM, f. pl. : bains chauds

CALIDVS , A, VM : chaud

FRIGIDVS, A, VM : froid

Chasse l'intrus ! Un mot s'est glissé par erreur dans chaque liste : mets-le à la poubelle !

thermostat

chaudière

thermique

thermos

frigidaire

chauffage

frigide

calorique

échauder

frigorifié

chaleur

réfrigérer

frigorifique

thermidor

thermomètre

nonchalant

Fréjus

terminale

vient du grec thermos, qui signifiait chaud

• 5
• 3
• oui

Détail de mosaïque dans les thermes de Neptune de l'Ostie Antica (Italie)

• 1000
• 30
• 10
• 500

Je crois qu'il y a une intruse dans l'image !

Les salles des thermes sont décorées de magnifiques fresques de peintures ou de mosaïques, dont les sujets évoquent souvent l'eau. Reconstitue la mosaïque ci-dessous !

Entrée principale

chaufferie

baignoire

Plan des thermes de Stabies

Horreur !!! VACERRA, le propriétaire de l'école de gladiateurs voisine, a été assassiné ! On l'a retrouvé le cou entaillé dans l'eau du frigidarium !!!!!

Pas d'inquiétude ! Moi, HERCVLES PORRACEVS, vais mener l'enquête.Viens chez moi pour m'apporter ton aide.

Entrée des femmes

MIHI NOMEN EST

Je suis bien content que tu viennes mener l'enquête avec moi. Tout d'abord quel est ton nom ?

Enchanté §nom§, ton petit accent français est charmant. Allons voir le vigile des thermes : c'est lui qui a trouvé le corps.

SALVETE !J'étais devant l'entrée de l'apodyterium pendant toute la durée de mon service.

SALVE !Je suis HERCVLES PORRACEVS et je viens mener l'enquête sur le meurtre de VACERRA, avec l'aide de §nom§. Où étais-tu au moment du crime ?

rasoir

strigile

glaive

Peux-tu nous emmener sur les lieux du crime ?

Suivez-moi !

glaive

rasoir

strigile

§nom§, Allume la lampe à huile puis fouille la scène du crime. Clique sur les TROIS objets que tu trouveras puis fais-les glisser dans le sac des preuves.

Une empreinte ? A quoi va-t-elle nous servir dans l'Antiquité ???

PREUVES

Rien ici...

glaive

strigile

rasoir

glaive

strigile

rasoir

PREUVES

glaive

strigile

rasoir

ou

Au choix mais obligatoire dans la page. Fonction à placer dans chaque page utilisant le TAKIT.

Tous ces éléments peuvent être dupliqués.Ils doivent être groupés avec une zone de texte contenant le nom de la variable. Peuvent être groupés avec un objet Genially à l'exception d'une autre zone de texte !

L'état des variables est conservé d'une session à l'autre (même navigateur)

Affiche le groupe si la variable est OK

Cache le groupe si la variable est OK

Bouton pour mettre la variable à OK

Bouton pour réinitialiser la variable

Réinitialise automatiquement la variable (peut être remplacé par AUTOFF

Réinitialise automatiquement la variable

Met automatiquement la variable à OK

Réinitialise la variable si le groupe est "actif" (feedback d'une autre extension par exemple)

Met la variable à OK si le groupe est "actif" (feedback d'une autre extension par exemple)

variable

variable

variable

variable

variable

variable

variable

variable

variable

Mais où est le cochon ?

Là non plus !

Pas là !

Pas dans ce coin !

Clique sur le cochon

Fonction OBLIGATOIRE à placer DANS la page

Élément UNIQUE à grouper avec un objet déplaçable. On vérifie si le centre de cette zone est dans la zone FLAMME.

Élément DUPLICABLE à grouper avec un objet devant apparaître quand le centre de la TORCHE est dans cette zone. L'objet reste affiché.

Élément DUPLICABLE à grouper avec un objet devant disparaître quand le centre de la TORCHE est dans la zone FLAMME.

Élément UNIQUE à grouper avec un objet déplaçable. On vérifie si le centre de cette zone est dans la zone INVISIBLE ou PETIT.

Élément DUPLICABLE à grouper avec un objet devant apparaître quand le centre de la LAMPE-LOUPE est dans cette zone.

Élément DUPLICABLE à grouper avec un objet devant grossir quand le centre de la LAMPE-LOUPE est dans cette zone.

Numérotation automatique des groupes selon l'ordre de leur création

Allume les bougies et retrouve le cochon

L'enquête sur le meurtre de VACERRA avance, Vigile. As-tu des suspects ?

J'ai trouvé quatre suspects.Clique sur moi, je vais te donner leurs noms.

MODESTVS

ALIPILVS

AVRELIA

CRIXVS

Je propose de commencer par MODESTVS, son amphore de vin me donne soif ! Qu'en dis-tu, §nom§ ?

CaVpo (cabaretier)

MODESTVS est le cabaretier. Le matin, il a vu Aurelia chuchoter à l'oreille de VACERRA.

ERAM IN CALDARIO, NIHIL* AVDIVI.

* NIHIL : rien.

§nom§, clique sur la carte pour marquer ce que tu as appris :

• 1000
• 30
• 10
• 500

§nom§, Où ModestVs dit-il avoir été au moment du meurtre ? Déplace son personnage au bon endroit.

ERAM IN CALDARIO, NIHIL* AVDIVI. * NIHIL = rien

CRIXVS

AVRELIA

MODESTVS

ALIPILVS

Allons voir la belle AVRELIA, maintenant ! Elle m'a l'air sympathique, tu ne trouves pas, §nom§ ?

AVRELIA (EPOUSE DE MODESTVS)

AMBVLABAM IN PERISTYLO ET SPECTABAM GLADIATOREM.

§nom§, clique sur la carte pour marquer ce que tu as appris :

Elle voulait payer les services de CRIXVS pour faire une surprise à MODESTVS dont c'est bientôt l'anniversaire.

• 1000
• 30
• 10
• 500

§nom§, Où la belle aVrelia dit-elle avoir été au moment du meurtre ? Déplace son personnage au bon endroit.

AMBVLABAM IN PERISTYLO ET SPECTABAM GLADIATOREM.

CRIXVS

MODESTVS

ALIPILVS

AVRELIA

Au tour de CRIXVS maintenant... Je regrette un peu d'avoir séché mes cours de sport, pas toi, §nom§ ?

CRIXVS appartient à VACCERA. Il est le chouchou de ces dames (moi non plus je ne comprends pas, mais bon).

CRIXVS (GLADIATOR)

EXERCEBAM IN PALAESTRA.

§nom§, clique sur la carte pour marquer ce que tu as appris :

• 1000
• 30
• 10
• 500

§nom§, Où CRIXVS dit-IL avoir été au moment du meurtre ? Déplace son personnage au bon endroit.

EXERCEBAM IN PALAESTRA.

ALIPILVS

CRIXVS

AVRELIA

MODESTVS

Il ne nous reste plus que l'ALPILVS... Justement, j'avais besoin d'une bonne épilation... Euh, toi aussi, §nom§, sans vouloir te vexer...

Il a ramassé une fibule* sous le péristyle. Il chante toujours en travaillant.

ALIPILVS (SERVVS)

VELLEBAM ALAS HISTRIONIS.

* c'est une grande épingle utilisée pour fixer les vêtements des femmes : tu peux l'ajouter au sac des armes potentielles !

§nom§, clique sur la carte pour marquer ce que tu as appris :

• 1000
• 30
• 10
• 500

PREUVES

Tu as trouvé tous les objets !

J'épilais les aisselles d'un comédien.

§nom§, Où L'ALIPILVS POUVAIT-IL SE TROUVER s'IL éPILAIT UN COMédien au moment du meurtre ? Déplace son personnage au bon endroit.

§nom§, nous avons 4 suspects et 4 objets : à qui peut appartenir chacun d'entre eux ?

strigile

glaive

rasoir

fibule

glaive

• 1000
• 30
• 10
• 500

§nom§, je crois que nous avons tous les éléments pour boucler le coupable.Complète ton dossier d'enquête et envoie ton rapport à ta MAGISTRA !

Clique sur le temple pour retrouver l'ensemble des activités dans le sommaire.

karine.untermarzoner@ac-grenoble.fr

Visite des thermes

§nom§, si tu as oublié de compléter ton cours, voici les liens pour recommencer les activités !

Jeux

Enquête

Bonjour §nom§

Générez votre(vos) champ(s) de réponse avec l'INPUTCREATOR, sans oublier de donner un nom explicite à votre(vos) variable(s).

Saisissez votre(vos) texte(s) en insérant les variables. (voir page suivante)

Copiez dans votre page les éléments de la page création

Groupez chaque texte avec un élément groupe texte

§nomDeVariable:valeur:texteSiVrai:texteSiFaux§

1

2

3

Les étapes

4

§nomDeVariable:valeur:texteSiVrai:texteSiFaux§

Utilisation des variables

§nomDeVariable:valeur:texteSiVrai§

§nom§

Affiche la valeur de la variable saisie dans la page précédente.

Affiche un texte si la variable correspond à une valeur spécifique (SI .... ALORS...)

Affiche un texte si la variable correspond à une valeur spécifique. Dans le cas contraire, affiche un autre texte (SI .... ALORS...SINON....)

Hauteur

Largeur

Taille bordure

Couleur bordure

Couleur fond

Couleur police

Taille police

Style bordure

Nom police

AbeeZee

Abel

Abhaya Libre

AbeeZee

Aclonica

AbeeZee

Actor

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é

Aperçu boîte personnalisée

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

Opacité fond

Nom variable

INPUTCREATOR

SILHOUETTE TRANSFORME EN SILHOUETTE UNE IMAGE A FOND TRANSPARENT

OMBRE AJOUTE UNE OMBRE à UNE IMAGE A FOND TRANSPARENT

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.

Contient le script du puzzle, à laisser sur la page

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

OU

• 5
• 4
• oui

La boîte est à grouper avec une liste à puces de genially qui contient les propositions. La 1ère proposition de la liste doit être votre proposition correcte, l'ordre dans lequel les propositions s'afficheront pour le joueur est aléatoire.Vous trouverez également dans ce Genially, une page (jaune) vous permettant de créer des boites de sélection personnalisées dont le fonctionnement est identique. Vous pouvez tout à fait mélanger des boîtes d'apparence différente sur la même page.

L'élément Gagné est à grouper avec les objets que vous désirez afficher en cas de victoire.

L'élément Perdu est à grouper dans le cas où le joueur a fait des erreurs, la boîte ne s'affichera qu'une fois que toutes les boîtes auront été remplies.

Cet élément optionnel est à grouper avec un texte Genially en GRAS (dont vous pouvez modifier l'apparence) dans lequel viendra s'afficher le nombre de réponses correctes.

Cet élément optionnel est à grouper avec un texte Genially en GRAS (dont vous pouvez modifier l'apparence) dans lequel viendra s'afficher le nombre de réponses erronées.

Cet élément optionnel, lorsqu'il est présent conditionne l'apparition des compteurs de bonnes et mauvaises réponses uniquement lorsque toutes les boîtes ont une réponse.

Cet élément contient le script nécessaire au fonctionnement de l'extension, il affichera également des retours sur les erreurs lorsqu'il y en aura en mode execution et sera invisible dans le cas contraire.

L'élément facultatif Bouton Valider est à grouper avec l'objet à transformer en bouton de validation..

Hauteur

Largeur

Taille bordure

Couleur bordure

Couleur fond

Couleur police

Taille police

Style bordure

Nom police

AbeeZee

Abel

Abhaya Libre

AbeeZee

Aclonica

AbeeZee

Actor

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é

Aperçu boîte personnalisée

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

Opacité fond

XX

XX

• proposition1(juste)
• proposition2
• proposition3
• etc....

• proposition1(juste)
• proposition2
• proposition3
• etc....

• proposition1(juste)
• proposition2
• proposition3
• etc....

XX

XX

• proposition1(juste)
• proposition2
• proposition3
• etc....

• proposition1(juste)
• proposition2
• proposition3
• etc....

• 1000
• 30
• 10
• 500