labohelp, nous allons vous aider sur labomep !


Accueil > Projets > labohelp, nous allons vous aider sur labomep !

Par Fedyna K., Guitierrez A., Robert Vincent en février 2020

Labomep vous connaissez ?

Considéré comme un instrument de torture mathématique par certains, source d’angoisses pour d’autres, labomep est un formidable outil pour s’entraîner sur les automatismes du point de vue du prof.

Et lorsque les élèves comprennent qu’on va les faire travailler et que l’on peut contrôler finement ce travail, vérifier par exemple s’il est fait au dernier moment, vient alors le moment où ils tentent de trouver toutes les parades pour passer à travers, éventuellement en inventant des bugs imaginaires.

Certains enseignants renoncent alors à utiliser cet outil alors que 80% des problèmes rencontrés par les élèves sont superficiels.

Le site internet labohelp va vous aider à résoudre les principaux problèmes rencontrés par les élèves.

Le cahier des charges

L’idée de base est donc de proposer un chemin de résolution aux principaux problèmes rencontrés sous labomep. Il s’agit dans 80% des cas de problèmes annexes, qui n’ont rien de mathématique. Et quand c’est un problème en mathématiques, un peu d’autonomie de la part de l’élève et quelques prises d’initiatives peuvent aider ou suffire.

Le format flash étant obsolète et déprécié, labohelp n’aidera pas les élèves à résoudre leur problème avec le plugin flash dans le navigateur web.

Ainsi par un jeu de question / réponse, l’assistant aide l’utilisateur (un élève) à résoudre tout seul son problème.

Si le problème n’est pas résolu, il invite l’utilisateur à contacter son professeur mais des précautions sont prises pour éviter les abus.

Les URLs générées sur labohelp étant uniques, si un enseignant reçoit une demande d’élève qui se trouve dans la base de donnée, il lui suffit de copier / coller cette adresse et de l’envoyer à l’élève.

Ainsi à un élève vraiment de mauvaise fois qui ne trouverait pas la page de connexion on pourrait lui envoyer cette adresse :

http://labohelp.nsi.xyz/index.php?ref=12

Laborobot répond à vos questions sur labohelp !

Pour rendre l’outil plus agréable, un petit robot est conçu. Un concours interne à l’équipe de développement du site (votation truquée bien évidemment) décide que le robot élu sera le croquis numéro 6.

Le croquis est donc réalisé au propre avec quelques améliorations graphiques, puis numérisé au format PNG et on y applique la charte graphique du site générée tout à fait aléatoirement sur coolors.co.

Tout est désormais en place pour développer un site amusant et coloré !

Choix techniques

L’idée étant de profiter de ce projet pour apprendre / progresser dans la maîtrise des langages HTML / PHP il est décidé de réaliser un unique script PHP, qui servira toutes les pages en interrogeant un annuaire de questions / réponses.

Après quelques tentatives infructueuses (car peu pertinentes) avec un fichier .csv, nous partons sur un fichier .xml qui nous permettra de structurer facilement l’annuaire de questions / réponses.

Le fichier XML

Les déclarations du fichier :

  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  2.  
  3. <!DOCTYPE ql [
  4.  
  5.         <!ELEMENT ql ANY>
  6.  
  7.         <!ELEMENT goto EMPTY>
  8.         <!ATTLIST goto ref CDATA #REQUIRED>
  9.  
  10.         <!ELEMENT prop ANY>
  11.         <!ATTLIST prop ref CDATA #REQUIRED>
  12.         <!ATTLIST prop type CDATA "visible">
  13.  
  14.         <!ELEMENT t ANY>
  15.         <!ELEMENT r ANY>
  16.         <!ELEMENT url ANY>
  17. ]>

Télécharger

On decline ici trois declaration DTD :
-  !DOCTYPE : définit la classe qui englobe le xml
-  !ELEMENT : définit un élément du fichier xml
-  !ATTLIST : qui permet de déclarer une liste d’attributs

L’annuaire de questions / réponses en question :

  1. <ql>
  2.  
  3.         <prop ref="0">
  4.                 <r>Quel est ton problème ?</r>
  5.  
  6.                 <prop ref="1">
  7.  
  8.                         <t>Je n'arrive pas à me connecter</t>
  9.                         <r>Pourquoi n'arrives-tu pas à te connecter ?</r>
  10.                        
  11.                         <prop ref="11">
  12.                                 <t>Je ne connais pas mes identifiants</t>
  13.                                 <r>Ton enseignant t'a donné en début d'année des identifiants et il t'a demandé de les copier dans ton agenda ou dans ton carnet de correspondance et dans ton cahier de maths.</r>
  14.                         </prop>

Télécharger

Ici, <prop ref="0"> désigne le début d’un élément (prop) avec comme attribut ref="0" et type="visible" (qui est implicite).

Comme il fait près de 400 lignes, on ne va pas le transcrire ici, mais vous pouvez le reconstruire par rétro-ingénierie en parcourant les différentes pages du site, il y en a plus 42 !

Ah on me souffle dans l’oreillette qu’il y aurait des pages cachées (6 à la date du 11/02/20), ainsi qu’un menu caché qui sera accessible ultérieurement ! Sauras-tu les retrouver ?

Les scripts PHP

Si le site comporte un unique fichier php : index.php, le visiteur a l’impression qu’il y a des dizaines de pages sur ce site, et c’est d’ailleurs le cas ! Plus de 42 pages garanties ! Le rôle des scripts php est de servir ces pages, en interrogeant l’annuaire de questions / réponses, la référence étant passé dans l’adresse internet.

Le script ci-dessous récupère la référence passée dans l’adresse internet, et interroge le fichier .xml pour y extraire le contenu souhaité, c’est-à-dire la réponse souhaitée à la question posée (si elle existe).

  1. <?php
  2.         if (isset($_GET["ref"])) {dialog($_GET["ref"], $xml);}
  3.         else {dialog("0", $xml);}
  4. ?>

Télécharger

Le script ci-dessous récupère la référence passée dans l’adresse internet, et interroge le fichier .xml pour y extraire le contenu souhaité, il va générer les différentes propositions cliquables.

  1. <?php
  2.         if (!isset($_GET["ref"])) {propose("0", $xml);}
  3.         else {propose($_GET["ref"], $xml);}
  4. ?>

Télécharger

Enfin celui ci génère les deux boutons de navigations :

  1. <a class="nav" href=<?php
  2. if (isset($_GET['ref']) && strlen($_GET['ref']) > 1)
  3. {$retour = substr($_GET['ref'],0,strlen($_GET['ref'])-1);}
  4. else{$retour = 0;}
  5. echo "'index.php?ref={$retour}'";
  6. ?>>Retour en arrière</a><a class="nav" href="index.php">Recommencer</a>

Télécharger

Tout repose donc sur des fonctions php, qui vont interpréter le fichier xml.

Deux fonctions php ont été définis. Une seule sera présenté ici histoire qu’un visiteur qui souhaite juste récupérer un projet de NSI tout fait ait quand même quelque chose à faire (...)

  1. <?php
  2. $xml = simplexml_load_file("monbeaufichierxml.xml");
  3. $prop = 0;
  4.  
  5. function dialog($ref, $xmlClass)
  6. {
  7.         $green = 1;
  8.         foreach ($xmlClass->children() as $child) {
  9.                 if ($child->getName() == "prop")
  10.                 {
  11.                         $green = 0;
  12.                 }
  13.         }
  14.         foreach ($xmlClass->children() as $child) {
  15.                 if ($child->count() != 0)
  16.                 {
  17.                         $GLOBALS["prop"] = $child["ref"];
  18.                         dialog($ref,$child);
  19.                 }
  20.                 else{
  21.                         if ($GLOBALS["prop"] == $ref || substr($ref,0,strlen($GLOBALS["prop"])) == $GLOBALS["prop"] || ($GLOBALS["prop"] == "0" && $ref != "0"))
  22.                         {
  23.                                 if($child->getName() == "r")
  24.                                 {
  25.                                         echo "<p class='lh" . str_repeat("f", $green) . "Dialog'>". $child . "</p>\n";
  26.                                 }
  27.                                 if ($child->getName() == "url")
  28.                                 {
  29.                                         echo "<a class='lh" . str_repeat("l", $green) . "Dialog' href=\"{$child}\">". $child . "</a>\n";       
  30.                                 }
  31.                                 if ($child->getName() == "t")
  32.                                 {
  33.                                         echo "<p class='usDialog'>". $child . "</p>\n";
  34.                                 }
  35.                         }      
  36.                 }
  37.         }
  38. }

Télécharger

La feuille de style

Il est possible de charger le site web sans la feuille de style avec cette adresse :
https://labohelp.nsi.xyz/index.php?ref=12&style=no

Par défaut, le site web labohelp se charge dans le navigateur en exploitant une feuille de style accessible ici :
https://labohelp.nsi.xyz/css/style.css

Minimaliste mais efficace, la feuille de style intègre également la gestion des écrans ayant une petite résolution avec la déclaration CSS

  1. @media screen and (max-width: 1000px) {
  2.  
  3. }

Télécharger

Du coup si l’écran de ton ordinateur offre une résolution très faible, ton navigateur affichera la version pour smartphone du site.

labohelp pour qui ?

- Pour les élèves qui se noient dans un verre d’eau
- Pour les élèves qui cherchent une réponse à un problème courant
- Pour les enseignants qui souhaitent l’utiliser avec leurs élèves

Il est possible de faire évoluer l’annuaire de questions / réponses, si vous êtes enseignant et que vous souhaitez l’enrichir contactez nous.

Si vous êtes un élève, la réponse à vos problèmes sur labomep se trouve peut-être sur labohelp.nsi.xyz, nous ne répondrons à aucun message concernant un bug sur labomep envoyé par un élève.

Mots-clés