show/hide questions et réponses

Version imprimable

Bonjour,

le code suivant vous fera comprendre ce que je cherche à faire - Ce qui ne va pas, c'est qu'au lancement du script les réponses s'affichent au lieu d'être cachées - Par ailleurs, je voudrais (et je ne sais pas comment faire) ajouter à cette question d'autres questions 2, 3, 4, 5 ....

Merci

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Toggle_show_hide</title>
	<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>
<a><h2>Exercice 10</h2>
<p></p>
<a>Traduisez</a> 
<p></p>
<p>I. Le maire a laissé les promoteurs acheter le parc du château.</p>
 
<button onclick="myFunction()">Réponse</button>
 
<div id="myDIV">
The mayor let the property developpers buy the parc of the manor house.
</div>
 
<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
 
</body>
</html>

24/01/2017, 07h05
Cafeinoman

Tu as simplement oublié de préciser le display:none dans ton css de départ, ce qui fait que par défaut ta div est sur display:block au chargement de la page.
Pour ce qui est de reproduire l'idée sur plusieurs questions, la solution dépend surtout de ce que tu as côté serveur... si c'est du html "brut", la seule solution il me semble serai de passer l'id en paramètre à ta fonction. Sinon, le mieux serait de générer la page depuis une liste qui vient de serveur...

Ps: par contre tu es dans la rubrique java, et rien dans ton problème n'y fait référence... ton serveur est-il en java où t'es tu trompé ?
24/01/2017, 08h18
Barcus

Aie aie aie

Merci Cafeinoman d'avoir pris la peine de me répondre...

C'est du Javascript ? J'ai déjà eu bien du mal à trouver le moyen de seulement poser ma question ne trouvant pas le bouton "nouvelle discussion" ! Java n'est pas Javascript bien-sûr ! Mais alors je dois basculer la discussion où ?

Le - display : none; - l'explication est claire mais je ne trouve pas l'endroit où le mettre : tout ce que j'ai essayé ne change rien.

Enfin, j'ai un hébergement mutualisé chez OVH, c'est tout ce que je sais !

Mon problème est de mettre dans une page html5 la possibilité d'avoir la réponse immédiate à une question avec Info bulles, bootstraps, popovers ou tooltips, sachant que cette réponse (avec les explications) est parfois un peu longue. J'ai essayé les commentaires des pdf mais ils n'atterrissent pas toujours sur la page .... j'y renonce ! La solution javascript me paraît très bien à condition de fonctionner correctement.

Merci encore
24/01/2017, 12h28
Cafeinoman

Ok, donc du html static. Vu ce que tu veux faire, je te conseil de regarder du côté de Jquery / jqueryUI, qui te permettra de faire apparaître "proprement" une boîte de dialogue avec la réponse, sans avoir a réinventer la roue...
24/01/2017, 17h40
Beginner.
Citation:

Envoyé par Barcus

Le - display : none; - l'explication est claire mais je ne trouve pas l'endroit où le mettre : tout ce que j'ai essayé ne change rien.

Par exemple ici :
Code:

1 2 3 <div id="myDIV" style="display: none" > The mayor let the property developpers buy the parc of the manor house. </div>
Tu peux tester ici : http://jsbin.com/sojayiyeka/edit?html,output
24/01/2017, 18h04
Beginner.

Ah oui tu peux aussi regarder ce fil : Questions/réponses, boutons et boucle, j'y ai posté une réponse que tu peux tester ici : http://jsbin.com/wejogoxuvo/edit?js,output.

Bonjour,

voici un petit systèeme de Questions Répoanses en JavaScript : (à voir ici : http://codepen.io/jreaux62/pen/GrvRBN)

Code:

1
2
3
4
5
<body>
  <h2>Exercice 10</h2>
 
  <h4>Traduisez</h4>
  <div id="QRwrap"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.Question {
  font-weight: normal;
  padding: 10px 20px;
  text-align: center;
  background-color: lightgrey;
}
.Reponse {
  font-weight: normal;
  padding: 10px 20px;
  text-align: center;
  color: darkblue;
  background-color: lightblue;
  display:none; /* on masque */
}
.RepBtn { }

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
function initiate_QR() {
  var Qs = new Array(); // Questions
  var Rs = new Array(); // Réponses
  Qs[0] = 'Le maire a laissé les promoteurs acheter le parc du château.';
  Rs[0] = 'The mayor let the property developpers buy the parc of the manor house.';
  Qs[1] = 'Mon tailleur est riche.';
  Rs[1] = 'My tailor is rich.';
  Qs[2] = 'Promenons-nous dans les bois.';
  Rs[2] = 'Let\'s wander in the forest.';
  // ........ On peut ajouter autant de Q/R que nécessaire.....
  var NbreQ = Qs.length // nombre de Questions/Réponses
    //	alert(NbreQ);
  var QRwrap = document.getElementById('QRwrap');
  for (i = 0; i < NbreQ; i++) {
    var contentHTML = '<p class="Question" id="Q-' + i + '">' + (i + 1) + '- ' + Qs[i] + '</p>';
    contentHTML += '<p class="Reponse" id="R-' + i + '">' + (i + 1) + '- ' + Rs[i] + '</p>';
    contentHTML += '<button class="RepBtn" type="button" onclick="show_Rep(' + i + ')">Réponse</button>';
 
    QRwrap.innerHTML += contentHTML;
    //		alert( (i+1) + '- ' + Qs[i]);
  }
}
 
function show_Rep(i) {
  var Rep = document.getElementById('R-' + i);
  Rep.style.display = (Rep.style.display == 'block') ? 'none' : 'block';
}
 
window.onload = initiate_QR;

N.B. Les pro du JS sauront certainement l'améliorer et l'optimiser ;)

Une réponse qui vaut ce qu'elle vaut

Merci à chacun pour vos réponses que je vais décortiquer ! Il y a sûrement une meilleure réponse que ce que j'ai trouvé et j'ai peut-être "ré-inventé la roue" comme dit cafeinoman mais ça marche pratiquement comme je veux !

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>reponse a la question</title>
	<script type="text/javascript">
<!--
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<a><h2>Exercice 10</h2>
<p></p>
<a>Traduisez</a> 
<p></p>
 
<!-- Première question -->
 
<div id="question1">
I. Le maire a laissé les promoteurs acheter le parc du château.  <a href="#"
onclick="toggle('answer1');">répondre/effacer</a>
</div>
<div style="display:none" id="answer1">
1. The mayor let the property developpers buy the park of the manor house.
</div>
 
<!-- Deuxième question -->
 
<div id="question2">
2. Le maire a permis aux promoteurs de construire des maisons dans le parc du
château  <a href="#"
onclick="toggle('answer2');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer2">
2. The mayor allowed the property developpers to build houses in the park of the
manor house.
<i>Ne confondez pas les constructions de let et allow, malgré la parenté du sens.</i>
</div>
 
<!-- Troisième question -->
 
<div id="question3">
3. Le directeur du journal a demandé au maire d'expliquer sa politique d'urbanisme.  <a href="#"
onclick="toggle('answer3');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer3">
3. The director of the newspaper asked the mayor to explain his town planning policy.
<i>Surtout pas de to.</i>
</div>
 
<!-- Quatrième question -->
 
<div id="question4">
4. Le maire a dit qu'il voulait que la ville soit plus moderne.  <a href="#"
onclick="toggle('answer4');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer4">
4. The mayor said that he wanted the town to be more modern.
<i>surtout pas tell, puisque l'interlocuteur n'est pas mentionné; après want surtout pas de
subordonnée en that.</i>
</div>
 
<!-- Cinquième question -->
 
<div id="question5">
5. Le journaliste a demandé plus de détails.  <a href="#"
onclick="toggle('answer5');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer5">
5. The journalist asked for more details.
<i>Les détails sont ce que le journaliste désire obtenir, pas le contenu de sa question.</i>
</div>
 
<!-- Sixième question -->
 
<div id="question6">
6. Le maire a dit au journaliste que de vieux bâtiments sans utilité seraient remplacés
par des logements confortables.  <a href="#"
onclick="toggle('answer6');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer6">
6. The mayor said to/told the journalist that useless old buildings would be replaced
by comfortable houses.
<i>Say ou tell, mais ne pas se tromper de construction.</i>
</div>
 
<!-- Septième question -->
 
<div id="question7">
7. Le journaliste a demandé au maire de préciser sa position et le maire lui a expliqué
qu'un centre commercial remplacerait les halles médiévales.  <a href="#"
onclick="toggle('answer7');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer7">
7. The journalist asked the mayor to be more specific and the mayor told him/explained
that a shopping centre would replace the medieval covered market.
<i>tell ne peut pas se passer de son complément him; mais après explain il n'est pas
nécessaire de mentionner la personne à qui on s'adresse, Si on tient à le faire, revenir
à tell.</i>
</div>
 
<!-- Huitième question -->
 
<div id="question8">
8. Le journaliste aurait voulu que le maire avoue que son parti avait reçu de l'argent  <a href="#"
onclick="toggle('answer8');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer8">
8. The journalist would have liked the mayor to admit that his party had received
money.
<i>Surtout pas de subordonnée en that pas de gérondif non plus quand i l s'agit d'un
événement en projet.</i>
</div>
 
<!-- Neuvième question -->
 
<div id="question9">
9. Le maire a refusé de répondre au journaliste.  <a href="#"
onclick="toggle('answer9');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer9">
9. The mayor refused to answer the journalist.
<i>Surtout pas de to après answer.</i>
</div>
 
<!-- Dixième question -->
 
<div id="question10">
10. Le journaliste a rappelé au maire que les électeurs appréciaient d'avoir un parc
presque au centre de la ville. <a href="#"
onclick="toggle('answer10');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer10">
10. The journalist reminded the mayor that the voters enjoyed/liked having a park
almost in the centre of the town.
<i>Construction directe de remind quand il y a une subordonnée en that après;
gérondif après enjoy/like, car cette fois il s'agit d'un état qui pré-existe.</i>
</div>
 
<!-- Onzième question -->
 
<div id="question11">
11. Le maire a dit être un fervent défenseur de la nature. <a href="#"
onclick="toggle('answer11');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer11">
11. The mayor said that he was a staunch nature-lover/ conservationist.
<i>Surtout pas l'infinitif; tell impossible puisque l'interlocuteur n'est pas mentionné.</i>
</div>
 
<!-- Douzième question -->
 
<div id="question12">
12. Le journaliste a renoncé à interroger le maire sur les problèmes d'urbanisme et
lui a posé quelques questions sur l'organisation de l'exposition florale. <a href="#"
onclick="toggle('answer12');">répondre/effacer</a> 
</div>
<div style="display:none" id="answer12">
12. The journalist gave up questioning the mayor on town planning issues and asked
him a few questions on the organization of the flower show.
<i>give up, comme quit et stop est suivi du gérondif</i>
</div>
</body>
</html>

29/01/2017, 06h52
Barcus

Merci Merci Merci mais // ........ On peut ajouter autant de Q/R que nécessaire.....

Merci JReaux62 pour ce code !
En fait je bloque à la cinquième question et je me demande bien pourquoi !
Après Qs[3] et Rs[3], je ne peux pas passer à Qs[4] - RS[4]

Merci encore
29/01/2017, 09h39
Barcus

Pardon, c'est faux

Pardon JReaux62,

Je peux aller plus loin !
Donc la discussion est close.

Merci encore.
29/01/2017, 09h58
NoSmoking

Bonjour,
attention toutefois dans le code de jreaux62 il ne faut pas écrire window.onload = initiate_QR(); mais window.onload = initiate_QR; sans les parenthèses.
29/01/2017, 10h42
Invité

Oups.

Corrigé.