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!