Bonjour,

j'ai un JS qui permet de faire des quizz avec sélection d'une réponse et lors du clic sur le bouddah comme bouton réponse, la bonne réponse se met dans une autre couleur puis un panneau s'abaisse et apparait le texte explicatif.

Je désire ajouter à cela une image sous le texte explicatif mais ne sais comment faire.

si vous aviez un bout de code pour faire cela ce serait super sympa !

J'ai mis les parties d'affichage concernées dans le code en rouge...

Merci

Pascal




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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

//-----------document javascript--- 
	//Quizz_Maker Generator
	//author Konstantin Deryabin
	//lettres => alpha-bêtes ;)
	aleatab = new Array(); //tableau aléatoire contenant des reponses possibles
	fr = new Array(26); 
	fr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','r','s','t','u','v','w','x','y'];
var titre = "Le Yin - Yang ou le fondement de la médecine chinoise";
tab = new Array(11)
quizz1 = new Array(7);
//---------initialisation du tableau---------- 
quizz1 [0] = "En accord avec la théorie du Yin Yang, toutes les conditions suivantes correspondent au phénomène d'opposition sauf une réponse  laquelle ?" ;  //question du quizz
quizz1[1]="Jour et nuit";
quizz1[2]="id='on'Clarté et lumière";
quizz1[3]="Mouvement et repos";
quizz1[4]="Chaleur et froid";
quizz1[5]="Direction vers le haut et vers le bas";
quizz1 [6] = "La clarté et la lumière sont toutes deux Yang.  En effet, il aurait fallu avoir soit clarté et obscurité, soit obscurité et lumière. ";//réponse du quizz
 
quizz10 = new Array(7);
//---------initialisation du tableau---------- 
quizz10 [0] = "Toutes les propriétés suivantes concernent le Yin exceptée : " ;  //question du quizz
quizz10[1]="Faiblesse";
quizz10[2]="Aspect nourricier";
quizz10[3]="id='on'Mouvement";
quizz10[4]="Mouillé";
quizz10[5]="Faiblesse lumineuse ";
quizz10 [6] = "Le mouvement est la mise en activé, le fait de bouger, d’aller de l’avant. Le yin est l’inverse, c’est le repos, l’attente, la non-action.";//réponse du quizz
 
quizz11 = new Array(7);
//---------initialisation du tableau---------- 
quizz11 [0] = "La ou les partie(s) du corps étant considérée(s) comme Yang est (sont) : " ;  //question du quizz
quizz11[1]="Coudes et les genoux";
quizz11[2]="Membres inférieurs";
quizz11[3]="id='on'Dos";
quizz11[4]="Abdomen";
quizz11[5]="Poitrine";
quizz11 [6] = "Pour pouvoir comparer ces éléments, il faut les comparer entre eux.  Les coudes et genoux sont des éléments internes de jonction entre deux parties, donc yin.  Les membres inférieurs sont yin. L’abdomen est la partie inférieure du tronc donc yin. La poitrine est la partie située entre la tête et l’abdomen, donc yin. Le seul élément de cette liste qui est yang, est le dos. Car il est complètement à l’extérieur, et il est chargé de protéger le corps, étant le seul accessible si l’on se met en boule. ";//réponse du quizz
 
quizz2 = new Array(9);
//---------initialisation du tableau---------- 
quizz2 [0] = "Dans les termes suivants, réunissez ceux qui sont yin." ;  //question du quizz
quizz2[1]="id='on'La diarrhée     ";
quizz2[2]="La constipation";
quizz2[3]="La douleur";
quizz2[4]="id='on'La fatigue physique";
quizz2[5]="L’appétit";
quizz2[6]="La peau";
quizz2[7]="id='on'Le foie";
quizz2 [8] = "Le groupe Yin comprend la diarrhée car en fait elle contient beaucoup d’eau. La fatigue physique car elle correspond à une baisse d’activité, le foie car c’est un organe qui est à l’intérieur du corps.";//réponse du quizz
 
quizz3 = new Array(4);
//---------initialisation du tableau---------- 
quizz3 [0] = "Au niveau de la respiration, quel est le mouvement qui est yin ?" ;  //question du quizz
quizz3[1]="L’inspiration";
quizz3[2]="id='on'L’expiration";
quizz3 [3] = "la bonne réponse est l’expiration, car on mobilise une énergie musculaire pour inspirer mais ensuite l’expiration ne correspond qu’à un relâchement de la tension musculaire, le faire sans effort, donc yin. En termes médicaux, on dira que l’inspiration est un mouvement actif et l’expiration un mouvement passif.";//réponse du quizz
 
quizz4 = new Array(9);
//---------initialisation du tableau---------- 
quizz4 [0] = "Laquelle des réponses suivantes correspond au Yin sans présence de Yang ?" ;  //question du quizz
quizz4[1]="Le matin";
quizz4[2]="L'après-midi";
quizz4[3]="id='on'La première moitié de la nuit";
quizz4[4]="La seconde moitié de la nuit";
quizz4[5]="Le première moitié de la journée";
quizz4[6]="La seconde moitié de la journée";
quizz4[7]="Aucune de ces réponses";
quizz4 [8] = "la première partie de la nuit est yin car on est dans la nuit. La première partie est le début du yin par rapport à la deuxième partie qui se dirige vers le nouveau jour, yang. Donc la première partie de la nuit est yin de yin. Ce qui donne une absence de yang.";//réponse du quizz
 
quizz5 = new Array(9);
//---------initialisation du tableau---------- 
quizz5 [0] = "Lesquelles des réponses suivantes correspondent au Yang de Yin ?" ;  //question du quizz
quizz5[1]="Le matin";
quizz5[2]="L'après-midi";
quizz5[3]="id='on'La première moitié de la nuit";
quizz5[4]="La seconde moitié de la nuit";
quizz5[5]="Le première moitié de la journée";
quizz5[6]="id='on'La seconde moitié de la journée";
quizz5[7]="Aucune de ses réponses";
quizz5 [8] = "Pour trouver la bonne réponse, il faut dissocier les réponses proposées en deux groupes : le yin et le yang.  Réponses yin : la première moitié de la nuit, la seconde moitié de la nuit. Réponses yang : le matin, l’après-midi, la première moitié de la journée, la deuxième partie de la journée. Donc on ne conserve que les réponses yin. Ensuite on recherche les réponses contenant du yang parmi ce groupe yin. Il ne restera donc que la seconde moitié de la nuit, celle qui se dirige vers la nouvelle journée à venir, donc le yang.  ";//réponse du quizz
 
quizz6 = new Array(7);
//---------initialisation du tableau---------- 
quizz6 [0] = "Parmi les symptômes suivants, lesquels sont yang ?" ;  //question du quizz
quizz6[1]="id='on'Constipation";
quizz6[2]="Ankylose";
quizz6[3]="id='on'Sécheresse oculaire";
quizz6[4]="id='on'Dartre";
quizz6[5]="Hémorroïdes";
quizz6 [6] = "La constipation est une diminution de l’eau contenue dans les selles mais aussi provoquée par une sécheresse du gros intestin faisant en sorte que les selles ont du mal à progresser normalement au sein de celui-ci. La sécheresse oculaire est due à un excès de chaleur au niveau corporel, et surtout au niveau hépatique car les yeux sont les émissaires du foie au visage. Comme la chaleur à tendance à monter plutôt que l’inverse, les symptômes de chaleur se verront toujours de façon plus rapide à l’extrémité céphalique. Le dartre est une affection du groupe dermatologique ou de la peau. C’est en fait, une petite plaque sèche, dont se détachent des particules de peau séchées. On qualifie en médecine ce type d’éruption comme squameuse. Donc étant sèche, cette éruption est classée dans le groupe yang.  L’ankylose et les hémorroïdes sont yin car elles manifestent un état d’accumulation soit de liquides, soit de sang. Ceci est l’inverse du mouvement donc yin. ";//réponse du quizz
 
quizz7 = new Array(7);
//---------initialisation du tableau---------- 
quizz7 [0] = "Lequel des facteurs pathologiques suivants correspond au Yin ?" ;  //question du quizz
quizz7[1]="Le vent";
quizz7[2]="La chaleur";
quizz7[3]="id='on'L'humidité";
quizz7[4]="La chaleur estivale";
quizz7[5]="Aucune réponse satisfaisante";
quizz7 [6] = "Seule l’humidité est liée à l’eau où à un élément en rapport avec le yin parmi ces diverses propositions.";//réponse du quizz
 
quizz8 = new Array(7);
//---------initialisation du tableau---------- 
quizz8 [0] = "La propriété du Yang est : " ;  //question du quizz
quizz8[1]="Descente vers le bas";
quizz8[2]="id='on'Mouvement centrifuge";
quizz8[3]="Immobilité";
quizz8[4]="id='on'Excitation";
quizz8[5]="Inhibition";
quizz8 [6] = "Le yang est une énergie véloce, guerrière, liée au feu.  Le mouvement centrifuge est l’action de mouvements de sortie de l’intérieur du corps vers l’extérieur, à l’inverse du mouvement centripète. L’excitation est la mise en mouvement et la mise en pression des énergies. ";//réponse du quizz
 
quizz9 = new Array(7);
//---------initialisation du tableau---------- 
quizz9 [0] = "Laquelle des propriétés suivantes correspond au Yin : " ;  //question du quizz
quizz9[1]="id='on'Inhibition";
quizz9[2]="Clarté";
quizz9[3]="Montée";
quizz9[4]="Extérieur";
quizz9[5]="Réchauffement";
quizz9 [6] = "L’inhibition est la capacité ou faculté à se rentrer en soi, à se cacher. Le yin se cache, se terre, s’enfouie au fond de la personne ou de la caverne. Le yang, lui ferait tout pour en sortir…";//réponse du quizz
 
tab[0] = quizz1; 
tab[1] = quizz2; 
tab[2] = quizz3; 
tab[3] = quizz4; 
tab[4] = quizz5; 
tab[5] = quizz6; 
tab[6] = quizz7; 
tab[7] = quizz8; 
tab[8] = quizz9; 
tab[9] = quizz10; 
tab[10] = quizz11; 

	//-------------fin initialisation--------
	//--mélanger des éléments du tableau
	function melange(ind)
	{
		for(i=1;i<tab[ind].length-1;i++)
		{	var x; var k;
			//initialisation
			x=Math.round(Math.random()*(tab[ind].length-3)+1);
			//test sur la présence dans le tableau
			k=0;
			while( k<=i && x != aleatab[k] )
			{	k++;
			}
			//test à la sortie
			if(k>i)
			{  aleatab.push(x);}//placer le nombre dans le tableau
			else
			{  i--;}//refaire la boucle
		}
	}
	// mettre le calque de réponse derièrre le calque de question
	// initialisation se fait ici sinon impossible de récupèrer
	// la valeur du margintop
	function mep()
	{ document.getElementById('reponse').style.marginTop = '-300px';}
	//----- affichage des données -----------------
	function affiche(k)
	{	document.write("<span class='qtitre'>"+titre+"</span>");
		document.write("<span class='qquest'>"+(k+1)+".&nbsp;"+tab[k][0]+"</span>");
		document.write("<table id='inform' align='center'>");
		document.write("<tr>");
		document.write("<td >Ordre</td>");
		document.write("<td >Réponse(s)</td>");
		document.write("<td>Cocher si vrai</td>");
		document.write("</tr>");
		melange(k);//melanger les réponses possibles en aléatoire
		for(i=1;i<(tab[k].length - 1);i++)//le dernier élément du tableau est la réponse du quizz
		{
			document.write("<tr "+onid(tab[k][aleatab[i-1]])+">");
			document.write("<td>"+fr[i-1].toUpperCase()+"</td>");	
			document.write("<td class='left'>"+noid(tab[k][aleatab[i-1]])+"</td>");
			document.write("<td>"+"<input type='checkbox'>"+"</td>");
			document.write("</tr>");
		}
		document.write("</table>");
	}
	//---- faire glisser la calque de réponse
	function  movie()
	{ 	var val;
		var calc2 = document.getElementById("reponse");
		if( parseInt(calc2.style.marginTop) != 0)
		{	val = parseInt(calc2.style.marginTop)
			val += 10;
			calc2.style.marginTop = val+"px";
		}
		else
		{	window.clearInterval(a);}
	}
	//----lancer le timer
	function lance(){	a = setInterval("movie()",20);}
	
	
	//--rendre le calque de réponse visible et
	// souligner les bonnes réponses dans le tableau
	function behold(chaine)
	{	document.getElementById(chaine).style.visibility="visible";
		elid= document.getElementsByTagName("tr");
		for( i=0;i < elid.length;i++)
		{	if(elid[i].id=='on'){elid[i].style.backgroundColor='#54A7A7';}
		}
		lance();
	}
	//-- ecriture de bonne réponse
	function affrep(k){document.write(tab[k][(tab[k].length - 1)]);}
	
	//--- récup du statut du checkbox
	//utilisé pour souligner de bonnes réponse dans le tableau
	function onid(str)
	{	var mod = /id='on'/i;
		if(str.search(mod) != -1)
		{return("id='on'");
		}
	}
	//--- la chaine sans le statut
	// réponse possible sans le statut
	function noid(str)
	{	var mod = /id='on'/i;
		if(str.search(mod) != -1)
		{	return str.substring(7);}
		else
		{	return str}
	}
	// le numèro de question
	function number()
	{	var numq; //indice du tableau des questions
		var adr;
		//=======================
		adr= document.location.href;
		if (adr.lastIndexOf('=') != -1)
		{	numq = parseInt(adr.substr(adr.lastIndexOf('=')+1));
			numq--;
		}else
		{	numq=0;}
		return numq;
	}
	//préparation des params pour l'affichage d'une page
	function get_it(cmd)
	{	var n;
		adr= document.location.href;
		//===========================
		switch (cmd)
		{	case "frw":
				if (adr.lastIndexOf('=') != -1)
				{	n = parseInt(adr.substr(adr.lastIndexOf('=')+1));
					if(++n<=tab.length)
					{	adr=document.location.pathname+"?q="+n;}
					else
					{	n=tab.length;
						alert("Hélas, c'est la fin du quizz.");}
				}else
				{	adr=document.location.pathname+"?q=2";}
				//===========================
				break;
			case "bck":
				if (adr.lastIndexOf('=') != -1)
				{	n = parseInt(adr.substr(adr.lastIndexOf('=')+1));
					if(--n >= 1)
					{	adr=document.location.pathname+"?q="+n ;}
					else
					{	n=1;//la 1ère question
						alert("Le début du quizz.");
					}
				}else
				{	adr=document.location.pathname+"?q=1";
					alert("Le début du quizz.");
				}
				//===========================
		}
		document.location.replace(adr);
	}
	//---------- happy end -----------