Desactiver un bouton quand un bouton radio est coché
Bonjour à tous,
Je me permets de venir ouvrir une nouvelle discussion car j'ai cherché sur internet et principalement dans votre forum, mais sans succès :cry:
Je sais que mon titre fait appel à de nombreux sujets similaires et déjà résolu, mais mon cas et un peu différent, du moins je pense :mouarf:
Donc je vous explique rapidement, j'ai créé un siteweb qui héberge un quiz en ligne. Simple quiz, il s'agit simplement d'une série de 100 questions présentées de cette manière:
-l'intitulé de la question
-4 réponses possibles en bouton radio
-et un bouton next
Quand un utilisateur sélectionne une mauvaise réponse elle s'affiche en rouge tandis que la bonne apparait en vert. De plus il a un délai d'attente de 5 secondes pour analyser son erreur et voir la bonne réponse. Seulement durant ce délai, l'utilisateur peut continuer de cocher les boutons radios alors qu'il a déjà choisi une réponse.
Par conséquent je souhaiterais pouvoir empêcher la re-sélection d'une réponse après en avoir déjà choisi une.
J'ai donc penser tout simplement à désactiver le bouton "next".
Mais étant donné que j'ai jamais fait de javascript avant aujourd'hui, et que je ne comprends pas très bien le code qui a été pondu par l'ancien codeur, je me trouve "légèrement" bloqué pour réaliser ce traitement.
Je vous transmets le code concerné:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| function loadQuiz(qnum)
{
if (typeof(quizArray) !== 'undefined')
{
displayQuiz(ent = document.getElementById('quiz1'),qnum++);
var newB = document.createElement("button");
newB.style.styleFloat = 'left';
newB.style.cssFloat = 'left';
var rightA = quizArray.split("|");
var rightA = rightA[1].split("//");
var rightA = rightA[0];
newB.onclick = function validateQuestion(){
var count=0, verif=0, numGoodAnswer="";
for(var i=0;i<4;i++)
{
if(document.form_answer.a[i].checked){
count++;
if(document.form_answer.a[i].value==rightA){
document.form_answer.answer.value=document.form.lastAns.value+1;
}
else{
//permet d'afficher la mauvaise réponse en rouge
document.form_answer.answer.value=document.form.lastAns.value+0;
verif=1;
numGoodAnswer="l"+i;
document.getElementById(numGoodAnswer).style.backgroundColor='#CC0000';
}
}
}
for(var i=0;i<4;i++)
{
//permet d'afficher la bonne réponse en vert
if(document.form_answer.a[i].value==rightA && count != 0){
numGoodAnswer="l"+i;
document.getElementById(numGoodAnswer).style.backgroundColor='#33CC00';
}
}
//empêche l'utilisateur de passer à la question suivante sans avoir sélectionner de réponse
if(count == 0){
alert("Please select an answer before to click Next !");
} else{
if(verif == 1)
{
//fait patienter l'utilisateur pendant 5 secondes s'il n'a pas choisi la bonne réponse
//5 secondes pour qu'il puisse apprendre de son erreur et en guise de pénalité
document.getElementById(button).disable = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
}
}
}
var newTb = document.createTextNode('Next');
if(Number(qnum)== Number(nbQ))
newTb = document.createTextNode('Finish');
newB.appendChild(newTb);
ent.appendChild(newB);
var timel = quizArray.split('|');
timel = timel[1].split('//');
timel = timel[1];
document.form_answer.qid.value=document.form.IDs.value;
document.form_answer.time.value=document.form.starttime.value;
resetTimer(timel,qnum);
decrementTimer();
}else
{
if (typeof(nbQ) !== 'undefined')
{
if (qnum>=nbQ)
displayResult();
}
}
} |
Je ne sais pas si vous avez besoin du code des autres fonctions, si c'est le cas, dites moi le :D
Pour info j'ai déjà essayer différents codes:
Code:
1
2
3
4
5
6
7
8
9
10
| if(verif == 1)
{
//fait patienter l'utilisateur pendant 5 secondes s'il n'a pas choisi la bonne réponse
//5 secondes pour qu'il puisse apprendre de son erreur et en guise de pénalité
document.getElementById(button).disable = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
| if(verif == 1)
{
//fait patienter l'utilisateur pendant 5 secondes s'il n'a pas choisi la bonne réponse
//5 secondes pour qu'il puisse apprendre de son erreur et en guise de pénalité
//pour forcer la sélection sur la première réponse de l'utilisateur de manière à ne pas pouvoir en sélectionner une différente
document.getElementById(numGoodAnswer).checked = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
} |
Code:
1
2
3
4
5
6
7
8
9
10
|
if(verif == 1)
{
//pour forcer la sélection sur la première réponse de l'utilisateur de manière à ne pas pouvoir en sélectionner une différente
document.getElementById(numGoodAnswer).checked = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
} |
Code:
1
2
3
4
5
6
7
8
9
10
|
if(verif == 1)
{
//retirer le bouton next
document.Next.disabled = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
} |
Code:
1
2
3
4
5
6
7
8
9
10
|
if(verif == 1)
{
//également retirer le bouton next
document.form_answer.Next.disabled = true;
setTimeout("nextPage(qnum)",5000);
} else {
nextPage(qnum);
return false;
} |
Mais le tout sans succès :(
J'espère m'être bien exprimé, et je suis ouvert à toutes autres idées pour réaliser mon traitement !
Merci de votre aide :ccool:
