Ouvrir une nouvelle page en cliquant sur une image

**dmoluc** · 28/05/2018, 11h45

Bonjour à tous
je croyais l'opération très simplemais j'ai beau fouillé sur le forum je ne trouve pas ce que je veux.
actuellement j'ouvre une nouvelle page en HTML

Code html :

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

<li><a href="question1.html"> <img src="bouton.gif" /a>

mais je voudrais faire la même chose en javascript afin de pouvoir fermer avec java la page que je vien d'ouvrir

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
<script> "use strict";
 
function verifier() {
  // Qu1b est le input radio correspondant à la bonne réponse
  if (document.getElementById("Qu1b").checked) {
    alert("Bonne réponse");
	window.open("question2.html"); 
	window.close("question1.html");
  }
  else {
    alert("la bonne réponse est 100000 cm");
	window.open("question2.html"); 
	window.close("question1.html");
 
  }
}
 
</script>

j'ai beau tripatouillé l’événement oneclick je n'arrive à rien en cliquant sur mon image.gif

merci pour vos réponses

**lordmyko** · 28/05/2018, 11h59

Bonjour,

En js natif voici la solution :

Code html :

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

<img id="idImage" src="bouton.gif"/>

Code :

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

1
2
3
  document.getElementById("idImage").addEventListener("click", function( event ) {
        verifier();
  }, false);

Par contre je te recommande de lire des cours/tutoriels de conception web, a mon avis tu ne pars pas dans la bonne direction.

Bonne journée

**bonjourajax** · 28/05/2018, 12h20

window.close();

tout seul ca marche bien

**dmoluc** · 28/05/2018, 12h28

merci pour la réponse mais mise à part l'insertion du bouton sur la feuille je n'ai toujours pas compris comment ouvrir la page "question1" en java

**dmoluc** · 28/05/2018, 12h32

windows.close() ne fonctionne que sur une page ayant était ouverte en javascript, enfin c'est ce que j'ai cru comprendre en lisant les posts...

**dmoluc** · 28/05/2018, 13h06

Code html :

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

1
2
3
4
5
6
<li><a <img id="idImage" src="bouton.gif"/>
 
  <script>
  document.getElementById("idImage").addEventListener("click", function( event ), false);
  onclick = "window.open("question1")";return false;
  <script/>

avec ce code j'arrive à ouvrir la question1 mais le code suivant ne ferme pas l'onglet de la question1

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
function verifier() {
  // Qu1b est le input radio correspondant à la bonne réponse
  if (document.getElementById("Qu1b").checked) {
    alert("Bonne réponse");
	window.open("question2.html"); 
	window.close("question1.html");
  }
  else {
    alert("la bonne réponse est 100000 cm");
	window.open("question2.html"); 
	window.close("question1.html");
 
  }
}
 
</script>

le code fonctionne qu'à partir de la question2
quelqu'un a une solution ?
merci

**lordmyko** · 28/05/2018, 14h40

Désolé d'insister mais ce n'est pas la bonne démarche que d'utiliser un fichier html pour chaque question et donc d'ouvrir une nouvelle page et fermer la page actuel a chaque click.

Je comprend que cela à l'air plus simple pour faire la navigation mais en faite c'est l'inverse :

- le code js qui est dans la page question1.html n'est pas 'repris' dans la page question2.html
- l'historique du navigateur ne fonctionne pas (puisque nouvelle page a chaque fois)
- le comportement sera bloquer par certain navigateur ou bloqueur de popup
- pas de possibilité de sauvegarde des réponses et faire un total des points
- et encore pas mal d'autre bonnes raisons...

Donc si tu ne veux pas faire de php mais juste du html et js voici ce que je te propose comme base pour débuter un QCM :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
 
<html>
<head>
  <meta charset="utf-8">
  <title>Test QCM</title>
	<style>
                .qcm{
                        display:none;
                }
        </style>
</head>
 
<body>
 
	<div class="qcm" id="question0">
		<p>Question 1 ?</p>
		<input type="radio" id="reponse1a">42
		<input type="radio" id="reponse1b">64
	</div>
 
	<div class="qcm" id="question1">
		<p>Question 2 ?</p>
		<input type="radio" id="reponse2a">yoda
		<input type="radio" id="reponse2b">dark vador
		<input type="radio" id="reponse2c">obi wan
	</div>
 
	<div class="qcm" id="question2">
		<p>Question 3 ?</p>
		<input type="radio" id="reponse3a">la réponse a
		<input type="radio" id="reponse3b">la réponse d
	</div>
 
	<p id="imageJeValide" style="cursor:pointer;">[image je valide]</p>
 
  <script>
        var questionEnCour = 0;
        var tableauDesReponses = [
                ["reponse1a", "la bonne réponse est 42"], 
                ["reponse2c", "la bonne réponse est obi wan"], 
                ["reponse3b", "la bonne réponse est la réponse d"]
        ];
        //affiche la première question
        document.getElementById("question" + questionEnCour).style.display = "block";
        
        document.getElementById("imageJeValide").addEventListener("click", function( event ) {
                verifier();
        }, false);
        
        function verifier() {
                if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                        alert("Bonne réponse");
                  }
                  else {
                        alert(tableauDesReponses[questionEnCour][1]);
                }
                questionSuivante();
                
        }
        
        function questionSuivante() {
                //test si dernière question
                if(questionEnCour === 2){
                        alert("Le QCM est fini !");
                }
                else{
                        document.getElementById("question" + questionEnCour).style.display = "none";
                        questionEnCour++; //on passe à la question suivante
                        document.getElementById("question" + questionEnCour).style.display = "block";
                }
        }
  </script>
</body>
</html>

**dmoluc** · 28/05/2018, 14h50

merci beaucoup pour cette réponse. J'avais essayer de mettre toutes mes questions sur la même page mais je ne suis pas arrivé à les traitées une à une donc ta solution m'enchante. Je vais donc me concentrer la dessus pour créer le questionnaire avant de me lancer dans la récupération des données ...
encore merci

**dmoluc** · 28/05/2018, 17h38

bien sur je n'ai rien compris pour effectuer les transitions sur la même page, toutes les questions s'affichent en même temps ; j'arrive juste à trouver les bonnes réponses et encore elles s’effacent quand je valide
dur dur quand on n'y connait rien

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
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
 <!doctype html>
 
        <html>
        <head>
          <meta charset="utf-8">
          <title>Test QCU</title>
        	<style>
                        .qcm{
                                display:none;
                        }
                </style>
        </head>
 
        <body>
         <style>
 
  body {
    text-align: center;
  }
 
  h1 {
    color: #585858;
    background-color: #0080FF;
    font-size: 300%;
    padding: 25px;
    margin: 5rem auto;
    display: inline-block;
  }
 
  form {
    margin: 2em auto;
  }
 
  fieldset {
    color: #0080FF;
    background-color: #585858;
    display: inline-block;
    padding: 25px;
    border: none;
  }
 
  h2 {
    font-size: 300%;
    font-weight: normal;
    margin: 1ex 0;
  }
 
  label {
    font-size: 200%;
    display: block;
    text-align: left;
  }
  
  .button-container {
    margin-top: 4em;
  }
 
  </style>
			<div> <h1> Conversion unités de longueur</h1>
 
<form name="forme" onsubmit="forme();">
 
<div/>
 
  <fieldset>
 
  <div>
    <h2>1&#x202F;km est égale à&#x202F;?</h2>
 
    <p>
      <label>
        <input type="radio" name="Q1" id="Qu1a" value="0" /> 10000 m
      </label>
      <label>
        <input type="radio" name="Q1" id="Qu1b" value="1" /> 100000 cm
      </label>
      <label>
        <input type="radio" name="Q1" id="Qu1c" value="0" /> 10 dam
      </label>
      <label>
        <input type="radio" name="Q1" id="Qu1d" value="0" /> je ne sais pas
      </label>
    </p>
    <p class="button-container">
 
      <input type="image" src="bouton.gif" alt="Vérifier"
             onclick="verifier(); return false;" />
    </p>
	<div/>
  </fieldset>
</form>
 
        	<div> <h1>Conversion unités de longueur</h1>
<form name="forme" onsubmit="forme();">
 
<div/>
 
  <fieldset>
  <div>
    <h2>10&#x202F;m sont égaux à&#x202F;?</h2>
 
    <p>
      <label>
        <input type="radio" name="Q2" id="QU2a" value="0" /> 0,1 km
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2b" value="1" /> 0,01 km
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2c" value="0" /> 10 hectomètres
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2d" value="0" /> je ne sais pas
      </label>
    </p>
    <p class="button-container">
 
      <input type="image" src="bouton.gif" alt="Vérifier"
             onclick="verifier(); return false;" />
    </p>
  </fieldset>
</form>
 
 
        	<div>
        		<h1>Conversion unités de Surface</h1>
<form name="forme" onsubmit="forme();">
  <fieldset>
    <h2>1&#x202F;m² est égale à&#x202F;?</h2>
 
    <p>
      <label>
        <input type="radio" name="Q3" id="Qu3a" value="1" /> 10 000 cm²
      </label>
      <label>
        <input type="radio" name="Q3" id="Qu3b" value="0" /> 100 000 cm²
      </label>
      <label>
        <input type="radio" name="Q3" id="Qu3c" value="0" /> 10 dm²
      </label>
      <label>
        <input type="radio" name="Q3" id="Qu3d" value="0" /> je ne sais pas
      </label>
    </p>
    <p class="button-container">
      <!-- <img src="bouton.gif" onclick="verifier();" alt="** PLEASE DESCRIBE THIS IMAGE **" /> -->
      <input type="image" src="bouton.gif" alt="Vérifier"
             onclick="verifier(); return false;" />
    </p>
  </fieldset>
</form>
        	</div>
 
 
 
          <script>
                var questionEnCour = 0;
                var tableauDesReponses = [
                        ["Qu1b", "la bonne réponse est 100000 cm"], 
                        ["Qu2b", "la bonne réponse est 0,01 km"], 
                        ["Qu3a", "la bonne réponse est la réponse 10 000 cm²"]
                ];
                //affiche la première question
                document.getElementById("question" + questionEnCour).style.display = "block";
         
                document.getElementById("bouton").addEventListener("click", function( event ) {
                        verifier();
                }, false);
         
                function verifier() {
                        if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                                alert("Bonne réponse");
                          }
                          else {
                                alert(tableauDesReponses[questionEnCour][1]);
                        }
                        questionSuivante();
         
                }
         
                function questionSuivante() {
                        //test si dernière question
                        if(questionEnCour === 2){
                                alert("Le QCM est fini !");
                        }
                        else{
                                document.getElementById("question" + questionEnCour).style.display = "none";
                                questionEnCour++; //on passe à la question suivante
                                document.getElementById("question" + questionEnCour).style.display = "block";
                        }
                }
          </script>
        </body>
        </html>

**dmoluc** · 29/05/2018, 08h37

merci pour le code, j'étais comme toujours trop presser j'ai tout repris pas à pas et ça fonctionne... encore merci

Ouvrir une nouvelle page en cliquant sur une image

JavaScript

Discussions similaires

Partager

Partager