Affichage de div selon conditions [RESOLU]

Question

Pages :

Guim

17 Dec 2014 à 12:59

Bonjour à Tous !

j'ai acheté ce plugin que je trouve tout juste génial : HawkEye
Il permet d'afficher une carte, des marqueurs, et un avatar qui se déplace entre eux.
à chaque fois que l'avatar atteint le marqueur sélectionné, une infobulle s'affiche.
Là, l'avatar peu se promener de marqueurs en marqueurs sans restriction,
et je souhaiterai en ajouter une.

Dans l'idée, les infobulles contiendraient des quizzs,
et si l'utilisateur réussi le quizz, le marqueur suivant s'affiche et devient cliquable.

Pourriez-vous m'indiquer les étapes pour la mise en place d'un script ? (j'ai du mal à me lancer Smiley ohwell

)

Voici la structure d'un marqueur :


<div class="HE_Marker" data-hawkeye='{ "pos" : "0.5,63","tooltip_offset":"0,-10","panel_pos":"0.5,30"}'></div>
<div class="HE_Tooltip">S&eacute;ance 1</div>
<div class="HE_Panel">
	<h5>Quizz 1</h5>
	<form>quizz</form>
</div>	

<div class="HE_Marker" data-hawkeye='{"pos" : "10,74","tooltip_offset":"0,-10","panel_pos":"0.5,30"}'></div>
<div class="HE_Tooltip">S&eacute;ance 2</div>
<div class="HE_Panel">
	<h5>Quizz 2</h5>
	<form>quizz 2</form>
</div>

Donc, je reprends,
dans l'idée, il faudrait que les div dont la classe est "HE_Marker" soient en display block ou en visible uniquement quand les résultats du quizz contenu dans le marqueur précédent soit juste (enfin, pas forcément à 100%, si l'utilisateur a la moyenne, c'est suffisant). Note : le quizz sera intégré dans la div dont la class est "HE_Panel".

Peut-être qu'il me faudra ajouter des ID à chaque div dont la classe est "HE_Marker", mais il y aura un TAS de marqueurs, du coup, je ne sais pas si cette solution sera la meilleure.

Pourriez-vous m'apporter vos lumières ?
Merci beaucoup
Modifié par Guim (18 Dec 2014 - 10:28)

Guim

17 Dec 2014 à 15:08

Je pense avoir une solution simple qui me conviendrait tout aussi bien,
concernant le parcours des séances, je change la politique : dans l'idée, la personne ne dois pas forcément avoir une bonne note au quizz 1 pour afficher le suivant. Si le visiteur participe, il doit avoir la possibilité de poursuivre.

Dans l'idée, la séance 1 est en display block, les autre en display none,
et dans chaque infobule d'une séance, un "button" change la valeur du display de la valeur suivante en block :


<div class="marqueur" id="marqueur-1">
	<div class="HE_Marker" data-hawkeye='{ "pos" : "0.5,63","tooltip_offset":"0,-10","panel_pos":"0.5,30"}'></div>
	<div class="HE_Tooltip">S&eacute;ance 1</div>
	<div class="HE_Panel">
		<h5>Titre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
		<button onClick="document.getElementById('marqueur-2').style.display = 'block';">Débloquer la s&eacute;ance suivante</button>
	</div>	
</div>

<div class="marqueur" id="marqueur-2">
	<div class="HE_Marker" data-hawkeye='{ "pos" : "10,74","tooltip_offset":"0,-10","panel_pos":"0.5,30" }'></div>
	<div class="HE_Tooltip">S&eacute;ance 2</div>
	<div class="HE_Panel">
		<h5>Titre</h5>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
		<button onClick="document.getElementById('marqueur-3').style.display = 'block';">Débloquer la s&eacute;ance suivante</button>
	</div>	
</div>

là, ça fonctionne parfaitement,
mais j'aimerais assez retirer les onClick et le faire manière générique,
là, je dois ajouter un ID à chaque marqueur, ajouter du style en dur, et mettre un onClick différent dans chaque Button de chaque marqueur... c'est un peu laborieux

Auriez vous une piste de vrai développeur, car je suis plutôt un bricoleur Smiley ohwell

Guim

17 Dec 2014 à 16:39

j'ai un début de piste en JQUERY :


// JQUERY
$(document).ready(function(){
  $("#show"+NOMBRE_DE_L_ID).click(function(){
    $(".test"+NOMBRE_DE_L_ID).show();
  });
});

// HTML
<div class="test1" style="display:none">CONTENU</div>
<div class="test2" style="display:none">CONTENU</div>

<button id="show1">Show</button>
<button id="show2">Show</button>

Comment récupérer le numéro de l'id ?
ainsi, en cliquant sur le button dont l'id est "show1" j'afficherai la div dont la classe est "test1"

PapyJP

17 Dec 2014 à 19:41

Pour récupérer le numéro de bouton dans JavaScript:

En HTML:

<button id="bouton1" onclick="ma_fonction(this)"/>
<button id="bouton2" onclick="ma_fonction(this)"/>

En Javascript:


function ma_fonction(bouton) {
    var boutonID = bouton.id;                                   // done l'id du bouton, par exemple "bouton1"
    var boutonNum = boutonID.replace('bouton', ''); //supprime "bouton" -> "1"
    ..............
}

Modifié par PapyJP (17 Dec 2014 - 21:16)

parsimonhi

Modérateur

17 Dec 2014 à 20:48

Bonjour,

Pour n'afficher que le premier block, il faut ajouter dans la feuille de style:


.marqueur {display:none;}
.marqueur:first-of-type {display:block;}

Ensuite, tu retires les onlick de ton code html.

Enfin, tu ajoutes dans ta page (juste avant la balise </body> de préférence) un petit script qui ajoute une fonction de déblocage pour chaque bouton. Par exemple, pour le code HTML que tu as donné :


function showNextSection(e)
{
	var n;
	n=e.parentNode.parentNode.id.split("-")[1];
	document.getElementById('marqueur-'+(n-(-1))).style.display="block";
}
function addShowNextSection()
{
	var k,btns;
	btns=document.getElementsByTagName("button");
	for (k=0;k<btns.length;k++)
	{
		btns[k].addEventListener("click",function(){showNextSection(this);},false);
	}
}
window.addEventListener("load",addShowNextSection,false);

Amicalement,

parsimonhi

Modérateur

17 Dec 2014 à 21:39

Bonjour,

On pourrait aussi se passer des id sur les marqueurs mais ça nécessite de prendre quelques précautions selon le contexte si on reste en javascript pur. Si l'on suppose que tous les div de classe marqueur et seulement ceux-là sont ceux qui devront être affichés via un clic, on peut modifier la fonction "showNextSection" de mon post précédent comme suit :


function showNextSection(e)
{
	var k,div,divs;
	div=e.parentNode.parentNode;
	divs=document.getElementsByClassName("marqueur");
	for (k=0;k<divs.length;k++)
	{
		if (divs[k]==div) {divs[k+1].style.display="block";return;}
	}
}

Amicalement,
Modifié par parsimonhi (17 Dec 2014 - 21:39)

Guim

18 Dec 2014 à 10:14

Bonjour,
je viens de voir vos messages, j'essaye vos solution de ce pas,
je vous remercie infiniment !
Modifié par Guim (18 Dec 2014 - 10:14)

Guim

18 Dec 2014 à 10:28

Encore une fois,
je vous remercie à vous 2 de vous être penché sur mon problème.

J'ai opté pour la première solution de Parsimonhi,
et c'est ce genre de script qui me rappelle que je suis un bidouilleur,
car je n'aurais jamais aborder la problématique sous cet angle ! Smiley langue

Merci encore
Là, je vais tenter de mettre en place un système de points, et de médaille pour chaque palier atteint.
Si vous avez des pistes, je suis preneur.

Bonne journée

SolidSnake

19 Dec 2014 à 10:31

Salut.

Je sais que le topic est déjà résolu, mais quite à utiliser jQuery (obligatoire pour le module Hawkeye), je mets ma solution :


  $('#marqueurs').on('click', '.marqueur button', function() {
    $(this).parents('.marqueur').next('.marqueur').show(500)
  })

Avec l'html :


<div id="marqueurs">
  <div class="marqueur">...</div>
  <div class="marqueur">...</div>
  <div class="marqueur">...</div>
  ...
</div>

Ce qui donne ça...

Guim

19 Dec 2014 à 10:47

Merci beaucoup, effectivement, ça fonctionne très bien, de plus, je n'ai plus à utiliser d'id !

Guim

19 Dec 2014 à 11:20

Pourriez-vous m'indiquer la marche à suivre pour rajouter un système d'expérience ?
Là, j'arrive à mettre en place une addition toute simple : sur ma page j'ai un conteneur de points à gagner, et un conteneur de points déjà cumulés. En cliquant sur le bouton "récupérer les points", les points à gagner sont bien ajoutés aux points déjà cumulés.
Par contre, quand j'ajoute un autre conteneur de points à gagner, j'obtiens une concaténation.

Dans l'idée, j'aimerais retrouver la même logique de votre script, à savoir : quand on clique sur le bouton d'une infobulle, ce sont uniquement les points de celle-ci qui sont ajoutés

j'ai repris la structure que vous m'avez suggéré :
jsfiddle


HTML 
<div id="marqueurs">
    <div class="marqueur">
        <p>Points à récupérer : <span class="pointsXP">10</span></p>
        <button class="recupererXP">Récupérer</button>
    </div>
    <br/>
    <div class="marqueur">
        <p>Points à récupérer : <span class="pointsXP">5</span></p>
        <button class="recupererXP">Récupérer</button>
    </div>
</div>
<p>Points cumulés : <span id="totalXP">2</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JQUERY
$(document).ready(function() {
    var currentXP = $("#totalXP").text();
    $(".recupererXP").click(function() {
        var value = $(".pointsXP").text();                                
        var newValue = parseInt(value) + parseInt(currentXP);                                  
        $('#totalXP').text(newValue);
    });
});

Merci encore

SolidSnake

19 Dec 2014 à 11:45

Il faut utiliser $(this) pour faire référence à l'élément sur lequel on vient de cliquer, donc pour ta valeur, ça donne :

var value = $(this).prev().children(".pointsXP").text()

ou encore

var value = $(this).parent().find(".pointsXP").text();

EDIT:
NB: attention avec le parseInt(), pense à préciser la base de ton système de numération, i.e. "base 10"

parseInt(10, 10) != parseInt(10, 2)

Et le problème, c'est que ton navigateur peut faire des surprises si tu ne le précise pas.
Modifié par SolidSnake (19 Dec 2014 - 11:49)

Guim

19 Dec 2014 à 12:06

Merci pour votre réponse,
avant de la voir j'ai un peu avancé : jsfiddle2


 $('#marqueurs').on('click', '.marqueur button', function() {
    var currentXP = $("#totalXP").text();
    var xpToWin = $(this).parents('.marqueur').find('.pointsXP').text();
    $(".recupererXP").click(function() {    
        var newValue = parseInt(xpToWin) + parseInt(currentXP);                                  
        $('#totalXP').text(newValue);
    });
 })

Là, j'obtiens à la fois ce que je souhaite, et un bug :
le premier clique n'a aucune incidence,
le seconde ajoute la valeur souhaitée,
mais quand je clique sur l'autre bouton "récupérer les points", il ajoute une dernière fois la valeur de l'autre bouton, pour ensuite ajouter la sienne Smiley ohwell

je jette un oeil à ce que vous m'avez marqué au dessus avant d'essayer de debuguer mon code

merci encore
Modifié par Guim (19 Dec 2014 - 12:06)

Guim

19 Dec 2014 à 12:13

ah oui effectivement, je commence à comprendre.

là, quand je clique sur le bouton, la bonne valeur est ajoutée à mon totalXP,
par contre, quand je clique sur l'autre bouton, la bonne valeur est ajoutée non pas à mon nouveau totalXP mais à l'ancien.

je continu de faire mumuse, c'est comme ça qu'on apprend Smiley cligne

SolidSnake

19 Dec 2014 à 12:13

Ah ça, c'est le mal, tu ajoutes un écouteur click sur le bouton, à chaque fois que tu cliques sur lui-même (<- tu vois le bordel Smiley cligne

)
Tu as juste à virer la ligne ou tu rajoutes l'écouteur :

$('#marqueurs').on('click', '.marqueur button', function() {
    var currentXP = $("#totalXP").text();
    var xpToWin = $(this).parents('.marqueur').find('.pointsXP').text(); 
    var newValue = parseInt(xpToWin) + parseInt(currentXP);                                  
    $('#totalXP').text(newValue);
 })

EDIT: quand tu utilises souvent le même objet jQuery, pense à le coller dans une variable (que l'on préfixe souvent par un $)
I.E. que là, on voit que tu vas à chaque fois chercher l'objet $("#totalXP"), donc :

var $xp = $("#totalXP");
$('#marqueurs').on('click', '.marqueur button', function() {
    var currentXP = $xp.text();
    var xpToWin = $(this).parents('.marqueur').find('.pointsXP').text(); 
    var newValue = parseInt(xpToWin) + parseInt(currentXP);                                  
    $xp.text(newValue);
 })

Modifié par SolidSnake (19 Dec 2014 - 12:16)

Guim

19 Dec 2014 à 12:16

"c'est le mal" !? Hahaha, je ne comprends pas ce que signifie l' "écouteur" mais je vais me renseigner promis Smiley cligne

Là, votre script fonctionne bien hormis le fait que l'utilisateur puisse cliquer et donc cumuler des points tant qu'il le souhaite (et la triche, c'est pire que le mal ! heu Smiley ohwell

)

du coup, je vais essayer de comprendre et de faire un mix des 2 scripts

SolidSnake

19 Dec 2014 à 12:21

Guim a écrit :
Là, votre script fonctionne bien hormis le fait que l'utilisateur puisse cliquer et donc cumuler des points tant qu'il le souhaite (et la triche, c'est pire que le mal ! heu )

Ce n'est pas LE GROS soucis, tu n'as qu'à remettre ton xp que tu viens d'additionner à 0 ! (ou supprimer l'écouteur 'click' <- Ha ha, on en revient là)

Mais ça n'empêchera pas que le type qui se débrouille un chouïa avec son débuggeur, pourra faire ce qu'il veut. Pour sécuriser et gérer ça, il te faudrait un language serveur (e.g. PHP avec Ajax)
Modifié par SolidSnake (19 Dec 2014 - 12:23)

Guim

19 Dec 2014 à 12:27

remettre à 0,
je vais essayer cela,
si je comprends bien,
je dois ajouter la ligne :