EHPADLes lys d'or
Start
START OVER
Next
EHPAD
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
<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
Mission COMPLETE
Bravo, mme Dupuis est calmée
Start over
Next
Bonjour candidat n°568491,
Nous vous remercions de l'attention que vous portez à notre entreprise ainsi que pour votre candidature très complète. Votre parcours semble intéressant et a retenu notre attention.Cependant, compte tenu du nombre croissant de fausses candidatures générées par des assistants virtuels, nous sommes obligés de vous soumettre à un test en présentiel dans notre établissement pour nous assurer que vous êtes 100% bienvieillant et renseigné sur notre unité alzheimer, mais aussi pour tester vos capacités. Pour cela, les règles sont simples : - Vous avez 15 minutes pour réussir ce test - Des éléments seront à votre disposition pour répondre à nos attentes, ces éléments ne servent qu'une fois. N'oubliez pas que ce test est très important et déterminera peut-être votre statut dans notre équipe. Nous comptons sur votre professionalisme
EHPAD Escape Game
bouviervalerie
Created on January 28, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Math Mission
View
Secret Code
View
Earth Day Escape Room
View
Reboot Protocol
View
Corporate Escape Room: Operation Christmas
View
Witchcraft Escape Room
View
Video Game Breakout
Explore all templates
Transcript
EHPADLes lys d'or
Start
START OVER
Next
EHPAD
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
Next
Cette page est protégée par mot de passe
Introduire le mot de passe
<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
Mission COMPLETE
Bravo, mme Dupuis est calmée
Start over
Next
Bonjour candidat n°568491,
Nous vous remercions de l'attention que vous portez à notre entreprise ainsi que pour votre candidature très complète. Votre parcours semble intéressant et a retenu notre attention.Cependant, compte tenu du nombre croissant de fausses candidatures générées par des assistants virtuels, nous sommes obligés de vous soumettre à un test en présentiel dans notre établissement pour nous assurer que vous êtes 100% bienvieillant et renseigné sur notre unité alzheimer, mais aussi pour tester vos capacités. Pour cela, les règles sont simples : - Vous avez 15 minutes pour réussir ce test - Des éléments seront à votre disposition pour répondre à nos attentes, ces éléments ne servent qu'une fois. N'oubliez pas que ce test est très important et déterminera peut-être votre statut dans notre équipe. Nous comptons sur votre professionalisme