nothus

Exemple de scripts : un sondage géré par JS

Noter ce billet

0 Commentaires

par

Nothus

, 08/05/2015 à 18h16 (2463 Affichages)

LE CODE CI-DESSOUS N'EST PAS CONCU POUR ÊTRE UTILISE A DES FINS DE PRODUCTION (seulement de test).

-

Bonjour,

Javascript peut se révéler utile pour énormément de choses :

il libère le serveur de certaines opérations de gestion de l'affichage
il permet l'asynchronisme et un environnement plus agréable pour l'utilisateur
il est l'une des rares "possibilités" pour le développeur d'exporter de "l'intelligence" du côté client, à la volée (pas d'installation de logiciels notamment)

Néanmoins il rencontre rapidement des limites :

TOUT peut être modifié par l'utilisateur (par la console, pas un script externe peu aimable d'un autre site, par un module supplémentaire vérolé sur le poste du client, etc.)
en dehors de localStorage, des cookies et sessionStorage, il n'offre aucune vraie possibilité (notamment pour toutes les navigateurs) de stockage sur le poste du client
la gestion des erreurs sur le poste client peut être problématique, à l'heure de "widget" par des services extérieurs, que l'on ne contrôle pas

Pour en revenir au sujet de notre article, voici le cahier des charges :

avoir autant de questions que l'on veut, mais que les réponses amènent à certaines questions ou interactions particulières
disposer d'une interface agréable pour l'utilisateur, notamment mobile, sans recharger la page (donc encombrer le serveur)
avoir des "déclencheurs" pour contrôler le dérouler du sondage

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Nothus - Editeur en ligne</title>
	<style type="text/css">
	</style>
</head>
<body>

<div id="test">Page en cours de chargement...</div>

<script type="text/javascript"> 
/*Nothus // On lance le sondage seulement lorsque la page est terminée (événement ajouté à l'objet Window) */ 
try { window.addEventListener("load",function() { 
	
	
	/*N // Définition d'une fonction qui sera appelée "comme un objet", c'est-à-dire avec des propriétés et des méthodes. On peut autocharger celle-ci de cette manière : var maVariable = (function() { alert("coucou"); })(); */ 
	$Sondage = function(Fct_fin) {  
		
		
		/*N // Propriété "Fct_fin" (fonction stockée) : déclencher lorsque le sondage est terminé */ 
		this.Fct_fin = Fct_fin; 
		
		/*N // Propriété "ObjHTML" (objet) : stocker la référence vers un événement HTML pour afficher le HTML généré du sondage */ 
		this.ObjHTML = false; 
		
		/*N // Propriété "Sortie" (texte) : stocker le HTML généré, utiliser par la méthode "Afficher" */ 
		this.Sortie = ""; 
		
		/*N // Propriété "Q_id" (texte) : stocker la question en cours */ 
		this.Q_id = false; 
		
		/*N // Propriété "Questions" (objet) : stocker toutes les questions disponbles (l'ordre d'apparition ici détermine l'ordre d'apparition des questions). Le format est déterminé par avance. Chaque question peut avoir 0 (mais du coup peu d'intérêt...) ou N questions, qui peuvent être des fonctions */ 
		this.Questions = {
			"q1": {
				"question": "Quel est votre sexe ?",
				"description": "",
				"type": "choix simple",
				"reponses": {
					"r1": {
						"reponse": "homme",
						"vers": "q2"
					}, 
					"r2": {
						"reponse": "femme",
						"vers": "q2"
					}
				}
			},
			"q2": {
				"question": "Quel est votre tranche d'âge (révolu) ?",
				"description": "" ,
				"reponses": {
					"r1": {
						"reponse": "moins de 18 ans",
						"vers": false 
					}, 
					"r2": {
						"reponse": "18-25",
						"vers": false 
					}, 
					"r3": {
						"reponse": "25-45",
						"vers": false 
					}, 
					"r4": {
						"reponse": "45-65",
						"vers": false 
					}, 
					"r5": {
						"reponse": "plus de 65 ans",
						"vers": false 
					}
				}
			}
		}; 
		
		/*N // Propriété "Reponses" (objet) : stocker toutes les réponses, sous la forme Q_id = R_id (nom de la propriété à chaque fois) */ 
		this.Reponses = { 
			
		}; 
		
		/*N // Méthode "Afficher" : afficher le HTML généré dans l'objet HTML déterminé par l'utilisateur */ 
		this.Afficher = function(Texte) { 
			if (typeof Texte!="string") 
				Texte = this.Sortie; 
			if ( 
				this.ObjHTML!=false 
				& 
				typeof this.ObjHTML.innerHTML=="string" 
			) 
				this.ObjHTML.innerHTML = Texte; 
		}; 
		
		/*N // Méthode "Preparer" : lancer le sondage, et initialise la première question */ 
		this.Preparer = function(ObjHTML) { 
			this.ObjHTML = ObjHTML; 
			if ( 
				this.Q_verifier()==false 
			)
				this.Afficher("<p>Le sondage ne contient aucune question.</p>");
			this.Q_charger(); 
		}; 
		
		/*N // Méthode "Finir" : initialiser la propriété "Fin" et, si une fonction valide a été indiquée au début, tente de la lancer */ 
		this.Finir = function() { 
			this.Fin = true; 
			this.Sortie = "<p>Ce sondage est terminé, merci de votre participation.</p>"; 
			if (typeof this.Fct_fin=="function") { 
				try { 
					this.Fct_fin(); 
					this.Sortie += "<p>La fonction d'envoi a été lancée.</p>"; 
				} catch(e) { 
					this.Sortie += "<p>La fonction d'envoi a été lancéen mais a rencontré une erreur : "+e+"</p>"; 
				} 
				
				this.Afficher(false); 
			} 
		}; 
		
		/*N // Méthode "Q_verifier" : déterminer la question à afficher en fonction de Q_id et de sa correspondance dans le tableau des réponses */ 
		this.Q_verifier = function() { 
			if (
				this.Q_id==false 
				|
				typeof this.Questions[this.Q_id]=="undefined" 
			) {
				for (var i in this.Questions) { 
					if (typeof this.Reponses[i]!="string") { 
						this.Q_id = i; 
						return true; 
					} 
				} 
				return false; 
			} 
			return true; 
		}; 
		
		/*N // Méthode "Q_charger" : générer le formulaire pour que l'utilisateur puisse répondre. Par facilité de lecture, je n'utilise pas ici createElement, que les puristes me pardonnent... */ 
		this.Q_charger = function() { 
			if (typeof this.Questions[this.Q_id]=="undefined") { 
				this.Afficher("<p>Cette question n\'existe pas.</p>"); 
				return false; 
			} 
			var Q = this.Questions[this.Q_id]; 
			this.Sortie = "<sondage><question>"+Q["question"]+"</question><description>"+Q["description"]+"</description><form onSubmit=\"javascript: return ($Sondage.Q_repondre(this))?false:false;\">"; 
			for(var R_id in Q["reponses"]) { 
				var R = Q["reponses"][R_id]; 
				this.Sortie += '<input type="radio" name="reponse" value="'+R_id+'" /> '+R["reponse"]; 
			} 
			this.Sortie += '<input type="submit" value="répondre" /></form></sondage>'
			this.Afficher(false); 
		}; 
		
		/*N // Méthode "Q_repondre" : on vérifie rapidement que tout correspond et ce vers quoi renvoie la réponse : une autre question (texte), vers la fin (false) ou une fonction particulière */ 
		this.Q_repondre = function(Formulaire) { 
			if (typeof this.Questions[this.Q_id]=="undefined") { 
				this.Afficher("<p>Cette question n\'existe pas.</p>"); 
				return false; 
			} 
			var Q = this.Questions[this.Q_id]; 
			if (typeof Q["reponses"][Formulaire.reponse.value]!="object") { 
				this.Afficher("<p>Cette réponse n\'existe pas pour cette question.</p>"); 
				return false; 
			} 
			this.Reponses[this.Q_id] = Formulaire.reponse.value; 
			if (typeof Q["reponses"][Formulaire.reponse.value].vers=="string") { 
				this.Q_id = Q["reponses"][Formulaire.reponse.value].vers; 
				if (this.Q_verifier()) { 
					this.Q_charger(); 
				} 
			} else if (typeof Q["reponses"][Formulaire.reponse.value].vers=="function") { 
				Q["reponses"][Formulaire.reponse.value].vers(); 
			} else if (Q["reponses"][Formulaire.reponse.value].vers===false) { 
				this.Finir(); 
			} 
		}; 
		
	}; 
	
	/*N // On initialise le sondage, avec une fonction de fin sous la forme d'une alerte */ 
	$Sondage = new $Sondage(function() { 
		alert("envoi du formulaire..."); 
	}); 
	
	/*N // On prépare le sondage, en définissant une référence valide dans le DOM */ 
	$Sondage.Preparer(document.getElementById("test")); 
	
}); 

} catch(e) { 
	alert("Votre navigateur ne semble pas compatible avec grand chose..."); 
}
</script>
</body>
</html>

En terme de limites et de choses à voir sur ce morceau de script :

le rendre graphiquement esthétique...
vérifier, côté serveur, que l'utilisateur n'a pas tenté d'envoyer des données erronées ou corrompues (par la console ou autre),
autoriser d'autre choix d'un input de type radio (avec switch).

Bonne lecture et bon codage !

Julien G.