Masquer Afficher Question Reponse

**Smoke92** · 08/06/2012, 10h40

Bonjour,

Je voudrais faire un script qui permet d'afficher les question et les reponses comme ceci :

Question : Ordinateur éteint ?

Reponse A : Oui ou Reponse B : Non

Si on clique sur Reponse A voici ce qui s'affiche :

Allumer votre PC

Si on clique sur Reponse B voici ce qui s'affiche :

Si non, verifier le cablage ( possibilité de voir 2 nouvelles reponses)

Reponse C : cablage Ok ou Reponse D : Cablage Non OK

Si on clique sur Reponse c voici ce qui s'affiche :

Si le cablage est Ok, alors changer Ecran

Si on clique sur Reponse D voici ce qui s'affiche :

Si le cablage n'est pas Ok, Changer / remettre les cables débranchés

Mon probleme est que quand je clique sur la reponse A, puis sur ma reponse B je voudrais que ma reponse A disparaisse mais quand je clique sur la reponse C je voudrais que la reponse B reste.

Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
	 <script>
		function showBlock(idName){
			if(document.getElementById) {//NN6,Mozilla,IE5?
				document.getElementById(idName).style.display = "block";;
			}
			else if(document.all) {      //IE4?
				document.all(idName).style.display = "block";;
			}
			else if(document.layers) {   //NN4?
				document.layers[idName].display = "block";;
			}
		}
 
		function hideBlock(idName){
			if(document.getElementById) {//NN6,Mozilla,IE5?
				document.getElementById(idName).style.display = "none";;
			}
			else if(document.all) {      //IE4?
				document.all(idName).style.display = "none";;
			}
			else if(document.layers) {   //NN4?
				document.layers[idName].display = "none";;
			}
		} 
 
		var opened_blocks = new Array;
		function switchBlock(id) {
			if (opened_blocks[id]) {
				opened_blocks[id] = false;
				hideBlock(id);
			} else {
				opened_blocks[id] = true;
				showBlock(id);
			}
		}
		</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<p> Test de l'onduleur ! 
				1- L'onduleur est-il branché ? 
			</p>
			<li>
				1.a-  Non, l'onduleur <a href="javascript:switchBlock('non')">n'est pas branché</a>       &nbsp;&nbsp;&nbsp
 
				1.b- Oui, l'onduleur <a href="javascript:switchBlock('oui')">est branché</a> <br />   <br />                   
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="non" style="display:none;">1.a.1- Si Non, brancher l'onduleur </div> 
 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="oui" style="display:none;" >1.b.1- Si oui, <a href="javascript:switchBlock('Verif')">verifier l'alimentation de l'écran et de l'unité centrale</div></a> <br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="Verif" style="display:none;">
				   <tr>
						<td>
							1.b.1.a- L'alimentation est <a href="javascript:switchBlock('Ok')">Ok</div></a>                                      
						</td>
						<td>
							1.b.1.b- L'alimentation n'est <a href="javascript:switchBlock('NonOk')">pas Ok</div></a>
						</td>
					</tr>
				</table><br />
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="NonOk" style="display:none;">1.b.1.b.1- Si l'alimentation n'est pas Ok, appuyer sur le bouton poussoir à l'avant de l'onduleur</div></a>
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="Ok" style="display:none;">1.b.1.a.1- L'alimentation est Ok. <a href="javascript:switchBlock('voyantBatterie')"> Le voyant <img src="batterie.png" width="20" height="20" title="logo" /> est-il allumé ?</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantBatterie" style="display:none;">
				   <tr>
						<td>
							1.b.1.a.1.a- Le voyant est <a href="javascript:switchBlock('allume')">allumé</div></a>                                      
						</td>
						<td>
							1.b.1.a.1.b- Le voyant n'est <a href="javascript:switchBlock('NonAllume')">pas allumé</div></a>
						</td>
					</tr>
				</table><br />		
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="allume" style="display:none;"> Le courant secteur est mauvais ou absent l'alarme emet 4 bip toute les 30 secondes</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="NonAllume" style="display:none;">Le voyant <a href="javascript:switchBlock('voyantSurcharge')"><img src="surcharge.png" width="20" height="20" title="logo1" /> est-il allumé ?</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantSurcharge" style="display:none;">
				   <tr>
						<td>
							 Le voyant est <a href="javascript:switchBlock('SurchargeAllume')">allumé</div></a>                                      
						</td>
						<td>
							 Le voyant n'est <a href="javascript:switchBlock('SurchargeNonAllume')">pas allumé</div></a>
						</td>
					</tr>
				</table><br />	
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="SurchargeAllume" style="display:none;">L'onduleur est mal utilisé avec un appareil trop puissant ou mal adapté</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="SurchargeNonAllume" style="display:none;">Le voyant est allumé. <a href="javascript:switchBlock('voyantDisjoncteur')">Le disjoncteur de l'onduleur <img src="disjoncteur.png" width="60" height="60" title="logo2" /> est-il déclenché</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantDisjoncteur" style="display:none;">
				   <tr>
						<td>
							 Le voyant est <a href="javascript:switchBlock('DisjoncteurAllume')">allumé</div></a>                                      
						</td>
						<td>
							 Le voyant n'est <a href="javascript:switchBlock('DisjoncteurNonAllume')">pas allumé</div></a>
						</td>
					</tr>
				</table><br />	
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="DisjoncteurAllume" style="display:none;">Déconnectez les appareils non essentiels qui sont branchés sur l’onduleur Back-UPS. Réarmez le disjoncteur (sur le panneau arrière du Back-UPS) en enfonçant le bouton jusqu’à ce qu’il s’enclenche. Si le disjoncteur se réarme, rallumez l’onduleur Back-UPS et rebranchez les appareils un à un. Si le disjoncteur se déclenche de nouveau, il est probable que l’un des appareils provoque une surcharge.</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="DisjoncteurNonAllume" style="display:none;">Appeler le Service IT ou Maintenance</div> 
 
			</li>

Merci d'avance

**headmax** · 08/06/2012, 23h22

Voilà si ça peut t'aider, il faut appeler deux function dans ton événement onclick c'est un peu près tout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<?php
?>
<html>
<head>
	 <script>
		function showBlock(idName){
			if(document.getElementById) {//NN6,Mozilla,IE5?
				document.getElementById(idName).style.display = "block";;
			}
			else if(document.all) {      //IE4?
				document.all(idName).style.display = "block";;
			}
			else if(document.layers) {   //NN4?
				document.layers[idName].display = "block";;
			}
		}
 
		function hideBlock(idName){
			if(document.getElementById) {//NN6,Mozilla,IE5?
				document.getElementById(idName).style.display = "none";;
			}
			else if(document.all) {      //IE4?
				document.all(idName).style.display = "none";;
			}
			else if(document.layers) {   //NN4?
				document.layers[idName].display = "none";;
			}
		} 
 
		var opened_blocks = new Array;
		function switchBlock(id) {
			if (opened_blocks[id]) {
				opened_blocks[id] = false;
				hideBlock(id);
			} else {
				opened_blocks[id] = true;
				showBlock(id);
			}
		}
</script>
<style type="text/css">
 
.enligne{
	display: inline;	
}
 
</style>
</head>
<body>
<p> Test de l'onduleur ! 
				1- L'onduleur est-il branché ? 
			</p>
			<li>
				<p id="q1_non" class="enligne">1.a-  Non, l'onduleur <a href="javascript:switchBlock('non'); hideBlock('q1_oui');">n'est pas branché</a></p>       &nbsp;&nbsp;&nbsp
 
				<p id="q1_oui" class="enligne">1.b- Oui, l'onduleur <a href="javascript:switchBlock('oui'); hideBlock('q1_non');">est branché</a></p> <br />   <br />                   
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="non" style="display:none;">1.a.1- Si Non, brancher l'onduleur </div> 
 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="oui" style="display:none;" >1.b.1- Si oui, <a href="javascript:switchBlock('Verif')">verifier l'alimentation de l'écran et de l'unité centrale</div></a> <br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="Verif" style="display:none;">
				   <tr>
						<td>
							<p id="q2_oui" class="enligne">1.b.1.a- L'alimentation est <a href="javascript:switchBlock('Ok'); hideBlock('q2_non');">Ok</a></p>                      
						</td>
						<td>
							<p id="q2_non" class="enligne">1.b.1.b- L'alimentation n'est <a href="javascript:switchBlock('NonOk'); hideBlock('q2_oui');">pas Ok</a></p>
						</td>
					</tr>
				</table><br />
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="NonOk" style="display:none;">1.b.1.b.1- Si l'alimentation n'est pas Ok, appuyer sur le bouton poussoir à l'avant de l'onduleur</div></a>
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="Ok" style="display:none;">1.b.1.a.1- L'alimentation est Ok. <a href="javascript:switchBlock('voyantBatterie')"> Le voyant <img src="batterie.png" width="20" height="20" title="logo" /> est-il allumé ?</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantBatterie" style="display:none;">
				   <tr>
						<td>
							<p id="q3_oui" class="enligne">1.b.1.a.1.a- Le voyant est <a href="javascript:switchBlock('allume'); hideBlock('q3_non');">allumé</a></p>                                    
						</td>
						<td>
							<p id="q3_non" class="enligne">1.b.1.a.1.b- Le voyant n'est <a href="javascript:switchBlock('NonAllume'); hideBlock('q3_oui');">pas allumé</a></p>
						</td>
					</tr>
				</table><br />		
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="allume" style="display:none;"> Le courant secteur est mauvais ou absent l'alarme emet 4 bip toute les 30 secondes</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="NonAllume" style="display:none;">Le voyant <a href="javascript:switchBlock('voyantSurcharge')"><img src="surcharge.png" width="20" height="20" title="logo1" /> est-il allumé ?</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantSurcharge" style="display:none;">
				   <tr>
						<td>
							 <p id="q4_oui" class="enligne">Le voyant est <a href="javascript:switchBlock('SurchargeAllume'); hideBlock('q4_non');">allumé</a></p>                                     
						</td>
						<td>
							 <p id="q4_non" class="enligne">Le voyant n'est <a href="javascript:switchBlock('SurchargeNonAllume'); hideBlock('q4_oui');">pas allumé</a></p>
						</td>
					</tr>
				</table><br />	
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="SurchargeAllume" style="display:none;">L'onduleur est mal utilisé avec un appareil trop puissant ou mal adapté</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="SurchargeNonAllume" style="display:none;">Le voyant est allumé. <a href="javascript:switchBlock('voyantDisjoncteur')">Le disjoncteur de l'onduleur <img src="disjoncteur.png" width="60" height="60" title="logo2" /> est-il déclenché</div></a><br />
				<table width='80%' cellspacing='0' cellpadding='0' align='center' id="voyantDisjoncteur" style="display:none;">
				   <tr>
						<td>
							 <p id="q5_oui" class="enligne">Le voyant est <a href="javascript:switchBlock('DisjoncteurAllume'); hideBlock('q5_non');">allumé</a></p>                                      
						</td>
						<td>
							 <p id="q5_non" class="enligne">Le voyant n'est <a href="javascript:switchBlock('DisjoncteurNonAllume'); hideBlock('q5_oui');">pas allumé</a></p>
						</td>
					</tr>
				</table><br />	
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="DisjoncteurAllume" style="display:none;">Déconnectez les appareils non essentiels qui sont branchés sur l’onduleur Back-UPS. Réarmez le disjoncteur (sur le panneau arrière du Back-UPS) en enfonçant le bouton jusqu’à ce qu’il s’enclenche. Si le disjoncteur se réarme, rallumez l’onduleur Back-UPS et rebranchez les appareils un à un. Si le disjoncteur se déclenche de nouveau, il est probable que l’un des appareils provoque une surcharge.</div> 
				<div width='80%' cellspacing='0' cellpadding='0' align='center' id="DisjoncteurNonAllume" style="display:none;">Appeler le Service IT ou Maintenance</div> 
 
			</li>
</body>
</html>

**Bovino** · 09/06/2012, 09h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
if(document.getElementById) {//NN6,Mozilla,IE5?
	document.getElementById(idName).style.display = "block";;
}
else if(document.all) {      //IE4?
	document.all(idName).style.display = "block";;
}
else if(document.layers) {   //NN4?
	document.layers[idName].display = "block";;
}

Je ne sais pas où tu as été trouver ce script mais il est complètement obsolète... à moins que tes visiteurs n'aient jamais mis à jour leur navigateur depuis 20 ans

**Smoke92** · 11/06/2012, 09h14

Merci pour la reponse headmax, très gentils de ta part.

Merci pour la remarque Bovino

Masquer Afficher Question Reponse

JavaScript

Vue hybride

Discussions similaires

Partager

Partager