Discussion :

[dmoluc]

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

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<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

[ProgElecT]

Salut

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

Code HTML :

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

  <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 HTML :

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

  <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.

[bonjourajax]

Bonsoir

la balise center est obsolète utilisez text align center par exemple

[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

[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 !

[ProgElecT]

Salut

@NoSmoking , 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 , on parvient assez vite à se faire plaisir avec un petit programme perso.
Code du programme de visualisation principal

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 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

[dmoluc]

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

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<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 HTML :

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

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 HTML :

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

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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
 <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