Bloquer et afficher par paragraphe

Version imprimable

voilà j'ai créer un paragraphe avec ce code

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
 
<div class = "inscription" id = "renseignement">
  <p> <input type="text" style="width: 200px; height: 20px;" placeholder="NOM DE FAMILLE"required /> <input type="text"style="width: 200px; height: 20px;" placeholder="PRENOM"required </p>
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="courriel"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Telephone"required </p>
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="Rue"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Numero de maison" </p>
 
  <p> <input type="text"style="width: 409px; height: 20px;" placeholder="complement adresse"/> 
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="code Postal"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Ville"required </p>
 
  <p><input type="text"style="width: 409px; height: 20px;" placeholder="entreprise"required </p>
 
  <p><input type="text"style="width: 200px; height: 20px;" placeholder="Mot de passe" required/><input type="text"style="width: 200px; height: 20px;" placeholder="Date" required </p> 
 
<Center><p><img src="Valider.png" type="Valider"  id="Valider" style="cursor:pointer ;"></p> <Center/>
 
  </div>
<script>
 
    document.getElementById("renseignement").style.display = "block";
 
</script>

je bataille depuis un moment sans trouver de solution pour que le "block" fonctionne

les codes que je trouve en ligne en général ne sont pas commenter alors j'ai bien du mal à les décriptés

merci d'avance pour vos réponses

31/05/2018, 12h05
ProgElecT

Salut

Il te manque les bases de la syntaxe HTML/javascript.
Ton code

Code:

<p> <input type="text" style="width:200px; height:20px;" placeholder="NOM DE FAMILLE" required /> <input type="text" style="width:200px; height:20px;" placeholder="PRENOM" required </p>

Le code corrigé

Code:

<p> <input type="text" style="width:200px; height:20px;" placeholder="NOM DE FAMILLE" required /> <input type="text" style="width:200px; height:20px;" placeholder="PRENOM" required /></p>

Sur chaque lignes <p>, 2ém innput, il te manque la fermeture de la balise.
01/06/2018, 04h17
bonjourajax

Bonsoir

la balise center est obsolète utilisez text align center par exemple
01/06/2018, 07h21
dmoluc

bonjour, ce matin je m'y remets avec entrain en essayant d'appliquer vos conseils d'experts
pour la balise <center> je vais attendre un peu avant de la modifier, pour une fois que j'avais trouver quelque chose de simple et qui fonctionne ça me déçoit, mais bon il faut bien que je me mette au goût du jour car j'ai attendu trop longtemp pour abandonner le vb6 au profit du vbnet et j'ai créer des application qui ne fonctionnent pas sur tout les pc sans rajouter des fichiers supplémentaire...
pour ce qui est du code java, mon choix est que je veux développer de petite applications web qui si possible tiennent sur une page et tant-pis pour ceux qui ont désactivés java ou qui utilise linux, mon autre raison est que j'ai entendu parler (des rumeurs) que javascrip va être intégré au pack office 2019 ; l'idéal aurait été qu'ils intégre VBA au navigateur mais bon il faut vivre avec son temps et malgré mon âge avancé je vais essayer de suivre le mouvement.

la ppetite application que j'essais de dévellopper est un QCU de 40 questions la partie question affichage une aprés l'autre fonctionne grace à vos aide, j'en suis maintenant à la partie inscription que j'ai réussis à afficher en premier avant les questions
il faut maintenant que je trouve une solution pour que si les champs obligatoire du questionnaire sont remplis + le mot de passe valide, je cache le formulaire inscription et que j'affiche la première question, ensuite ià chaque question je vais remplir un tableau résultat en indicant si la réponse est vrait ou si elle est fausse, puis le questionnaire terminer envoyer la partie inscription + le tableau des résultats à une adresse courriel

je sais qu'il me reste énormément de travail car les bases ne sont pas encore là, mais à mon âge on apprend que de ces erreurs, le problème est que je n'ai que vos bonnes volontés pour me corriger, alors je vais avoir encore plein de question que je n’arriverais pas à résoudre tout seul, alors à plus tard et encore merci
01/06/2018, 08h44
NoSmoking

Bonjour,
commençons par le début

• java !== javascript, ce sont deux langage différents.

• Comme tu débutes en HTML/CSS/JS alors prend tout de suite les bonnes habitudes, sépare les couches.

- HTML valide, il existe des outils pour le tester comme : https://validator.w3.org/nu/ ;
- CSS dans la partie <style></style> de ta page, ou dans une feuille de style linker, donc exit le style dans les balises d'autant que tu verras rapidement que ton code est simplifiable donc au final plus lisisble ;
- JS dans la partie <script></script> de ta page, ou dans un fichier séparé que tu inclus.

• J'ai peur qu'un QCM de 40 questions, sur une même page, ne soit un peu fastidieux.

• Procède dans l'ordre et ne mélange par les différents problèmes que tu va rencontrer, un formulaire de contact implique du code côté serveur, une véritable vérification des questions peut également passer par du code serveur, l'enregistrement des résultats également, il te font donc bien appréhender ce que tu veux faire et ne pas tirer dans tout les sens.

Il y a pas mal de boulot à faire donc !

le div formulaire d'inscription j'ai essyé de corriger les erreurs de syntaxe

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div class = "inscription" id = "renseignement" />
  <p> <div class = "inscription" id = "NomDeFamille"><input type="text" style="width: 200px; height: 20px;" placeholder="NOM DE FAMILLE"required /> <input type="text"style="width: 200px; height: 20px;" placeholder="PRENOM"required /> </p>
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="courriel"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Telephone"required /> </p>
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="Rue"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Numero de maison" /> </p>
 
  <p> <input type="text"style="width: 409px; height: 20px;" placeholder="complement adresse"/> 
 
  <p> <input type="text"style="width: 200px; height: 20px;" placeholder="code Postal"required /> <input type="text" style="width: 200px; height: 20px;"placeholder="Ville"required /> </p>
 
  <p><input type="text"style="width: 409px; height: 20px;" placeholder="entreprise"required </p>
 
  <p><input type="text"style="width: 200px; height: 20px;" placeholder="Mot de passe" required/><input type="text"style="width: 200px; height: 20px;" placeholder="Date" required /> </p> 
 
 
<Center><p><img src="valider.png" type="verifier1"  id="verifier1" style="cursor:pointer ;"></p> <Center/>
  </div>

j'arrive bien à l'afficher puis le faire disparaitre quand je click sur mon image qui fait office de bouton

ça c'est le premier div de la première question, il y en a 40 comme celui là mais je n'arrive pas à afficher la première question

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="qcm" id="question0"/>
		<h2>Question 1/40</h2>
		<center><h1>10 m sont équivalent à ?</h1><Center/>
		<h2>
		<p><input type="radio" name = question0 id="reponse1a">0,10 kilométres</p>
		<p><input type="radio" name = question0 id="reponse1b">0,01 kilométres</p>
		<p><input type="radio" name = question0 id="reponse1c">100 centimétres</p>
		<p><input type="radio"name = question0  id="reponse1d">Je ne sais pas !</p>
		</h2>
		<Center><p><img src="imageJeValide.png" type="imageJeValide"  id="imageJeValide" style="cursor:pointer ;"></p> <Center/>//j'ai inclu l'image dans chaque div sinon j'avais 2 bouton à l'affichage du formulaire
	</div>

ça c'est le tableau des réponses 40 lignes et 2 colonnes

Code:

1
2
3
4
5
6
7
8
9
10
 
<div class ="VF" id="TabVF">
		<table cellspacing="0" cellpadding="0" border="1" bgcolor="white" bordercolor="blue" width="80%" align="center" />
		<caption> <H2>Résultat QCU</H2> </caption>
<tr>
<td><div id="L1" /></td>//ligne1, colonne 1
<td width="90%" bgcolor="white" ></td>
<td><div id="C1"></div></td>ligne1, colonne 2
<td width="10%" bgcolor="white"></td>
</tr>

et voici le script commenté avec ce qui fonctionne et ce qui ne fonctionne pas

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
 
 <script>
        var questionEnCour = 0;//variable pour indiquer le numéro des id des questions
		var Num = 0;//variable pour indiquer le numéro de ligne via leur id dans le tableau des résultats
        var tableauDesReponses = [
                ["reponse1b", "la bonne réponse est 0,10 km"], 
                ["reponse2b", "la bonne réponse est 100 hm"], 
                ["reponse3c", "la bonne réponse est 1 hectare"],
				["reponse4b", "la bonne réponse est 10 000 litres"],
				["reponse5c", "la bonne réponse est 10 mililitres"],
				["reponse6b", "la bonne réponse est 10 quintaux"],
				["reponse7b", "la bonne réponse est 1 000 tonnes"],
				["reponse8b", "la bonne réponse est 90 degréd"],
				["reponse9c", "la bonne réponse est 360 degrés"],
				["reponse10b", "la bonne réponse est 2,415 heures"],
				["reponse11b", "la bonne réponse est 0,5 min"],
				["reponse12c", "la bonne réponse est 200 m²"],
				["reponse13c", "la bonne réponse est 28,28 m m²"],
				["reponse14b", "la bonne réponse est 400 m²"],
				["reponse15b", "la bonne réponse est 125,66 m"],
				["reponse16a", "la bonne réponse est 300 m"],
				["reponse17a", "la bonne réponse est 12 m³"],
				["reponse18a", "la bonne réponse est 50 m"],
				["reponse19b", "la bonne réponse est 24 cm"],
				["reponse20c", "la bonne réponse est 1/50"],
				["reponse21a", "la bonne réponse est essentiellement planimétrique"],
				["reponse22a", "la bonne réponse est essentiellement altimétrique"],
				["reponse23b", "la bonne réponse est par rapport au niveau moyen de la mer méditéranée"],
				["reponse24b", "la bonne réponse est la lecture arrière"],
				["reponse25a", "la bonne réponse est 100.40"],
				["reponse26c", "la bonne réponse est une pelle hydraulique"],
				["reponse27a", "la bonne réponse est un bouteur"],
				["reponse28b", "la bonne réponse est un tombereau"],
				["reponse29a", "la bonne réponse est un finisseur"],
				["reponse30c", "la bonne réponse est une niveleuse"],
				["reponse31b", "la bonne réponse est la largeur du godet"],
				["reponse32a", "la bonne réponse est 10 %"],
				["reponse33c", "la bonne réponse l'amiante ciment"],
				["reponse34a", "la bonne réponse la chaux vive"],
				["reponse35b", "la bonne réponse est 130 °C"],
				["reponse36b", "la bonne réponse est une couche d'accrochage"],
				["reponse37a", "la bonne réponse est toutes celles qui sont fournies par l'entreprise"],
				["reponse38c", "la bonne réponse est 100 m"],
				["reponse39b", "la bonne réponse est 10 m"],
				["reponse40a", "la bonne réponse est que l'on a respectées les exigences du client"]
 
 
        ];
 
        //affiche le formulaire d'inscription
		document.getElementById("renseignement").style.display = "block";
 
         // si click sur l'image appelle la fonction controle
		document.getElementById("verifier1").addEventListener("click", function( event ) {
               controle();		
        }, false);
 
 
		//une fois les questions affichées si click sur l'image appelle la fonction verifier
        document.getElementById("imageJeValide").addEventListener("click", function( event ) {
                verifier();		
        }, false);
 
		 function controle()
		 {				
						document.getElementById("renseignement").style.visibility = "hidden";//fait disparaitre le formulaire d'inscription
                        document.getElementById("question0" ).style.visibility = "visible";//devrait faire apparaitre la première question mais la page est vide
 
 
                  }
 
        function verifier() {
				//siréponse juste
                if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                        alert("Bonne réponse");//renseigne le candidat sur ça réponse
						window.inscription.document.getElementById("L" + Num ).document.write = "question1"; // devrait écrire dans le tableau résultat la question posée à la ligne idiquée par la variable num 
					// les id des cellules sont L pour première cellule + numéro de la ligne Num,  par exemple C1 pour la deuxième colonne ligne 1
					window.inscription.document.getElementById("L" + Num ).document.write = Vrai;// devrait écrire vrait
                  }
				  //si réponse fausse
                  else {
                        alert(tableauDesReponses[questionEnCour][1]);//affiche la bonne réponse qui est renseignée dans le tableau des réponses
						window.inscription.document.getElementById("L" + Num ).document.write = "question1"; // essai d'écrire la question mais ne fonctionne pas
						window.inscription.document.getElementById("C" + Num ).document.write = Faux;// devrait écrire vrait
                  }
                }		
               questionSuivante();//appelle la fonction question suivante
 
        }
 
 
 
 
        function questionSuivante() {
                //test si dernière question mais ça fonctionne pas
                if(questionEnCour === 39){
                        alert("Le QCU est fini !");//il faudra que je remplace l'alerte par l'appelle d'une fonction qui m'enverra les résultats par mail et là je ne sais pas encore par ou commencer
                }
                else{
                        document.getElementById("question" + questionEnCour).style.display = "none";//fait disparaitre la question validée
                        questionEnCour++; //on passe à la question suivante
                        document.getElementById("question" + questionEnCour).style.display = "block";//affiche la question suivante
                }
        }
  </script>

se serait sympa de m'aider un peu pour que je puisse corriger mes erreurs de syntaxes, merci d'avance

Salut

@NoSmoking :ccool:, pas pour lui passer de la pommade, mais il a résumé se que je pensai.

@dmoluc
Je viens aussi du VB (VB à VB6, VBA et VBScript) et plus vieux du TurboPascal ainsi que du langage Basic pour composant Pico/Micro controleur.
Cela fait maintenant environ 18 mois que je me suis mis au langage pour le web.
VB.net, pas bon pour moi, trop proche du VB que j'ai pratiqué depuis des années et a la fois trop différent, du coup j'ai commencé par HTML puis très vite JavaScript et CSS, depuis quelque mois, PHP.

La structuration de ses langages et bien différentes du VB, mais reste toutes fois logique au bout de quelque temps.

J'avais préparé cela hier, je te le met, simplement pour te prouver que bien que pas écrit dans les règles de l'art :pastaper:, on parvient assez vite à se faire plaisir avec un petit programme perso.
Code du programme de visualisation principal

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Quiz</title>
		<script src="Quiz1.js"></script> <!-- chargement du questionnaire -->
	</head>
	<body>
		<h2 id="titre"></h2>
		<h1 id="question"></h1>
		<h3>
		<p><input type="radio" name="radio" id="reponsea"><label for="reponsea" id="repa" name="reponsea"></label></p>
		<p><input type="radio" name="radio" id="reponseb"><label for="reponseb" id="repb" name="reponseb"></label></p>
		<p><input type="radio" name="radio" id="reponsec"><label for="reponsec" id="repc" name="reponsec"></label></p>
		<p><input type="radio" name="radio" id="reponsed"><label for="reponsed">Je ne sais pas !</label></p>
		</h3>
		<button id="valide" onclick="verifier()">verifier</button>
	<script>
                "use strict";
                let numquestion = 0 // le tableau tblquiz commence à l'indice 0
                let score = 0;
                let nbrradio = document.getElementsByTagName('input'); // tableau d'objet des inputs radio
                newquestion(); // initialisation, recupération du 1er questionnaire au chargement du programme
                
                function newquestion()
                {
                        //tblquiz.length égal nombre de question contenu dans le tableau tblquiz, de 1 à ???
                        if (numquestion < tblquiz.length)// temp que l'on n'est pas arrivée à la fin du questionnaire
                        {
                                for (let i = 0; i < nbrradio.length; i++) {nbrradio[i].checked = false;}// deselection de chaque input radio
                                // affichage du titre, de la question et des propositions de réponses
                                document.getElementById('titre').innerHTML="Question " + (numquestion+1) + "/" + (tblquiz.length);
                                document.getElementById('question').innerHTML=tblquiz[numquestion].question;
                                document.getElementById('repa').innerHTML=tblquiz[numquestion].reponsea;
                                document.getElementById('repb').innerHTML=tblquiz[numquestion].reponseb;
                                document.getElementById('repc').innerHTML=tblquiz[numquestion].reponsec;
                        }else{// si fin du questionnaire, afficher le score
                                alert("Votre score: " + score + " sur " + tblquiz.length + " questions");
                                document.getElementById('valide').disabled = 'disabled';
                        }
                }
 
                function verifier()  {
                        if (document.getElementById(tblquiz[numquestion].idxrepok).checked)
                        {// tblquiz[numquestion].idxrepok est l'index (id) du bouton radio ayant poir libellé la bonne réponse
                                alert("Bonne réponse pour la question N°" + (numquestion+1));
                                score++;
                        }else{
                                if (document.getElementById("reponsed").checked) // je ne sais pas
                                {
                                        alert("La réponse est " + document.getElementsByName(tblquiz[numquestion].idxrepok)[0].innerHTML);
                                }else{
                                        alert("Vous n'avez pas répondu ou votre réponse est fausse,\n la réponse est " + document.getElementsByName(tblquiz[numquestion].idxrepok)[0].innerHTML);
                                }
                        }
                        numquestion++; //incrémantation de 1 pour le tour suivant
                        newquestion(); //appel pour affichage de la nouvelle question, ou  afficher le score si numquestion = dernière question + 1
                }
        </script>
	</body>	
</html>

Code des 2 fichiers externes utilisés par le programme principal (ligne 6 <script src="Quiz1.js"></script>).
Quiz1.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Quiz1.js
// tblquiz est un tableau d'array
// chaque array représente la question, les réponse possible et l'index (id) du bouton radio 
		let tblquiz = [
				{question:"La qualité sur un chantier signifie ?", // intitulé question posée
					reponsea:"que l'on a respectées les exigences du client", // 1er réponse proposée
					reponseb:"que l'on a réalisé un chantier propre et solide", // 2éme réponse proposée
					reponsec:"Que l'on a gagné plus d'argent que prévu", // 3éme réponse proposée
					idxrepok:"reponsea"}, // réponse juste, qui est affichée à l'id "reponsea" de l'input radio
				{question:"30 sec représentent ?",
					reponsea:"0,30 min",
					reponseb:"0,50 min",
					reponsec:"1/2 heures",
					idxrepok:"reponseb"},
				{question:"Quelle est l'altitude du Mont-Blanc ?",
					reponsea:"4807m",
					reponseb:"3807m",
					reponsec:"4907m",
					idxrepok:"reponsea"}
		]

Quiz2.js

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
// Quiz2.js
// tblquiz est un tableau d'array
// chaque array représente la question, les réponse possible et l'index (id) du bouton radio 
		let tblquiz = [
				{question:"1 tonne est égale à ?", // intitulé question posée
					reponsea:"1000 kg", // 1er réponse proposée
					reponseb:"100 kg", // 2éme réponse proposée
					reponsec:"10000 kg", // 3éme réponse proposée
					idxrepok:"reponsea"}, // réponse juste, qui est affichée à l'id "reponsea" de l'input radio
				{question:"100 grades sont équivalents à ?",
					reponsea:"180 degrés",
					reponseb:"90 degrés",
					reponsec:"45 degrés",
					idxrepok:"reponseb"},
				{question:"Année premier pas sur la lune ?",
					reponsea:"1961 Iouri Gagarine",
					reponseb:"1966 Buzz Aldrin",
					reponsec:"1966 Neil Armstrong",
					idxrepok:"reponsec"}
				{question:"1 M³ est égale à ?",
					reponsea:"100 litres",
					reponseb:"1000 dm³",
					reponsec:"1000 cm³",
					idxrepok:"reponseb"}
				{question:"10 000 m² sont égales à ?",
					reponsea:"1 km²",
					reponseb:"1000 are",
					reponsec:"1 hectare",
					idxrepok:"reponsea"}
				{question:"Année du premier ordinateur personnel ?",
					reponsea:"1977 IBM",
					reponseb:"1911 MICROSOFT",
					reponsec:"1964 Olivetti",
					idxrepok:"reponsec"}
				{question:"transformer 2h24min54sec en heures ?",
					reponsea:"2,415 h",
					reponseb:"2,26 h",
					reponsec:"2,249 h",
					idxrepok:"reponsea"}
		]

Je présent/suppute qu'il serait possible de faire le choix de l'include <script src= en utilisant localStorage, directement depuis le programme principal.

Une chose qui me parait des plus importante, debuguer sont code à l'aide de la touche F12 (sous FireFox), car si comme moi tu utilises un éditeur basic (Notepad++ par exemple) tu n'as qu'une aide limitée, donc tu peux vérifier avec l'aide de ton navigateur.

Bon courage, je retourne dans mon apprentissage de PHP/MySQL :pc:

01/06/2018, 09h53
ProgElecT

https://www.developpez.net/forums/f23/javascript/general-javascript/

Re

dmoluc, toujours pour le debug, quand tu postes un code, si le langage utilisé n'est pas celui du forum, ajoute le nom du langage dans la balise code,
exemple:
Forum general-javascript code HTML, [CODE=HTML] ici le code[/CODE]
Forum CSS code JavaScript, [CODE=JavaScript] [/CODE]
Cela permet d'avoir la bonne colorisation, et donc de voir certaine faute de syntaxe dans le code, exemple ligne 13 de ton code dernier postage, il y a une faute, on le vois à la colorisation anormale.
02/06/2018, 09h28
bonjourajax

Conseil pour une page de 40 questions vaut mieux découper en plusieurs fichiers séparés

Bonjour,
peu être que BonjourAjax à raison et que le code est trop long car je n'arrive à rien avec javascrit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div class = "qcm" id = "renseignement" name = "renseignement1"> 
 
  <p> <input id = "NomDeFamille" type="text" style="width: 200px; height: 20px;" placeholder="NOM DE FAMILLE"required > <input id = "NomDeFamille" type="text"style="width: 200px; height: 20px;" placeholder="PRENOM"required > </p>
 
  <p> <input id = "courriel" type="text"style="width: 200px; height: 20px;" placeholder="courriel"required /> <input id = "Tel" type="text" style="width: 200px; height: 20px;"placeholder="Telephone"required /> </p>
 
  <p> <input id = "rue" type="text"style="width: 200px; height: 20px;" placeholder="Rue"required /> <input id = "Numero" type="text" style="width: 200px; height: 20px;"placeholder="Numero de maison" /> </p>
 
  <p> <input type="text"style="width: 409px; height: 20px;" placeholder="complement adresse" /></p> 
 
  <p> <input id = "CodePostal" type="text"style="width: 200px; height: 20px;" placeholder="code Postal"required /> <input id = "Ville" type="text" style="width: 200px; height: 20px;"placeholder="Ville"required /> </p>
 
  <p><input type="text"style="width: 409px; height: 20px;" placeholder="entreprise"required /> </p>
 
  <p><input id = "motdepasse" type="text"style="width: 200px; height: 20px;" placeholder="Mot de passe" required /><input type="text"style="width: 200px; height: 20px;" placeholder="Date" required /> </p> 
 
 
<Center><p><img src="valider.png" type="verifier1"  id="verifier1" style="cursor:pointer ;" ></p> </Center>
 
  </div>

ça c'est le premier affichage j'essaie de bloquer son affichage avec

Code:

document.getElementById("renseignement").style.display = "block";

mais rien ne se passe, alors comme ça fonctionner à un moment j'essaie de bloquer l'affichage à la première question

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
 
<div class="qcm" id="questions0">
		<h2>Question 1/40</h2>
		<center><h1>10 m sont équivalent à ?</h1></Center>
		<h2>
		<p><input type="radio" name = "question0" id="reponse1a" >0,10 kilométres</p>
		<p><input type="radio" name = "question0" id="reponse1b" >0,01 kilométres</p>
		<p><input type="radio" name = "question0" id="reponse1c" >100 centimétres</p>
		<p><input type="radio"name = "question0"  id="reponse1d" >Je ne sais pas !</p>
		</h2>
		<Center><p><img src="imageJeValide.png" type="imageJeValide"  id="imageJeValide" style="cursor:pointer ;"></p> <Center/>
	</div>
 
	<div class="qcm" id="questions1">
	<h2>Question 2/40</h2>
		<center><h1>10 km sont équivalent à ?</h1></Center>
		<h2>
		<p><input type="radio" name = "question1" id="reponse2a">1000 métres</p>
		<p><input type="radio" name = "question1" id="reponse2b">100 hectométres</p>
		<p><input type="radio" name = "question1" id="reponse2c">100 décamétres</p>
		<p><input type="radio" name = "question1" id="reponse2d">Je ne sais pas !</p>
		</h2>
		<Center><p><img src="imageJeValide.png" type="imageJeValide"  id="imageJeValide" style="cursor:pointer ;"></p> <Center/>
	</div>

il y en a 40 comme ces deux première. j’essaie d'utiliser

Code:

document.getElementById("questions0").style.display = "block";

mais bien sur rien ne se passe
ensuite j'ai un tableau de 40 lignes et 2 colonnes

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
 
<div class ="qcm" id="TabVF">
 <table  cellpadding="0" border="1" bgcolor="white" bordercolor="blue" width="80%" align="center;"> 
		<caption> <H2>Résultat QCU</H2> </caption>
<tr>
<td><div id="L1"></td>
<td width="90%" bgcolor="white">
</td></div>
<td><div id="C1"></td>
<td width="10%" bgcolor="white">
</td></div>
</tr>
 
<tr>
<td><div id="L2"></td>
<td width="90%" bgcolor="white">
</td></div>
<td><div id="C2"></td>
<td width="10%" bgcolor="white">
</td></div>
</tr>
//pour le début et qui fini comme ça
 
<tr>
<td><div id="L40"></td>
<td width="90%" bgcolor="white">
</td></div>
<td><div id="C40"></td>
<td width="10%" bgcolor="white">
</td></div>
</tr>
 
 
</table>
	</div>

j'ai essayé de mettre la propriété visibility en hidden mais la aussi rien ne se passe tout s'affiche le formulaire d'inscription, toutes les questions et le tableau bien sur
j'ai beau chercher les erreurs et même avec la touche f12 je n'arrive pas à les voire.
Est-ce le code qui est trop long ou que j'ai une erreur de syntaxe en html je ne comprend pas.
merci pour vos réponses

03/06/2018, 17h41
bonjourajax

Bonjour
Le probleme n'est pas que la page est trop volumineuse (je disais de créer plusieurs fichiers pour mieux t'y retrouver)
Par contre pour cacher l'élément c'est

Code:

document.getElementById('element').style.display="none";
03/06/2018, 18h19
dmoluc

merci pour la syntaxe mais dans le script rien ne se passe pour empêcher d'afficher les élément j'applique le styledisplay = none dans le CCS à tous ce qui est de class qcm
le problème est qu'aucun script n'ont l'air de vouloir fonctionner alors pour afficher la suite mystère.Je suppose qu'il n'y a pas moyen de faire tourner le script ligne par ligne comme avec vba ?
03/06/2018, 22h25
bonjourajax

Voila la syntaxe correcte:

Code:

<script type="text/javascript" src="Quiz1.js"></script>

si ca ne marche toujours pas il faut utiliser le script ligne par ligne

bonjour
je n'y arrive toujours pas mais il y a du progrés car j'arrive à afficher la première question et passé à la suivante : la première question se masque bien mais c'est la deuxième qui ne s'affiche pas
voici le code java complet

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
 
<script>
 
 document.getElementById('reponse0a').style.display="none";
        var questionEnCour = 0;
		//var Num = 1;//variable pour indiquer le numéro de ligne via leur id dans le tableau des résultats
        var tableauDesReponses = [
		//réponse0a ne peu pas être cohé car je l'ai masquer et là ça fonctionne
		//le tableau ci dessous renvoit bien les réponses
				["reponse0a", "Vous allez commencer le QCU, 4 réponses, un seul choix possible et quarante questions"],
                ["reponse1b", "la bonne réponse est 0,10 km"], 
                ["reponse2b", "la bonne réponse est 100 hm"], 
                ["reponse3c", "la bonne réponse est 1 hectare"],
				["reponse4b", "la bonne réponse est 10 000 litres"],
				["reponse5c", "la bonne réponse est 10 mililitres"],
				["reponse6b", "la bonne réponse est 10 quintaux"],
				["reponse7b", "la bonne réponse est 1 000 tonnes"],
				["reponse8b", "la bonne réponse est 90 degrés"],
				["reponse9c", "la bonne réponse est 360 degrés"],
				["reponse10b", "la bonne réponse est 2,415 heures"],
				["reponse11b", "la bonne réponse est 0,5 min"],
				["reponse12c", "la bonne réponse est 200 m²"],
				["reponse13c", "la bonne réponse est 28,28 m m²"],
				["reponse14b", "la bonne réponse est 400 m²"],
				["reponse15b", "la bonne réponse est 125,66 m"],
				["reponse16a", "la bonne réponse est 300 m"],
				["reponse17a", "la bonne réponse est 12 m³"],
				["reponse18a", "la bonne réponse est 50 m"],
				["reponse19b", "la bonne réponse est 24 cm"],
				["reponse20c", "la bonne réponse est 1/50"],
				["reponse21a", "la bonne réponse est essentiellement planimétrique"],
				["reponse22a", "la bonne réponse est essentiellement altimétrique"],
				["reponse23b", "la bonne réponse est par rapport au niveau moyen de la mer méditéranée"],
				["reponse24b", "la bonne réponse est la lecture arrière"],
				["reponse25a", "la bonne réponse est 100.40"],
				["reponse26c", "la bonne réponse est une pelle hydraulique"],
				["reponse27a", "la bonne réponse est un bouteur"],
				["reponse28b", "la bonne réponse est un tombereau"],
				["reponse29a", "la bonne réponse est un finisseur"],
				["reponse30c", "la bonne réponse est une niveleuse"],
				["reponse31b", "la bonne réponse est la largeur du godet"],
				["reponse32a", "la bonne réponse est 10 %"],
				["reponse33c", "la bonne réponse l'amiante ciment"],
				["reponse34a", "la bonne réponse la chaux vive"],
				["reponse35b", "la bonne réponse est 130 °C"],
				["reponse36b", "la bonne réponse est une couche d'accrochage"],
				["reponse37a", "la bonne réponse est toutes celles qui sont fournies par l'entreprise"],
				["reponse38c", "la bonne réponse est 100 m"],
				["reponse39b", "la bonne réponse est 10 m"],
				["reponse40a", "la bonne réponse est que l'on a respectées les exigences du client"]
 
 
        ];
 
         //affiche la première question
 
		 // affichage du premier block qui fonctionne
				document.getElementById("question" + questionEnCour).style.display = "block";
 
         //le bouton aussi fonctionne et appelle bien la question suivante et fonctionne pour toutes les questions
                document.getElementById("imageJeValide").addEventListener("click", function( event ) {
                        verifier();
                }, false);
 
 
				//fonction qui marche
                function verifier() {
                        if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                                alert("Bonne réponse");
                          }
                          else {
                                alert(tableauDesReponses[questionEnCour][1]);
                        }
                        questionSuivante();
 
                }
         //il y a un bug quelque part dans cette fonction car je n'aarive pas à afficher les questions, seul le bouton et le titre sont affiché
                function questionSuivante() {
                        //test si dernière question
                        if(questionEnCour === 40){
                                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";//j'ai essayé de changer la variable questionencour en la passant à 1 mais sans succés
                        }
                }
          </script>

si quelqu'un a une idée pour le débloquer, merci

04/06/2018, 10h08
bonjourajax

C'est surement parce que l'id est questions avec un s

Code:

('questions'+questionencour)
04/06/2018, 10h17
dmoluc

super merci, décidément il va falloir que je change mes lunettes 8O
04/06/2018, 10h18
bonjourajax

ahah
désfois c'est un truc tout bête ca m'arrive aussi

j'ai corrigé tout le code qui était en rouge dans mozilla, depuis je n'arrive plus à afficher mes questions ; elles sont bien masquées par ce code

Code:

1
2
3
4
5
<style type="text/css">
                .qcm{
                                display:none;
                        }
</style>

dans le head

j'ai beau cherché ou je me suis trompé, ni mozilla ni moi ne trouvont rien dans le html

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
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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
 <body>
 
 
<center>
 
<img src="logo.jpg"/>
 
<h1>Test Chef d'Equipe TP </h1>
 
 
<div class = "qcm" id = "questions0" name = "question"> 
 
  <p> <input id="NomDeFamille" type="text" style="width: 200px; height: 20px;" placeholder="NOM DE FAMILLE" required /> <input id = "Prenom" type="text" style="width: 200px; height: 20px;" placeholder="PRENOM" required /></p>
 
  <p> <input id="courriel" type="text" style="width: 200px; height: 20px;" placeholder="courriel" required /> <input id="Tel" type="text" style="width: 200px; height: 20px;" placeholder="Telephone" required /></p>
 
  <p> <input id="rue" type="text" style="width: 200px; height: 20px;" placeholder="Rue" required /> <input id="Numero" type="text" style="width: 200px; height: 20px;" placeholder="Numero de maison" /></p>
 
  <p> <input type="text" style="width: 409px; height: 20px;" placeholder="complement adresse" /></p> 
 
  <p> <input id="CodePostal" type="text" style="width: 200px; height: 20px;" placeholder="code Postal" required > <input id="Ville" type="text" style="width: 200px; height: 20px;" placeholder="Ville" required /> </p>
 
  <p><input type="text" style="width: 409px; height: 20px;" placeholder="entreprise" required /> </p>
 
  <p><input id="motdepasse" type="text" style="width: 200px; height: 20px;" placeholder="Mot de passe" required /><input type="text" style="width: 200px; height: 20px;" placeholder="Date" required /> </p> 
 
	<p><input type="radio" name = "question0" id="reponse0a" ></p>
 
  </div>
 
 
 
	<div class="qcm" id="questions1">
		<h2>Question 1/40</h2>
		<h1>10 m sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question0" id="reponse1a" >0,10 kilométres</p>
		<p><input type="radio" name = "question0" id="reponse1b" >0,01 kilométres</p>
		<p><input type="radio" name = "question0" id="reponse1c" >100 centimétres</p>
		<p><input type="radio" name = "question0"  id="reponse1d" >Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions2">
	<h2>Question 2/40</h2>
		<h1>10 km sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question1" id="reponse2a">1000 métres</p>
		<p><input type="radio" name = "question1" id="reponse2b">100 hectométres</p>
		<p><input type="radio" name = "question1" id="reponse2c">100 décamétres</p>
		<p><input type="radio" name = "question1" id="reponse2d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions3">
	<h2>Question 3/40</h2>
		<h1>10 000 m² sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question2" id="reponse3a">10 hectares</p>
		<p><input type="radio" name = "question2"  id="reponse3b">100 ares</p>
		<p><input type="radio" name = "question2" id="reponse3c">1 hectares</p>
		<p><input type="radio" name = "question2" id="reponse3d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions4">
	<h2>Question 4/40</h2>
		<h1>10 m³ sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question3" id="reponse4a">1000 décimétres-cube</p>
		<p><input type="radio" name = "question3" id="reponse4b">10 000 litres</p>
		<p><input type="radio" name = "question3" id="reponse4c">1 000 litres</p>
		<p><input type="radio" name = "question3" id="reponse4d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions5">
	<h2>Question 5/40</h2>
		<h1> 10 cm³ sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question4" id="reponse5a">10 centilitres</p>
		<p><input type="radio" name = "question4"  id="reponse5b">100 mililitres</p>
		<p><input type="radio" name = "question4" id="reponse5c">10 mililitres</p>
		<p><input type="radio" name = "question4" id="reponse5d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions6">
	<h2>Question 6/40</h2>
		<h1> 100 kg sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question5" id="reponse6a">1 tonne</p>
		<p><input type="radio" name = "question5" id="reponse6b">10 quintaux</p>
		<p><input type="radio" name = "question5" id="reponse6c">0.01 tonne </p>
		<p><input type="radio" name = "question5" id="reponse6d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions7">
	<h2>Question 7/40</h2>
		<h1>1 gigatonne est équivalente à ?</h1>
		<img src="bombe.jpg"/>
		<h2>
		<p><input type="radio" name = "question6" id="reponse7a">100 tonnes</p>
		<p><input type="radio" name = "question6"  id="reponse7b">1 000 tonnes</p>
		<p><input type="radio" name = "question6"  id="reponse7c">10 000 tonnes </p>
		<p><input type="radio" name = "question6"  id="reponse7d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions8">
	<h2>Question 8/40</h2>
		<h1>100 grades sont équivalent à ?</h1>
		<h2>
		<p><input type="radio" name = "question7" id="reponse8a">100 degrés</p>
		<p><input type="radio" name = "question7" id="reponse8b">90 degrés</p>
		<p><input type="radio" name = "question7" id="reponse8c">45 degrés </p>
		<p><input type="radio" name = "question7" id="reponse8d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions9">
	<h2>Question 9/40</h2>
		<h1>400 grades sont équivalent à ?</h1>
		<img src="rapporteur.gif"/>
		<h2>
		<p><input type="radio" name = "question8" id="reponse9a">180 degrés</p>
		<p><input type="radio" name = "question8" id="reponse9b">260 degrés</p>
		<p><input type="radio" name = "question8" id="reponse9c">360 degrés </p>
		<p><input type="radio" name = "question8" id="reponse9d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions10">
	<h2>Question 10/40</h2>
		<h1>2 h 24 min 54 sec représentent?</h1>
		<img src="horloge.gif"/>
		<h2>
		<p><input type="radio" name = "question9" id="reponse10a">2,780 heures</p>
		<p><input type="radio" name = "question9" id="reponse10b">2,415 heures</p>
		<p><input type="radio" name = "question9" id="reponse10c">2,2454 heures</p>
		<p><input type="radio" name = "question9" id="reponse10d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
 
	<div class="qcm" id="questions11">
	<h2>Question 11/40</h2>
		<h1>30 sec représentent?</h1>
		<h2>
		<p><input type="radio" name = "question10" id="reponse11a">0,30 min</p>
		<p><input type="radio" name = "question10" id="reponse11b">0,50 min</p>
		<p><input type="radio" name = "question10" id="reponse11c">1/2 heures</p>
		<p><input type="radio" name = "question10" id="reponse11d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions12">
	<h2>Question 12/40</h2>
 
		<h1>Quelle est la surface du triangle ?</h1>
		<img src="triangle.jpg"/>
		<h2>
		<p><input type="radio" name = "question11" id="reponse12a">40 m²</p>
		<p><input type="radio" name = "question11" id="reponse12b">400 m²</p>
		<p><input type="radio" name = "question11" id="reponse12c">200 m²</p>
		<p><input type="radio" name = "question11" id="reponse12d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions13">
 
	<h2>Question 13/40</h2>
		<h1>Quelle est la longueur de l'hypotènuse du triangle ?</h1>
		<img src="triangle.jpg"/>
		<h2>
		<p><input type="radio" name = "question12" id="reponse13a">30 m</p>
		<p><input type="radio" name = "question12" id="reponse13b">40 m</p>
		<p><input type="radio" name = "question12" id="reponse13c">28.28 m</p>
		<p><input type="radio" name = "question12" id="reponse13d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions14">
 
	<h2>Question 14/40</h2>
		<h1>Quelle est la surface du Cercle ?</h1>
	<img src="cercle.jpg"/>
		<h2>
		<p><input type="radio" name = "question13" id="reponse14a">40 m²</p>
		<p><input type="radio" name = "question13" id="reponse14b">400 m²</p>
		<p><input type="radio" name = "question13" id="reponse14c">200 m²</p>
		<p><input type="radio" name = "question13" id="reponse14d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions15">
 
	<h2>Question 15/40</h2>
		<h1>Quelle est la longueur du périmétre du cercle ?</h1>
		<img src="cercle.jpg"/>
		<h2>
		<p><input type="radio" name = "question14" id="reponse15a">400 m</p>
		<p><input type="radio" name = "question14" id="reponse15b">125,66 m</p>
		<p><input type="radio" name = "question14" id="reponse15c">200 m</p>
		<p><input type="radio" name = "question14" id="reponse15d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions16">
 
	<h2>Question 16/40</h2>
		<h1>Quelle est la surface du Cercle ?</h1>
		<img src="trapeze.jpg"/>
		<h2>
		<p><input type="radio" name = "question15" id="reponse16a">300 m²</p>
		<p><input type="radio" name = "question15" id="reponse16b">400 m²</p>
		<p><input type="radio" name = "question15" id="reponse16c">200 m²</p>
		<p><input type="radio" name = "question15" id="reponse16d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions17">
 
	<h2>Question 17/40</h2>
		<h1>Quelle est le volume de la pièce ?</h1>
		<img src="cube.jpg"/>
		<h2>
		<p><input type="radio" name = "question16" id="reponse17a">12 m³</p>
		<p><input type="radio" name = "question16" id="reponse17b">120 m³</p>
		<p><input type="radio" name = "question16" id="reponse17c">1 200 m³</p>
		<p><input type="radio" name = "question16" id="reponse17d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions18">
 
	<h2>Question 18/40</h2>
		<h1>25 cm mesurer sur un plan à l'échelle 1/200 représente sur le terrain ?</h1>
		<h2>
		<p><input type="radio" name = "question17" id="reponse18a">50 m</p>
		<p><input type="radio" name = "question17" id="reponse18b">25 m</p>
		<p><input type="radio" name = "question17" id="reponse18c">20 m</p>
		<p><input type="radio" name = "question17" id="reponse18d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions19">
 
	<h2>Question 19/40</h2>
		<h1>60 m sur le terrain mesurent sur un plan à l'échelle 1/250 ?</h1>
		<h2>
		<p><input type="radio" name = "question18" id="reponse19a">60 cm</p>
		<p><input type="radio" name = "question18" id="reponse19b">24 cm</p>
		<p><input type="radio" name = "question18" id="reponse19c">25 cm</p>
		<p><input type="radio" name = "question18" id="reponse19d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions20">
 
	<h2>Question 20/40</h2>
		<h1>sur une feuille A4 "210mx297mm" à quelle échelle pouvez-vous tracer 12 m mesurer sur le terrain ?</h1>
		<h2>
		<p><input type="radio" name = "question19" id="reponse20a">1/20</p>
		<p><input type="radio" name = "question19" id="reponse20b">1/10</p>
		<p><input type="radio" name = "question19" id="reponse20c">1/50</p>
		<p><input type="radio" name = "question19" id="reponse20d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions21">
	<h2>Question 21/40</h2>
 
		<h1>Le plan général est un plan essentiellement ?</h1>
		<h2>
		<p><input type="radio" name = "question20" id="reponse21a">planimétrique</p>
		<p><input type="radio" name = "question20" id="reponse21b">altimétrique</p>
		<p><input type="radio" name = "question20" id="reponse21c">ni l'un ni l'autre</p>
		<p><input type="radio" name = "question20" id="reponse21d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions22">
 
	<h2>Question 22/40</h2>
		<h1>Le profil en long est un plan essentiellement ?</h1>
		<h2>
		<p><input type="radio" name = "question21" id="reponse22a">planimétrique</p>
		<p><input type="radio" name = "question21" id="reponse22b">altimétrique</p>
		<p><input type="radio" name = "question21" id="reponse22c">ni l'un ni l'autre</p>
		<p><input type="radio" name = "question21" id="reponse22d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions23">
	<h2>Question 23/40</h2>
 
		<h1>l'altitude d'un point NGF est mesurer par rapport ?</h1>
		<img src="ref.jpg"/>
		<h2>
		<p><input type="radio" name = "question22" id="reponse23a">au niveau moyen de la ville de Paris</p>
		<p><input type="radio" name = "question22" id="reponse23b">au niveau moyen de la mer méditéranée</p>
		<p><input type="radio" name = "question22" id="reponse23c">au seuil du bâtiment le plus proche</p>
		<p><input type="radio" name = "question22" id="reponse23d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions24">
 
	<h2>Question 24/40</h2>
		<h1>en nivellement la lecture sur le point de référence s'appelle ?</h1>
		<img src="ar.jpg"/>
		<h2>
		<p><input type="radio" name = "question23" id="reponse24a">la côte bleu</p>
		<p><input type="radio" name = "question23" id="reponse24b">la lecture avant</p>
		<p><input type="radio" name = "question23" id="reponse24c">la lecture arrière</p>
		<p><input type="radio" name = "question23" id="reponse24d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions25">
 
	<h2>Question 25/40</h2>
		<h1>Quelle est l'altitude du point 1 ?</h1>
		<img src="Z1.jpg"/>
		<h2>
		<p><input type="radio" name = "question24" id="reponse25a">100.40</p>
		<p><input type="radio" name = "question24" id="reponse25b">104.00</p>
		<p><input type="radio" name = "question24" id="reponse25c">102.00</p>
		<p><input type="radio" name = "question24" id="reponse25d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions26">
 
	<h2>Question 26/40</h2>
		<h1>Cet engin est ?</h1>
		<img src="pelle.jpg"/>
		<h2>
		<p><input type="radio" name = "question25" id="reponse26a">un bulldozer</p>
		<p><input type="radio" name = "question25" id="reponse26b">un tractopelle</p>
		<p><input type="radio" name = "question25" id="reponse26c">une pelle hydraulique</p>
		<p><input type="radio" name = "question25" id="reponse26d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions27">
 
	<h2>Question 27/40</h2>
		<h1>Cet engin est ?</h1>
		<img src="bouteur.jpg"/>
		<h2>
		<p><input type="radio" name = "question26" id="reponse27a">un bouteur</p>
		<p><input type="radio" name = "question26" id="reponse27b">un tractopelle</p>
		<p><input type="radio" name = "question26" id="reponse27c">une décapeuse</p>
		<p><input type="radio" name = "question26" id="reponse27d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions28">
	<h2>Question 28/40</h2>
 
		<h1>Cet engin est ?</h1>
		<img src="tombereau.jpg"/>
		<h2>
		<p><input type="radio" name = "question27" id="reponse28a">un bulldozer</p>
		<p><input type="radio" name = "question27" id="reponse28b">un tombereau</p>
		<p><input type="radio" name = "question27" id="reponse28c">une camion</p>
		<p><input type="radio" name = "question27" id="reponse28d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions29">
	<h2>Question 29/40</h2>
 
		<h1>Cet engin est ?</h1>
		<img src="finisseur.jpg"/>
		<h2>
		<p><input type="radio" name = "question28" id="reponse29a">un finisseur</p>
		<p><input type="radio" name = "question28" id="reponse29b">un buldozer</p>
		<p><input type="radio" name = "question28" id="reponse29c">un dumper</p>
		<p><input type="radio" name = "question28" id="reponse29d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions30">
	<h2>Question 30/40</h2>
 
		<h1>Cet engin est ?</h1>
		<img src="niveleuse.jpg"/>
		<h2>
		<p><input type="radio" name = "question29" id="reponse30a">un finisseur</p>
		<p><input type="radio" name = "question29" id="reponse30b">un buldozer</p>
		<p><input type="radio" name = "question29" id="reponse30c">une niveleuse</p>
		<p><input type="radio" name = "question29" id="reponse30d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions31">
 
	<h2>Question 31/40</h2>
		<h1>En assainissement, quel élément n'entre pas en compte dans le calcul de la largeur d'une tranchée ?</h1>
		<img src="tranchée.jpg"/>
		<h2>
		<p><input type="radio" name = "question30" id="reponse31a">la profondeur de la fouille</p>
		<p><input type="radio" name = "question30" id="reponse31b">la largeur du godet</p>
		<p><input type="radio" name = "question30" id="reponse31c">le diamètre extérieur du tuyau</p>
		<p><input type="radio" name = "question30" id="reponse31d">Je ne sais pas !</p>
		</p>
 
	</div>
 
	<div class="qcm" id="questions32">
 
	<h2>Question 32/40</h2>
		<h1>En assainissement, quelle est la pente maximum autorisée pour une canalisation ?</h1>
		<h2>
		<p><h2><input type="radio" name = "question31" id="reponse32a">10 %</p>
		<p><input type="radio" name = "question31" id="reponse32b">5 %</p>
		<p><input type="radio" name = "question31" id="reponse32c">15 %</p>
		<p><input type="radio" name = "question31" id="reponse32d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions33">
 
	<h2>Question 33/40</h2>
		<h1>En assainissement, quelle nature de canalisation est interdite d'usage ?</h1>
		<h2>
		<p><input type="radio" name = "question32" id="reponse33a">le grés</p>
		<p><input type="radio" name = "question32" id="reponse33b">le béton non armé</p>
		<p><input type="radio" name = "question32" id="reponse33c">l'amiante ciment</p>
		<p><input type="radio" name = "question32" id="reponse33d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions34">
 
	<h2>Question 34/40</h2>
		<h1>parmis ces liants, lequel n'est pas un liant hydraulique ?</h1>
		<h2>
		<p><input type="radio" name = "question33" id="reponse34a">la chaux vive</p>
		<p><input type="radio" name = "question33" id="reponse34b">le ciment</p>
		<p><input type="radio" name = "question33" id="reponse34c">la pouzzolane</p>
		<p><input type="radio" name = "question33" id="reponse34d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions35">
 
	<h2>Question 35/40</h2>
		<h1>Quelle est la température minimum de mise en oeuvre de l'enrobé chaud ?</h1>
		<h2>
		<p><input type="radio" name = "question34" id="reponse35a">150 °C</p>
		<p><input type="radio" name = "question34" id="reponse35b">130 °C</p>
		<p><input type="radio" name = "question34" id="reponse35c">100 °C</p>
		<p><input type="radio" name = "question34" id="reponse35d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions36">
	<h2>Question 36/40</h2>
 
		<h1>entre 2 couches d'enrobé on doit impérativement appliqué ?</h1>
		<h2>
		<p><input type="radio" name = "question35" id="reponse36a">un enduit de cure</p>
		<p><input type="radio" name = "question35" id="reponse36b">une couche d'accrochage</p>
		<p><input type="radio" name = "question35" id="reponse36c">une imprégnation</p>
		<p><input type="radio" name = "question35" id="reponse36d">Je ne sais pas !</p>
		</h2>
 
 
	</div>
 
	<div class="qcm" id="questions37">
 
	<h2>Question 37/40</h2>
		<h1>Quelles EPI sont obligatoires sur le chantier?</h1>
		<h2>
		<p><input type="radio" name = "question36" id="reponse37a">toutes celles qui sont fournies par l'entreprise</p>
		<p><input type="radio" name = "question36" id="reponse37b">le casque, le gilet et les chaussures de sécurités</p>
		<p><input type="radio" name = "question36" id="reponse37c">la tenue de travail<p/>
		<p><input type="radio" name = "question36" id="reponse37d">Je ne sais pas !</p>
		</h2>
 
 
	</div>
 
	<div class="qcm" id="questions38">
 
	<h2>Question 38/40</h2>
		<h1>En rase campagne, quelle est la distance à respectée entre les panneaux de signalisation de chantier?</h1>
		<h2>
		<p><input type="radio" name = "question37" id="reponse38a">50 m</p>
		<p><input type="radio" name = "question37" id="reponse38b">150 m</p>
		<p><input type="radio" name = "question37" id="reponse38c">100 m</p>
		<p><input type="radio" name = "question37" id="reponse38d">Je ne sais pas !</p>
		</h2>
 
 
	</div>
 
	<div class="qcm" id="questions39">
	<h2>Question 39/40</h2>
<h1>En ville, quelle est la distance minimum à respectée entre les panneaux de signalisation de chantier?</h1>
		<h2>
		<p><input type="radio" name = "question38" id="reponse39a">50 m</p>
		<p><input type="radio" name = "question38" id="reponse39b">30 m</p>
		<p><input type="radio" name = "question38" id="reponse39c">10 m</p>
		<p><input type="radio" name = "question38" id="reponse39d">Je ne sais pas !</p>
		</h2>
 
	</div>
 
	<div class="qcm" id="questions40">
	<h2>Question 40/40</h2>
	<h1>La qualité sur un chantier signifie ?</h1>
		<h2>
		<p><input type="radio" name = "question39" id="reponse40a">que l'on a respectées les exigences du client</p>
		<p><input type="radio" name = "question39" id="reponse40b">que l'on a réalisé un chantier propre et solide</p>
		<p><input type="radio" name = "question39" id="reponse40c">Que l'on a gagné plus d'argent que prévu </p>
		<p><input type="radio" name = "question39" id="reponse40d">Je ne sais pas !<p/>
		</h2>
 
	</div>
 
 
 <div class ="qcm" id="questions41">
 <table  cellpadding="0" border="1" bgcolor="white" bordercolor="blue" width="40%" align="center;"> 
		<caption> <H2>Résultat QCU</H2> </caption>
 
<tr>
<td id="L1" width="80%" height="20" pixels bgcolor="white" font color="blue"> 10 m sont équivalent à ? 
<td id="C1" width="10%" height="20" pixels bgcolor="white">
</tr>
 
 
<tr>
<td id="L2" width="80%" height="20" pixels bgcolor="white" font color="blue"> 10 km sont équivalent à ?
<td id="C2" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L3" width="80%" height="20" pixels bgcolor="white" font color="blue"> 10 000 m² sont équivalent à ?
<td id="C3" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L4" width="80%" height="20" pixels bgcolor="white" font color="blue"> 10 m³ sont équivalent à ?
<td id="C4" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L5" width="80%" height="20" pixels bgcolor="white" font color="blue" >10 cm³ sont équivalent à ?
</tr>
 
<tr>
<td id="L6" width="80%" height="20" pixels bgcolor="white" font color="blue"> 10 cm³ sont équivalent à ?td
<td id="C6" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L7" width="80%" height="20" pixels bgcolor="white" font color="blue"> 1 gigatonne est équivalente à ?
<td id="C7" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L8" width="80%" height="20" pixels bgcolor="white" font color="blue">100 grades sont équivalent à ?
<td id="C8" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L9" width="80%" height="20" pixels bgcolor="white" font color="blue">400 grades sont équivalent à ?
<td id="C9" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L10" width="80%" height="20" pixels bgcolor="white" font color="blue">2 h 24 min 54 sec représentent?
<td id="C10" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L11" width="80%" height="20" pixels bgcolor="white" font color="blue">30 sec représentent?
<td id="C11" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L12" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la surface du triangle ?
<td id="C12" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L13" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la longueur de l'hypotènuse du triangle ?
<td id="C13" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L14" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la surface du Cercle ?
<td id="C14" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L15" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la longueur du périmétre du cercle ?
<td id="C15" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L16" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la surface du Cercle ?
<td id="C16" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L17" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est le volume de la pièce ?
<td id="C17" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L18" width="80%" height="20" pixels bgcolor="white" font color="blue">25 cm mesurer sur un plan à l'échelle 1/200 représente sur le terrain ?
<td id="C18" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L19" width="80%" height="20" pixels bgcolor="white" font color="blue">60 m sur le terrain mesurent sur un plan à l'échelle 1/250 ?
<td id="C19" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L20" width="80%" height="20" pixels bgcolor="white" font color="blue">Sur une feuille A4 "210mx297mm" à quelle échelle pouvez-vous tracer 12 m mesurer sur le terrain ?
<td id="C20" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L21" width="80%" height="20" pixels bgcolor="white" font color="blue">Le plan général est un plan essentiellement ?
<td id="C21" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L22" width="80%" height="20" pixels bgcolor="white" font color="blue">Le profil en long est un plan essentiellement ?
<td id="C22" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L23" width="80%" height="20" pixels bgcolor="white" font color="blue">l'altitude d'un point NGF est mesurer par rapport ?
<td id="C23" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L24" width="80%" height="20" pixels bgcolor="white" font color="blue">En nivellement la lecture sur le point de référence s'appelle ?
<td id="C24" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L25" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est l'altitude du point 1 ?
<td id="C25" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L26" width="80%" height="20" pixels bgcolor="white" font color="blue">Cet engin est ?
<td id="C26" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L27" width="80%" height="20" pixels bgcolor="white" font color="blue">Cet engin est ?
<td id="C27" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L28" width="80%" height="20" pixels bgcolor="white" font color="blue">Cet engin est ?
<td id="C28" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L29" width="80%" height="20" pixels bgcolor="white" font color="blue">Cet engin est ?
<td id="C29" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L30" width="80%" height="20" pixels bgcolor="white" font color="blue">Cet engin est ?
<td id="C30" width="10%" height="20" pixels bgcolor="white">
</tr>
 
<tr>
<td id="L31" width="80%" height="20" pixels bgcolor="white" font color="blue">En assainissement, quel élément n'entre pas en compte dans le calcul de la largeur d'une tranchée ?
<td id="C31" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L32" width="80%" height="20" pixels bgcolor="white" font color="blue">En assainissement, quelle est la pente maximum autorisée pour une canalisation ?
<td id="C32" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L33" width="80%" height="20" pixels bgcolor="white" font color="blue">En assainissement, quelle nature de canalisation est interdite d'usage ?
<td id="C33" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L34" width="80%" height="20" pixels bgcolor="white" font color="blue">Parmis ces liants, lequel n'est pas un liant hydraulique ?
<td id="C34" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L35" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelle est la température minimum de mise en oeuvre de l'enrobé chaud ?
<td id="C35" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L36" width="80%" height="20" pixels bgcolor="white" font color="blue">Entre 2 couches d'enrobé on doit impérativement appliqué ?
<td id="C36" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L37" width="80%" height="20" pixels bgcolor="white" font color="blue">Quelles EPI sont obligatoires sur le chantier?
<td id="C37" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L38" width="80%" height="20" pixels bgcolor="white" font color="blue">En rase campagne, quelle est la distance à respectée entre les panneaux de signalisation de chantier?
<td id="C38" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L39" width="80%" height="20" pixels bgcolor="white" font color="blue">En ville, quelle est la distance minimum à respectée entre les panneaux de signalisation de chantier?
<td id="C39" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
<tr>
<td id="L40" width="80%" height="20" pixels bgcolor="white" font color="blue">La qualité sur un chantier signifie ?
<td id="C40" width="10%" height="20" pixels bgcolor="white">
</tr>
<tr>
 
 
</table>
 
 
 
	</div>
 
 
 
<p><img src="imageJeValide.png" type="imageJeValide"  id="imageJeValide" style="cursor:pointer ;" /></p>
 
</center>

et le javascript n'a pas changé

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
<script>
 
 
 
        var questionEnCour = 0;
 
        var tableauDesReponses = [
 
		//le tableau ci dessous renvoit bien les réponses
				["reponse0a", "Vous allez commencer le QCU, 4 réponses, un seul choix possible et quarante questions"],
                ["reponse1b", "la bonne réponse est 0,10 km"], 
                ["reponse2b", "la bonne réponse est 100 hm"], 
                ["reponse3c", "la bonne réponse est 1 hectare"],
				["reponse4b", "la bonne réponse est 10 000 litres"],
				["reponse5c", "la bonne réponse est 10 mililitres"],
				["reponse6b", "la bonne réponse est 10 quintaux"],
				["reponse7b", "la bonne réponse est 1 000 tonnes"],
				["reponse8b", "la bonne réponse est 90 degrés"],
				["reponse9c", "la bonne réponse est 360 degrés"],
				["reponse10b", "la bonne réponse est 2,415 heures"],
				["reponse11b", "la bonne réponse est 0,5 min"],
				["reponse12c", "la bonne réponse est 200 m²"],
				["reponse13c", "la bonne réponse est 28,28 m m²"],
				["reponse14b", "la bonne réponse est 400 m²"],
				["reponse15b", "la bonne réponse est 125,66 m"],
				["reponse16a", "la bonne réponse est 300 m"],
				["reponse17a", "la bonne réponse est 12 m³"],
				["reponse18a", "la bonne réponse est 50 m"],
				["reponse19b", "la bonne réponse est 24 cm"],
				["reponse20c", "la bonne réponse est 1/50"],
				["reponse21a", "la bonne réponse est essentiellement planimétrique"],
				["reponse22a", "la bonne réponse est essentiellement altimétrique"],
				["reponse23b", "la bonne réponse est par rapport au niveau moyen de la mer méditéranée"],
				["reponse24b", "la bonne réponse est la lecture arrière"],
				["reponse25a", "la bonne réponse est 100.40"],
				["reponse26c", "la bonne réponse est une pelle hydraulique"],
				["reponse27a", "la bonne réponse est un bouteur"],
				["reponse28b", "la bonne réponse est un tombereau"],
				["reponse29a", "la bonne réponse est un finisseur"],
				["reponse30c", "la bonne réponse est une niveleuse"],
				["reponse31b", "la bonne réponse est la largeur du godet"],
				["reponse32a", "la bonne réponse est 10 %"],
				["reponse33c", "la bonne réponse l'amiante ciment"],
				["reponse34a", "la bonne réponse la chaux vive"],
				["reponse35b", "la bonne réponse est 130 °C"],
				["reponse36b", "la bonne réponse est une couche d'accrochage"],
				["reponse37a", "la bonne réponse est toutes celles qui sont fournies par l'entreprise"],
				["reponse38c", "la bonne réponse est 100 m"],
				["reponse39b", "la bonne réponse est 10 m"],
				["reponse40a", "la bonne réponse est que l'on a respectées les exigences du client"],
				["reponse41a", "Le questionnaire est terminé."]
 
 
        ];
 
		document.getElementById("questions" + questionEnCour).style.display = "block";
 
		document.getElementById("imageJeValide").addEventListener("click", function( event ) {
                        verifier();
						}
 
 
                function verifier() {
                        if (document.getElementById(tableauDesReponses[questionEnCour][0]).checked) {
                                alert("Bonne réponse");
                          }
                          else {
                                alert(tableauDesReponses[questionEnCour][1]);
                        }
                        questionSuivante();
 
                }
 
 
 
                function questionSuivante() {
 
                                document.getElementById("questions" + questionEnCour).style.display = "none";
                                questionEnCour++; //on passe à la question suivante
                                document.getElementById("questions" + questionEnCour).style.display = "block";
                        }
 
          </script>
 
 
</body>

si quelqu'un avait une piste car là je bute vraiment
merci
je sais bien que je n'ai toujours pas changer la balise <center> je la trouvée si simple à mettre en oeuvre, que je n'ai pas encore cherché pour la remplacer

05/06/2018, 19h51
bonjourajax

J'aime bien à tous tes nouveaux posts on revoit la balise center et le java :mrgreen:

Petite plaisanterie mise a part
c'est bien parce qu'il y a display none que tu les vois plus!

Citation:

Envoyé par dmoluc

j'ai beau cherché ou je me suis trompé, ni mozilla ni moi ne trouvont rien dans le html

Mozilla ? Tu ne veux pas dire Firefox plutôt ? Mozilla c’est le nom de l’organisation.

Le navigateur reste assez laxiste sur le code source HTML car il est obligé d’accepter les erreurs pour réussir à afficher quelque chose. Et crois-moi, c’est un travail ingrat, je n’aimerais pas être à sa place :aie:

Un indicateur beaucoup moins laxiste est le validateur (dont je t’ai déjà parlé), paramétré avec le doctype le plus strict qui existe : XHTML 1.0 Strict.

La marche à suivre est la suivante :

clique sur l’onglet  Direct input
colle ton code HTML dans la zone de texte
déroule le menu More Options
juste en-dessous de Validate full document, en face de Use Doctype: sélectionne XHTML 1.0 Strict
(optionnel) coche le bouton Group Error Messages by Type

Là, tu verras qu’il t’affiche plusieurs centaines d’erreurs. La plupart sont des erreurs de structure (des <td> mal fermés ou des <p> qui se mélangent), mais tu as aussi des problèmes de sémantique, autrement dit des balises dont tu détournes l’usage. En particulier ces pauvres <h2> que tu utilises uniquement à des fins de présentation. Je t’invite à lire <h1>-<h6> : les éléments de titre de section pour comprendre la sémantique des balises de titres et pourquoi tu ne devrais pas les utiliser uniquement pour leur apparence.

En me basant sur les indications du validateur, j’ai dégrossi ton code HTML, mais tu verras qu’il reste encore quelques erreurs. Elles concernent entre autres les attributs alt des images (je ne peux pas deviner pour toi ce qui devrait s’y trouver), mais surtout des attributs de présentation. Je te laisse l’exercice de les remplacer par les alternatives CSS qui correspondent.

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
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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Test chef d’équipe TP</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
 
<center>
 
  <h1><img src="logo.jpg" /> Test chef d’équipe TP</h1>
 
  <div class="qcm" id="questions0">
 
    <p> <input id="NomDeFamille" type="text" style="width: 200px; height: 20px;" placeholder="NOM DE FAMILLE" required /> <input id="Prenom" type="text" style="width: 200px; height: 20px;" placeholder="PRENOM" required /></p>
 
    <p> <input id="courriel" type="text" style="width: 200px; height: 20px;" placeholder="courriel" required /> <input id="Tel" type="text" style="width: 200px; height: 20px;" placeholder="Telephone" required /></p>
 
    <p> <input id="rue" type="text" style="width: 200px; height: 20px;" placeholder="Rue" required /> <input id="Numero" type="text" style="width: 200px; height: 20px;" placeholder="Numero de maison" /></p>
 
    <p> <input type="text" style="width: 409px; height: 20px;" placeholder="complement adresse" /></p>
 
    <p> <input id="CodePostal" type="text" style="width: 200px; height: 20px;" placeholder="code Postal" required /> <input id="Ville" type="text" style="width: 200px; height: 20px;" placeholder="Ville" required /> </p>
 
    <p><input type="text" style="width: 409px; height: 20px;" placeholder="entreprise" required /> </p>
 
    <p><input id="motdepasse" type="text" style="width: 200px; height: 20px;" placeholder="Mot de passe" required /><input type="text" style="width: 200px; height: 20px;" placeholder="Date" required /> </p>
 
    <p><input type="radio" name="question0" id="reponse0a" /></p>
 
  </div>
 
  <div class="qcm" id="questions1">
    <h2>Question 1/40</h2>
    <h1>10 m sont équivalent à ?</h1>
    <p><input type="radio" name="question0" id="reponse1a" />0,10 kilométres</p>
    <p><input type="radio" name="question0" id="reponse1b" />0,01 kilométres</p>
    <p><input type="radio" name="question0" id="reponse1c" />100 centimétres</p>
    <p><input type="radio" name="question0" id="reponse1d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions2">
    <h2>Question 2/40</h2>
    <h1>10 km sont équivalent à ?</h1>
    <p><input type="radio" name="question1" id="reponse2a" />1000 métres</p>
    <p><input type="radio" name="question1" id="reponse2b" />100 hectométres</p>
    <p><input type="radio" name="question1" id="reponse2c" />100 décamétres</p>
    <p><input type="radio" name="question1" id="reponse2d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions3">
    <h2>Question 3/40</h2>
    <h1>10 000 m² sont équivalent à ?</h1>
    <p><input type="radio" name="question2" id="reponse3a" />10 hectares</p>
    <p><input type="radio" name="question2" id="reponse3b" />100 ares</p>
    <p><input type="radio" name="question2" id="reponse3c" />1 hectares</p>
    <p><input type="radio" name="question2" id="reponse3d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions4">
    <h2>Question 4/40</h2>
    <h1>10 m³ sont équivalent à ?</h1>
    <p><input type="radio" name="question3" id="reponse4a" />1000 décimétres-cube</p>
    <p><input type="radio" name="question3" id="reponse4b" />10 000 litres</p>
    <p><input type="radio" name="question3" id="reponse4c" />1 000 litres</p>
    <p><input type="radio" name="question3" id="reponse4d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions5">
    <h2>Question 5/40</h2>
    <h1> 10 cm³ sont équivalent à ?</h1>
    <p><input type="radio" name="question4" id="reponse5a" />10 centilitres</p>
    <p><input type="radio" name="question4" id="reponse5b" />100 mililitres</p>
    <p><input type="radio" name="question4" id="reponse5c" />10 mililitres</p>
    <p><input type="radio" name="question4" id="reponse5d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions6">
    <h2>Question 6/40</h2>
    <h1> 100 kg sont équivalent à ?</h1>
    <p><input type="radio" name="question5" id="reponse6a" />1 tonne</p>
    <p><input type="radio" name="question5" id="reponse6b" />10 quintaux</p>
    <p><input type="radio" name="question5" id="reponse6c" />0.01 tonne </p>
    <p><input type="radio" name="question5" id="reponse6d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions7">
    <h2>Question 7/40</h2>
    <h1>1 gigatonne est équivalente à ?</h1>
    <img src="bombe.jpg" />
    <p><input type="radio" name="question6" id="reponse7a" />100 tonnes</p>
    <p><input type="radio" name="question6" id="reponse7b" />1 000 tonnes</p>
    <p><input type="radio" name="question6" id="reponse7c" />10 000 tonnes </p>
    <p><input type="radio" name="question6" id="reponse7d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions8">
    <h2>Question 8/40</h2>
    <h1>100 grades sont équivalent à ?</h1>
    <p><input type="radio" name="question7" id="reponse8a" />100 degrés</p>
    <p><input type="radio" name="question7" id="reponse8b" />90 degrés</p>
    <p><input type="radio" name="question7" id="reponse8c" />45 degrés </p>
    <p><input type="radio" name="question7" id="reponse8d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions9">
    <h2>Question 9/40</h2>
    <h1>400 grades sont équivalent à ?</h1>
    <img src="rapporteur.gif" />
    <p><input type="radio" name="question8" id="reponse9a" />180 degrés</p>
    <p><input type="radio" name="question8" id="reponse9b" />260 degrés</p>
    <p><input type="radio" name="question8" id="reponse9c" />360 degrés </p>
    <p><input type="radio" name="question8" id="reponse9d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions10">
    <h2>Question 10/40</h2>
    <h1>2 h 24 min 54 sec représentent?</h1>
    <img src="horloge.gif" />
    <p><input type="radio" name="question9" id="reponse10a" />2,780 heures</p>
    <p><input type="radio" name="question9" id="reponse10b" />2,415 heures</p>
    <p><input type="radio" name="question9" id="reponse10c" />2,2454 heures</p>
    <p><input type="radio" name="question9" id="reponse10d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions11">
    <h2>Question 11/40</h2>
    <h1>30 sec représentent?</h1>
    <p><input type="radio" name="question10" id="reponse11a" />0,30 min</p>
    <p><input type="radio" name="question10" id="reponse11b" />0,50 min</p>
    <p><input type="radio" name="question10" id="reponse11c" />1/2 heures</p>
    <p><input type="radio" name="question10" id="reponse11d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions12">
    <h2>Question 12/40</h2>
    <h1>Quelle est la surface du triangle ?</h1>
    <img src="triangle.jpg" />
    <p><input type="radio" name="question11" id="reponse12a" />40 m²</p>
    <p><input type="radio" name="question11" id="reponse12b" />400 m²</p>
    <p><input type="radio" name="question11" id="reponse12c" />200 m²</p>
    <p><input type="radio" name="question11" id="reponse12d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions13">
    <h2>Question 13/40</h2>
    <h1>Quelle est la longueur de l'hypotènuse du triangle ?</h1>
    <img src="triangle.jpg" />
    <p><input type="radio" name="question12" id="reponse13a" />30 m</p>
    <p><input type="radio" name="question12" id="reponse13b" />40 m</p>
    <p><input type="radio" name="question12" id="reponse13c" />28.28 m</p>
    <p><input type="radio" name="question12" id="reponse13d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions14">
    <h2>Question 14/40</h2>
    <h1>Quelle est la surface du Cercle ?</h1>
    <img src="cercle.jpg" />
    <p><input type="radio" name="question13" id="reponse14a" />40 m²</p>
    <p><input type="radio" name="question13" id="reponse14b" />400 m²</p>
    <p><input type="radio" name="question13" id="reponse14c" />200 m²</p>
    <p><input type="radio" name="question13" id="reponse14d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions15">
    <h2>Question 15/40</h2>
    <h1>Quelle est la longueur du périmétre du cercle ?</h1>
    <img src="cercle.jpg" />
    <p><input type="radio" name="question14" id="reponse15a" />400 m</p>
    <p><input type="radio" name="question14" id="reponse15b" />125,66 m</p>
    <p><input type="radio" name="question14" id="reponse15c" />200 m</p>
    <p><input type="radio" name="question14" id="reponse15d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions16">
    <h2>Question 16/40</h2>
    <h1>Quelle est la surface du Cercle ?</h1>
    <img src="trapeze.jpg" />
    <p><input type="radio" name="question15" id="reponse16a" />300 m²</p>
    <p><input type="radio" name="question15" id="reponse16b" />400 m²</p>
    <p><input type="radio" name="question15" id="reponse16c" />200 m²</p>
    <p><input type="radio" name="question15" id="reponse16d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions17">
    <h2>Question 17/40</h2>
    <h1>Quelle est le volume de la pièce ?</h1>
    <img src="cube.jpg" />
    <p><input type="radio" name="question16" id="reponse17a" />12 m³</p>
    <p><input type="radio" name="question16" id="reponse17b" />120 m³</p>
    <p><input type="radio" name="question16" id="reponse17c" />1 200 m³</p>
    <p><input type="radio" name="question16" id="reponse17d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions18">
    <h2>Question 18/40</h2>
    <h1>25 cm mesurer sur un plan à l'échelle 1/200 représente sur le terrain ?</h1>
    <p><input type="radio" name="question17" id="reponse18a" />50 m</p>
    <p><input type="radio" name="question17" id="reponse18b" />25 m</p>
    <p><input type="radio" name="question17" id="reponse18c" />20 m</p>
    <p><input type="radio" name="question17" id="reponse18d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions19">
    <h2>Question 19/40</h2>
    <h1>60 m sur le terrain mesurent sur un plan à l'échelle 1/250 ?</h1>
    <p><input type="radio" name="question18" id="reponse19a" />60 cm</p>
    <p><input type="radio" name="question18" id="reponse19b" />24 cm</p>
    <p><input type="radio" name="question18" id="reponse19c" />25 cm</p>
    <p><input type="radio" name="question18" id="reponse19d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions20">
    <h2>Question 20/40</h2>
    <h1>sur une feuille A4 "210mx297mm" à quelle échelle pouvez-vous tracer 12 m mesurer sur le terrain ?</h1>
    <p><input type="radio" name="question19" id="reponse20a" />1/20</p>
    <p><input type="radio" name="question19" id="reponse20b" />1/10</p>
    <p><input type="radio" name="question19" id="reponse20c" />1/50</p>
    <p><input type="radio" name="question19" id="reponse20d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions21">
    <h2>Question 21/40</h2>
    <h1>Le plan général est un plan essentiellement ?</h1>
    <p><input type="radio" name="question20" id="reponse21a" />planimétrique</p>
    <p><input type="radio" name="question20" id="reponse21b" />altimétrique</p>
    <p><input type="radio" name="question20" id="reponse21c" />ni l'un ni l'autre</p>
    <p><input type="radio" name="question20" id="reponse21d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions22">
    <h2>Question 22/40</h2>
    <h1>Le profil en long est un plan essentiellement ?</h1>
    <p><input type="radio" name="question21" id="reponse22a" />planimétrique</p>
    <p><input type="radio" name="question21" id="reponse22b" />altimétrique</p>
    <p><input type="radio" name="question21" id="reponse22c" />ni l'un ni l'autre</p>
    <p><input type="radio" name="question21" id="reponse22d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions23">
    <h2>Question 23/40</h2>
    <h1>l'altitude d'un point NGF est mesurer par rapport ?</h1>
    <img src="ref.jpg" />
    <p><input type="radio" name="question22" id="reponse23a" />au niveau moyen de la ville de Paris</p>
    <p><input type="radio" name="question22" id="reponse23b" />au niveau moyen de la mer méditéranée</p>
    <p><input type="radio" name="question22" id="reponse23c" />au seuil du bâtiment le plus proche</p>
    <p><input type="radio" name="question22" id="reponse23d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions24">
    <h2>Question 24/40</h2>
    <h1>en nivellement la lecture sur le point de référence s'appelle ?</h1>
    <img src="ar.jpg" />
    <p><input type="radio" name="question23" id="reponse24a" />la côte bleu</p>
    <p><input type="radio" name="question23" id="reponse24b" />la lecture avant</p>
    <p><input type="radio" name="question23" id="reponse24c" />la lecture arrière</p>
    <p><input type="radio" name="question23" id="reponse24d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions25">
    <h2>Question 25/40</h2>
    <h1>Quelle est l'altitude du point 1 ?</h1>
    <img src="Z1.jpg" />
    <p><input type="radio" name="question24" id="reponse25a" />100.40</p>
    <p><input type="radio" name="question24" id="reponse25b" />104.00</p>
    <p><input type="radio" name="question24" id="reponse25c" />102.00</p>
    <p><input type="radio" name="question24" id="reponse25d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions26">
    <h2>Question 26/40</h2>
    <h1>Cet engin est ?</h1>
    <img src="pelle.jpg" />
    <p><input type="radio" name="question25" id="reponse26a" />un bulldozer</p>
    <p><input type="radio" name="question25" id="reponse26b" />un tractopelle</p>
    <p><input type="radio" name="question25" id="reponse26c" />une pelle hydraulique</p>
    <p><input type="radio" name="question25" id="reponse26d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions27">
    <h2>Question 27/40</h2>
    <h1>Cet engin est ?</h1>
    <img src="bouteur.jpg" />
    <p><input type="radio" name="question26" id="reponse27a" />un bouteur</p>
    <p><input type="radio" name="question26" id="reponse27b" />un tractopelle</p>
    <p><input type="radio" name="question26" id="reponse27c" />une décapeuse</p>
    <p><input type="radio" name="question26" id="reponse27d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions28">
    <h2>Question 28/40</h2>
    <h1>Cet engin est ?</h1>
    <img src="tombereau.jpg" />
    <p><input type="radio" name="question27" id="reponse28a" />un bulldozer</p>
    <p><input type="radio" name="question27" id="reponse28b" />un tombereau</p>
    <p><input type="radio" name="question27" id="reponse28c" />une camion</p>
    <p><input type="radio" name="question27" id="reponse28d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions29">
    <h2>Question 29/40</h2>
    <h1>Cet engin est ?</h1>
    <img src="finisseur.jpg" />
    <p><input type="radio" name="question28" id="reponse29a" />un finisseur</p>
    <p><input type="radio" name="question28" id="reponse29b" />un buldozer</p>
    <p><input type="radio" name="question28" id="reponse29c" />un dumper</p>
    <p><input type="radio" name="question28" id="reponse29d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions30">
    <h2>Question 30/40</h2>
    <h1>Cet engin est ?</h1>
    <img src="niveleuse.jpg" />
    <p><input type="radio" name="question29" id="reponse30a" />un finisseur</p>
    <p><input type="radio" name="question29" id="reponse30b" />un buldozer</p>
    <p><input type="radio" name="question29" id="reponse30c" />une niveleuse</p>
    <p><input type="radio" name="question29" id="reponse30d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions31">
    <h2>Question 31/40</h2>
    <h1>En assainissement, quel élément n'entre pas en compte dans le calcul de la largeur d'une tranchée ?</h1>
    <img src="tranchée.jpg" />
    <p><input type="radio" name="question30" id="reponse31a" />la profondeur de la fouille</p>
    <p><input type="radio" name="question30" id="reponse31b" />la largeur du godet</p>
    <p><input type="radio" name="question30" id="reponse31c" />le diamètre extérieur du tuyau</p>
    <p><input type="radio" name="question30" id="reponse31d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions32">
    <h2>Question 32/40</h2>
    <h1>En assainissement, quelle est la pente maximum autorisée pour une canalisation ?</h1>
    <p><input type="radio" name="question31" id="reponse32a" />10 %</p>
    <p><input type="radio" name="question31" id="reponse32b" />5 %</p>
    <p><input type="radio" name="question31" id="reponse32c" />15 %</p>
    <p><input type="radio" name="question31" id="reponse32d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions33">
    <h2>Question 33/40</h2>
    <h1>En assainissement, quelle nature de canalisation est interdite d'usage ?</h1>
    <p><input type="radio" name="question32" id="reponse33a" />le grés</p>
    <p><input type="radio" name="question32" id="reponse33b" />le béton non armé</p>
    <p><input type="radio" name="question32" id="reponse33c" />l'amiante ciment</p>
    <p><input type="radio" name="question32" id="reponse33d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions34">
    <h2>Question 34/40</h2>
    <h1>parmis ces liants, lequel n'est pas un liant hydraulique ?</h1>
    <p><input type="radio" name="question33" id="reponse34a" />la chaux vive</p>
    <p><input type="radio" name="question33" id="reponse34b" />le ciment</p>
    <p><input type="radio" name="question33" id="reponse34c" />la pouzzolane</p>
    <p><input type="radio" name="question33" id="reponse34d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions35">
    <h2>Question 35/40</h2>
    <h1>Quelle est la température minimum de mise en oeuvre de l'enrobé chaud ?</h1>
    <p><input type="radio" name="question34" id="reponse35a" />150 °C</p>
    <p><input type="radio" name="question34" id="reponse35b" />130 °C</p>
    <p><input type="radio" name="question34" id="reponse35c" />100 °C</p>
    <p><input type="radio" name="question34" id="reponse35d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions36">
    <h2>Question 36/40</h2>
    <h1>entre 2 couches d'enrobé on doit impérativement appliqué ?</h1>
    <p><input type="radio" name="question35" id="reponse36a" />un enduit de cure</p>
    <p><input type="radio" name="question35" id="reponse36b" />une couche d'accrochage</p>
    <p><input type="radio" name="question35" id="reponse36c" />une imprégnation</p>
    <p><input type="radio" name="question35" id="reponse36d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions37">
    <h2>Question 37/40</h2>
    <h1>Quelles EPI sont obligatoires sur le chantier?</h1>
    <p><input type="radio" name="question36" id="reponse37a" />toutes celles qui sont fournies par l'entreprise</p>
    <p><input type="radio" name="question36" id="reponse37b" />le casque, le gilet et les chaussures de sécurités</p>
    <p><input type="radio" name="question36" id="reponse37c" />la tenue de travail</p>
    <p><input type="radio" name="question36" id="reponse37d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions38">
    <h2>Question 38/40</h2>
    <h1>En rase campagne, quelle est la distance à respectée entre les panneaux de signalisation de chantier?</h1>
    <p><input type="radio" name="question37" id="reponse38a" />50 m</p>
    <p><input type="radio" name="question37" id="reponse38b" />150 m</p>
    <p><input type="radio" name="question37" id="reponse38c" />100 m</p>
    <p><input type="radio" name="question37" id="reponse38d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions39">
    <h2>Question 39/40</h2>
    <h1>En ville, quelle est la distance minimum à respectée entre les panneaux de signalisation de chantier?</h1>
    <p><input type="radio" name="question38" id="reponse39a" />50 m</p>
    <p><input type="radio" name="question38" id="reponse39b" />30 m</p>
    <p><input type="radio" name="question38" id="reponse39c" />10 m</p>
    <p><input type="radio" name="question38" id="reponse39d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions40">
    <h2>Question 40/40</h2>
    <h1>La qualité sur un chantier signifie ?</h1>
    <p><input type="radio" name="question39" id="reponse40a" />que l'on a respectées les exigences du client</p>
    <p><input type="radio" name="question39" id="reponse40b" />que l'on a réalisé un chantier propre et solide</p>
    <p><input type="radio" name="question39" id="reponse40c" />Que l'on a gagné plus d'argent que prévu </p>
    <p><input type="radio" name="question39" id="reponse40d" />Je ne sais pas !</p>
  </div>
 
  <div class="qcm" id="questions41">
 
    <table cellpadding="0" border="1" bgcolor="white" bordercolor="blue" width="40%" align="center;">
      <caption> Résultat QCU </caption>
 
      <tr>
      <td id="L1" width="80%" height="20" bgcolor="white" color="blue"> 10 m sont équivalent à ?</td>
      <td id="C1" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L2" width="80%" height="20" bgcolor="white" color="blue"> 10 km sont équivalent à ?</td>
      <td id="C2" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L3" width="80%" height="20" bgcolor="white" color="blue"> 10 000 m² sont équivalent à ?</td>
      <td id="C3" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L4" width="80%" height="20" bgcolor="white" color="blue"> 10 m³ sont équivalent à ?</td>
      <td id="C4" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L5" width="80%" height="20" bgcolor="white" color="blue" >10 cm³ sont équivalent à ?</td>
      <td></td>
      </tr>
 
      <tr>
      <td id="L6" width="80%" height="20" bgcolor="white" color="blue"> 10 cm³ sont équivalent à ?</td>
      <td id="C6" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L7" width="80%" height="20" bgcolor="white" color="blue"> 1 gigatonne est équivalente à ?</td>
      <td id="C7" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L8" width="80%" height="20" bgcolor="white" color="blue">100 grades sont équivalent à ?</td>
      <td id="C8" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L9" width="80%" height="20" bgcolor="white" color="blue">400 grades sont équivalent à ?</td>
      <td id="C9" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L10" width="80%" height="20" bgcolor="white" color="blue">2 h 24 min 54 sec représentent?</td>
      <td id="C10" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L11" width="80%" height="20" bgcolor="white" color="blue">30 sec représentent?</td>
      <td id="C11" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L12" width="80%" height="20" bgcolor="white" color="blue">Quelle est la surface du triangle ?</td>
      <td id="C12" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L13" width="80%" height="20" bgcolor="white" color="blue">Quelle est la longueur de l'hypotènuse du triangle ?</td>
      <td id="C13" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L14" width="80%" height="20" bgcolor="white" color="blue">Quelle est la surface du Cercle ?</td>
      <td id="C14" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L15" width="80%" height="20" bgcolor="white" color="blue">Quelle est la longueur du périmétre du cercle ?</td>
      <td id="C15" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L16" width="80%" height="20" bgcolor="white" color="blue">Quelle est la surface du Cercle ?</td>
      <td id="C16" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L17" width="80%" height="20" bgcolor="white" color="blue">Quelle est le volume de la pièce ?</td>
      <td id="C17" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L18" width="80%" height="20" bgcolor="white" color="blue">25 cm mesurer sur un plan à l'échelle 1/200 représente sur le terrain ?</td>
      <td id="C18" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L19" width="80%" height="20" bgcolor="white" color="blue">60 m sur le terrain mesurent sur un plan à l'échelle 1/250 ?</td>
      <td id="C19" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L20" width="80%" height="20" bgcolor="white" color="blue">Sur une feuille A4 "210mx297mm" à quelle échelle pouvez-vous tracer 12 m mesurer sur le terrain ?</td>
      <td id="C20" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L21" width="80%" height="20" bgcolor="white" color="blue">Le plan général est un plan essentiellement ?</td>
      <td id="C21" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L22" width="80%" height="20" bgcolor="white" color="blue">Le profil en long est un plan essentiellement ?</td>
      <td id="C22" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L23" width="80%" height="20" bgcolor="white" color="blue">l'altitude d'un point NGF est mesurer par rapport ?</td>
      <td id="C23" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L24" width="80%" height="20" bgcolor="white" color="blue">En nivellement la lecture sur le point de référence s'appelle ?</td>
      <td id="C24" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L25" width="80%" height="20" bgcolor="white" color="blue">Quelle est l'altitude du point 1 ?</td>
      <td id="C25" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L26" width="80%" height="20" bgcolor="white" color="blue">Cet engin est ?</td>
      <td id="C26" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L27" width="80%" height="20" bgcolor="white" color="blue">Cet engin est ?</td>
      <td id="C27" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L28" width="80%" height="20" bgcolor="white" color="blue">Cet engin est ?</td>
      <td id="C28" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L29" width="80%" height="20" bgcolor="white" color="blue">Cet engin est ?</td>
      <td id="C29" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L30" width="80%" height="20" bgcolor="white" color="blue">Cet engin est ?</td>
      <td id="C30" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L31" width="80%" height="20" bgcolor="white" color="blue">En assainissement, quel élément n'entre pas en compte dans le calcul de la largeur d'une tranchée ?</td>
      <td id="C31" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L32" width="80%" height="20" bgcolor="white" color="blue">En assainissement, quelle est la pente maximum autorisée pour une canalisation ?</td>
      <td id="C32" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L33" width="80%" height="20" bgcolor="white" color="blue">En assainissement, quelle nature de canalisation est interdite d'usage ?</td>
      <td id="C33" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L34" width="80%" height="20" bgcolor="white" color="blue">Parmis ces liants, lequel n'est pas un liant hydraulique ?</td>
      <td id="C34" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L35" width="80%" height="20" bgcolor="white" color="blue">Quelle est la température minimum de mise en oeuvre de l'enrobé chaud ?</td>
      <td id="C35" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L36" width="80%" height="20" bgcolor="white" color="blue">Entre 2 couches d'enrobé on doit impérativement appliqué ?</td>
      <td id="C36" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L37" width="80%" height="20" bgcolor="white" color="blue">Quelles EPI sont obligatoires sur le chantier?</td>
      <td id="C37" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L38" width="80%" height="20" bgcolor="white" color="blue">En rase campagne, quelle est la distance à respectée entre les panneaux de signalisation de chantier?</td>
      <td id="C38" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L39" width="80%" height="20" bgcolor="white" color="blue">En ville, quelle est la distance minimum à respectée entre les panneaux de signalisation de chantier?</td>
      <td id="C39" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
      <tr>
      <td id="L40" width="80%" height="20" bgcolor="white" color="blue">La qualité sur un chantier signifie ?</td>
      <td id="C40" width="10%" height="20" bgcolor="white"></td>
      </tr>
 
    </table>
 
  </div>
 
  <p>
    <img src="imageJeValide.png" id="imageJeValide" style="cursor: pointer;" />
  </p>
 
</center>
</body>
</html>

Tu peux ignorer les erreurs suivantes :

“Missing xmlns attribute”, c’est un détail spécifique au doctype XHTML ;
les messages à propos des attributs charset, required et placeholder, des attributs qui ne sont pas considérés comme standard dans le doctype XHTML mais qui sont autorisés en HTML 5 ;
les erreurs à propos de <body> et <html>, qui sont généralement la conséquence d’un problème de structure ailleurs dans la page. Si tu corriges cet autre problème, ces erreurs disparaîtront toutes seules.

Une fois qu’il ne te reste que les erreurs « pas graves » sur la validation en mode XHTML Strict, tu peux revalider en HTML 5, ça utilise un autre analyseur qui donne des messages d’erreur plus utiles et qui t’aideront à tout convertir en CSS.

Pour la balise <center>, c’est toujours un peu délicat, tout dépend du type de display des éléments à centrer.

Pour faire vite, il y a deux principaux types de display : inline (<span>, <b>, <img>, <input>, etc.) et block (<div>, <p>, <table>, les titres <h1> à <h6>, etc.).

:arrow: Si l’élément est inline, il faut ajouter text-align: center sur le parent. Je pense que dans ton cas, ajouter cette règle sur body règlera 90 % du problème.

:arrow: Si l’élément est block, il faut lui donner une marge automatique pour qu’il se centre lui-même. Il me semble que dans ton cas, il n’y a qu’un seul élément qui a besoin de ça, c’est la table. Tu devras donc ajouter cette déclaration :

Code:

1
2
3
table {
  margin: auto;
}

Mais peut-être que ce serait tout aussi simple de supprimer cette table pour être plus cohérent avec le reste de la page.

Restera un problème : les attributs style. Ils ne sont pas signalés par le validateur, mais quand il y en a beaucoup, c’est le signe que tu peux les remplacer par une classe et une déclaration de style séparée. je pense notamment à tes <input> au début de la page. Tu peux facilement leur donner tous les mêmes dimensions avec ce code CSS :

Code:

1
2
3
4
input[type=text] {
  width: 200px;
  height: 20px;
}

Et pour les deux plus larges, ajoute-leur une classe, par exemple large-input :

Code:

<input type="text" class="large-input" placeholder="entreprise" required />

Et rajoute cette déclaration :

Code:

1
2
3
.large-input {
  width: 409px;
}

La page Mon premier formulaire HTML est un bon exemple de la marche à suivre pour construire d’abord du code HTML « nu », et ensuite y ajouter du CSS pour la présentation. Je te suggère de t’en inspirer ;)

06/06/2018, 18h14
dmoluc

bonjour et merci pour toutes ces infos ! Je suis toujours trop pressé en voulant avoir fini avant de commencer. Je m’aperçois que c'est beaucoup plus compliqué que ce que j'avais pu imaginée, mais comme j'ai pas mal de temps devant moi, je vais lire tout ce que je trouve et peu être acheté un bouquin ou deux sur le sujet.
la petite application qcm n'est pas vitale mais je vais quand même la continuée en espérant la finir un jour, sinon j'ai klaxoon http://www.klaxoon.com qui me permet de créer des questionnaires sympats, le seul problème est qu'il faut faire une réunion skype car le test une fois lancer on ne peu plus s'y connecté et lorsqu'ils y a des candidats de Nouvelle Calédonie ou autre c'est pas toujours facile de trouver un horaire.
mais encore mille fois merci pour votre patience...