Résolu CORRECTION D'UN JEU DES ERREURS

  • Auteur de la discussion patapierre
  • Date de début

patapierre

Nouveau membre
#1
Bonjour à tous et toutes,
J'ai fait un magnifique code pour un jeu d'erreurs entre 2 images.
Seul, il marche à merveille...
Mais dès que j'entre un deuxième script qui montre une image en popup de la solution j'ai un bugue au niveau du décompte des erreurs qui s'affiche dans le désordre.

Quelqu'un a-t-il la solution ?...

Voici le code complet et les images qui vont avec clic.gif :
Code:
                    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Jeux des erreurs Pierres-Info</title>
    <style type="text/css">
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    .croix {
    display:none;
    }
    area{ cursor:default;}
    img{border:0}
    #cont{position:absolute;
        margin-left:10px;}
    #main {
        width:1200px;
        margin:auto;
        }
    </style>

    <script type="text/javascript">


    var found=[];
    function init(){
    //les erreurs;
    var areas=document.getElementById('mymap').getElementsByTagName('area')
    var areasL=areas.length
    var i=-1;
    while(++i<areasL){
    areas[i].alt="";
    areas[i].href="";
    areas[i].style.cursor="default";
    found.push(false);}
    document.getElementById('copie').alt="";
    }

    //marque
    function mark(area,errnr){
    area.blur();
    tabcoords=area.coords.split(',') //recupération des coordonnées de l'area
    var i=-1
    while(tabcoords[++i]){
    tabcoords[i]=1*tabcoords[i]
    }
    //recup coordonnées d'origine
    originX=+document.getElementById('copie').offsetLeft;
    originY=+document.getElementById('copie').offsetTop;

    //clone marque
    trouve=document.getElementById('croix').cloneNode(true)
    document.getElementById('cont').appendChild(trouve) // ajout de l'image
    trouve.style.position="absolute";
    trouve.style.zIndex=100+errnr
    trouve.style.visibility="hidden"
    trouve.style.display="block"

    //position de la marque
    var crossX=0;
    var crossY=0;
    crossoffsetX=Math.floor(trouve.offsetHeight/2);
    crossoffsetY=Math.floor(trouve.offsetWidth/2);


    if(area.shape.toLowerCase()=="circle"){
    crossX=tabcoords[1]-crossoffsetX
    crossY=tabcoords[0]-crossoffsetY
    }
    if(area.shape.toLowerCase()=="rect"){
    crossX=Math.floor((tabcoords[1]+tabcoords[3])/2)-crossoffsetX
    crossY=Math.floor((tabcoords[0]+tabcoords[2])/2)-crossoffsetY
    }

    //attribut top/left
    trouve.style.top=crossX+"px";
    trouve.style.left=crossY+"px";
    trouve.style.visibility="visible"

    //ajout erreur
    found[errnr-1]=true
    var solde=0
    for(i=0;i<found.length;i++){
     (!found[i]) && solde++;
     }
    //solde
    mess=(solde>0)?'Plus que '+solde+' erreur(s)': 'Bravo Pierreux, Pierreuse, tu as de bons yeux tu sais !'
    document.getElementById('res').innerHTML=mess

    }
    //]]>

    </script>

    <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body onload="init()">
    <div id="main">
    <p><img src="croix.png" id="croix" class="croix"> </p>

    <table width="602" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody><tr>
    <td height="20"><div align="center"><span id="res"></span></div></td>
    </tr>
    </tbody></table>

    <p><img id="modele" src="imageA.jpg" usemap="#mymap">
    <map name="mymap" id="mymap">

          <area shape="circle" coords="583,308,18" onClick="mark(this,1);return false;">
          <area shape="circle" coords="399,468,17" onClick="mark(this,2);return false;">
          <area shape="circle" coords="502,72,14" onClick="mark(this,3);return false;">
          <area shape="circle" coords="53,513,17" onClick="mark(this,4);return false;">
          <area shape="rect" coords="74,190,185,205" onClick="mark(this,5);return false;">
          <area shape="rect" coords="321,123,360,160" onClick="mark(this,6);return false;">
          <area shape="circle" coords="451,47,18" onClick="mark(this,7);return false;">
          <area shape="circle" coords="46,12,48" onClick="mark(this,8);return false;">
        </map>
        <span id="cont"><img src="imageB.jpg" name="copie" usemap="#mymap" id="copie" alt=""></span></p>

    </div>
    </body></html>

    <html>
    <head>
    <script type="text/javascript">

    function hide(that)    {    that.style.display = "none";    }
    function show(that)    {    that.style.display = "block";    }

    function cliquer(that)
    {
        var node = that.querySelector("span");

        if (node.style.display == "none")    show(node);
        else                    hide(node);
    }

    function infobulle()
    {
        var node = document.querySelectorAll(".infobulle");

        for (var i=0; i<node.length; i++)
        {
                hide(node[ i ].querySelector("span"));

                node[ i ].onclick = function () { cliquer(this); };
        }
    }

    window.onload = function ()
    {
        infobulle();
    }
    </script>

    </style>
    </head>

    <body>
    <div class="infobulle">
    <center><img src="clic.gif"></center><span><br><br>


    <center><img src="caillasse_solution.jpg">

    </span></div>
    </body>
    </html>
croix.png caillasse_solution.jpg imageA.jpg imageB.jpg
 

xivxiv73

Habitué
#2
Hello, bon le code n'est pas magnifique mais c'est pas mal quand même! ;)

Plusieurs choses, tu as deux balises body et c'est interdit, mets tout ton html dans un seul body.

Ensuite le JS doit se trouver en bas de la page, dans le cas contraire il risque de charger avant le html et si ton JS doit se raccrocher à une balise non chargée ça ne marchera pas.

Je te conseille également de faire un tour sur un site pour apprendre le html il y a certaines règles sur l'utilisation des balises que tu ne maîtrises pas

Dernier conseil prend le reflex de mettre ton css / js et tes assets dans des dossiers séparés c'est plus propre.

J'ai corrigé tes erreurs et 'rangé' ton code.

@+
 

Fichiers joints

patapierre

Nouveau membre
#3
Un grand merci pour la correction.
En effet, je suis autodidacte et je ne fais certainement pas ce qu'il faut, comme il faut...
J'ai essayé ce nouveau code et le problème de décompte des erreurs au clic est toujours présent (reste 1 erreur(s), puis 3 erreur(s) etc dans le désordre...
As-tu une idée pour corriger cela ?
Merci
Patapierre Capture.JPG
 

xivxiv73

Habitué
#4
Un grand merci pour la correction.
En effet, je suis autodidacte et je ne fais certainement pas ce qu'il faut, comme il faut...
J'ai essayé ce nouveau code et le problème de décompte des erreurs au clic est toujours présent (reste 1 erreur(s), puis 3 erreur(s) etc dans le désordre...
As-tu une idée pour corriger cela ?
Merci
Patapierre Voir la pièce jointe 3957
Je n'avais pas vu cette erreur, je regarde dans la soirée
 

patapierre

Nouveau membre
#5
OK merci, c'est sympa
 

xivxiv73

Habitué
#6
Hello voilà la correction! si tu as de question n'hésite pas
 

Fichiers joints

patapierre

Nouveau membre
#7
C'est impeccable !...
Un très très grand merci. Je vais pouvoir intégrer ces jeux à mon site
Bonne soirée
Patapierre
 

patapierre

Nouveau membre
#8
Désolé, mais il y a encore un petit truc qui coince avant le nirvana...
Il manque 1 erreur sur les 8 dans le décompte.
On arrive bien à les cocher toutes mais le premier clic indique "Plus que 6 erreur(s)" et le septième la phrase finale...
 

patapierre

Nouveau membre
#9
Je pense avoir trouvé :
dans le code js
//ajout erreur
found[errnr] = true;
let errorFound = -1; >(-1 au lieu de 0)
 

xivxiv73

Habitué
#10
Je pense avoir trouvé :
dans le code js
//ajout erreur
found[errnr] = true;
let errorFound = -1; >(-1 au lieu de 0)
Hello je t’ai mis une const appelée nbError, elle correspond au nombre d’erreurs à trouver, la valeur est à 8 il suffit de la passer à 9 et de la faire évoluer si tu ajoutes ou supprimes des erreurs !
 

patapierre

Nouveau membre
#11
Ok Merci z'avais pas vu...
J'ai testé tout est nickel
Encore merci pour ton aide et ta patience
Patapierre
 

xivxiv73

Habitué
#12
Ok Merci z'avais pas vu...
J'ai testé tout est nickel
Encore merci pour ton aide et ta patience
Patapierre
Hello, si tout est bon pour toi tu peux passer le sujet en résolu
 

patapierre

Nouveau membre
#13
Je veux bien le marquer comme résolu, mais comment faire ?
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Staff en ligne
  • PriceTF141
    Modo hardware RGB
  • magellan
    Modérâleur
Membres en ligne
  • mdj de normandie
  • lenco750
  • philou21850
  • vaelis
  • PriceTF141
  • magellan
  • Saint-Jey
  • Topok
Derniers messages publiés
Statistiques globales
Discussions
865 303
Messages
8 056 621
Membres
1 575 824
Dernier membre
Playsimulator
Partager cette page
Haut