Projets d'élèves

1. Introduction

Vous êtes vous déjà sentit différent? Vous voulez savoir si vous êtes quelqu'un de réservé ou quelqu'un d’extrêmement extraverti? Il existe souvent des tests de ce type dans les magazines mais vous voulez pouvoir faire passer le test à un ami sans avoir besoin de lui prêter le magazine ou tout simplement refaire le test une deuxième fois sans être influencé par les coches précédentes? Et bien mon projet servira à vous simplifier la vie. Vous n'aurez qu'à envoyer un lien aux personnes que vous voulez et tout le monde pourra apprendre à se connaître. De plus ce test n'est pas comme les autres. Il est simple et rapide et vous aurez la certitude qu'il ne collecte pas vos données personnelles puis-qu’aucune information n'est enregistrée sur un serveur.

2. Matériel et méthodes

Pour réaliser l'entièreté de mon projet, j'ai eu besoin d'un crayon, de papier, d'un ordinateur, un serveur sur lequel j'aurai déposé les fichiers de ma page. Pour écrire le code j'ai utilisé comme éditeur de texte Notepad ++ car il était déjà installé sur mon ordinateur et j'ai aussi utilisé plusieurs navigateurs pour tester le fonctionnement de ma page.

J'ai choisi d'écrire le code de cette page en html bien sur et après avoir creusé un peu la question je me suis rendu compte que le JavaScript pouvait être un choix intéressant car il y a la possibilité de faire afficher une popup au client et éviter ainsi que le formulaire s’envoie avec des informations erronées et qu'il doive tout recommencer.

Tout d'abord il m'a fallu réfléchir à un système de questionnaire, et celui qui m'a paru le plus révélateur et le plus simple est celui d'un score attribué à chaque réponse pour chaque question et qu'à la fin un total de ce score est effectué et suivant ce total une déduction de personnalité peut être réalisée.

Ensuite il m'a fallu trouver un moyen de représenter un questionnaire sur une page html. J'ai choisi d'utiliser des pastilles ou l'utilisateur n'a qu'à cliquer sur son choix et si une autre pastille pour la même question était déjà cochée, elle sera enlevée. Voici un exemple de question :

En html voici comment on intègre ce genre de pastilles :

<input type="radio" name="Q3" onClick="R3=1" /> Médiocre <br />

Grâce à la balise input on intègre un élément de type radio (ce genre de pastilles) et possédant le "name" Q3 car il s'agit de la question 3. Toutes les réponses possible pour une question doivent posséder le même name, ce qui empêchera la possibilité de réponse multiples.

Au début de la page on aura deux champs ou l'on insérera son prénom et son nom de famille, pour que les messages adressés a l'utilisateur soient ciblés. Ces deux champs doivent être soumis à une condition : de 2 à 15 caractères par champ sinon le champ devient rouge grâce à une fonction qui contrôle et modifie le style de la couleur de fond du champ. La fonction doit s’exécuter lorsque l'utilisateur déplace le curseur du champ grâce à onblur.

Voici l'appel de la fonction,

onblur="verifierTaille(this)"

La fonction de vérification de taille est appelée et si les contraintes ne sont pas respectées on appelle la fonction surligne qui colorie le champ. Voici la fonction :

function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#FF6666";
   else
      champ.style.backgroundColor = "";
}

Cette fonction doit se placer dans un fichier portant l'extension .js qui se situera dans le même répertoire que l'index.html.

On appelle ce fichier grâce à cette instruction dans le head:

<script src="actions.js" ></script>

la balise script définit ce qui se trouve à l'intérieur comme du javascript. Dans mon fichier actions.js j'ai ajouté la fonction que l'on vient de voir mais aussi une fonction de vérification qui contrôle lors de l'envoi du formulaire que tous les champs sont remplis et que toutes les questions ont une réponse.

Une valeur est définie à la variable R1 lorsque le client clique sur une coche de la question 1. Il est donc simple de faire une fonction qui retourne vrai si toutes les réponses ont une valeur. (Ici j'ai noté une valeur autre que 0 car à l'initialisation de la variable j'ai choisi de la mettre à 0)

function verifierRadio() {
     if( R1 != "0" & R2 != "0" & R3 != "0" & R4 != "0" & R5 != "0" & R6 != "0" )
          return true;
	 
     else 
     {
          
          return false;
     }
}

Et pour finir pour diriger ma réponse il me fallait faire une somme de toutes les réponses obtenues et renvoyer une valeur par intervalle ce qui me permet de délimiter les types de gens.

var somme = R1 + R2 + R3 + R4 + R5 + R6;

3. Résultats

Le résultat se trouve sur Ce lien. On peut donc voir et tester, la page fonctionne. Si l'on oublie de remplir le champ et que l'on clique dehors du champ la case devient rouge. Si l'on ne réponds pas à toutes les questions le formulaire ne peut pas être envoyé et l'utilisateur ne recevra aucune réponse or mis un message d'alerte. Voici un exemple de message d'alerte :

4. Discussion

Ce projet est un bon exemple de l'utilité limitée du JavaScript puisqu'il montre que l'on ne peut pas utiliser de bases de données et collecter donc des informations avec le client. Ce langage est utile en surface puisqu'il permet de finaliser sa page et apporter une jolie finition. Mais même avec un langage pas forcement adapté j'ai pu produire un résultat, bien sur pas optimisé, mais fonctionnel. Etant donné que ce langage est dérivé du C, il m'a été possible de mettre en pratique des fonctions de conditions et d'introduire des fonctions dans d'autres fonctions comme par exemple ici :

function verifierTaille(champ)
{

if(champ.value.length < 2 || champ.value.length > 15)
   {
      surligne(champ, true);
	  return false;
   }

Dans la fonction verifierTaille on utilise la fonction surligne. De plus j'ai appris à maitriser les fonctions qui prennent des paramètres et qui en renvoient. (return .... ;)

Il n'y a pas d'erreurs à proprement parler puisque tout fonctionne mais il reste des choses à améliorer pour densifier le code. La plus grande difficulté que j'ai rencontré, à été d'alterner entre le html et le javaScript. Mettre en lien les deux langages n'est pas toujours facile. Comprendre comment fonctionnent le système d'arborescence dans le JavaScript était aussi quelque chose de nouveau pour moi.

5. Conclusion

Bien que le test de personnalité ne soit pas quelque chose d'innovant ou de totalement utile, il a été pour moi une grande ouverture et une bonne mise en pratique de la programmation. J'ai passé beaucoup de temps à comprendre les concepts du JavaScript ce qui explique pourquoi mon projet n'est pas forcement conséquent. J'ai préféré me lancer dans un projet simple et pour lequel je maitrise totalement tous les concepts plutôt qu'un projet qui m'aurait obligé à pomper toutes mes idées sur le net.

Ce projet est simple mais c'est une sorte de base pour partir sur des centaines de possibilités. On pourrait grâce à une base de données stocker l'information et faire des statistiques des résultats. Mieux encore on pourrait laisser à un utilisateur le choix de créer des questions et des réponses sans qu'il n'ai besoin d’accéder au code. Réaliser ce projet n'était pas forcement plus simple qu'un projet fait en php mais la complexité de celui-ci n'est pas au même endroit.

Annexes

Références La documentation qui m'a été utile se trouve en grande majorité sur OpenClassrooms. J'ai suivi le cours total sur le JavaScript et après ceci j'ai pu par moi même avec mes connaissances écrire ma page.

J'ai aussi fréquenté des sites qui détaillent les instructions en css et leur utilité css et un site qui présente toutes les couleurs importantes et la valeur associée ici.