bouton radio et progressbar

[melomen]

Hello!
Je suis tout nouveau, je sors du four à l'instant. Développeur junior plutot orienté Java j'ai un peu de mal avec le JS.
Je suis sur la création d'un site en wp et j'utilise contact form 7 pour un questionnaire de satisfaction où le client veut une notation en bouton radio de 1 à 10 avec une progressbar qui progresse selon la note choisie de 10 à 100%.
Problème : contact form 7 ne permet que des champs comme celui ci pour enregistrer la note en BDD : [radio radio-394 class:stepformradio use_label_element default:1 "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]
du coup pas possible de jouer sur les class pour apposer du CSS. Et j'ai clairement pas le niveau JS pour m'aventurer la dedans tout seul.
En gros, quelle fonction JS me permettrait d'appliquer une sorte de :hover (que je fabriquerai en CSS selon le thème du site) sur le bouton radio sélectionné (j'ai fait un display:none sur les input et mit un cursor:pointer sur les label) et faire monter la progressbar selon la note?

Franchement, si il y a un petit génie (à mes yeux ) qui aurait une idée je le saurai surrement suivant etre gré de ma reconnaissance (ou une phrase dans le genre). En bonus le code CSS de ma progressbar :::::::




.progress {
padding: 4px;
background: rgba(0, 0, 0, 1);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}


merci!

[sharonhazeltine]

Bonjour, je pense que pour appliquer un effet :hover au bouton radio sélectionné et faire avancer la barre de progression en fonction de la note choisie, vous pouvez utiliser JavaScript pour ajouter et supprimer des classes CSS de manière dynamique. online games

Code : Tout sélectionner

Voici un exemple de code JavaScript qui pourrait vous aider :

javascript
Copie
// Sélectionne tous les boutons radio de la classe "stepformradio"
var radios = document.querySelectorAll('.stepformradio input[type="radio"]');

// Ajout d'un écouteur d'événement "change" à chaque bouton radio
radios.forEach(fonction(radio) {
  radio.addEventListener('change', function() {
    // Supprime la classe "sélectionnée" de tous les boutons radio
    radios.forEach(fonction(radio) {
      radio.parentNode.classList.remove('selected');
    });
    
    // Ajoute la classe "sélectionnée" au bouton radio sélectionné
    this.parentNode.classList.add('selected');
    
    // Récupère la valeur du bouton radio sélectionné
    var valeur = parseInt(this.value);
    
    // Calcule la largeur de la barre de progression en pourcentage
    var progressWidth = (valeur / 10) * 100 ;
    
    // Sélectionne la barre de progression
    var progressBar = document.querySelector('.progress-bar');
    
    // Met à jour la largeur de la barre de progression
    progressBar.style.width = progressWidth + '%';
  });
});

Dans votre code HTML, assurez-vous d'ajouter la classe "sélectionnée" au bouton radio par défaut afin que la barre de progression soit correctement initialisée.

[moultingbriefly]

Dans un domaine où la pratique est extrêmement importante c'est très efficace drift hunters