Création d'une succession de compteurs de click

**daneel** · 17/04/2023, 08h38

Bonjour,

Je me permets de tutoyer car ce sera plus simple pour un "jeune membre".

En premier, ne pense pas au cms mais simplement à un script php/html/js indépendant.
Tu pourras ensuite l'injecter de diverses manières possibles afin que tu puisse profiter de la mise en forme du template.

Donc si j'ai bien compris, c'est créer 4 boutons en html et un cinquième bouton pour le résultat.

Chacun des 4 boutons a un identifiant unique(id) pour lui attribuer le résultat du nombre de clics.
Le javascript va permettre d'ajouter le nombre de clics sans recharger la page.
Le bouton de soumission sera désactivé tant que l'utilisateur n'a pas cliqué sur tous les boutons.

Donc dans un editeur de texte comme notepad++, on ecrit :

Code HTML:

<!DOCTYPE html>
<html>
<head>
<title>Sélection d'article</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Sélection d'article</h1>
<p>Cliquez sur chaque bouton ci-dessous pour incrémenter le compteur correspondant.</p>
<button id="btn1">Bouton 1</button>
<button id="btn2">Bouton 2</button>
<button id="btn3">Bouton 3</button>
<button id="btn4">Bouton 4</button>
<button id="submitBtn" disabled>Sélectionner l'article</button>
<script>
var counters = [0, 0, 0, 0];

document.getElementById("btn1").addEventListener("click", function() {
counters[0]++;
checkCompteurs();
});

document.getElementById("btn2").addEventListener("click", function() {
counters[1]++;
checkCompteurs();
});

document.getElementById("btn3").addEventListener("click", function() {
counters[2]++;
checkCompteurs();
});

document.getElementById("btn4").addEventListener("click", function() {
counters[3]++;
checkCompteurs();
});

function checkCompteurs(){
if(counters[0] > 0 && counters[1] > 0 && counters[2] > 0 && counters[3] > 0){
document.getElementById("submitBtn").disabled = false;
}
}

document.getElementById("submitBtn").addEventListener("click", function() {
var binaryString = "";
for (var i = 0; i < counters.length; i++) {
var remainder = counters[i] % 2;
binaryString += remainder;
}
var decimalNumber = parseInt(binaryString, 2);
switch (decimalNumber) {
case 0:
window.location.href = "1.html";
break;
case 1:
window.location.href = "2.html";
break;
case 2:
window.location.href = "3.html";
break;
case 3:
window.location.href = "4.html";
break;
case 4:
window.location.href = "5.html";
break;
case 5:
window.location.href = "6.html";
break;
case 6:
window.location.href = "7.html";
break;
case 7:
window.location.href = "8.html";
break;
case 8:
window.location.href = "9.html";
break;
case 9:
window.location.href = "10.html";
break;
case 10:
window.location.href = "11.html";
break;
case 11:
window.location.href = "12.html";
break;
case 12:
window.location.href = "13.html";
break;
case 13:
window.location.href = "14.html";
break;
case 14:
window.location.href = "15.html";
break;
case 15:
window.location.href = "16.html";
break;
}
});
</script>
</body>
</html>

Sauvegarde en nommant par exemple aleatoire.html que tu enregistre.
N'oublie pas de changer les url de 1 à 16.html par les liens vers les articles.
Tu peux tester directement le code en ouvrant dans ton navigateur.

Une fois testé avec succès, la partie entre <body> et </body> peut être inséré dans ton site avec des extensions comme sourcerer ( https://regularlabs.com/sourcerer ).

Alors oui le javascript se retrouve dans la page donc celui qui interroge le code source de la page peut comprendre et retrouver les différents liens. Si on souhaite cacher cette partie, il faut la réécrire en php et l'interroger en ajax. C'est à dire que l'on va conserver du javascript pour interroger la page php qui retournera le resultat sans recharger la page. Ainsi les urls ne seront plus visibles directement. C'est ce que l'on utilise également pour éviter de recharger la page notamment pour des formulaires de contact avec un peu plus de sécurisation.

C'est possible dans joomla (les développeurs ont prévu cette possibilité) mais cela consiste à créér un plugin.
Ce n'est pas si difficile à faire ou si tu peux te déplacer le 16 et 17 Juin prochain, tu pourras certainement obtenir la réponse au Joomladay de Metz.

**daneel** · 17/04/2023, 08h59

Pour info, l'exemple fourni est une page web en html avec javascript et des boutons qui permettent d'incrémenter des compteurs. Lorsque les quatre compteurs sont incrémentés au moins une fois, le bouton "Sélectionner l'article" est activé.

En cliquant sur ce bouton, un nombre binaire est créé en prenant le reste de la division par 2 de chaque compteur et en les concaténant ensemble. Ce nombre binaire est ensuite converti en décimal, et en fonction de sa valeur, l'utilisateur est redirigé vers une page web différente.

Par exemple, si l'utilisateur a cliqué une fois sur le bouton 1, deux fois sur le bouton 2, trois fois sur le bouton 3 et quatre fois sur le bouton 4, alors le nombre binaire serait 1010 (car 1 et 3 ont été cliqués un nombre impair de fois, tandis que 2 et 4 a été cliqué un nombre pair de fois). Ce nombre binaire est converti en décimal, ce qui donne 10, et l'utilisateur est redirigé vers la page "11.html".

voici le tableau de combinaison :

Bouton 1	Bouton 2	Bouton 3	Bouton 4	Page
0	0	0	0	nomdusite.fr/page1.html
0	0	0	1	nomdusite.fr/page2.html
0	0	1	0	nomdusite.fr/page3.html
0	0	1	1	nomdusite.fr/page4.html
0	1	0	0	nomdusite.fr/page5.html
0	1	0	1	nomdusite.fr/page6.html
0	1	1	0	nomdusite.fr/page7.html
0	1	1	1	nomdusite.fr/page8.html
1	0	0	0	nomdusite.fr/page9.html
1	0	0	1	nomdusite.fr/page10.html
1	0	1	0	nomdusite.fr/page11.html
1	0	1	1	nomdusite.fr/page12.html
1	1	0	0	nomdusite.fr/page13.html
1	1	0	1	nomdusite.fr/page14.html
1	1	1	0	nomdusite.fr/page15.html
1	1	1	1	nomdusite.fr/page16.html

**Gerald_Pass** · 17/04/2023, 19h09

Bonjour et merci daneel pour cette réponse rapide !
Et, oui, c'est bien de me tutoyer... et je vais en faire autant en TE remerciant vivement pour ton aide et surtout les précisions que tu m'as apporté !!!
Je reviendrais ici, plus tard (quand j'aurais eu le temps de mettre ça en application) pour indiquer le résultat obtenu !
à bientôt !

Ailles, j'ai créé un html... j'ai bien les 4 boutons actifs mais j'ai beau cliquer sur les 4 boutons, le 5ème (sélectionner l'article) ne s'active pas... :-( (snif !) c'est donc déjà 99% de ce que j'ai besoin ce qui est énorme, étant parti d'à peine 5% (que je croyais mais, en réalité, j'étais à 0% de la solution !)

**daneel** · 17/04/2023, 19h57

Apparemment, le forum est un peu farceur et glisse des espaces qui modifient le code.

Comme je ne peux pas ajouter de pièce jointe en html, je l'ai inséré dans l'archive zip qui est accepté...
à décompresser donc localement pour récupérer le fichier et l'éditer pour ajouter les urls comme expliqué précedemment.

Fichiers joints

aleatoire.zip (848 octets, 33 affichage(s))

**daneel** · 17/04/2023, 20h38

J'ai supprimé les espaces dans le précédent message avec le code.

**Gerald_Pass** · 18/04/2023, 19h42

T'es trop fort !
1001 mercis !!!

Création d'une succession de compteurs de click

Création d'une succession de compteurs de click

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association