Refonte du modèle MVC

.gitignore

@@ -14,4 +14,6 @@
 
 /node_modules/
 
-/.idea
+/.idea
+
+*.db

EnigmePython/Multi/ASCII.py

@@ -0,0 +1 @@
+def ascii()

EnigmePython/Solo/premiere.py

@@ -0,0 +1,14 @@
+# Affiche Hello world !
+
+print("Hello World !")
+
+# Declaration de variable
+
+num = 1
+string = "Oi"
+liste=[num,string]
+
+print(liste)
+
+
+# Utilisation de fonction

WEB/.htaccess

@@ -0,0 +1,2 @@
+php_flag display_errors on
+php_value error_reporting E_ALL

WEB/.user.ini

@@ -0,0 +1,3 @@
+display_errors = On
+log_errors = Off
+error_reporting = E_ALL & E_NOTICE & E_DEPRECATED & E_STRICT & E_WARNING

WEB/Config/Autoload.php

@@ -34,10 +34,10 @@ class Autoload
     {
         global $rep;
         $filename = $class.'.php';
-        $dir =array('Model/','./','Config/','Controller/');
+        $dir =array('Model/','./','Config/','Controller/','Metier/', 'Factory/');
         foreach ($dir as $d){
         $file=$rep.$d.$filename; 
-        //echo $file;
+        // echo $file."\n";
         if (file_exists($file))
         {
             include $file;

WEB/Config/Config.php

@@ -1,20 +1,10 @@
 <?php
 //préfixe
-$rep = __DIR__ . '/../';
+$rep = '';
 
-//BD
-// $dsn = 'mysql:host=londres.uca.local; dbname=dbnogarnier1';
-// $user = 'nogarnier1';
-// $password = 'achanger';
-
-// scripted.db
-
-// $dsn = 'mysql:host=localhost; dbname=scripted';
-// $user = 'root';
-// $password = 'p';
-
-// SQULITE3
-$dsn = './Model/scripted.db'; 
+// BD
+$dsn = './scripted.db';
+// $dsn = 'C:\\wamp64\\www\\scripted.db'; 
 
 //Sel de hashage
 $sel = "JeSuisUnSeldeHashageEtJeSuisUniqueEtTresSecuriseEtJeSuisTresLong";
@@ -23,9 +13,18 @@ $sel = "JeSuisUnSeldeHashageEtJeSuisUniqueEtTresSecuriseEtJeSuisTresLong";
 //Page
 $vues['main'] = 'View/src/pages/Main.php';
 $vues['presentation'] = 'View/src/pages/Presentation.html';
-$vues['login'] = '../View/src/pages/LogSign/Login.php';
+$vues['login'] = 'View/src/pages/LogSign/Login.php';
 $vues['signUp'] = 'View/src/pages/LogSign/SignUp.php';
-$vues['enigme'] = 'View/src/pages/Enigme/palindrome.html';
+$vues['test'] = 'View/src/pages/FirstTests/FirstTest1.html';
+$vues['next'] = 'View/src/pages/FirstTests/FirstTest';
+// Enigme
+$vues['enigme'] = 'View/src/pages/Enigme/Palindrome.html';
+$vues['chouette'] = 'View/src/pages/Enigme/Chouette.html';
+$vues['cesarEncrypt'] = 'View/src/pages/Enigme/CesarEncrypt.html';
+$vues['cesarDecrypt'] = 'View/src/pages/Enigme/CesarDecrypt.html';
+$vues['chuckNorris'] = 'View/src/pages/Enigme/ChuckNorris.html';
+$vues['hanoi'] = 'View/src/pages/Enigme/Hanoi.html';
+$vues['trianglePascal'] = 'View/src/pages/Enigme/TrianglePascal.html';
 
 //Error
 $vues['erreur'] = 'View/src/pages/Erreur.php';

WEB/Config/Connection.php

@@ -19,31 +19,41 @@
 
 class Connection extends SQLite3
 {
-   private $stmt;
-   private $result;
-  function __construct($dsn)
+    private $stmt;
+    private $result;
+    function __construct($dsn)
     {
         $this->open($dsn);
         $this->enableExceptions(true);
     }
 
-   public function executeQuery(string $query, array $parameters = []) :bool {
-       $this->stmt = parent::prepare($query);
-       foreach ($parameters as $name => $value) {
-           $this->stmt->bindValue($name, $value[0], $value[1]);
-       }
-       $this->result=$this->stmt->execute();
-       return $this->result;
-   }
-
-   public function getResults(): array {
-       return $this->result->fetchArray();
-   }
-}
+    public function executeQuery(string $query, array $parameters = []): bool
+    {
+        $this->stmt = parent::prepare($query);
+        foreach ($parameters as $name => $value) {
+            $this->stmt->bindValue($name, $value[0], $value[1]);
+        }
+        $this->result = $this->stmt->execute();
+        if ($this->result == false) {
+            $this->result->finalize();
+            return false;
+        } else {
+            $this->result->finalize();
+            return true;
+        }
+    }
 
-// class Connection extends SQLite3{
-//     function __construct()
-//         {
-//             $this->open("./Model/scripted.db");
-//         }
-// }
+    public function getResults(): array
+    {
+        $resultArray = $this->result->fetchArray(SQLITE3_ASSOC);
+        $multiArray = array();
+        while($resultArray != false){ //read next row
+            $multiArray[]=$resultArray;
+            $resultArray = $this->result->fetchArray(SQLITE3_ASSOC); //insert all rows to $multiArray
+        }
+        if ($multiArray == NULL)
+            return array();
+        else
+            return $multiArray;
+    }
+}

WEB/Controller/EnigmeGateway.php

@@ -1,5 +1,4 @@
 <?php
-include_once "../Factory/EnigmeFactory.php";
 class EnigmeGateway
 {
     private Connection $con;
@@ -8,9 +7,16 @@ class EnigmeGateway
      * @param Connection $con
      */
 
-    public function __construct(Connection $con)
+    public function __construct()
     {
+        global $dsn, $rep, $vues, $error;
+        try{
+        $con = new Connection($dsn);
         $this->con = $con;
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        }
     }
 
     /**
@@ -21,6 +27,12 @@ class EnigmeGateway
         $this->con = $con;
     }
 
+    /**
+     * It inserts a new row in the Enigme table, with the values of the Enigme object passed as
+     * parameter
+     * 
+     * @param Enigme enigme
+     */
     public function insert(Enigme $enigme)
     {
         $query = "INSERT INTO Enigme VALUES (:id,:admin,:enonce,:aide,:rappel,:solution,:test,:tempsDeResolution,:points)";
@@ -37,6 +49,12 @@ class EnigmeGateway
         ));
     }
 
+    /**
+     * It deletes a row from the table Enigme where the idEnigme is equal to the idEnigme passed as a
+     * parameter
+     * 
+     * @param string idEnigme the id of the enigma
+     */
     public function delete(string $idEnigme)
     {
         $query= "DELETE FROM Enigme WHERE idEnigme=:idEnigme";
@@ -45,6 +63,45 @@ class EnigmeGateway
         ));
     }
 
+    /**
+     * It returns an array of Enigme objects
+     * For multiplayer Enigma
+     * 
+     * @return array An array of Enigme objects.
+     */
+    public function findMultiEnigma() : array
+    {
+        $query = "SELECT * FROM Enigme
+        WHERE points IS NOT NULL OR points != 0";
+        $this->con->executeQuery($query);
+        $tabEnigme=EnigmeFactory::create($this->con->getResults());
+        return $tabEnigme;
+    }
+
+    /**
+     * It returns an array of Enigma objects
+     * For Solo enigma
+     * 
+     * @return array of objects.
+     */
+    public function findSoloEnigma(){
+        $query = "SELECT * FROM Enigme
+        WHERE points IS NULL OR points = 0";
+        $this->con->executeQuery($query);
+        $tabEnigme=EnigmeFactory::create($this->con->getResults());
+        return $tabEnigme;
+    }
+
+    public function findEnigmaFromPartie(string $idPartie){
+        $query = "SELECT * FROM Enigme e, Contenir c
+        WHERE c.partie=:idPartie";
+        $this->con->executeQuery($query, array(
+            'idPartie' => array($idPartie, SQLITE3_TEXT)
+        ));
+        $tabEnigme=EnigmeFactory::create($this->con->getResults());
+        return $tabEnigme;
+    }
+
     public function findById(string $idEnigme) : array
     {
         $query="SELECT * FROM Enigme WHERE idEnigme =:idEnigme";

WEB/Controller/FrontController.php

@@ -3,16 +3,33 @@ class FrontController
 {
     function __construct()
     {
-        global $rep, $vues, $error;
-        session_start();
-        // $role=$_SESSION['role']; 
-        // $action=$_REQUEST['action'];
-        echo "frontController";
-        try {
-        new UserController();
+        try { 
+            global $error, $view, $rep;
+            session_start();
+            // Check role permissions
+            if (isset($_SESSION['role'])) {
+                $role = $_SESSION['role'];
+            } else {
+                $role = "visitor";
+            }
+            // Check if action exists
+            $action = $_REQUEST['action'];
+            if ($role == "user") {
+                if ($action == NULL) {
+                    new UserController();
+                } else if (method_exists('UserController', $action) == false) {
+                    $error = "Action non valide " . $action;
+                    require($rep . $view['erreur']);
+                }
+                else {
+                    new UserController();
+                }
+            } else {
+                new VisitorController();
+            }
         } catch (Exception $e) {
             $error = $e->getMessage();
-            require ($rep . $vues['erreur']);
+            require($rep . $view['erreur']);
         }
     }
 }

WEB/Controller/PartieGateway.php

@@ -1,6 +1,4 @@
 <?php
-
-include_once "../Factory/PartieFactory.php";
 class PartieGateway
 {
     private Connection $con;
@@ -8,39 +6,70 @@ class PartieGateway
     /**
      * @param Connection $con
      */
-    public function __construct(Connection $con)
+    public function __construct()
     {
+        global $dsn, $rep, $vues, $error;
+        try{
+        $con = new Connection($dsn);
         $this->con = $con;
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        }
     }
 
     /**
-     * @param array $listeJoueur
+     * @param array $listeUtilisateur
      */
-
-    public function creerPartieMulti(array $listeJoueur){
-        $query = "SELECT * FROM Enigme
-        WHERE points IS NOT NULL OR points != 0";
+    public function partieInQueueExists() : bool{
+        $query = "SELECT count(*) FROM PARTICIPER WHERE etat = 0";
         $this->con->executeQuery($query);
         $results = $this->con->getResults();
-        $query= "SELECT max(p.id)
-        FROM PARTIE p;";
+        if ($results[0]['count(*)'] == 0)
+            return false;
+        else
+            return true;
+    }
+
+    public function findPartieMaxId() : int{
+        $query = "SELECT max(id) FROM Partie";
         $this->con->executeQuery($query);
-        $max=$this->con->getResults()[0]["max"];
-        $partie=PartieFactory::createPartieMulti($max,$results);
-        $query= "INSERT INTO Partie VALUES (:idPartie,:idEnigme)";
+        $results=$this->con->getResults();
+        if ($results[0]['max(id)']==NULL)
+            return 0;
+        else
+            return $results[0]['max(id)'];
+    }
+    public function creerPartieMulti(int $max, array $tabEnigme) : Partie{
+        $partie=PartieFactory::createPartieMulti($max+1,$tabEnigme);
+        $query= "INSERT INTO Partie VALUES (:idPartie,CURRENT_DATE)";
         $this->con->executeQuery($query, array(':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER)));
-        foreach($partie->getListeEnigme() as $Enigme){
-            $query= "INSERT INTO Contenir VALUES (:idPartie, :idEnigme)";
-            $this->con->executeQuery($query, array(
-            ':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER),
-            ':idEnigme' => array($Enigme->getIdEnigme(), SQLITE3_INTEGER)));
-        }
-        foreach($listeJoueur as $Joueur){
-            $query= "INSERT INTO Participer VALUES (:idPartie, :idJoueur, TRUE)";
-            $this->con->executeQuery($query, array(
-            ':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER),
-            ':idEnigme' => array($Enigme->getIdEnigme(), SQLITE3_INTEGER)));
+        if (count($partie->getListeEnigme()) != 0) {
+            foreach ($partie->getListeEnigme() as $Enigme) {
+                $query = "INSERT INTO Contenir VALUES (:idPartie, :idEnigme)";
+                $this->con->executeQuery($query, array(
+                    ':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER),
+                    ':idEnigme' => array($Enigme->getIdEnigme(), SQLITE3_INTEGER)
+                )
+                );
+            }
         }
+        return $partie;
+    }
+
+    public function rejoindrePartieMulti(int $idPartieInQueue,array $tabEnigme) : Partie{
+        $partie = PartieFactory::createPartieMulti($idPartieInQueue,$tabEnigme);
+        return $partie;
+    }
+
+    public function findPartieInQueue(){
+        $query = "SELECT p.id
+        FROM Partie p, Participer pa
+        WHERE pa.etat=0
+        AND pa.partie=p.id";
+        $this->con->executeQuery($query);
+        $results = $this->con->getResults();
+        return $results[0]['id'];
     }
 
     public function creerPartieSolo(Utilisateur $utilisateur){
@@ -67,10 +96,10 @@ class PartieGateway
             ':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER),
             ':idEnigme' => array($Enigme->getIdEnigme(), SQLITE3_INTEGER)));
         }
-        $query= "INSERT INTO Participer VALUES (:idPartie, :idJoueur, TRUE)";
+        $query= "INSERT INTO Participer VALUES (:idPartie, :idUtilisateur, TRUE)";
         $this->con->executeQuery($query, array(
         'idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER),
-        'idJoueur' => array($utilisateur->getEmail(), SQLITE3_INTEGER)));
+        'idUtilisateur' => array($utilisateur->getEmail(), SQLITE3_INTEGER)));
     }
 
     public function delete(string $idPartie){

WEB/Controller/UserController.php

@@ -2,179 +2,194 @@
 
 class UserController
 {
-    private Connection $con;
-
-    function __construct() {
-        try{
-            echo "UserController";
+    private UserModel $model;
+    function __construct()
+    {
+        try {
             global $dsn, $rep, $vues, $error;
-            $this->con=new Connection($dsn);
-            echo "USconection";
-            $action=$_REQUEST['action'];
-            switch($action) {
+            $this->model = new UserModel();
+            $action = $_REQUEST['action'];
+            //register_event_handler('add_to_queue',array($this,"onAddToQueue"));
+            switch ($action) {
                 case NULL:
                     $this->goToHome();
                     break;
-                case "signUp":
-                    $this->signUp();
-                    break;
-                case "login":
-                    $this->login();
-                    break;
                 case "goToPresentation":
                     $this->goToPresentation();
                     break;
                 case "goToHome":
                     $this->goToHome();
                     break;
-                case "goToLogin":
-                    $this->goToLogin();
-                    break;
-                case "goToSignUp":
-                    $this->goToSignUp();
+                case "goToTest":
+                    $this->goToTest();
                     break;
                 case "goToEnigme":
                     $this->goToEnigme();
                     break;
+                case "goToChouette" :
+                    $this->goToChouette();
+                    break;
+                case "goToCesarEncrypt":
+                    $this->goToCesarEncrypt();
+                    break;
+                case "goToCesarDecrypt":
+                    $this->goToCesarDecrypt();
+                    break;
+                case "goToChuckNorris" :
+                    $this->goToChuckNorris();
+                    break;
+                case "goToHanoi" :
+                    $this->goToHanoi();
+                    break;
+                case "goToTrianglePascal":
+                    $this->goToTrianglePascal();
+                    break;
                 case "goToQueue":
                     $this->goToQueue();
                     break;
+                case "goToNext":
+                    $this->goToNext();
+                    break;
+                case "logout":
+                    $this->logout();
+                    break;
+                default:
+                    $error = "Action non valide";
+                    require($rep . $vues['erreur']);
+                    break;
             }
-        } catch (PDOException $e)
-        {
-            $error = $e->getMessage();
-            require ($rep.$vues['erreur']);
-        }catch (Exception $e)
-        {
+        } catch (PDOException $e) {
             $error = $e->getMessage();
-            require ($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
+        } catch (Exception $e2) {
+            $error = $e2->getMessage();
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function signUp() {
-        global $rep, $vues, $sel, $error;
+    public function goToHome()
+    {
         try {
-            $gateway = new UtilisateurGateway($this->con);
-            $validation = new Validation();
-            if (! $validation->ValidateEmail($_REQUEST['email'])) {
-                $error = "Email invalides.";
-                throw (new Exception("Email non valide"));
-            }
-            if(! $validation->ValidateUsername($_REQUEST['username'])){
-                $error = "Nom d'utilisateur invalides. Il ne doit pas contenir de caractère spéciaux.";
-                throw(new Exception("Pseudo non valide"));
-            }
-            if(! $validation->ValidatePassword($_REQUEST['password'])){
-                $error = "Mots de passe invalides. Il ne doit pas dépasser 100 caractères.";
-                throw(new Exception("Mot de passe non valide"));
-            }
-            $j = $gateway->getUtilisateurByEmail($_REQUEST['email']);
-            if ($j != null) {
-                $error = "Email déjà utilisé.";
-                throw (new Exception("Email déjà utilisé"));
-            }
-            $password = password_hash($_REQUEST['password'], PASSWORD_DEFAULT);
-            $estAdmin = $gateway->getEstAdminByEmail($_REQUEST['email']);
-            $Utilisateur = new Utilisateur($_REQUEST['email'], $_REQUEST['username'], $password, $estAdmin);
-            $gateway->insert($Utilisateur);
-            $_SESSION['connected'] = 'true';
-            $_SESSION['role'] = 'utilisateur';
-            require ($rep.$vues['main']);
-        }catch (PDOException $e)
-        {
-            $error = "Erreur de connexion à la base de données.";
-            require ($rep.$vues['erreur']);
+            global $rep, $vues;
+            require($rep . $vues['main']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
         }
-        catch (Exception $e){
-            require($rep.$vues['erreur']);
+    }
+    public function goToPresentation()
+    {
+        try {
+            global $rep, $vues;
+            require($rep . $vues['presentation']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
         }
     }
-    private function login(){
-        global $rep, $vues, $sel, $error;
+    public function goToTest()
+    {
         try {
-            $gateway = new UtilisateurGateway($this->con);
-            $Utilisateur = $gateway->getUtilisateurByEmail($_REQUEST['email']);
-            if ($Utilisateur->getEmail() == null){
-                $error = "Utilisateur non trouvé.";
-                throw new Exception("Utilisateur introuvable");
-            }
-            $mdp = $gateway->getMdpByEmail($_REQUEST['email']);
-            if (password_verify($mdp, $_REQUEST['password'])){
-                $error = "Mot de passe incorrect.";
-                throw new Exception("Mot de passe invalide");
-            }
-            $estAdmin =$gateway->getEstAdminByEmail($_REQUEST['email']);
-            if ($estAdmin == true) {
-                $_SESSION['role'] = "admin";
-            }
-            else{
-                $_SESSION['role'] = "utilisateur";
-            }
-
-            $_SESSION['connected'] = 'true';    
-            require ($rep.$vues['main']);
-        }catch (Exception $e){
-            require($rep.$vues['erreur']);
+            global $rep, $vues;
+            require($rep . $vues['test']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
+        }
+    } 
+    public function goToEnigme()
+    {
+        try {
+            global $rep, $vues;
+            require($rep . $vues['enigme']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToPresentation() {
-        global $rep, $vues, $error;
+    public function goToChouette()
+    {
         try {
-            require ($rep.$vues['presentation']);
-        }catch (Exception $e){
-            $error = "Erreur Inconnue";
-            require($rep.$vues['erreur']);
+            global $rep, $vues;
+            require($rep . $vues['chouette']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToHome() {
-        global $rep, $vues, $error;
+    public function goToCesarEncrypt()
+    {
         try {
-            require ($rep.$vues['main']);
-        }catch (Exception $e){
+            global $rep, $vues;
+            require($rep . $vues['cesarEncrypt']);
+        } catch (Exception $e) {
             $error = "404";
-            require($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToLogin() {
-        global $rep, $vues, $error;
+    public function goToCesarDecrypt()
+    {
         try {
-            require ($rep.$vues['login']);
-        }catch (Exception $e){
+            global $rep, $vues;
+            require($rep . $vues['cesarDecrypt']);
+        } catch (Exception $e) {
             $error = "404";
-            require($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToSignUp() {
-        global $rep, $vues, $error;
+    public function goToChuckNorris()
+    {
         try {
-            require ($rep.$vues['signUp']);
-        }catch (Exception $e){
+            global $rep, $vues;
+            require($rep . $vues['chuckNorris']);
+        } catch (Exception $e) {
             $error = "404";
-            require($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToEnigme() {
-        global $rep, $vues, $error;
+    public function goToHanoi()
+    {
         try {
-            require ($rep.$vues['enigme']);
-        }catch (Exception $e){
+            global $rep, $vues;
+            require($rep . $vues['hanoi']);
+        } catch (Exception $e) {
             $error = "404";
-            require($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
         }
     }
-
-    private function goToQueue() {
-        global $rep, $vues, $error;
+    public function goToTrianglePascal()
+    {
         try {
-            require ($rep.$vues['Queue']);
-        }catch (Exception $e){
+            global $rep, $vues;
+            require($rep . $vues['trianglePascal']);
+        } catch (Exception $e) {
             $error = "404";
-            require($rep.$vues['erreur']);
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function goToNext()
+    {
+        try {
+            global $rep, $vues, $error;
+            require($rep . $vues['next'].$_REQUEST['num'].".html");
+        } catch (Exception $e) {
+            $error = "Erreur Inconnue";
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function goToQueue()
+    {
+        try {
+            global $rep, $vues, $error;
+            //require($rep . $vues['Queue']);
+            $this->model->addToQueue();
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
         }
     }
+    public function logout()
+    {
+        $_SESSION['role'] = 'visitor';
+        header('Location: index.php');
+    }
 }

WEB/Controller/UtilisateurGateway.php

@@ -1,5 +1,4 @@
 <?php
-include_once "../Factory/PartieFactory.php";
 class UtilisateurGateway
 {
     private Connection $con;
@@ -7,8 +6,15 @@ class UtilisateurGateway
     /**
      * @param Connection $con
      */
-    public function __construct(Connection $con){
+    public function __construct(){
+        global $dsn, $rep, $vues, $error;
+        try{
+        $con = new Connection($dsn);
         $this->con = $con;
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        }
     }
 
     /**
@@ -20,18 +26,18 @@ class UtilisateurGateway
     }
 
     public function insert(Utilisateur $utilisateur) : void{
-        $query = "INSERT INTO Utilisateur VALUE (:email,:pseudo,:mdp,:estAdmin)";
+        $query = "INSERT INTO Utilisateur VALUES (:email,:pseudo,:mdp,:estAdmin)";
         $this->con->executeQuery($query,	array(
-            ':email'	=>	array($utilisateur->getEmail(),PDO::PARAM_STR),
-            ':pseudo'	=>	array($utilisateur->getPseudo(),PDO::PARAM_STR),
-            ':mdp'	=>	array($utilisateur->getMdp(),PDO::PARAM_STR),
-            ':estAdmin'	=>	array($utilisateur->getEstAdmin(),PDO::PARAM_BOOL)));
+            ':email'	=>	array($utilisateur->getEmail(),SQLITE3_TEXT),
+            ':pseudo'	=>	array($utilisateur->getPseudo(),SQLITE3_TEXT),
+            ':mdp'	=>	array($utilisateur->getMdp(),SQLITE3_TEXT),
+            ':estAdmin'	=>	array($utilisateur->getEstAdmin(),SQLITE3_INTEGER)));
     }
 
     public function delete(string $email) : void{
         $query = "DELETE FROM utilisateur WHERE email=:email";
         $this->con->executeQuery($query,	array(
-            ':email'	=>	array($email ,PDO::PARAM_STR)
+            ':email'	=>	array($email ,SQLITE3_TEXT)
         ));
     }
 
@@ -39,26 +45,17 @@ class UtilisateurGateway
         global $error;
         $query = "SELECT * FROM Utilisateur WHERE email=:email";
         $this->con->executeQuery($query,	array(
-            ':email'	=>	array($email,PDO::PARAM_STR)
+            ':email'	=>	array($email,SQLITE3_TEXT)
         ));
         $results=$this->con->getResults();
-        foreach ($results as $row) {
-            $email=$row['email'];
-            $pseudo=$row['pseudo'];
-            $mdp=$row['mdp'];
-            $estAdmin=$row['estAdmin'];
-        }
-        if ($results == null){
-            return new Utilisateur("null", "null", "null", false);
-        }
-        return new Utilisateur($email, $pseudo, $mdp,false);
+        return UtilisateurFactory::createUtilisateur($results);
     }
 
     public function getMdpByEmail(string $email) : string{
         global $error;
         $query = "SELECT mdp FROM Utilisateur WHERE email=:email";
         $this->con->executeQuery($query,	array(
-            ':email'	=>	array($email,PDO::PARAM_STR)
+            ':email'	=>	array($email,SQLITE3_TEXT)
         ));
         $results=$this->con->getResults();
         foreach ($results as $row) {
@@ -74,19 +71,63 @@ class UtilisateurGateway
     public function getEstAdminByEmail(string $email) : bool{
         $query = "SELECT estAdmin FROM Utilisateur WHERE email=:email";
         $this->con->executeQuery($query,	array(
-            ':email'	=>	array($email,PDO::PARAM_STR)
+            ':email'	=>	array($email,SQLITE3_TEXT)
         ));
         $results=$this->con->getResults();
-        foreach ($results as $row) {
-            $estAdmin=$row['estAdmin'];
-        }
+        $estAdmin=$results[0]['estAdmin'];
         return $estAdmin;
     }
 
+    public function addToQueue(Utilisateur $utilisateur,Partie $partie){
+        $query = "INSERT INTO Participer VALUES (:idPartie,:idUtilisateur,0)";
+        $this->con->executeQuery($query,array(
+            ':idUtilisateur' => array($utilisateur->getEmail(),SQLITE3_TEXT),
+            ':idPartie' => array($partie->getIdPartie(), SQLITE3_INTEGER)
+        ));
+    }
+
+    public function findUsersInQueue() : array{
+        $query = "SELECT u.* FROM Utilisateur u, Participer p
+        WHERE u.email=p.utilisateur
+        AND p.etat=0";
+        $this->con->executeQuery($query);
+        $results = $this->con->getResults();
+        $user_group = UtilisateurFactory::createTabUtilisateur($results);
+        return $user_group;
+    }
+
+    public function isAlreadyInqueue(Utilisateur $utilisateur) : bool{
+        $query="SELECT utilisateur FROM Participer WHERE utilisateur=:utilisateur";
+        $this->con->executeQuery($query, array(
+            ':utilisateur' => array($utilisateur->getEmail(),SQLITE3_TEXT)
+        )
+        );
+        $results=$this->con->getResults();
+        if (empty($results))
+            return false;
+        else
+            return true;
+    }
+
+    public function queueFilled(){
+        $query = "SELECT count(*) FROM Participer WHERE etat=0";
+        $this->con->executeQuery($query);
+        if ($this->con->getResults()[0]['count(*)'] >= 4)
+            return True;
+        else
+            return False;
+    }
+
+    private function launchGame(Utilisateur $utilisateur){
+        $query = "UPDATE Participer SET etat=1 WHERE etat=0 AND utilisateur=:utilisateur";
+        $this->con->executeQuery($query,array(
+            'utilisateur' => array($utilisateur->getEmail(),SQLITE3_TEXT)));
+    }
+
     /*public function resoudreEnigmeMulti(string $emailUtilisateur)
     {
         $query="SELECT c.partie FROM Contenir
-        WHERE c.joueur = :emailUtilisateur
+        WHERE c.utilisateur = :emailUtilisateur
         and c.enCours = TRUE";
         $this->con->executeQuery($query,    array(
             ':emailUtilisateur' =>    array($emailUtilisateur,SQLITE3_TEXT)
@@ -95,7 +136,7 @@ class UtilisateurGateway
 
         $query="SELECT e.id, c2.indexEnigme FROM Resoudre r, Contenir c1,Contenir c2, Enigme e WHERE
         r.id = :idPartie
-        AND r.joueur=:idJoueur
+        AND r.utilisateur=:idutilisateur
         AND r.partie=:idPartie
         AND r.temps IS NOT NULL
         AND c1.partie = r.partie
@@ -124,19 +165,19 @@ class UtilisateurGateway
             $classement=$results[0]["max"]+1;
 
         $query="SELECT * FROM Resoudre
-        WHERE r.joueur=:joueur
+        WHERE r.utilisateur=:utilisateur
         AND r.enigme=:idEnigme
         AND r.partie=:idPartie";
         $this->con->executeQuery($query, array(
-        "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+        "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
         "enigme" => array($idEnigme, SQLITE3_INTEGER),
         "partie" => array($idPartie, SQLITE3_INTEGER)));
         $results=$this->con->getResults();
         if(empty($results))
         {
-            $query="INSERT INTO Resoudre VALUES (:joueur, :enigme,:partie,:classement,:index,:temps,TRUE)";
+            $query="INSERT INTO Resoudre VALUES (:utilisateur, :enigme,:partie,:classement,:index,:temps,TRUE)";
             $this->con->executeQuery($query, array(
-                "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+                "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
                 "enigme" => array($idEnigme, SQLITE3_INTEGER),
                 "partie" => array($idPartie, SQLITE3_INTEGER),
                 "classement" => array($classement, SQLITE3_INTEGER),
@@ -148,11 +189,11 @@ class UtilisateurGateway
         {
             $query="UPDATE Resoudre
             SET classement=:classement;
-            WHERE joueur=:joueur
+            WHERE utilisateur=:utilisateur
             AND enigme=:idEnigme
             AND partie=:idPartie";
             $this->con->executeQuery($query, array(
-                "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+                "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
                 "enigme" => array($idEnigme, SQLITE3_INTEGER),
                 "partie" => array($idPartie, SQLITE3_INTEGER),
                 "classement" => array($classement, SQLITE3_INTEGER)));
@@ -162,7 +203,7 @@ class UtilisateurGateway
 
     public function passerEnigmeMulti(string $emailUtilisateur){
         $query="SELECT p.partie FROM Participer
-        WHERE p.joueur = :emailUtilisateur
+        WHERE p.utilisateur = :emailUtilisateur
         and p.enCours = TRUE";
         $this->con->executeQuery($query,    array(
             ':emailUtilisateur' =>    array($emailUtilisateur,SQLITE3_TEXT)
@@ -171,7 +212,7 @@ class UtilisateurGateway
 
         $query="SELECT e.id, c2.indexEnigme FROM Resoudre r, Contenir c1,Contenir c2, Enigme e WHERE
         r.id = :idPartie
-        AND r.joueur=:idJoueur
+        AND r.utilisateur=:idUtilisateur
         AND r.partie=:idPartie
         AND r.temps IS NOT NULL
         AND r.enigme=c1.enigme
@@ -189,9 +230,9 @@ class UtilisateurGateway
         $idEnigme=$results[0]["enigme"];
         $index=$results[0]["indexEnigme"];
 
-        $query="INSERT INTO Resoudre VALUES (:joueur, :enigme,:partie,:classement,:index,:temps,TRUE)";
+        $query="INSERT INTO Resoudre VALUES (:utilisateur, :enigme,:partie,:classement,:index,:temps,TRUE)";
         $this->con->executeQuery($query, array(
-            "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+            "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
             "enigme" => array($idEnigme, SQLITE3_INTEGER),
             "partie" => array($idPartie, SQLITE3_INTEGER),
             "classement" => array(NULL, SQLITE3_NULL),
@@ -202,7 +243,7 @@ class UtilisateurGateway
     public function resoudreEnigmeSolo(string $emailUtilisateur)
     {
         $query="SELECT c.partie FROM Contenir
-        WHERE c.joueur = :emailUtilisateur
+        WHERE c.utilisateur = :emailUtilisateur
         and c.enCours = TRUE";
         $this->con->executeQuery($query,    array(
             ':emailUtilisateur' =>    array($emailUtilisateur,SQLITE3_TEXT)
@@ -211,7 +252,7 @@ class UtilisateurGateway
 
         $query="SELECT e.id, c2.indexEnigme FROM Resoudre r, Contenir c1,Contenir c2, Enigme e WHERE
         r.id = :idPartie
-        AND r.joueur=:idJoueur
+        AND r.utilisateur=:idUtilisateur
         AND r.partie=:idPartie
         AND r.enigme = c1.enigme
         AND c1.partie = r.partie
@@ -241,19 +282,19 @@ class UtilisateurGateway
             $classement=$results[0]["max"]+1;
 
         $query="SELECT * FROM Resoudre
-        WHERE r.joueur=:joueur
+        WHERE r.utilisateur=:utilisateur
         AND r.enigme=:idEnigme
         AND r.partie=:idPartie";
         $this->con->executeQuery($query, array(
-        "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+        "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
         "enigme" => array($idEnigme, SQLITE3_INTEGER),
         "partie" => array($idPartie, SQLITE3_INTEGER)));
         $results=$this->con->getResults();
         if(empty($results))
         {
-            $query="INSERT INTO Resoudre VALUES (:joueur, :enigme,:partie,:classement,:index,:temps,TRUE)";
+            $query="INSERT INTO Resoudre VALUES (:utilisateur, :enigme,:partie,:classement,:index,:temps,TRUE)";
             $this->con->executeQuery($query, array(
-                "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+                "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
                 "enigme" => array($idEnigme, SQLITE3_INTEGER),
                 "partie" => array($idPartie, SQLITE3_INTEGER),
                 "classement" => array($classement, SQLITE3_INTEGER),
@@ -264,11 +305,11 @@ class UtilisateurGateway
         {
             $query="UPDATE Resoudre
             SET classement=:classement;
-            WHERE joueur=:joueur
+            WHERE utilisateur=:utilisateur
             AND enigme=:idEnigme
             AND partie=:idPartie";
             $this->con->executeQuery($query, array(
-                "joueur" => array($emailUtilisateur, SQLITE3_TEXT),
+                "utilisateur" => array($emailUtilisateur, SQLITE3_TEXT),
                 "enigme" => array($idEnigme, SQLITE3_INTEGER),
                 "partie" => array($idPartie, SQLITE3_INTEGER),
                 "classement" => array($classement, SQLITE3_INTEGER)));

WEB/Controller/VisitorController.php

@@ -0,0 +1,105 @@
+<?php
+
+class VisitorController
+{
+    private VisitorModel $model;
+    function __construct()
+    {
+        try {
+            global $dsn, $rep, $vues, $error;
+            $this->model = new VisitorModel();
+            $action = $_REQUEST['action'];
+            switch ($action) {
+                case NULL:
+                    $this->goToHome();
+                    break;
+                case "signUp":
+                    $this->signUp();
+                    break;
+                case "login":
+                    $this->login();
+                    break;
+                case "goToHome":
+                    $this->goToHome();
+                    break;
+                case "goToLogin":
+                    $this->goToLogin();
+                    break;
+                case "goToSignUp":
+                    $this->goToSignUp();
+                    break;
+                case "goToQueue":
+                    $this->goToLogin();
+                    break;
+                default:
+                    $error = "Action non valide";
+                    require($rep . $vues['erreur']);
+                    break;
+            }
+        } catch (PDOException $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        } catch (Exception $e2) {
+            $error = $e2->getMessage();
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function goToHome()
+    {
+        try {
+            global $rep, $vues;
+            require($rep . $vues['main']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function goToLogin()
+    {
+        try {
+            global $rep, $vues;
+            require($rep . $vues['login']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function goToSignUp()
+    {
+        try {
+            global $rep, $vues;
+            require($rep . $vues['signUp']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function signUp()
+    {
+        try {
+            global $rep, $vues, $error;
+            $this->model->signUp();
+            $this->goToHome();
+        } catch (PDOException $e) {
+            $error = "Erreur de connexion à la base de données.";
+            require($rep . $vues['erreur']);
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        }
+    }
+    public function login()
+    {
+        try {
+            global $rep, $vues, $error;
+            $this->model->login();
+            $this->goToHome();
+        } catch (PDOException $e) {
+            $error = "Erreur de connexion à la base de données.";
+            require($rep . $vues['erreur']);
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $vues['erreur']);
+        }
+    }
+}

WEB/Factory/PartieFactory.php

@@ -1,21 +1,21 @@
 <?php
-include_once "EnigmeFactory.php";
-include_once "../Model/Partie.php";
 class PartieFactory{
-    public static function createPartieMulti($idMax,$resultsEnigme) : Partie
+    public static function createPartieMulti($newId,$tabEnigme) : Partie
     {
+        if (count($tabEnigme)==0)
+            return new Partie($newId,array());
         $tempsResolutionPartie=0;
-        $tabEnigme=array();
-        $tabIndex=range(0,strlen($resultsEnigme)-1);
+        $tabIndex=range(0,count($tabEnigme));
         $randomNumber=0;
+        $tabEnigmePartie = array();
         while($tempsResolutionPartie <= 30)
         {
             $randomNumber=$tabIndex[array_rand($tabIndex)];
-            $tabEnigme[]=EnigmeFactory::create($resultsEnigme[$randomNumber]);
-            $TempsResolutionPartie+=$resultsEnigme[$randomNumber]['tempsDeResolution'];
+            $tabEnigmePartie[]=$tabEnigme[$randomNumber];
+            $TempsResolutionPartie+=$tabEnigme[$randomNumber]->getTempsDeResolution();
             unset($tabIndex[$randomNumber]);
         }
-        $partie=new Partie($idMax+1,$tabEnigme);
+        $partie=new Partie($newId,$tabEnigme);
         return $partie;
     }
 

WEB/Factory/UtilisateurFactory.php

@@ -0,0 +1,26 @@
+<?php
+
+class UtilisateurFactory
+{
+    public static function createUtilisateur(array $results){
+        if ($results == null){
+            return new Utilisateur("null", "null", "null", false);
+        }
+        foreach($results as $row)
+        {
+            $email = $row['email'];
+            $pseudo=$row['pseudo'];
+            $mdp = $row['mdp'];
+            $estAdmin = $row['estAdmin'];
+        }
+        return new Utilisateur($email, $pseudo, $mdp, $estAdmin);
+    } 
+    public static function createTabUtilisateur(array $results){
+        $tabUtilisateur=array();
+        foreach($results as $row)
+        {
+            $tabUtilisateur[]=new Utilisateur($row['email'], $row['pseudo'], $row['mdp'], $row['estAdmin']);
+        }
+        return $tabUtilisateur;
+    }
+}

WEB/Metier/Partie.php

@@ -4,33 +4,33 @@ include_once "Enigme.php";
 
 class Partie
 {
-    private string $idPartie;
+    private int $idPartie;
     private DateTime $datePartie;
     private array $listeEnigme;
 
     /**
-     * @param string $idPartie
+     * @param int $idPartie
      * @param array $datePartie
      */
-    public function __construct(string $idPartie, array $listeEnigme)
+    public function __construct(int $idPartie, array $listeEnigme)
     {
         $this->idPartie = $idPartie;
         $this->datePartie = new DateTime();
-        $this->$listeEnigme = $listeEnigme;
+        $this->listeEnigme = $listeEnigme;
     }
 
     /**
-     * @return string
+     * @return int
      */
-    public function getIdPartie(): string
+    public function getIdPartie(): int
     {
         return $this->idPartie;
     }
 
     /**
-     * @param string $idPartie
+     * @param int $idPartie
      */
-    public function setIdPartie(string $idPartie): void
+    public function setIdPartie(int $idPartie): void
     {
         $this->idPartie = $idPartie;
     }

WEB/Model/UserModel.php

@@ -0,0 +1,56 @@
+<?php
+class UserModel
+{
+
+    private EnigmeGateway $enigme_gateway;
+    private PartieGateway $partie_gateway;
+    private UtilisateurGateway $utilisateur_gateway;
+
+    function __construct()
+    {
+        try {
+            global $error, $view, $rep;
+            $this->enigme_gateway = new EnigmeGateway();
+            $this->partie_gateway = new PartieGateway();
+            $this->utilisateur_gateway = new UtilisateurGateway();
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $view['erreur']);
+        }
+    }
+    public function addToQueue(){
+        echo '1';
+        if($this->utilisateur_gateway->isAlreadyInqueue($_SESSION['utilisateur']))
+        {
+            return;
+        }
+        echo '2';
+        if (!$this->partie_gateway->partieInQueueExists()) {
+            echo '3';
+            $tabEnigme = $this->enigme_gateway->findMultiEnigma();
+            $idNewPartie = $this->partie_gateway->findPartieMaxId();
+            $partie=$this->partie_gateway->creerPartieMulti($idNewPartie,$tabEnigme);
+        }
+        else{
+            echo '4';
+            $idPartieInQueue = $this->partie_gateway->findPartieInQueue();
+            echo '5';
+            $tabEnigme = $this->enigme_gateway->findEnigmaFromPartie($idPartieInQueue);
+            echo '6';
+            $partie = $this->partie_gateway->rejoindrePartieMulti($idPartieInQueue, $tabEnigme);
+            echo '7';
+        }
+        echo '8';
+        $this->utilisateur_gateway->addToQueue($_SESSION['utilisateur'],$partie);
+        $userGroup=$this->utilisateur_gateway->findUsersInQueue();
+        //trigger_event('add_to_queue',$userGroup);
+    }
+
+    public function AddUserToQueueEvent(){
+        $userGroup=$this->utilisateur_gateway->findUsersInQueue();
+        if($userGroup.count()>=4)
+        {
+            $this->utilisateur_gateway->launchGame();
+        }
+    }
+}

WEB/Model/VisitorModel.php

@@ -0,0 +1,71 @@
+<?php
+class VisitorModel
+{
+
+    private EnigmeGateway $enigme_gateway;
+    private PartieGateway $partie_gateway;
+    private UtilisateurGateway $utilisateur_gateway;
+
+    function __construct()
+    {
+        try {
+            global $error, $view, $rep;
+            $this->enigme_gateway = new EnigmeGateway();
+            $this->partie_gateway = new PartieGateway();
+            $this->utilisateur_gateway = new UtilisateurGateway();
+        } catch (Exception $e) {
+            $error = $e->getMessage();
+            require($rep . $view['erreur']);
+        }
+    }
+
+    public function signUp()
+    {
+        global $sel, $error;
+        $validation = new Validation();
+        if (!$validation->ValidateEmail($_REQUEST['email'])) {
+            $error = "Email invalides.";
+            throw (new Exception("Email non valide"));
+        }
+        if (!$validation->ValidateUsername($_REQUEST['username'])) {
+            $error = "Nom d'utilisateur invalides. Il ne doit pas contenir de caractère spéciaux.";
+            throw (new Exception("Pseudo non valide"));
+        }
+        if (!$validation->ValidatePassword($_REQUEST['password'])) {
+            $error = "Mots de passe invalides. Il ne doit pas dépasser 100 caractères.";
+            throw (new Exception("Mot de passe non valide"));
+        }
+        $j = $this->utilisateur_gateway->getUtilisateurByEmail($_REQUEST['email']);
+        if ($j->getEmail() != "null") {
+            $error = "Email déjà utilisé.";
+            throw (new Exception("Email déjà utilisé"));
+        }
+        $password = password_hash($_REQUEST['password'] . $sel, PASSWORD_DEFAULT);
+        $utilisateur = new Utilisateur($_REQUEST['email'], $_REQUEST['username'], $password, false);
+        $this->utilisateur_gateway->insert($utilisateur);
+        $_SESSION['role'] = 'user';
+        $_SESSION['utilisateur'] = $utilisateur;
+    }
+    public function login()
+    {
+        global $vue, $sel, $error;
+        $utilisateur = $this->utilisateur_gateway->getUtilisateurByEmail($_REQUEST['email']);
+        if ($utilisateur->getEmail() == "null") {
+            $error = "Utilisateur non trouvé.";
+            throw new Exception("Utilisateur introuvable");
+        }
+        $mdp = $this->utilisateur_gateway->getMdpByEmail($_REQUEST['email']);
+        if (! password_verify($_REQUEST['password'] . $sel, $mdp)) {
+            $error = "Mot de passe incorrect.";
+            throw new Exception("Mot de passe invalide");
+        }
+        $estAdmin = $this->utilisateur_gateway->getEstAdminByEmail($_REQUEST['email']);
+        if ($estAdmin == true) {
+            $_SESSION['role'] = "admin";
+        } else {
+            $_SESSION['role'] = "user";
+        }
+        $_SESSION['utilisateur'] = $utilisateur;
+        $_SESSION['connected'] = 'true';
+    }
+}

WEB/View/src/CSS/Enigme.css

@@ -1,23 +1,19 @@
-/*Fonts CSS */
-
-@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
-
-/*Default CSS*/
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+@font-face {
+  font-family: Fauna;
+  src: url("../../assets/fonts/Fauna.ttf");
+}
+@font-face {
+  font-family: Equinox;
+  src: url("../../assets/fonts/Equinox.otf");
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  padding: 0;
-  line-height: normal;
+body {
+  min-height: 100vh;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  color: white;
+  scroll-behavior: smooth;
+  height: 100vh;
+  background-color: #050E15;
 }
 
 p,
@@ -29,105 +25,63 @@ ul {
   padding: 0;
   line-height: normal;
   text-decoration: none !important;
+  font-family: "Fauna", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.8px;
 }
 
-a:hover {
-  text-decoration: none !important;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-}
+/***** Text CSS *****/
 
-@media (min-width: 1700px) {
-  main .buttons {
-    max-width: 100%;
-    padding: 0 150px;
-  }
+p{
+  font-family: "Fauna", sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.8px;
 }
 
-/* Main CSS */
-html {
-  scroll-behavior: smooth;
-  height: 100vh;
-  background-position: center center;
-  background-color: #464646;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Equinox", sans-serif;
 }
 
-body {
-  display: flex;
-  font-family: "Orbitron", sans-serif;
-  flex-direction: row;
-  align-items: stretch;
-  height: 95%;
-  margin-top: 10px;
-  padding: 0;
+/***** End Text CSS *****/
 
-  --light: hsl(220, 50%, 90%);
-  --primary: hsl(255, 30%, 55%);
-  --focus: hsl(210, 90%, 50%);
-  --border-color: hsla(0, 0%, 100%, 0.2);
-  --global-background: hsl(220, 25%, 10%);
-  --background: linear-gradient(to right, #040a29, #0e1538);
-  --shadow-1: #0b1b78;
-  --shadow-2: #173c45;
-}
 
-.enigme {
-  width: 25%;
-  height: fit-content;
-  color: aliceblue;
-  background: rgba(0, 0, 0, 0.6);
-  box-sizing: border-box;
-  border-radius: 10px;
-  padding: 10px;
-  margin-left: 10px;
-  margin-right: 20px;
-  letter-spacing: 1.2px;
-}
+/***** Editor + Console CSS *****/
 
-.titre_pre {
-  display: flex;
-  margin-top: 10px;
-  margin-right: 10px;
-  margin-bottom: 20px;
-  padding-left: 10px;
+#editor {
+  width: 100%;
+  min-height: 80vh;
+  height: auto;
 }
 
-.sign {
-  margin-left: 5%;
+#console {
+  font-family: DejaVu Sans Mono, monospace;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+  background-color: #222831;
+  resize: none;
+  color: #fff;
+  border: 1px solid #44fff6;
+  box-shadow: 0 0 1px #fff,
+              0 0 1px #fff,
+              0 0 5px #44fff6,
+              0 0 5px #44fff6,
+              inset 0 0 5px #44fff6; 
 }
 
-/* Main Button Css */
-
-.buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  cursor: pointer;
-}
+/***** End Editor + Console CSS *****/
 
-.compiler_class .buttons div {
-  display: flex;
-}
+/* Buttons */
 
-.buttons .btn {
+.btn{
   position: relative;
   width: 120px;
   height: 60px;
-  display: inline-block;
   background: transparent;
-  margin: 20px;
 }
 
-.buttons .btn:before,
-.buttons .btn:after {
+.btn:before, .btn:after{
   content: "";
   position: absolute;
   inset: 0;
@@ -135,220 +89,34 @@ body {
   background: #f00;
 }
 
-.buttons .btn:nth-child(1):before,
-.buttons .btn:nth-child(1):after {
+.btn:nth-child(1):before, .btn:nth-child(1):after{
   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4);
 }
 
-.buttons .btn:nth-child(2):before,
-.buttons .btn:nth-child(2):after {
+.btn:nth-child(2):before, .btn:nth-child(2):after{
   background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
 }
 
-.buttons .btn:hover:before {
+.btn:hover:before{
   inset: -3px;
 }
 
-.buttons .btn:hover:after {
+.btn:hover:after{
   inset: -3px;
   filter: blur(10px);
 }
 
-.buttons .btn span {
+.btn span{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  display: inline-block;
   background: #0e1538;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 1.2em;
   text-transform: uppercase;
-  letter-spacing: 2px;
-  color: #fff;
-  border: 1px solid #040a29;
-  overflow: hidden;
-}
-
-.buttons .btn span::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -50%;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.075);
-  transform: skew(25deg);
-}
-
-.buttons .btn .noAnimation {
-  animation: none;
-  font-size: 1em;
-}
-
-/* Console CSS*/
-
-.compiler_class {
-  width: 30%;
-}
-
-#console {
-  font-size: 0.8rem;
-  opacity: 0.85;
-  letter-spacing: 1px;
-  background-color: #040a29;
   color: #fff;
-  border: solid 1px #414141;
-  padding: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  max-width: 95%;
-  max-height: 85%;
-  line-height: 1.5;
-  border-radius: 5px;
-  resize: none;
-}
-
-/* Ace CSS*/
-
-.ace {
-  width: 45%;
-  max-height: 100%;
-  margin-bottom: 0;
-  margin-right: 10px;
-}
-
-/* Text Css */
-
-.enigme h1 {
-  font-size: 1.5rem !important;
-  font-weight: 700;
-  text-align: center;
-}
-.enigme .sign {
-  display: contents;
-}
-
-.enigme h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.enigme p {
-  font-size: 1rem;
-  font-weight: 400;
-  margin-right: 10px;
-}
-
-#result {
-  display: flex;
-  align-items: center;
-  margin: 0 30px;
-  font-size: 1.5rem;
-}
-
-/* Modal CSS */
-
-.modal-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 10;
-
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-  background: var(--m-background);
-}
-
-.modal-container:target {
-  display: flex;
-  align-items: center;
-}
-
-.modal {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  width: 30%;
-  height: 35%;
-  padding: 10px 0;
-  border-radius: 0.8rem;
-
-  color: aliceblue;
-  background: var(--background);
-  box-shadow: var(--m-shadow, 0.4rem 0.4rem 8.2rem 0.2rem) var(--shadow-1);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Modal H1  */
-
-.modal #containerResult {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 80%;
-  height: 100%;
-}
-
-/* Modal Container Buttons  */
-
-.modal .buttons {
-  display: flex;
-  align-items: flex-end;
-  height: 100%;
-  width: auto;
-}
-
-.modal .buttons #top {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  width: auto;
-  height: 50%;
-}
-
-.modal .buttons #bottom {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  width: auto;
-  height: 50%;
-}
-
-/* Modal buttons btn */
-
-.modal .buttons .btn {
-  width: 30px;
-  height: 30px;
-  margin: 0 15px;
-}
-
-.modal .buttons #bottom {
-  width: 100%;
-}
-
-.modal .buttons #fleche {
-  display: none;
-  width: 75px;
-  height: 40px;
-}
-
-.modal .buttons .btn span {
-  background: #06124b;
-  color: white;
-}
-
-.modal .buttons #bottom .btn:nth-child(1):before,
-.modal .buttons #bottom .btn:nth-child(1):after {
-  background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-}
+}

WEB/View/src/CSS/Enigmev2.css

@@ -1,226 +0,0 @@
-/*Fonts CSS */
-
-@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
-
-/*Default CSS*/
-
-
-/*Ace CSS */
-
-.ace{
-    width: 100%;
-    height: 100%;
-}
-
-
-/* Main Button Css */
-
-.buttons{
-  display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.compiler_class .buttons div{
-  display: flex;
-}
-
-.buttons .btn{
-  position: relative;
-    width: 120px;
-    height: 60px;
-    display: inline-block;
-    background: transparent;
-    margin: 20px;
-  }
-
-
-  .buttons .btn:before, .buttons .btn:after
-  {
-    content:'';
-      position: absolute;
-      inset: 0;
-      transition: 0.5s;
-      background: #f00
-    }
-
-
-.buttons .btn:nth-child(1):before, .buttons .btn:nth-child(1):after
-{
-   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4)
-}
-
-.buttons .btn:nth-child(2):before, .buttons .btn:nth-child(2):after
-{
-    background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-}
-
-.buttons .btn:hover:before
-{
-    inset: -3px;  
-}
-
-.buttons .btn:hover:after
-{
-    inset: -3px;  
-    filter: blur(10px);
-}
-
-.buttons .btn span{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    background: #0e1538;
-    z-index: 10;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.2em;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: #fff;
-    border: 1px solid #040a29;
-    overflow: hidden;
-}
-
-.buttons .btn span::before{
-  content:'';
-    position: absolute;
-    top: 0;
-    left: -50%;
-    width: 100%;
-    height: 100%;
-    background: rgba(255,255,255,0.075);
-      transform: skew(25deg)
-}
-
-
-
-.buttons .btn .noAnimation {
-  animation: none;
-  font-size: 1em;
-}
-
-
-/* Modal CSS */
-
-.modal-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10;
-  
-    display: none;
-    justify-content: center;
-    align-items: center;
-  
-    width: 100%;
-    height: 100%;
-    background: var(--m-background);
-  }
-  
-  .modal-container:target {
-    display: flex;
-    align-items: center;
-  }
-  
-  .modal {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    width: 30%;
-    height: 35%;
-    padding: 10px 0;
-    border-radius: .8rem;
-  
-    color: aliceblue;
-    background: var(--background);
-    box-shadow: var(--m-shadow, .4rem .4rem 8.2rem .2rem) var(--shadow-1);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  /* Modal H1  */
-  
-  .modal #containerResult{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 80%;
-    height: 100%;
-  }
-  
-  
-  /* Modal Container Buttons  */
-  
-  .modal .buttons{
-    display: flex;
-    align-items: flex-end;
-    height: 100%;
-    width: auto;
-  }
-  
-  .modal .buttons #top{
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    width: auto;
-    height: 50%;
-  }
-  
-  .modal .buttons #bottom{
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    width: auto;
-    height: 50%;
-  }
-  
-  /* Modal buttons btn */
-  
-  .modal .buttons .btn{
-    width: 30px;
-    height: 30px;
-    margin : 0 15px;
-  }
-  
-  .modal .buttons #bottom{
-    width: 100%;
-  }
-  
-  .modal .buttons #fleche{
-    display: none; 
-    width: 75px;
-    height: 40px;
-  }
-  
-  .modal .buttons .btn span{
-    background: #06124b;
-    color: white;
-  }
-  
-  .modal .buttons #bottom .btn:nth-child(1):before, .modal .buttons #bottom .btn:nth-child(1):after
-  {
-      background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
-  }
-
-  /* Console CSS*/
-
-#console{
-  font-size: .8rem;
-  opacity: 0.85;
-  letter-spacing: 1px;
-  background-color: #040a29;
-  color: #fff;
-  border: solid 1px #414141;
-  max-width: 95%;
-  max-height: 85%;
-  line-height: 1.5;
-  resize: none;
-}

WEB/View/src/CSS/FirstTest.css

@@ -9,51 +9,26 @@
 
 body {
   min-height: 100vh;
-  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-family: "Equinox", sans-serif;
   color: white;
   scroll-behavior: smooth;
-  height: 100vh;
-  background-position: center center;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
-  /* background-image: url("../../assets/img/Background5.jpg"); */
-  background-color: #050E15;
+  background-color: #050e15;
 }
 
-p,
-a,
-li,
-button,
-ul {
-  margin: 0;
-  padding: 0;
-  line-height: normal;
-  text-decoration: none !important;
-  font-family: "Fauna", sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: 0.8px;
+nav {
+  background-color: #050e15;
 }
 
-/***** Text CSS *****/
-
-p{
+p {
   font-family: "Fauna", sans-serif;
   font-size: 14px;
-  line-height: 20px;
-  letter-spacing: 0.8px;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Equinox", sans-serif;
+li {
+  font-family: "Fauna", sans-serif;
+  font-size: 14px;
 }
 
-/***** End Text CSS *****/
-
-
-/***** Editor + Console CSS *****/
-
 #editor {
   width: 100%;
   min-height: 80vh;
@@ -61,27 +36,26 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #console {
+  font-family: DejaVu Sans Mono, monospace;
   font-size: 0.8rem;
   letter-spacing: 1px;
   background-color: #222831;
-  color: #fff;
-  border: solid 1px #414141;
-  border-radius: 5px;
   resize: none;
+  color: #fff;
+  border: 1px solid #44fff6;
+  box-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 5px #44fff6, 0 0 5px #44fff6,
+    inset 0 0 5px #44fff6;
 }
 
-/***** End Editor + Console CSS *****/
-
-/* Buttons */
-
-.btn{
+.btn {
   position: relative;
   width: 120px;
   height: 60px;
   background: transparent;
 }
 
-.btn:before, .btn:after{
+.btn:before,
+.btn:after {
   content: "";
   position: absolute;
   inset: 0;
@@ -89,24 +63,26 @@ h1, h2, h3, h4, h5, h6 {
   background: #f00;
 }
 
-.btn:nth-child(1):before, .btn:nth-child(1):after{
+.btn:nth-child(1):before,
+.btn:nth-child(1):after {
   background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4);
 }
 
-.btn:nth-child(2):before, .btn:nth-child(2):after{
+.btn:nth-child(2):before,
+.btn:nth-child(2):after {
   background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942);
 }
 
-.btn:hover:before{
+.btn:hover:before {
   inset: -3px;
 }
 
-.btn:hover:after{
+.btn:hover:after {
   inset: -3px;
   filter: blur(10px);
 }
 
-.btn span{
+.btn span {
   position: absolute;
   top: 0;
   left: 0;
@@ -118,6 +94,6 @@ h1, h2, h3, h4, h5, h6 {
   justify-content: center;
   align-items: center;
   text-transform: uppercase;
-  letter-spacing: 1.5px;
+  letter-spacing: 2px;
   color: #fff;
-}
+}

WEB/View/src/CSS/Main2.css

@@ -0,0 +1,45 @@
+body {
+  min-height: 100vh;
+  font-family: "Orbitron", sans-serif;
+  color: white;
+  scroll-behavior: smooth;
+  height: 100vh;
+  background-image: url("../../assets/img/ImgMain.png");
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #000;
+}
+
+#imgMain {
+  background-image: url("../../assets/img/SecondMainBack.jpg");
+  background-position: bottom center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: block;
+  margin: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 85%;
+  height: 70%;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+
+#AllBg {
+  background-color: #511949;
+  opacity: 0.8;
+  background-size: 10px 10px;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+}

WEB/View/src/CSS/Presentation.css

@@ -41,7 +41,7 @@ nav {
 /* Section Histoire */
 
 section{
-  min-height: 60vh;
+  min-height: 70vh;
   margin-bottom: 10px;
 }
 
@@ -67,4 +67,5 @@ section{
 p {
   font-family: "Fauna", sans-serif;
   font-size: 20px;
-}
+}
+

WEB/View/src/JS/FirstFunction.js

@@ -0,0 +1,29 @@
+//~ Function that test the user code
+          
+async function submit(){
+    var test = editor.getValue()+`\n
+import random as r
+
+def multiVerif(a,b):
+    return a*b
+
+def multiTest(x):
+    multiplication(1,1)
+    for i in range(x):
+        a=r.randint(0,100)
+        b=r.randint(0,100)
+        if(multiplication(a,b) != multiVerif(a,b)):
+            return False
+    return True
+
+print(multiTest(5))
+  
+    `;
+    exec("print('True')", "code"); 
+    exec(test, "solution");
+    result.innerHTML = "Test en cours...";
+    await new Promise(r => setTimeout(r, 1500));
+    check();
+  }
+  
+  

WEB/View/src/JS/FirstTest.js

@@ -0,0 +1,3 @@
+var secondTest1 = "Pour ce second test, nous allons voir comment déclarer une variable et le manipuler. Pour créer une variable en python il est inutile de déclarer son type, il suffit de faire : ";
+var secondTest2 = "x = 1"
+var secondTest3 = "Pour la manipuler";

WEB/View/src/JS/Hanoi.js

@@ -17,6 +17,7 @@ def hanoiVerif(nb_disks,start, middle, end):
     return l
 
 def testhanoi(x):
+    hanoi(1,"A","B","C")
     if(hanoi(3,"A","B","C")!=[['A','C'],['A','B'],['C','B'],['A','C'],['B','A'],['B','C'],['A','C']]):
         return False
     for i in range(x):

WEB/View/src/JS/If.js

@@ -0,0 +1,41 @@
+//~ Function that test the user code
+          
+async function submit(){
+    var test = editor.getValue()+`\n
+import random as r
+
+def conditionVerif(list,a):
+    for i in list:
+        if(i == 1):
+            a += 1
+        elif(i != 2):
+            a -=1
+        elif(i < 3):
+            a *= a
+        elif(i > 6):
+            a +=4
+        else:
+            a +=5
+    return a   
+
+def conditionTest(x):
+    condition([],0)
+    list=[]
+    for i in range(x):
+        for i in range(r.randint(1,10)):
+            list.append(r.randint(1,10))
+        a=r.randint(1,10)
+        if(condition(list,a)!=conditionVerif(list,a)):
+            return False
+    return True
+
+print(conditionTest(5))
+    `;
+    exec("print('True')", "code");
+    exec(test, "solution");
+    result.innerHTML = "Test en cours...";
+    await new Promise(r => setTimeout(r, 1500));
+    check();
+  }
+  
+  

WEB/View/src/JS/Presentation.js

@@ -19,5 +19,5 @@ const fox = document.querySelector(".moving-fox");
 window.addEventListener("scroll", () => {
   const scrollValue = window.scrollY - 700;
   fox.style.top = `${scrollValue / 1}px`;
-  fox.style.opacity = `${window.scrollY / 700}`;
+  fox.style.opacity = `${window.scrollY / 800}`;
 });

WEB/View/src/JS/String.js

@@ -0,0 +1,34 @@
+//~ Function that test the user code
+          
+async function submit(){
+    var test = editor.getValue()+`\n
+import random as r
+
+def triVerif(a,b):
+    s = ""
+    i = 0
+    while len(s)<len(a+b):
+        if(len(a)>i):
+            s += a[i]
+        if(len(b)>i):
+            s += b[i]
+        i += 1
+    return s
+
+def triTest(x):
+    a = "Hlowrd"
+    b = "el ol"
+    if(triVerif(a,b)!=tri(a,b)):
+        return False
+    return True
+
+print(triTest(5))
+    `;
+    exec("print('True')", "code"); 
+    exec(test, "solution");
+    result.innerHTML = "Test en cours...";
+    await new Promise(r => setTimeout(r, 1500));
+    check();
+  }
+  
+  

WEB/View/src/JS/TrianglePascal.js

@@ -18,11 +18,12 @@ def estTriangleDePascal(n):
   return triangle
 
 def testTriangleDePascal(n):
+  triangle_pascal(0)
   listTest=[0,1]
   for i in range(0,n):
    listTest.append(r.randint(5,140))
   for i in listTest:
-      if(TriangleDePascal(i)!=estTriangleDePascal(i)):
+      if(triangle_pascal(i)!=estTriangleDePascal(i)):
           return False
   return True
   

WEB/View/src/JS/base.js

@@ -110,12 +110,13 @@ function check() {
   }
 }
 
+
 /**
- * It gets all the elements with the class name "help" and sets their opacity to 1.
+ * It gets all the elements with the class name "help" and sets their display property to "block".
  */
 function displayHelp() {
   var help = document.getElementsByClassName("help");
   for (var i = 0; i < help.length; i++) {
-    help[i].style.opacity = 1;
+    help[i].style.display = "block";
   }
 }

WEB/View/src/JS/cesarDecrypt.js

@@ -3,6 +3,7 @@
 async function submit(){
     var test = editor.getValue()+`\n
 import random as r
+
 def DecryptVerif(text, key):
     result = ""
     for i in range(len(text)):
@@ -16,6 +17,7 @@ def DecryptVerif(text, key):
     return result
   
 def testDecrypte(x):
+    Decrypt("",1)
     if(Decrypt("Jgnnq yqtnf",2)!="Hello world"):
         return False
     if(Decrypt("Blarycnm",9)!="Scripted"):

WEB/View/src/JS/cesarEncrypt.js

@@ -3,6 +3,7 @@
 async function submit(){
     var test = editor.getValue()+`\n
 import random as r
+
 def EncryptVerif(text, key):
     result = ""
     for i in range(len(text)):
@@ -16,6 +17,7 @@ def EncryptVerif(text, key):
     return result
   
 def testEncrypte(x):
+    Encrypt("",1)
     if(Encrypt("Hello world",2)!="Jgnnq yqtnf"):
         return False
     if(Encrypt("Scripted",9)!="Blarycnm"):

WEB/View/src/JS/chouette.js

@@ -4,22 +4,23 @@ async function submit(){
   var test = editor.getValue()+`\n
 import random as r
 def chouetteVerif(valeur): 
-    res=list() 
-    for i in range(1, 7): 
-        for j in range(i, 7): 
-            for k in range(j, 7): 
-                if (i+j+k) == valeur: 
-                    res.append([i, j, k]) 
-    return res 
+  res=list() 
+  for i in range(1, 7): 
+    for j in range(i, 7): 
+      for k in range(j, 7): 
+        if (i+j+k) == valeur: 
+          res.append([i, j, k]) 
+  return res 
 
 def test_chouette(n):
-   listTest=[]
-   for i in range(0,n):
+  chouette(1)
+  listTest=[]
+  for i in range(0,n):
     listTest.append(r.randint(3,18))
-   for i in listTest:
-       if(chouette(i)!=chouetteVerif(i)):
-           return False
-   return True
+  for i in listTest:
+    if(chouette(i)!=chouetteVerif(i)):
+      return False
+  return True
 
 print(test_chouette(5))
   `;

WEB/View/src/JS/chuckNorris.js

@@ -30,6 +30,7 @@ def binaire2unitaireVerif(x):
 
 def testChuckNorris(x):
     l="0000000"
+    binaire2unitaire(l)
     if(binaire2unitaire(l)!="00 0000000"):
         return False
     l="1111111"

WEB/View/src/pages/Enigme/CesarDecrypt.html

@@ -1,100 +1,192 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code César</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background5.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
-      </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">c</span>
-            <span>es</span>
-            <span class="flicker">a</span>
-            <span>r</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	    <p class="enonce">
-            Écrire une fonction Decrypt qui prend en argument un essage crypté et une clé et qui retourne le message decrypté avec le code César.(les espace ne seront pas encodé.)
-	    </p><br>
-    <h2>Rappel</h2><br>
-    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet. Par exemple A avec une clé 2 devient C.
-    </p><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-    <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp; cyber</p><br>
-    <h2>Aide</h2><br>
-    <p>
-        La fonction ord(char) de python permet de retourner l’Unicode (standard d’encodage de caractères) d'un caractère. Par exemple, ord('a') retourné '97' et ord('b’) retourne 98.
-    </p>
-  </div>
-  <div class='ace' id='editor'>def Decrypt(text, key):
-    result = ""
-    for i in range(len(text)):
-        char = text[i]
-        if(char==" "):
-            result+=" "
-        elif (char.isupper()):
-            result += chr((ord(char) - key-65) % 26 + 65)
-        else:
-            result += chr((ord(char) - key - 97) % 26 + 97)
-    return result</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Cesar</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Code Cesar
+          </h2>
+          <p>
+            Écrire une fonction <b style="color : violet">Decrypt</b> qui prend en argument 
+            un <b style="color: #44fff6;">message</b> et une <b style="color: #44fff6;">clé</b> 
+            et qui retourne le message décrypté avec le code <b>César</b>.(les espace ne seront pas encodé.)
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Le code <b>César</b> (ou chiffre de César ) est un chiffrement par substitution, 
+            <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
+            <br>Par exemple A avec une clé 2 devient C.
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<b>Sortie</b> :</p>
+          <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            La fonction ord(char) de python permet de retourner l'Unicode (standard d’encodage de caractères) d'un caractère.<br/>
+            Par exemple, ord('a') retourne '97' et ord('b')) retourne '98'.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def Decrypt(text, key):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="TrianglePascal.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToChuckNorris" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  
-  
+    <!-- End Modal -->
 
-  
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/cesarDecrypt.js"></script>
-</body>
-</html>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/cesarDecrypt.js"></script>
+  </body>
+</html>

WEB/View/src/pages/Enigme/CesarEncrypt.html

@@ -1,102 +1,192 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code César</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background4.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
-      </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">c</span>
-            <span>es</span>
-            <span class="flicker">a</span>
-            <span>r</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	    <p class="enonce">
-            Écrire une fonction Encrypt qui prend en argument un message et une clé et qui retourne le message crypté avec le code César.(les espace ne seront pas encodé.)
-	    </p><br><br>
-    <h2>Rappel</h2><br>
-    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, 
-        <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
-        <br>Par exemple A avec une clé 2 devient C.
-    </p><br><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-    <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p><br><br>
-    <h2>Aide</h2><br>
-    <p>
-        La fonction ord(char) de python permet de retourner l’Unicode (standard d’encodage de caractères) d'un caractère. Par exemple, ord('a') retourné '97' et ord('b’) retourne 98.
-    </p>
-  </div>
-  <div class='ace' id='editor'>def Encrypt(text, key):
-    result = ""
-    for i in range(len(text)):
-        char = text[i]
-        if(char==" "):
-            result+=" "
-        elif (char.isupper()):
-            result += chr((ord(char) + key-65) % 26 + 65)
-        else:
-            result += chr((ord(char) + key - 97) % 26 + 97)
-    return result</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Cesar</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Code Cesar
+          </h2>
+          <p>
+            Écrire une fonction <b style="color : violet">Encrypt</b> qui prend en argument 
+            un <b style="color:#44fff6;">message</b> et une <b style="color:#44fff6;">clé</b> 
+            et qui retourne le <b style="color: yellow;"> message crypté</b> avec le code <b>César</b>.(les espace ne seront pas encodé.)
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Le code <b>César</b> (ou chiffre de César ) est un chiffrement par substitution, 
+            <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
+            <br>Par exemple A avec une clé 2 devient C.
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<b>Sortie</b> :</p>
+          <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            La fonction ord(char) de python permet de retourner l'Unicode (standard d’encodage de caractères) d'un caractère.<br/>
+            Par exemple, ord('a') retourne '97' et ord('b')) retourne '98'.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def Encrypt(text, key):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="CesarDecrypt.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToCesarDecrypt" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  
-  
+    <!-- End Modal -->
 
-  
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/cesarEncrypt.js"></script>
-</body>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/cesarEncrypt.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Enigme/Chouette.html

@@ -1,93 +1,195 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Cul de Chouette</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background2.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chouette</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">c</span>
-            <span>hou</span>
-            <span class="flicker">e</span>
-            <span>tte</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	    <p class="enonce">
-            Écrire une fonction chouette qui, pour une valeur donnée, renvoie une liste contenant toutes les solutions de somme de 3 dés pouvant donner cette valeur. 
-            </br>La valeur peut aller de 3 à 18 .
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Chouette
+          </h2>
+          <p>
+            Écrire une fonction <b style="color: violet;">chouette</b> qui, pour une <b style="color: #44fff6;">valeur</b> donnée,
+            renvoie une <b style="color:yellow">liste</b>
+            contenant toutes les solutions de somme de 3 dés pouvant donner cette <b style="color: #44fff6;">valeur</b>. 
+            </br>La <b style="color:#44fff6;">valeur</b> peut aller de 3 à 18 .
             </br>Les solutions doivent être uniques.(1,2,3) et (3,2,1) sont la même solution. 
-	    </p><br><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée : 7</p>
-    <p>Sortie : [[1,1,5],[1,2,4],[1,3,3],[2,2,3]]</p><br>
-    <h2>Aide</h2><br>
-    <p>On cherche à savoir si la somme de 3 dés (trois variables allant de 1 à 6) est égale à une valeur donné.</p>
-    <p>Pour cela on peut utiliser la structure suivante on d1 ( le premier dé) va varier de 1 à 6.</p>.
-    <p>for d1 in range(1, 7):<br>&emsp;&emsp;for d2 in range (1, 7):<br>&emsp;&emsp;&emsp;&emsp;#Faire...</p>
-  </div>
-  <div class='ace' id='editor'>def chouette(valeur): 
-    res=list() 
-    for i in range(1, 7): 
-        for j in range(i, 7): 
-            for k in range(j, 7): 
-                if (i+j+k) == valeur: 
-                    res.append([i, j, k]) 
-    return res
-  </div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
-      </div>
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> : 7</p>
+          <p><b>Sortie</b> : [[1,1,5],[1,2,4],[1,3,3],[2,2,3]]</p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <div style="display: none" class="help row">
+            <p>
+              On cherche à savoir si la somme de 3 dés (trois variables allant de 1 à 6) est égale à une valeur donné.
+              <br />Pour cela on peut utiliser la structure suivante on d1 ( le premier dé) va varier de 1 à 6.
+            </p>
+            <code style="font-size: 18px">
+              for d1 in range(1, 7):<br>
+              &emsp;&emsp;for d2 in range (1, 7):<br>
+              &emsp;&emsp;&emsp;&emsp;#Faire... 
+            </code>
+          </div>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def chouette(valeur):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="CesarEncrypt.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToCesarEncrypt" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/chouette.js"></script>
-</body>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/chouette.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Enigme/ChuckNorris.html

@@ -1,112 +1,189 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Chuck Norris</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background3.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chuck Norris</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">c</span>
-            <span>h</span>
-            <span class="flicker">u</span>
-            <span>ck</span>
-        </h1>
-      </div><br>
-    </div>
-    <div> 
-      <h2>Consigne</h2><br>
-      <p class="enonce">
-        Coder un fonction binaire2unaire qui prend en argument un nombre binaire et le code via le codage Chucknorris. 
-      </p><br><br>
-      <h2>Rappel</h2><br>
-      <p class="rappel">
-        Dans le codage Chuck Norris, le '0' est codé '00' et le '1' est codé '0'. Puis un espace, puis ensuite autant de '0' que le message contient de '0' ou '1' successifs.
-        <br>Par exemple, la suite "10000111" sera traduite de la façon suivante : "0 0 00 0000 0 000
-      </p><br><br>
-      <h2>Exemple</h2><br>
-      <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-      <p>10000111&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;0 0 00 0000 0 000</p><br><br>
-      <h2>Aide</h2><br>
-      <p>En python les chaines de carractère peuvent être utilisé comme une liste</p>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Chuck Norris
+          </h2>
+          <p>
+            Coder un fonction <b style="color: violet;">binaire2unaire</b> qui prend en argument un <b style="color: #44fff6;">nombre binaire</b> 
+            et qui le retourne le <b style="color: yellow;">nombre</b> codé via le codage <b>Chuck Norris</b>. 
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Dans le codage <b>Chuck Norris</b>, le '0' est codé '00' et le '1' est codé '0'. Puis un espace, puis ensuite autant de '0' que le message contient de '0' ou '1' successifs.
+            <br>Par exemple, la suite "10000111" sera traduite de la façon suivante : "0 0 00 0000 0 000
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<b>Sortie</b> :</p>
+          <p>10000111&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;0 0 00 0000 0 000</p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            En python les chaines de carractère peuvent être utilisé comme une liste.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def binaire2unitaire(x):
     </div>
-  </div>
-  <div class='ace' id='editor'>def binaire2unitaire(x):
-    rep=0
-    pre=x[0]
-    unitaire=""
-    for i in x:
-        if(pre==i):
-            rep+=1
-        else:
-            if(pre=="1"):
-                unitaire=unitaire+"0 "
-            else:
-                unitaire=unitaire+"00 "
-            for j in range(rep):
-                unitaire=unitaire+"0"
-            unitaire=unitaire+" "
-            rep=1
-            pre=i
-    if(pre=="1"):
-        unitaire=unitaire+"0 "
-    else:
-        unitaire=unitaire+"00 " 
-    for i in range(rep):
-        unitaire=unitaire+"0"
-    return unitaire
-  </div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+        </div>
+        <!-- End Second Column -->
+
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- End Third Column -->
       </div>
+      <!-- End Second Row -->
     </div>
-  </div>
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
-        </div>
-        <div id="bottom">
-          <a href="Chouette.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToHanoi" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/chuckNorris.js"></script>
-</body>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/chuckNorris.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Enigme/Enigmebootstrap.html

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Bootstrap Site</title>
-        <link
-        rel="stylesheet"
-        href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
-        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
-        crossorigin="anonymous"/>
-        <link rel="stylesheet" href="../../CSS/Enigmev2.css"/>
-        <link rel="stylesheet" href="../../CSS/Main.css">
-        
-        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-        <script
-        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-        crossorigin="anonymous"></script>
-        <script
-        src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
-        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
-        crossorigin="anonymous"></script>
-    </head>
-    <body style="background-color: #050e15;background-image: none;">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-3" style="height: auto; min-height: 100vh;">
-                    <div class="row">
-                        <div class="col-2 text-center pt-3">
-                            <a id="home" href="../Home.html" >
-                                <svg xmlns="http://www.w3.org/2000/svg" style="color: white;" width="32" height="32" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
-                                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
-                                    <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
-                                </svg>
-                            </a>
-                        </div>
-                        <div class="col-10 pt-1">
-                                <h1 class="display-5" style="letter-spacing: 0.1rem;""> <!--Mettre responsive si moins de 1500px-->
-                                    Palindrome
-                                </h1><br>
-                        </div>
-                    </div>
-                    <div>
-                        <section class="row mt-3 ">
-                            <h2>Consigne</h2><br>
-                            <p class="enonce">Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon.</p><br><br>
-                        </section>
-                        <section class="row mt-3">
-                            <h2>Rappel</h2><br>
-                            <p class="rappel">Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.</p><br><br>
-                        </section>
-                        <section class="row mt-3">
-                            <h2>Exemple</h2><br>
-                            <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-                            <p>[1,0,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;True</p>
-                            <p>[1,1,9,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;False</p><br><br>
-                        </section>
-                        <section class="row mt-3">
-                            <h2>Aide</h2><br>
-                            <p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1])  affiche : ea.</p>
-                        </section>
-                    </div>
-                </div>
-                <div class="col-5 h-auto py-3">
-                    <div class='ace' id='editor'>def estPalindrome(var):
-    return var == var[::-1]
-print(estPalindrome("abba"))
-                    </div>
-                </div>
-                <div class="col-4 py-3">
-                    <div class='compiler_class'>
-                        <textarea id='console' readonly cols="100" rows="30"></textarea>
-                    </div>
-                    <div class="buttons">
-                        <div>
-                            <a onclick="run_init()" class="btn">
-                            <span class="noAnimation">Run</span>
-                            </a>
-                            <a href="#m1-o" onclick="submit()" class="btn">
-                            <span class="noAnimation">Submit</span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-        <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-        <script src="../../JS/base.js"></script>
-        <script src="../../JS/palindrome.js"></script>
-    </body>
-</html>

WEB/View/src/pages/Enigme/Hanoi.html

@@ -1,95 +1,197 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background5.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
-      </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">T</span>
-            <span>our </span>
-            <span class="flicker">&nbsp;H</span>
-            <span>anoi</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	  <p class="enonce">
-        Faire une fonction permettant de résoudre le problème des tours d’hanoi peu importe le nombre d'entrées dans la fonction. 
-		</p><br>
-    <h2>Rappel</h2><br>
-    <p class="rappel">Le problème des tours de hanoi est le suivant, on souhaite déplacer un certain nombre de disque de taille différente et ils sont et doivent restés empilés de telle sorte qu’aucun disque d’une certaine taille n soit placé en dessous d’un disque de taille plus grande en sachant qu’il n’y a que 3 piles.
-    </p><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée :3,"A","B","C"</p>
-    <p>Sortie : [['A','C'],['A','B'],['C','B'],['A','C'],['B','A'],['B','C'],['A','C']]</p>
-    <h2>Aide</h2><br>
-    <p>Une fonction récursive est une fonction qui fait appelle à elle même</p>
-  </div>
-  <div class='ace' id='editor'>def hanoi(nb_disks,start, middle, end):
-    l=[]
-    hanoi_rec(l,nb_disks,start, middle, end)
-    return l
-  
-def hanoi_rec(l,nb_disks, start, middle, end):
-    if nb_disks == 1:
-        return l.append([start,end])
-    else:
-        hanoi_rec(l,nb_disks - 1, start, end, middle)
-        l.append([start,end])
-        hanoi_rec(l,nb_disks - 1, middle, start, end)</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hanoi</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Les tours d'Hanoi
+          </h2>
+          <p>
+            Écrire une fonction <b style="color: violet;">hanoi</b> permettant de résoudre le problème des <b>tours d’hanoi </b>
+            peu importe le nombre d'entrées dans la fonction. <br />
+            Cette fonction devra prend en paramètre le <b style="color: #44fff6;">nombre de disques</b>, 
+            le <b style="color: #44fff6;">nom</b> de la tour de départ, 
+            le <b style="color: #44fff6;">nom</b> la tour d'arrivée et
+            le <b style="color: #44fff6;">nom</b> la tour intermédiaire. <br />
+            Elle devra retoure une <b style="color: yellow;">liste</b> contenant les déplacements à effectuer (cf exemple ci-dessous).
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Le problème des tours de <b>hanoi</b> est le suivant, on souhaite déplacer un certain nombre de disque de taille différente 
+            et ils sont et doivent restés empilés de telle sorte 
+            qu’aucun disque d’une certaine taille n soit placé en dessous d’un disque de taille plus grande 
+            en sachant qu’il n’y a que 3 piles. 
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> :3,"A","B","C"</p>
+          <p><b>Sortie</b> : [['A','C'],['A','B'],['C','B'],['A','C'],['B','A'],['B','C'],['A','C']]</p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            Pensse à utiliser une fonction récursive pour résoudre ce problème. 
+            Pour rappel une fonction récursive est une fonction qui s'appelle elle même. 
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def hanoi(nb_disks,start, middle, end):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="../Home.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToTrianglePascal" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>  
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/Hanoi.js"></script>
-</body>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/Hanoi.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Enigme/TrianglePascal.html

@@ -1,102 +1,197 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/BackgroundPalindrome.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
-      </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">T</span>
-            <span>ria</span>
-            <span class="flicker">n</span>
-            <span>gle</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	  <p class="enonce">
-        Faire une fonction triangle_pascal permettant d’afficher le triangle de Pascal jusqu'à un certain nombre n de lignes. Bien sùr n sera passé en argument à la fonction.
-		</p><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée : 4</p>
-    <p>Sortie : [[1],[1,1],[1,2,1],[1,3,3,1]]</p><br>
-    <h2>Aide</h2><br>
-    <p>Le triangle arithmétique de Pascal est le triangle dont la ligne d'indice n (n = 0, 1, 2...) donne les coefficients binomiaux  (n) pour p = 0, 1, 2..., n.
-        (p) 
-La construction de ce triangle de Pascal est simple,
-on part de 1 à la première ligne, par convention c'est la ligne zéro (n = 0)
-Pour avoir un terme de la ligne suivante, on prend le terme juste au-dessus, et on lui additionne celui qui est juste avant, (0 si il n'y a rien). 
-Mathématiquement, on applique la formule :
-(n+1) = (n) + (  n  ) 
-(  p  )    (p)    (p-1)
-</p>
-  </div>
-  <div class='ace' id='editor'>def TriangleDePascal(n):
-    if(n==0):
-        return []
-    if(n==1):
-        return [[1]]
-    triangle=[[1],[1, 1]]
-    columns=n
-    for line in range(2,n):
-        triangle.append([1])
-        for column in range(1, line):
-            triangle[line].append(triangle[line - 1][column - 1] + triangle[line - 1][column])
-        triangle[line].append(1)
-    return triangle
-</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Triangle de Pascal</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Triangle de Pascal
+          </h2>
+          <p>
+            Écrire une fonction <b style="color: violet;">triangle_pascal</b> permettant d’afficher le <b>triangle de Pascal</b> 
+            jusqu'à un certain nombre <b style="color:#44fff6">n</b> de lignes. 
+            Bien sùr <b style="color:#44fff6">n</b> sera passé en argument à la fonction.
+            La fonction devra renvoyer une <b style="color: yellow;">liste</b> contenant les lignes du triangle de Pascal. (cf l'exemple pour plus de détails).
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Le triangle arithmétique de Pascal est le triangle dont la ligne d'indice n (n = 0, 1, 2...) 
+            donne les coefficients binomiaux  (n) pour p = 0, 1, 2..., n.<br/>
+            La construction de ce triangle de Pascal est simple,
+            on part de 1 à la première ligne, par convention c'est la ligne zéro (n = 0)
+            Pour avoir un terme de la ligne suivante, on prend le terme juste au-dessus, 
+            et on lui additionne celui qui est juste avant, (0 si il n'y a rien). 
+            Mathématiquement, on applique la formule :<br/>
+            (n+1) = (n) + (  n  )
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b>Entrée</b> : 4</p>
+          <p><b>Sortie</b> : [[1],[1,1],[1,2,1],[1,3,3,1]]</p><br>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+              Il n'y a pas d'aide pour cette énigme.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def triangle_pascal(n):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="Hanoi.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToHome" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/TrianglePascal.js"></script>
-</body>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/TrianglePascal.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Enigme/palindrome.html

@@ -1,93 +1,190 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Palindrome</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(./View/assets/img/BackgroundPalindrome.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="index.php?action=goToHome" style="font-size:36px;color:white;">home</a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Palindrome</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">p</span>
-            <span>alin</span>
-            <span class="flicker">d</span>
-            <span>rome</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	  <p class="enonce">
-      Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. 
-		</p><br><br>
-    <h2>Rappel</h2><br>
-    <p class="rappel">Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.</p><br><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-    <p>[1,0,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;True</p>
-    <p>[1,1,9,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;False</p><br><br>
-    <h2>Aide</h2><br>
-    <p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1])  affiche : ea.</p>
-  </div>
-  <div class='ace' id='editor'>def estPalindrome(var):
-  if(var == var[::-1]):
-    return True
-  else:
-    return False
+      <!-- End First Row -->
 
-print(estPalindrome("abba"))</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
-      </div>
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Palindrome
+          </h2>
+          <p>
+            Écrire une fonction <b style="color: violet;">estPalindrome</b> qui prend en argument un
+            <b style="color:#44fff6">entier</b> et 
+            qui renvoie <b style="color: green;">True</b> si c’est un palindrome et <b style="color: red;">False</b> sinon.
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Un <b>palindrome</b> est un nombre qui reste le même si on le lit de gauche
+            à droite ou de droite à gauche.
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p><b style="color: violet;">estPalindrome(12321)</b> renvoie <b style="color: green;"></bstyle>True</b></p>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            En python l’instruction [::-1] permet d’inverse une chaine de
+            caractère. <br /><br />print("ae"[::-1]) -> ea.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def estPalindrome(var):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="ChuckNorris.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToChouette" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  
-  
+    <!-- End Modal -->
 
-  
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/palindrome.js"></script>
-</body>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/palindrome.js"></script>
+  </body>
 </html>

WEB/View/src/pages/Erreur.php

@@ -18,20 +18,20 @@
 if ($error == 400){
   echo '<h1>Error <span class="errorcode">404</span></h1>';
   echo '<p class="output">La page que vous recherchez a peut-être été supprimée, a changé de nom ou est temporairement indisponible.</p>';
-  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goTo?page=main">retourné à la page d\'accueil</a>.</p>';
   echo '<p class="output">Bonne Chance Utilisateur.</p>';
 }
 elseif ($error == ""){
   echo '<h1>Error <span class="errorcode">000</span></h1>';
   echo '<p class="output">Erreur inconnue</p>';
-  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goTo?page=main">retourné à la page d\'accueil</a>.</p>';
   echo '<p class="output">Bonne Chance Utilisateur.</p>';
 }
 
 else{
   echo '<h1>Error <span class="errorcode">000</span></h1>';
   echo '<p class="output">'.$error.'</p>';
-  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goTo?page=main">retourné à la page d\'accueil</a>.</p>';
   echo '<p class="output">Bonne Chance Utilisateur.</p>'; 
 }
 ?>

WEB/View/src/pages/FirstTests/FirstTest1.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #44fff6; font-weight: bold; font-size: 22px"
+          > 
+            1/10
+          </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=2">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0"
+            >
+              <p>
+                Nous voici dans votre premier test, pour savoir si tu es
+                qualifié pour m’aider. Attention je suis très méticuleux, alors
+                soit bien sur d’être précis dans ce que tu fais !
+              </p>
+              <br />
+              <p>
+                Tout d’abord, tu vas devoir afficher
+                <b style="color: violet">"Hello World !"</b> en utilisant la
+                fonction intégrée de python,<code style="font-size: 18px">
+                  print()</code
+                >.
+              </p>
+              <p>
+                Appuie sur le button <b style="color: red;">Run</b> pour executer ton code.
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">print("Hello World !")</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest10.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          10/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="#" style="color: gray;">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                  Il exsite un autre type de boucle en pyhton qui est la boucle <b style="color: violet">while</b>. 
+                  Elle permet de répéter une action tant qu'une condition est vraie.
+              </p>
+              <p>
+                Voici un petit exemple :
+              </p>
+              <code style="font-size: 18px">
+                list = []<br/>
+                while (len(list) < 5):<br/>
+                &nbsp;&nbsp;list.append(1)<br/>
+              </code>
+              <br/>
+              <p>
+                Tant que la liste ne contient pas 5 éléments, on ajoute un élément.
+              </p>
+              <p>
+                Bien je te propose de passer ton dernier test de qualification.
+                Tu dois coder la fonction <b style="color: violet;">tri</b>. 
+                Cette fonction prend en paramètre deux <b style="color: yellow;">chaine de caractère</b>, 
+                remet les lettres dans l'orde et
+                retourne la <b style="color: yellow;">chaine de caractère</b>.
+                Voici un exemple pour que tu comprennes mieux :
+              </p>
+              <code style="font-size: 18px">
+                def tri(a,b) :<br/>
+                &nbsp;&nbsp;# ton code ici<br/><br/>
+                a = "Hlowrd"<br/>
+                b = "el ol"<br/>
+                print(trie(a,b)) -> retourne "Hello World"
+              </code>
+              <br></br>
+              <p>
+                La fonction <b style="color: violet;">tri</b> prend tour a tour les lettres de a et b.
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/src/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">def tri(a,b):
+    </div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col-6">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+              <div class="col-6">
+                <button
+                  onclick="submit()"
+                  class="btn"
+                  data-toggle="modal"
+                  data-target="#modal"
+                >
+                  <span>Submit</span>
+                </button>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+
+    </div>
+        <!-- Modal -->
+        <div
+        class="modal fade"
+        id="modal"
+        tabindex="-1"
+        role="dialog"
+        aria-labelledby="exampleModalCenterTitle"
+        aria-hidden="true"
+      >
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h2
+                class="modal-title"
+                id="exampleModalLongTitle"
+                style="color: black"
+              >
+                Results
+              </h2>
+              <button
+                type="button"
+                class="close"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <h5 id="result" style="color: black"></h5>
+            </div>
+            <div class="modal-footer">
+              <a href="index.php?action=goToNext&num=9" class="btn" style="display: none" id="next">
+                <span>NEXT</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- End Modal -->
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/String.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest2.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          2/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=3">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0"
+            >
+              <p>
+                Pour ce deuxième test, nous allons voir comment déclarer une
+                variable et la manipuler. Pour créer une variable en python il
+                suffit de faire :
+              </p>
+              <code style="font-size: 18px">x = 1</code>
+              <br /><br />
+              <p>
+                Ici, nous avons créé une variable x qui contient la valeur 1.
+                Nous pouvons maintenant manipuler cette variable en faisant :
+              </p>
+              <code style="font-size: 18px">x = x + 1</code>
+              <br /><br />
+              <p>
+                Ici, nous avons incrémenté la valeur de x de 1. Nous pouvons
+                également faire tout autre opération mathématique avec cette
+                même variable. Par exemple :
+              </p>
+              <code style="font-size: 18px">x = x * 2</code><br />
+              <code style="font-size: 18px">x = x / 2</code><br />
+              <code style="font-size: 18px">x = x - 1</code>
+              <br />
+              <br />
+              <!-- Afficher x -->
+              <p>Nous pouvons afficher la valeur de x en faisant :</p>
+              <code style="font-size: 18px">print(x)</code>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">x = 1 
+print("La varible 'x' :", x)
+
+y=x+2 
+print("Le résultat de'x+2' :", y) 
+
+x=y*2 
+print("Le résultat de '(x+2)*2' :",x)</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest3.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          3/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=4">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0"
+            >
+              <p>
+                Passons désormais à la suite de notre test de qualification. Je vais te présenter les <b style="color:violet">listes</b>.
+              </p>
+              <p>
+                Une liste est une structure de données qui permet de stocker plusieurs valeur. En python, on peut créer une liste en utilisant les crochets <b style="color:violet">[ ]</b>.
+              </p>
+              <p>
+                Voici un exemple :
+              </p>
+              <code style="font-size: 18px">
+                ma_liste = [1, 2,"Hello","World", 3.14]
+              </code>
+              <br></br>
+              <p>
+                Ici on crée une liste composé de plusieurs éléments. On peut accéder à un élément de la liste en utilisant son <b style="color:violet">indice</b>. L'indice d'un élément correspond à sa position dans la liste. On commence à compter à partir de 0.
+              </p>
+              <code style="font-size: 18px">
+                ma_liste[0] = 3
+              </code>
+              <br></br>
+              <p>
+                Dans l'exemple précédent dans la liste <b style="color:violet">ma_liste</b>, on accède à l'élément d'indice 0 et on lui donne la valeur 3.
+              </p>
+              <p>
+                Désormias c'est a toi d'expérimenter ! Je t'ai préparé un petit programme qui vas t'en apprendre plus sur les listes.
+                Si tu veux plus d'information néssite pas a aller voir sur se site : <a href="https://docs.python.org/fr/3/tutorial/datastructures.html" target="_blank" style="color: #44fff6">https://docs.python.org/fr/3/tutorial/datastructures.html</a>
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh"># Initialise une liste
+ma_liste = [1, 2,"Hello","World", 3.14]
+print("Notre liste de départ :")
+print(ma_liste)
+print("")
+
+# Remplace le premier élément par 3
+print("Remplacement du premier élément par 3")
+ma_liste[0] = 3
+print(ma_liste)
+print("")
+
+# Remplace le dernier élément par "toto"
+print("Remplacement du dernier élément par 'toto'")
+ma_liste[-1] = "toto"
+print(ma_liste)
+print("")
+
+# Ajoute 5.4 a la fin de la liste
+print("Ajout de 5.4 a la fin de la liste")
+ma_liste.append(5.4)
+print(ma_liste)
+print("")
+
+# Insert 2 à l'index 3
+print("Insertion de 2 à l'index 3")
+ma_liste.insert(3,2)
+print(ma_liste)
+print("")
+
+# Supprimer le premier 2 de la liste
+print("Suppretion du premier 2 de la liste")
+ma_liste.remove(2)
+print(ma_liste)
+print("")
+
+# Enlève de la liste l'élément situé à la position 1 et le renvoie
+print("Suppression de l'élément situé à la position 1")
+p = ma_liste.pop(1)
+print(ma_liste)
+print("L'élément retiré :", p)
+print("")
+
+# Renvoie la longueur de la liste
+print("Longueur de la liste :", len(ma_liste))
+print("")
+
+# Ps l'instruction 'len' ne fonctionne pas que pour les listes
+print("Longueur de la chaine de caractère 'toto' :", len("toto"))</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest4.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          4/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=5">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                Je vais maintenant ta parler des <b style="color: violet">fonctions</b>. Une fonction est un bloc de code qui peut être appelé plusieurs fois. Elle peut prendre des paramètres et retourner une valeur.
+              </p>
+              <p>
+                En pyhton pour déclarer une fonction on utilise le mot clé <b style="color: violet">def</b> 
+                suivi du nom de la fonction et des paramètres entre parenthèses.
+                Voic un exemple de fonction qui affiche un message :
+              </p>
+              <code style="font-size: 18px">
+                def say_somethings(message1, message2):<br />
+                &nbsp;&nbsp;&nbsp;print(message1)<br />
+                &nbsp;&nbsp;&nbsp;print(message2)
+              </code>
+              <br/><br/>
+              <p>
+                Pour appeler une fonction on utilise son nom suivi des paramètres entre parenthèses.
+                Voici un exemple d'appel de la fonction précédente :
+              </p>
+              <code style="font-size: 18px">
+                say_somethings("Hello", "World")
+              </code>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">def say_somethings(message1, message2):
+  print(message1)
+  print(message2)
+
+say_somethings("Hello", "World")</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest5.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          5/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=6">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                Je vais désormais te présenter l'instruction <b style="color: violet;">return</b>.
+                Un return est une instruction qui permet de renvoyer une valeur.
+              </p>
+              <p>
+                Par exemple, la fonction suivante renvoie la somme de deux nombres :
+              </p>
+              <code style="font-size: 18px">
+                def addition(a, b):<br />
+                &nbsp;&nbsp;&nbsp;&nbsp;return a + b
+              </code>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">def addition(a,b) :
+    return a+b
+
+somme=addition(6,4)
+print(somme)</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest6.html

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          6/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="#" style="color: gray;">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                J'èspère que tu es prêt pour ton premier test ! 
+                Écrit une function <b style="color: violet;">multiplicaton</b>.
+                qui returne la multiplication de deux nombres.
+              </p>
+              <p>
+                Comme d'habitue, tu peux tester ton code en cliquant sur le bouton <b style="color: red;">Run</b>.
+                Si tu es sur que ton code est bon, clique sur le bouton <b style="color: green;">Submit</b>
+                pour valider ton test. J'ai pris son de désactiver le bouton <b style="color:#44fff6;">Next</b> 
+                afin que tu ne puisses pas passer à la prochaine étape avant d'avoir terminé ce test.
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">def multiplication(a,b) :
+    </div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col-6">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+              <div class="col-6">
+                <button
+                  onclick="submit()"
+                  class="btn"
+                  data-toggle="modal"
+                  data-target="#modal"
+                >
+                  <span>Submit</span>
+                </button>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToNext&num=7" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/FirstFunction.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest7.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          7/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=8">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                Il est temps de passer au niveau supérieur et de parler des conditions<br/>
+                En python une condition est une instruction qui permet de vérifier si une condition est vraie ou fausse.<br/>
+                Pour cela on utilise les mots clés if, elif et else. if signifie si, elif signifie sinon si et else signifie sinon.<br/>
+                Voici un exemple :
+              </p>
+              <code style="font-size: 18px">
+                a = 1; b = 2;<br/>
+                if (a > b) :<br/>
+                &nbsp;&nbsp;print(a,"est plus grand que",b)<br/>
+                elif (a == b):<br/>
+                &nbsp;&nbsp;print("a et c sont éguax")<br/>
+                else :<br/>
+                &nbsp;&nbsp;print(b,"est plus grand que",a)
+              </code>
+              <br></br>
+              <p>
+                Ici on test si a est plus petit que b.<br/>
+                Si a n'est pas plus petit alors on test si a est égal a b.<br/>
+                Si aucune des conditions est remplit alors on affiche "a est plus grand que b".
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">a = 1; b = 2;
+if (a > b) :
+        print(a,"est plus grand que",b)
+elif (a == b):
+      print("a et c sont éguax")
+else :
+      print(b,"est plus grand que",a)</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src//JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest8.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          8/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="#" style="color: gray;">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                Mettons en pratique ce que tu vient d'apprendre. Crée une fonction <b style="color : violet"> condition</b>
+                qui prend en argument une liste de nombre entier et un nombre x. 
+                Et qui parcoure la liste en effectuant plusieurs tests :<br />
+                <ul>
+                  <p>Si le nombre dans la liste est égal à 1, ajoute 1 à x</p>
+                  <p>Si le nombre dans la liste est différent de 2, soustrait 1 à x</p>
+                  <p>Si le nombre dans la liste est inférieur à 3, multiplie x par elle même</p>
+                  <p>Si le nombre dans la liste est supérieur à 6, ajoute 4 à x</p>
+                  <p>Sinon ajoute 5 à x</p>
+                </ul>
+              </p>
+              <p>
+                Pour parcourir une liste tu peux utlisier l'instruction <b style="color:violet">for</b> comme ceci :<br />
+              </p>
+              <code style="font-size: 18px">
+                b = 0<br />
+                for i in list :<br />
+                &nbsp;&nbsp;if(i == 1):<br />
+                &nbsp;&nbsp;&nbsp;&nbsp;b += 1
+              </code>
+              <br></br>
+              <p>
+                Elle va parcourir la liste et mettre dans la variable i chaque élément de la liste. 
+                Ici elle va parcourir la liste en asignant a i chaque élément de la liste un par un.
+                Et pour chaque élément de la liste elle va ajouter 1 à la variable b. 
+              </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">def condition(list,a) :
+    </div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col-6">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+              <div class="col-6">
+                <button
+                  onclick="submit()"
+                  class="btn"
+                  data-toggle="modal"
+                  data-target="#modal"
+                >
+                  <span>Submit</span>
+                </button>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToNext&num=9" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- End Modal -->
+
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/If.js"></script>
+  </body>
+</html>

WEB/View/src/pages/FirstTests/FirstTest9.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>First Test</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="View/src/CSS/FirstTest.css" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark pb-5">
+      <div class="container-fluid mx-0">
+        <div class="nav-item nav-link">
+          <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
+        </div>
+        <div class="mx-auto d-flex">
+          <h5
+            class="m-1 text-uppercase"
+            style="color: #fff; font-weight: bold; font-size: 22px"
+          >
+          Test de qualification
+          </h5>
+          <h5
+          class="m-1 text-uppercase"
+          style="color: #44fff6; font-weight: bold; font-size: 22px"
+        > 
+          9/10
+        </h5>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToNext&num=10">Next</a>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <!-- First Test -->
+      <div
+        class="row rounded p-3 m-3"
+        style="
+          background: #16222a; /* fallback for old browsers */
+          background: -webkit-linear-gradient(
+            to right,
+            #3a6073,
+            #16222a
+          ); /* Chrome 10-25, Safari 5.1-6 */
+          background: linear-gradient(to right, #3a6073, #16222a);
+        "
+      >
+        <div class="row">
+          <div class="col-10">
+            <section
+              style="background-color: #222831; min-height: 0"
+              class="p-3 rounded m-0">
+              <p>
+                Durant le test précédent, tu as découvert l'instruction <b style="color : violet">for</b>.
+                Nous l'avons aborder que briévement, mais il est temps de l'étudier plus en détail.<br/>
+                La boucle <b style="color : violet">for</b> est une boucle qui permet de répéter un bloc d'instruction un nombre défini de fois.<br/>
+                On précise après le mot-clé <b style="color : violet">for</b> le nom d’une variable 
+                qui prendra successivement toutes les valeurs qui sont données après le mot-clé <b style="color : violet">in</b>.<br/>
+                Il est possible d’obtenir le même résultat sans donner de liste de valeurs, mais en utilisant la fonction <b style="color : violet">range()</b>.               
+            </p>
+            <p>
+                Voici un exemple de code.
+            </p>
+            <code style="font-size: 18px">
+                list = [1, 2, 3, 4, 5]<br/>
+                for i in list:<br/>
+                &nbsp;&nbsp;print(i+2)<br/>
+                <br/>
+                for j in range(5):<br/>
+                &nbsp;&nbsp;print(j)<br/>
+                <br/>
+                for k in range(1, 5):<br/>
+                &nbsp;&nbsp;print(k)<br/>
+                <br/>
+                for l in range(0, 5, 2):<br/>
+                &nbsp;&nbsp;print(l)<br/>
+                <br/>
+                for m in range(5, 0, -1):<br/>
+                &nbsp;&nbsp;print(m)<br/>
+                <br/>
+                for n in range(len("toto"))):<br/>
+                &nbsp;&nbsp;print(n)<br/>
+            </code>
+            <br></br>
+            <p>
+                Je te laisse expérimenter par toi même.
+            </p>
+            </section>
+          </div>
+          <div class="col-2 align-self-center">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="img-fluid rounded-circle"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/src/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+          </div>
+        </div>
+        <div class="row mt-5">
+          <!-- Editor -->
+          <div class="col-8">
+            <div class="ace rounded ace-1" id="editor" style="min-height: 40vh">list = [1, 2, 3, 4, 5]
+print("Boucle for dans une liste : ")
+for i in list:
+    print(i+2)
+
+print("")
+print("Boucle for dans avec range (5): ")
+for j in range(5):
+    print(j)
+
+print("")
+print("Boucle for dans avec range (1, 5): ")
+for k in range(1, 5):
+    print(k)
+
+print("")
+print("Boucle for dans avec range (0, 5, 2): ")
+for l in range(1, 5, 2):
+    print(l)
+
+print("")
+print("Boucle for dans avec range (5, 0, -1): ")
+for m in range(5, 0, -1):
+  print(m)
+         
+print("")
+print("Boucle for sur un len() : ")
+for n in range(len("toto")):
+    print(n)</div>
+          </div>
+          <!-- End Editor -->
+
+          <!-- Console -->
+          <div class="col-4" style="min-height: 40vh">
+            <textarea
+              id="console"
+              readonly
+              style="width: 100%; height: 60%"
+              class="p-3 rounded"
+            ></textarea>
+            <!-- End Return Code -->
+
+            <!-- Buttons -->
+            <div
+              class="row pt-5 text-center"
+              style="cursor: pointer; height: 20%"
+            >
+              <div class="col">
+                <a onclick="run_init()" class="btn">
+                  <span>Run</span>
+                </a>
+              </div>
+            </div>
+            <!-- End Buttons -->
+          </div>
+          <!-- End Console -->
+        </div>
+      </div>
+      <!-- End First Test -->
+    </div>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+  </body>
+</html>

WEB/View/src/pages/Main.php

@@ -39,7 +39,7 @@
                     class="mb-3 text-uppercase d-flex justify-content-center align-items-center"
                     style="width: 260px; height: 50px"
             <?php
-                if (isset($_SESSION['connected']) && $_SESSION['connected'] == 'true'){
+                if (isset($_SESSION['role']) && $_SESSION['role'] == 'user'){
                     echo 'href="index.php?action=goToPresentation"';
                 }
                 else{
@@ -59,7 +59,7 @@
           <a
             id="multi"
             class="mb-3 text-uppercase d-flex justify-content-center align-items-center"
-            href="./Duel/Duel.html"
+            href="index.php?action=goToQueue"
             style="width: 260px; height: 50px"
           >
             <span></span>

WEB/View/src/pages/Main2.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scripted</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <link rel="stylesheet" href="../CSS/Main2.css" />
+  </head>
+  <body>
+    <div>
+      <div id="imgMain">
+        <span class="material-symbols-outlined p-2" id="AllBg" style="font-size:40px; transform: rotate(90deg)"> clear_all </span>
+      </div>
+    </div>
+  </body>
+</html>

WEB/View/src/pages/Palindrome.html

@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Palindrome</title>
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
-      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
-      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
-      crossorigin="anonymous"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
-    <link rel="stylesheet" href="/WEB/View/src/CSS/Eni.css" />
-  </head>
-  <body>
-    <div class="container-fluid px-5">
-      <div class="row py-4">
-        <!-- style="background-color: #050E15" -->
-        <div class="col-9 d-flex align-items-center px-0">
-          <a
-            class="material-icons pl-0"
-            id="home"
-            href="index.php?action=goToHome"
-            style="font-size: 40px; color: white"
-            >home</a
-          >
-        </div>
-        <div class="col-3 d-flex align-items-center">
-          <div class="col-10 text-right px-3">
-            <p style="font-size: 14px"><b>Besoin d'aide ?</b></p>
-          </div>
-          <div class="col-2 text-right">
-            <button
-              style="background-color: transparent; border: none"
-              onclick="displayHelp()"
-            >
-              <img
-                src="../../assets/img/Foxy.png"
-                alt="Logo"
-                class="rounded-circle moving-fox"
-                style="border: 1px solid #44fff6; width: 60px; height: 60px"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-3 rounded p-3" style="background-color: #222831">
-          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
-            Palindrome
-          </h2>
-          <p>
-            Écrire une fonction <b>estPalindrome</b> qui prend en argument un
-            entier et qui renvoie True si c’est un palindrome et False sinon.
-          </p>
-          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
-          <p>
-            Un palindrome est un nombre qui reste le même si on le lit de gauche
-            à droite ou de droite à gauche.
-          </p>
-          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
-          <p><b>estPalindrome(12321)</b> renvoie <b>True</b></p>
-          <h3
-            class="text-left pb-3 pt-5 help"
-            style="color: #44fff6; opacity: 0"
-          >
-            Aide
-          </h3>
-          <p style="opacity: 0" class="help">
-            En python l’instruction [::-1] permet d’inverse une chaine de
-            caractère. <br /><br />print("ae"[::-1]) -> ea.
-          </p>
-        </div>
-
-        <div class="col-5 pr-0">
-          <div class="ace rounded" id="editor"></div>
-        </div>
-
-        <div class="col-4">
-          <textarea
-            id="console"
-            readonly
-            style="width: 100%; height: 80%"
-            class="p-2"
-          ></textarea>
-
-          <div class="row pt-5 text-center" style="cursor: pointer">
-            <div class="col-6">
-              <a onclick="run_init()" class="btn">
-                <span>Run</span>
-              </a>
-            </div>
-            <div class="col-6">
-              <button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
-                <span>Submit</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="exampleModalLongTitle" style="color: black;">Results</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <h2 id="result" style="color: black;"></h2>
-          </div>
-          <div class="modal-footer">
-            <a href="#" class="btn" style="display : none;" id="next">
-              <span>NEXT</span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-
-    <script
-      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
-    <script
-      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
-      type="text/javascript"
-      charset="utf-8"
-    ></script>
-    <script src="../JS/base.js"></script>
-    <script src="../JS/palindrome.js"></script>
-  </body>
-</html>

WEB/View/src/pages/Presentation.html

@@ -10,7 +10,7 @@
       integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
       crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="../CSS/Presentation.css" />
+    <link rel="stylesheet" href="View/src/CSS/Presentation.css" />
     <script
       src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
       integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
@@ -21,7 +21,7 @@
       integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
       crossorigin="anonymous"
     ></script>
-    <script defer src="../JS/Presentation.js"></script>
+    <script defer src="View/src/JS/Presentation.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
@@ -38,12 +38,15 @@
           </h5>
         </div>
         <div class="nav-link">
-          <a class="navbar-brand" href="index.php?action=goToEnigme">Next</a>
+          <a class="navbar-brand" href="index.php?action=goToEnigme">Skip</a>
+        </div>
+        <div class="nav-link">
+          <a class="navbar-brand" href="index.php?action=goToTest">Next</a>
         </div>
       </div>
     </nav>
 
-    <img src="../../assets/img/BGPres.png" class="img-fluid" />
+    <img src="View/assets/img/BGPres.png" class="img-fluid" />
     
     <div class="container pt-5">
       <div class="col-12">
@@ -73,15 +76,22 @@
               <p>
                 Pour cela je vais te demander de réaliser des missions pour moi.
                 Mais tout d'abord, tu dois passer un test de qualification. Si
-                vous réussissez, vous pourrez m'aider à protéger mon code
+                tu réussis, tu pouras m'aider à protéger mon code
                 source.
               </p>
             </section>
+
+            <section class="hidden row" style="min-height: 50vh;">
+              <p>
+                Clique sur le bouton NEXT pour commencer tes premiers pas dans l'ère du developpement.<br /> <br/>
+                Clique sur SKIP pour aller directement aux énigmes.
+              </p>
+            </section>
           </div>
 
           <div class="col-3" id="fox">
             <img
-              src="../../assets/img/Foxy.png"
+              src="View/assets/img/Foxy.png"
               alt="Logo"
               class="img-fluid rounded-circle moving-fox"
               style="border: 2px solid #44fff6"

WEB/bd.sql

@@ -18,7 +18,7 @@ estAdmin boolean
 );
 
 CREATE TABLE  Enigme(
-id int PRIMARY KEY AUTO_INCREMENT,
+id integer PRIMARY KEY AUTOINCREMENT,
 enonce varchar(250) NOT NULL,
 aide varchar(250),
 rappel varchar(250),
@@ -29,19 +29,19 @@ points numeric CHECK (points >0)
 );
 
 CREATE TABLE  Partie(
-id int PRIMARY KEY AUTO_INCREMENT,
+id integer PRIMARY KEY AUTOINCREMENT,
 dateDebut date NOT NULL
 );
 
 CREATE TABLE  Resoudre(
-joueur varchar(50) REFERENCES Utilisateur(email),
+utilisateur varchar(50) REFERENCES Utilisateur(email),
 enigme int REFERENCES Enigme(id),
 partie int REFERENCES Partie(id),
 classement int CHECK (classement >0),
 indexEnigme int CHECK (indexEnigme >0),
 temps numeric CHECK (temps >0),
 enMulti boolean,
-PRIMARY KEY(joueur, enigme, partie)
+PRIMARY KEY(utilisateur, enigme, partie)
 );
 
 CREATE TABLE  Contenir(
@@ -53,7 +53,7 @@ PRIMARY KEY(partie, enigme)
 
 CREATE TABLE  Participer(
     partie int REFERENCES Partie(id),
-    joueur varchar(50) REFERENCES Joueur(email),
-    enCours boolean,
-    PRIMARY KEY(partie, joueur)
-);
+    utilisateur varchar(50) REFERENCES Utilisateur(email),
+    etat int CHECK (etat IN (0,1,2)), -- etat 0 = enAttente etat 1 = enCours etat 2 = fini
+    PRIMARY KEY(partie, utilisateur)
+);

WEB/index.php

@@ -3,24 +3,36 @@ require_once('./Config/Config.php');
 require_once('./Config/Autoload.php');
 Autoload::charger();
 
-// $db = new Connection();
-// $stm=$db->prepare("INSERT INTO Utilisateur VALUES (:email, :password, :pseudo, :admin)");
-// $stm->bindValue(':email', "e",SQLITE3_TEXT);
-// $stm->bindValue(':password', "e" ,SQLITE3_TEXT);
-// $stm->bindValue(':pseudo', "e", SQLITE3_TEXT);
-// $stm->bindValue(':admin', 0, SQLITE3_INTEGER);
-// $stm->execute();
+echo "test1\n";
+// try {
+//     $con = new Connection($dsn);
 
-// $res = $db->query('SELECT * FROM Utilisateur');
-// // Select all the users in the database
-// while ($row = $res->fetchArray()) {
-//     echo $row['email'] . " " . $row['password'] . " " . $row['pseudo'] . " " . $row['admin'] . " ";
-// }
+//     // $query = "INSERT INTO Utilisateur VALUES (:email,:pseudo,:mdp,:estAdmin)";
+//     // $con->executeQuery($query, array(
+//     //     ':email' => array("SUPERsuper", SQLITE3_TEXT),
+//     //     ':pseudo' => array("dragon", SQLITE3_TEXT),
+//     //     ':mdp' => array("qsdfgyutfcvbghytrfcvgbtfcvgh", SQLITE3_TEXT),   
+//     //     ':estAdmin' => array(0, SQLITE3_INTEGER)
+//     // ));
 
-echo "test";
-$db = new Connection($dsn);
-echo "test2";
+//     $query = "SELECT * FROM Utilisateur";
+//     $con->executeQuery($query);
+//     $results = $con->getResults();
+//     foreach ($results as $row) {
+//         echo $row['email'] . '</br>';
+//         echo $row['pseudo'] . '</br>';
+//         echo $row['mdp'] . '</br>';
+//         echo $row['estAdmin'] . '</br>';
+//     }
+// }
+// catch (PDOException $e) {
+//     echo $e->getMessage();
+// }
+// catch (Exception $e2) {
+//     echo $e2->getMessage();
+// }
 $control = new FrontController();
+// echo "test2\n";
 
 //session_regenerate_id(true);
 // session_unset();

package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "dependencies": {
         "bootstrap": "^5.2.2",
-        "bootstrap-icons": "^1.10.2"
+        "bootstrap-icons": "^1.10.2",
+        "events": "^3.3.0"
       }
     },
     "node_modules/@popperjs/core": {
@@ -41,6 +42,14 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
       "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
     }
   },
   "dependencies": {
@@ -60,6 +69,11 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
       "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
     }
   }
 }

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "bootstrap": "^5.2.2",
-    "bootstrap-icons": "^1.10.2"
+    "bootstrap-icons": "^1.10.2",
+    "events": "^3.3.0"
   }
 }