Commit 45e5111f authored by Philippe Dpt35's avatar Philippe Dpt35

Boite de dialogue pour l'affichage lorsque la réponse est bonne

parent fb269343
......@@ -61,8 +61,6 @@ p {
#ligne1 {
top: 12%;
background: red;
opacity: .5;
}
#ligne2 {
......@@ -78,12 +76,10 @@ p {
#pre1 {
left: 5%;
background: blue;
}
#pre2 {
left: 55%;
background: blue;
}
#pre3 {
......@@ -91,7 +87,7 @@ p {
}
#pre4 {
left: 8%;
left: 55%;
}
@media screen and (orientation:portrait) {
......@@ -180,6 +176,8 @@ p {
height: 85%;
width: 85%;
position: relative;
opacity: .5;
background: red;
}
#enclos1, #enclos2, #enclos3, #enclos4 {
......
......@@ -7,9 +7,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height">
<link rel="stylesheet" type="text/css" media="screen" href="alacampagne.css" />
<link rel="stylesheet" type="text/css" media="screen" href="dialogbox.css" />
</head>
<body>
<div id="white-background"></div>
<div id="dlgbox">
<div id="image-dlgBox"></div>
<div id="dlg-body"></div>
<div id="dlg-footer"></div>
</div>
<div id="consignes">
<p>Les animaux peuvent être ajoutés dans les différents enclos en les faisant glisser depuis les images à gauche, ou bien en les déplaçant d'un enclos à l'autre.
On les supprime en les faisant glisser dans le trou du bas.</p>
......@@ -59,6 +65,7 @@
<img src="img/poule.png" id="animal4" class="animal4 animal" alt="animal4" draggable="true" ondragstart="drag(event)">
</div>
</div>
<script src="dialogbox.js" type="text/javascript"></script>
<script src="alacampagne.js" type="text/javascript"></script>
</body>
</html>
......@@ -153,7 +153,7 @@ function verification() {
}
}
if (! erreur) {
alert("Bravo !")
showDialog('Bravo !','img/happy-tux.png', 'left','0.3')
document.getElementById("verifier").disabled = true;
reinitialise();
}
......@@ -242,7 +242,7 @@ function allowDrop(ev) {
function drag(ev) {
var infosObjet;
function afficheImgZoom(animal) {
switch(animal) {
case 'animal1':
......@@ -257,7 +257,7 @@ function drag(ev) {
break;
case 'animal3':
var offsetX = zoomAnimal3.width / 2;
var offsetY = zoomAnimal3.height /2;
var offsetY = zoomAnimal3.height /2;
ev.dataTransfer.setDragImage(zoomAnimal3, offsetX, offsetY);
break;
case 'animal4':
......
#image-dlgBox {
display: none;
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
/* opacity: 0.7; */
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
z-index: 9999;
border-radius: 10px;
background-color: #f2f2f2;
text-align: center;
vertical-align: middle;
padding: 10px;
border: 1px solid black;
box-shadow: 8px 8px 12px #aaa;
}
#dlg-texte {
display: flex;
justify-content: center;
align-items: center;
}
#dlgbox img {
vertical-align: middle;
margin: 5px;
}
#dlg-body {
display: flex;
justify-content: center;
vertical-align: middle;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
}
#dlg-footer button{
background-color: #6d84b4;
float: right;
color: white;
padding: 5px;
border: 0px;
}
var newImage = new Image();
var imageBox = document.getElementById("image-dlgBox");
// newImage.name = "imageDlgBox";
function dlgExit(){
var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
whitebg.style.display = "none";
dlg.style.display = "none";
imageBox.removeChild(newImage);
}
function showDialog(Texte, cheminImg = '', Place = 'left', Opacite = "0.5") {
var largeur;
var hauteur;
var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
var dlgBody = document.getElementById("dlg-body");
var dlgFooter = document.getElementById("dlg-footer");
function positionne() {
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
dlg.style.left = 50 - (dlg.clientWidth / winWidth) * 50 + "%" ;
dlg.style.width = dlg.clientWidth + 40 + "px";
dlg.style.top = 50 - (dlg.clientHeight / winHeight) * 50 - 10 + "%" ;
}
//Charge l'image dans le DOM afin d'en connaitre les dimensions
newImage.src = cheminImg;
imageBox.appendChild(newImage);
setTimeout(function () {function chargeImage() {let imgs = document.images;
largeur = imgs['imageDlgBox'].width;
hauteur = imgs['imageDlgBox'].height; }},20);
//----------------
whitebg.style.display = "block";
whitebg.style.opacity = Opacite;
dlg.style.display = "flex";
dlg.style.flexDirection = "column";
switch(Place) {
case "left":
dlgBody.innerHTML = '<div><img src="' + cheminImg + '"></div><div id="dlg-texte">' + Texte + '</div>';
break;
case "right":
dlgBody.innerHTML = '<div id="dlg-texte">' + Texte + '</div><div><img src="' + cheminImg + '"></div>';
break;
case "top":
dlgBody.style.flexDirection = "column";
dlgBody.innerHTML = '<div><img src="' + cheminImg + '"></div><div id="dlg-texte">' + Texte + '</div>';
break;
case "bottom":
dlgBody.style.flexDirection = "column";
dlgBody.innerHTML = '<div id="dlg-texte">' + Texte + '</div><div><img src="' + cheminImg + '"></div>';
break;
}
dlgFooter.innerHTML = '<button onclick="dlgExit()">OK</button></div>';
setTimeout(function () {positionne()},20);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment