diff --git a/ChatController.php b/ChatController.php
index 9b0062c6fbe3a31418578cdb5e4374771cbb6a98..c88a74373f74619a0e0afcbef552966e5f32bcc0 100644
--- a/ChatController.php
+++ b/ChatController.php
@@ -2,7 +2,7 @@
 
 session_start();
 
-require_once "HWlib.php";
+require_once "lib/HWlib.php";
 require "ChatModel.php";
 
 $chat = new ChatController();
diff --git a/config.php.example b/config.php.example
index 60f0061330529af49a809b38d0859d44e4733956..65b8c8146485442447051bcdb95c935bf5d6b87f 100644
--- a/config.php.example
+++ b/config.php.example
@@ -37,5 +37,8 @@ define("DEBUG",true);
 // Bot parameters
     define("NBBOTS",10);
 
+// Default project for the website
+    define("DEFAULTPROJECT","Headwork");
+
 ?>
 
diff --git a/index.php b/index.php
index 2365ea1610b80d24a7c973a0156684bc92e00d4a..4dc184d582697f5f19cf1be540dae21abddb57e5 100755
--- a/index.php
+++ b/index.php
@@ -38,7 +38,7 @@ require_once("pages/drawArtifact/drawArtifact.php");
 require_once("pages/maintenance/maintenance.php");
 require_once("pages/feedback/feedback.php");
 require_once("pages/forum/forum.php");
-require_once("pages/taskViewer/TaskViewer.php");
+require_once("pages/taskViewer/taskViewer.php");
 
 // TODO faire une classe avec action($conn,$context), qui va appeler la fonction précise avec les $_GET (tout est sur ce format)
 
@@ -66,13 +66,11 @@ $_SESSION['mode']=$mode;
 
 $VIEW["PROJECT"]=HWlistProjects($conn);
 
-
 debug("mode is : $mode");
 
-
 switch ($mode) {
      case "login":
-            // prototype of the future $mode call system with pageList security test
+            // TODO prototype of the future $mode call system with pageList security test
             $pageList=array("login"=>"LoginForm");
             if(array_key_exists($mode,$pageList)){
                 $class=$pageList[$mode];
diff --git a/lib/HTML.php b/lib/HTML.php
index e69f532fe77bb020e49973d1a6f86c25a2c501bb..4611ee2d145cc61388109da0e7987250d5585d44 100755
--- a/lib/HTML.php
+++ b/lib/HTML.php
@@ -94,7 +94,8 @@
                     "type" => $type,
                     "name" => $name,
                     "value" => $value,
-                    "class" => $classes
+                    "class" => $classes,
+                    "text" => $placeholder
                 )
             );
         } else {
@@ -568,7 +569,7 @@ function BSArtifactList($list,$active,$conn=null,$query=null){
         
         $normalizedItem="modal".str_replace(" ", "-", $itemid); // building the id of the modal
             
-             
+             $detail=false;
              if($detail){
                 $res.='<div class="col-sm-4">';
                 $res.='<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#'.$normalizedItem.'">';
diff --git a/pages/loginForm/loginForm.php b/pages/loginForm/loginForm.php
index cc902d5cf4ea44e7274b8e8178f707510c0a34e7..7afb3fed1c6e79f5d745b3bb7a0b46f060551fe9 100644
--- a/pages/loginForm/loginForm.php
+++ b/pages/loginForm/loginForm.php
@@ -8,7 +8,7 @@ class LoginForm extends Action {
      *
      * @param $conn : A valid database PDO connection
      *
-     * @return the mode to activate, showPages by default
+     * @return string the mode to activate, showPages by default
      **/
     function login($conn)
     {
@@ -60,7 +60,7 @@ class LoginForm extends Action {
 
             // set a default project if necessary
             if (empty($_SESSION["project"]))
-                    $_SESSION['project'] = "Headwork";
+                    $_SESSION['project'] = DEFAULTPROJECT;
 
 
             return "showTasks";
@@ -125,9 +125,9 @@ class LoginForm extends Action {
     {
         $stmt = $conn->prepare("insert into users values('',:name,:pwd)");
         $stmt->bindParam(':name', $_POST["username"], PDO::PARAM_STR);
-        $stmt->bindParam(':pwd', $pwd, PDO::PARAM_STR);
+        $stmt->bindParam(':pwd', $_POST["password"], PDO::PARAM_STR);
         $pwd=password_hash($_POST["password"], PASSWORD_DEFAULT);
-        $stmt->execute() or die(mysql_error());
+        $stmt->execute() or die( PDO::errorInfo());
         $id=(string)@$this->checkLogin($_POST['username'], $_POST["password"], $conn);
         $stmt = $conn->prepare("select id from skilltree");
         $stmt->execute();
diff --git a/pages/profile/profile.php b/pages/profile/profile.php
index 73be671ee4bf1b4d4e29fa2edf1138a2ac4e2d09..ce02ec1aa7bac3c5c341f4d6846d10ec391b3d52 100755
--- a/pages/profile/profile.php
+++ b/pages/profile/profile.php
@@ -45,7 +45,8 @@
             HTMLtag("input",array("type"=>"radio",isset($_POST["2"]) ? $_POST["2"] : ''=>"","name"=>"availability","value"=>"2","required"=>"")).HTMLbr().HTMLbr().
             HTMLtag("div",array("class"=>"lined")).
             HTMLinput("hidden","mode","saveProfile",null,false,"").
-            HTMLinput("submit","submit","Save changes",null,false,"").HTMLbr()
+            HTMLinput("submit","submit","Accept conditions below and save changes",null,false,"").HTMLbr().
+            file_get_contents("templates/rgpd.tmpl")
             );
 
     }
diff --git a/pages/showTasks/showTasks.php b/pages/showTasks/showTasks.php
index 0a708247d2101a47a5d1b09d504955f2854b6c5c..cfaf0ed2d876672b6d75622e0fca55c126c737e7 100644
--- a/pages/showTasks/showTasks.php
+++ b/pages/showTasks/showTasks.php
@@ -19,7 +19,7 @@ function showTasks($conn, $displayAlert = false)
         $_SESSION['project'] = $_GET['project'];
         $_SESSION['activity_desc'] = null;
     } else if (! isset($_SESSION['project']))
-        $_SESSION['project'] = "Headwork";
+        $_SESSION['project'] = DEFAULTPROJECT;
     if (isset($_GET['activitydesc']))
         $_SESSION['activity_desc'] = $_GET['activitydesc'];
     else if (! isset($_SESSION['activity_desc']))
@@ -160,7 +160,7 @@ function showTaskList($conn, $title, $query, $displayThanks = false)
         $row = "";
         foreach ($line as $k => $v) {
             if ($k == "id") {
-                $temp = HTMLinput("submit", "choice", $v, null, null, "btn btn-dark");
+                $temp = "<button type='submit' name='choice' value='$v' class='btn btn-dark'>Start!</button>";
             } else {
                 $temp = $v;
             }
@@ -171,7 +171,7 @@ function showTaskList($conn, $title, $query, $displayThanks = false)
         ));
     }
 
-    $finalform = "<table class='table table-striped table-bordered'><tr><td>Sorry, no task today for this activity</td></tr></table>";
+    $finalform = "<table class='table table-striped table-bordered'><tr><td>Sorry, no task today for this activity. Choose another activity.</td></tr></table>";
 
     if ($rowcount > 0) {
         $finalform = HTMLtable(array(
@@ -246,7 +246,7 @@ function answer($conn, $id, $error = false)
             break;
 
         default:
-            echo ' type default </br>';
+            //echo ' type default </br>';
             $placeholder = ($line['arg1'] !== null ? $line['arg1'] : "");
             $str .= HTMLp(HTMLtextarea("answer", "60", "3", "", $placeholder));
             break;
@@ -317,6 +317,8 @@ function answer($conn, $id, $error = false)
                 "name" => "answer"
             ));
             break;
+        case 11: // JSON generic answer
+            break;
     }
 
     $str .= "<center>";
@@ -370,9 +372,8 @@ function answer($conn, $id, $error = false)
 EOT;
     }
 
-    // Disabling the submit button for timed tasks to synchronize everyone
-    if ($line['timer'] === null) {
-        // echo 'test timer </br>';
+    // Disabling the submit button for JSON tasks or or timed tasks
+    if ($line['timer'] === null && $line['type']!=11) {
         $str .= HTMLcenter(HTMLinput("submit", "name", "submit", null, false, 'btn btn-dark'));
     }
 
@@ -430,6 +431,11 @@ EOT;
  */
 function insertAnswer($conn, $id, $artifactid, $value, $mass, $isAjax=false, $help=false, $typeanswer=0)
 {
+    // secure the value
+    $value=addslashes($value);
+
+    $emptyAnswer=false;
+
     $user=$_SESSION['id'];
 
     $stmt = $conn->query("select * from Task where id=$id and artifact=$artifactid");
@@ -463,7 +469,7 @@ function insertAnswer($conn, $id, $artifactid, $value, $mass, $isAjax=false, $he
             $query = "insert into Answer(idtask, artifact, user, mass, value".($help ? ", help" : "").") values ";
 
             if ($type == 3 || (($type == 5 || $type == 6 || $type == 7 || $type ==11) && $isJson)) { // Multi-line answer or JSON answer
-                $values = "";
+                $values = ""; // default input in case of empty answer, plus space for last substr
                 if ($type == 3) {
                     foreach (explode(PHP_EOL, $value) as $val) {
                         $val = html_entity_decode($val, ENT_QUOTES); // We need to decode in order to avoid double encoding issues
@@ -473,10 +479,13 @@ function insertAnswer($conn, $id, $artifactid, $value, $mass, $isAjax=false, $he
                     foreach (json_decode($value) as $jsonObject) {
                         $val = html_entity_decode($jsonObject->value, ENT_QUOTES); // We need to decode in order to avoid double encoding issues
                         $values .= "(" . $jsonObject->idtask . ",:artifact, :user, $realMass," . $conn->quote($val) . ($help ? ", ".(strlen($jsonObject->help->link) > 0 ? $conn->quote(json_encode($jsonObject->help)) : "null") : "") . "),";
+                        debug("been here");
                     }
                 }
                 $values = substr($values, 0, strlen($values) - 1);
                 $query .= $values;
+                if (!$values)
+                    $emptyAnswer=true;
             } else {
                 $query .= "(:id, :artifact,:user, $realMass, :value)";
             }
@@ -494,7 +503,8 @@ function insertAnswer($conn, $id, $artifactid, $value, $mass, $isAjax=false, $he
             $stmt->bindParam(':user', $user, PDO::PARAM_INT);
             $stmt->bindParam(':artifact', $artifact, PDO::PARAM_STR);
 
-            $stmt->execute(); // or die(mysql_error());
+            if (!$emptyAnswer)
+                $stmt->execute();
 
             // indicated that the task has been answered
             $conn->query("insert into Answered(id,artifact) values ($id,$artifact)"); // or die();
diff --git a/projects/Cool-in/background.css b/projects/Cool-in/background.css
new file mode 100644
index 0000000000000000000000000000000000000000..bf61a6fdf10bb42ff494ee0bfd045aa2f7d65973
--- /dev/null
+++ b/projects/Cool-in/background.css
@@ -0,0 +1 @@
+background: no-repeat bottom right/10% url('projects/Cool-in/cool-in-logo.png');
diff --git a/projects/Cool-in/bulb_textUnder_bubbles.png b/projects/Cool-in/bulb_textUnder_bubbles.png
new file mode 100755
index 0000000000000000000000000000000000000000..9a5cf4887f6c98d19182a1e307332cf4bca29f16
Binary files /dev/null and b/projects/Cool-in/bulb_textUnder_bubbles.png differ
diff --git a/projects/Cool-in/cool-in-logo-bright.png b/projects/Cool-in/cool-in-logo-bright.png
new file mode 100644
index 0000000000000000000000000000000000000000..6353fddeaa130bff2c8d6bbf5a44c123fcbd9e94
Binary files /dev/null and b/projects/Cool-in/cool-in-logo-bright.png differ
diff --git a/projects/Cool-in/cool-in-logo.png b/projects/Cool-in/cool-in-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a242cf00cf86b82c15bfbcb27939651c491d9f3
Binary files /dev/null and b/projects/Cool-in/cool-in-logo.png differ
diff --git a/projects/Cool-in/coolin.sca b/projects/Cool-in/coolin.sca
new file mode 100644
index 0000000000000000000000000000000000000000..75ba71818e6c968465408984e794f4b75682f5fc
--- /dev/null
+++ b/projects/Cool-in/coolin.sca
@@ -0,0 +1,131 @@
+{
+  "author" : "M2-2122 Group 3",
+  "doc" : "",
+  "1": {
+    "nodetip": "Introduction page",
+    "2": {
+      "guard": "none",
+      "actiontip": "Explanation of activity...",
+      "actions": [
+        "prepare task 1 as message",
+        "use 'Cool-in-todo-step1' as template",
+        "use 'Avant de commencer' as title",
+        "use 'Présentation' as description",
+        "forget profile for current artifact",
+        "offer task to anyone",
+        "skill 3001 is relevant for the task",
+        "install task"
+      ]
+    }
+  },
+  "2": {
+    "nodetip": "Writing of todos",
+    "3": {
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=1",
+      "actiontip": "Instantiation of first step",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "prepare task 2 as basic",
+        "use 'Cool-in-todo-step2' as template",
+        "use 'Todos list' as title",
+        "use 'REGEXP ''^(.)+$''' as checker",
+        "use 'Please enter something' as checker message",
+        "use 'Saisie de tâches' as description",
+        "forget profile for current artifact",
+        "offer task to anyone",
+        "skill 3001 is relevant for the task",
+        "install task"
+      ]
+    }
+  },
+  "3": {
+    "nodetip": "Categorization of todos",
+    "4":{
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=2",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "use 'Cool-in-todo-step3' as template",
+        "select @TEMPLATE:=replace(@TEMPLATE,'TAG',value) from Answer where artifact=CURRENT_ARTIFACT and idtask=2 and user=SESSION_USER",
+        "select @TITLE:='Catégorisation des tâches'",
+        "select @LIST:='select idtask as id,value as text from Answer where user=SESSION_USER and idtask=2 and artifact=CURRENT_ARTIFACT'",
+        "select @ANS:='select id as value, text,class,false as request_feedback from CoolInAnswerButton where id between 1 and 3'",
+		"select @CHECKER:=NULL",
+  		"select @CHECKERMSG:=NULL",
+  		"select @LIST:='select id as value,text as text from CoolInAnswerButton where id between 1 and 3'",
+        "select @TYPE:=1",
+        "insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values(3,CURRENT_ARTIFACT,'Your inputs',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+        "delete from Profile where idartifact=CURRENT_ARTIFACT",
+        "insert into Profile values (3,CURRENT_ARTIFACT,1)"
+      ]
+    }
+  },
+  "4": {
+    "nodetip": "Stress level",
+    "5": {
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=3",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "use 'Cool-in-todo-step4' as template",
+        "select @TEMPLATE:=replace(@TEMPLATE,'TAG',value) from Answer where artifact=CURRENT_ARTIFACT and idtask=2 and user=SESSION_USER",
+        "select @DESC:='Niveau de stress des tâches'",
+        "select @TITLE:='Niveau de stress des tâches'",
+        "select @LIST:='select text as value, text from CoolInAnswerButton where id between 4 and 8'",
+		"select @CHECKER:=NULL",
+  		"select @CHECKERMSG:=NULL",
+        "select @TYPE:=1",
+        "insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values(4,CURRENT_ARTIFACT,'Your inputs',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+        "delete from Profile where idartifact=CURRENT_ARTIFACT",
+        "insert into Profile values (4,CURRENT_ARTIFACT,1)"
+      ]
+    }
+  },
+  "5": {
+    "nodetip": "Duration",
+    "6": {
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=4",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "use 'Cool-in-todo-step5' as template",
+        "select @TEMPLATE:=replace(@TEMPLATE,'TAG',value) from Answer where artifact=CURRENT_ARTIFACT and idtask=2 and user=SESSION_USER",
+        "select @DESC:='Durée des tâches'",
+        "select @TITLE:='Durée des tâches'",
+        "select @LIST:='select id as value, text from CoolInAnswerButton where id between 9 and 17'",
+		"select @CHECKER:=NULL",
+  		"select @CHECKERMSG:=NULL",
+        "select @TYPE:=1",
+        "insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values(5,CURRENT_ARTIFACT,'Your inputs',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+        "delete from Profile where idartifact=CURRENT_ARTIFACT",
+        "insert into Profile values (5,CURRENT_ARTIFACT,1)"
+      ]
+    }
+  },
+  "6": {
+      "nodetip": "Conclusion page",
+      "7": {
+        "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=5",
+        "actiontip": "Termination",
+        "actions": [
+          "prepare task 6 as message",
+          "use 'M2-2122-todo-step5' as template",
+          "use 'Merci!' as title",
+          "use 'Merci!' as description",
+          "forget profile for current artifact",
+          "offer task to anyone",
+          "skill 3001 is relevant for the task",
+          "install task"
+        ]
+      }
+    },
+  "7": {
+      "nodetip": "Conclusion page",
+      "8": {
+        "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=6",
+        "actiontip": "Termination",
+        "actions": [
+        		"delete from Task where artifact=CURRENT_ARTIFACT",
+        		"delete from Profile where idartifact=CURRENT_ARTIFACT"
+        ]
+        }
+        },
+  "8": {}
+}
\ No newline at end of file
diff --git a/projects/Cool-in/init-skills.sql b/projects/Cool-in/init-skills.sql
new file mode 100644
index 0000000000000000000000000000000000000000..9fab25bb32c6177fe298c845e6d8edb35a9d9c00
--- /dev/null
+++ b/projects/Cool-in/init-skills.sql
@@ -0,0 +1,10 @@
+-- skillTree schema
+-- (id, parent_skill, skill)
+--insert into SkillTree values
+--(3000, 1, 'M2-2122'),
+--(3001, 3000, 'Todo List');
+-- (3005, 1003, 'Headwork Principles'),
+-- (3006, 1003, 'Uncertain Answers');
+
+
+
diff --git a/projects/Cool-in/init-workflow.sql b/projects/Cool-in/init-workflow.sql
new file mode 100644
index 0000000000000000000000000000000000000000..64191ff1ccfe5ac53be43fa8dd951c800a9d290d
--- /dev/null
+++ b/projects/Cool-in/init-workflow.sql
@@ -0,0 +1,28 @@
+DELETE from Artifact where classid in (select id from ArtifactClass where project = 'Cool-in');
+DELETE from ArtifactClass where project = 'Cool-in';
+-- To do task automaton
+insert into ArtifactClass(id,description, definition, tablename, project, autostart)
+values(9000, 'Donnez-nous vos TODOs !', 'Cool-in/coolin.sca', 'Artifact', 'Cool-in', true);
+
+insert into ArtifactClass(id,description, definition, tablename, project, autostart)
+values(9001, 'Diviser pour régner : décomposez des gros TODOs', 'Cool-in/task-decomposition.sca', 'Artifact', 'Cool-in', true);
+
+DROP TABLE IF EXISTS CoolInAnswerButton;
+CREATE TABLE CoolInAnswerButton(id int,text varchar(100),class varchar(100));
+INSERT INTO CoolInAnswerButton values (1,'Personnelle','danger');
+INSERT INTO CoolInAnswerButton values (2,'Profesionnelle','warning');
+INSERT INTO CoolInAnswerButton values (3,'Familiale','success');
+INSERT INTO CoolInAnswerButton values (4,'1 - aucun stress, voire relaxant','');
+INSERT INTO CoolInAnswerButton values (5,'2 - aucun stress, neutre','');
+INSERT INTO CoolInAnswerButton values (6,'3 - stress léger, motivant','');
+INSERT INTO CoolInAnswerButton values (7,'4 - stress, désagréable, fatiguant','');
+INSERT INTO CoolInAnswerButton values (8,'5 - stress très élevé, ne peut durer trop longtemps','');
+INSERT INTO CoolInAnswerButton values (9,'30mn ou moins','');
+INSERT INTO CoolInAnswerButton values (10,'1h','');
+INSERT INTO CoolInAnswerButton values (11,'2h','');
+INSERT INTO CoolInAnswerButton values (12,'1 demi-journée','');
+INSERT INTO CoolInAnswerButton values (13,'1 jour','');
+INSERT INTO CoolInAnswerButton values (14,'2 jours','');
+INSERT INTO CoolInAnswerButton values (15,'3 jours','');
+INSERT INTO CoolInAnswerButton values (16,'1 semaine','');
+INSERT INTO CoolInAnswerButton values (17,'Plus de 1 semaine','');
diff --git a/projects/Cool-in/presentation.html b/projects/Cool-in/presentation.html
new file mode 100644
index 0000000000000000000000000000000000000000..f9bf98e2c8c7d346898964fcb2da98df67d1b524
--- /dev/null
+++ b/projects/Cool-in/presentation.html
@@ -0,0 +1,19 @@
+<h1>Bienvenue dans le projet Cool-in !</h1>
+
+<center><img src="projects/Cool-in/cool-in-logo.png" alt="logo du projet"/></center>
+<p>
+    En participant à ce projet, vous contribuez à la constitution d'une base de tâches personnelles ou professionnelles
+    (ou TODO lists), annotées avec une estimation de leur durée et de leur niveau de stress. Cette base servira à mieux
+    comprendre les questions d'organisation personnelle, de charge mentale, et à améliorer les assistants personnels. Lorsque
+    la base sera suffisamment grande, une IA pourra être entraînée à prédire durée et stress !
+</p>
+<p>
+    Ce projet vous propose deux activités distinctes :
+    <ul>
+        <li>Une collecte de TODOs : recopiez vos post-its ou votre liste du jour !</li>
+        <il>Un exercice de décomposition de tâche : quand une tâche est trop grande, il faut la découper. A vous de jouer !</il>
+    </ul>
+
+</p>
+<p><b>Merci pour votre aide ! A la fin de la campagne de saisie, les 3 personnes ayant le plus contribué recevront un 4h gratuit
+    à l'ISTIC (une boisson et une viennoiserie), et auront leur nom sur le mur du projet ! </b></p>
\ No newline at end of file
diff --git a/projects/Cool-in/task-decomposition.sca b/projects/Cool-in/task-decomposition.sca
new file mode 100644
index 0000000000000000000000000000000000000000..c4c9dbb0f30c1b8aafee88aef2f5f890d1b4caad
--- /dev/null
+++ b/projects/Cool-in/task-decomposition.sca
@@ -0,0 +1,33 @@
+{
+	"doc":"A simple workflow for GUI demo",
+	"author": "David Gross-Amblard, M1 Miage, IRISA/UR1",
+	"1": {
+		"2": {
+			"guard": "none",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='Cool-in-task-decomposition'",
+				"select @TARGET:=value from Answer,Artifact where Answer.idtask=2 and Artifact.id=Answer.artifact and Artifact.classid=9000 order by rand(unix_timestamp()) limit 1",
+				"select @TARGET:=if(@TARGET is null,'Organiser l''anniversaire d''Alice',@TARGET)",
+				"select @TEMPLATE:=replace(@TEMPLATE,'TASK',@TARGET)",
+				"select @TITLE:='Décomposition de tâches'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type) values (1,CURRENT_ARTIFACT,'demo',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (1,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
+	"2": {
+	    "3":{
+	        "guard":"task 1 is answered",
+	        "actions":[
+	            		"delete from Task where artifact=CURRENT_ARTIFACT",
+                		"delete from Profile where idartifact=CURRENT_ARTIFACT"
+               ]
+	    }
+	},
+	"3" : {}
+}
diff --git a/projects/Cool-in/task-decomposition.tmpl b/projects/Cool-in/task-decomposition.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..0b0c4d4b7ecc3ab3aa1a66b9fd6ed92f36c4ecea
--- /dev/null
+++ b/projects/Cool-in/task-decomposition.tmpl
@@ -0,0 +1,172 @@
+
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+  <style type="text/css">
+      #backend ul{
+        list-style: none;
+    }
+
+      ul li ul {
+        border-left: 1px solid black;
+      }
+
+      ul li {
+        position: relative;
+      }
+
+      ul ul li:before{
+        content: '';
+        position: absolute;
+        top: 13px;
+        left: -40px;
+        background: black;
+        width: 40px;
+        height: 1px;
+      }
+
+      .closeIT{
+        background: red;
+        color: white;
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+
+      input{
+        margin: 5px;
+      }
+  </style>
+
+<h2></h2>
+<p>
+Certaines objectifs complexes peuvent se décomposer en sous tâches. Par exemple l'objectif
+<center>
+    <strong>Organiser l'anniversaire d'Alice</strong>
+</center>
+peut se décomposer en tâches et sous-tâches :
+<small>
+<pre>
+Prevenir les amis
+    Récupérer les adresses
+    Acheter des cartes d'invitation
+Commander le gâteaux
+Décorer la salle
+    Acheter des ballons
+</pre>
+</small>
+
+<p>A vous de jouer ! Décomposer l'objectif <strong>TASK</strong> en tâches (bouton Ajouter une tâche) et sous-tâches (bouton Ajouter une sous-tâche).
+Merci de mettre les tâches dans l'ordre ! Cliquez sur Ajouter une tâche...</p>
+</p>
+
+<button id="createParent" type="button">Ajouter une tâche</button>
+<ul id="backend"></ul>
+
+
+<button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+
+<input type="hidden" id="answer" name="answer" value="['3','5']"/>
+
+<script type="text/javascript">
+    // preventing submit on enter key
+    $(document).ready(function() {
+        $(window).keydown(function(event){
+            if(event.keyCode == 13) {
+                event.preventDefault();
+                return false;
+            }
+        });
+    });
+
+    let createparent = document.getElementById('createParent');
+    let backend = document.getElementById('backend');
+
+    let cptTask = 0; //compteur pour differencier les inputs
+    let input = new Array(); //tableau qui va contenir tous les inputs
+    let btnAddSubTask = new Array(); //tableau qui va contenir tous les boutons pour ajouter des enfants
+
+    createparent.addEventListener("click", function(){
+        cptTask +=1;
+        let content = $(`<li>
+        <input type="text" class="input`+cptTask+`" placeholder="Nom de la tâche">
+        <button type="button" class="createChild" id="id`+cptTask+`">Ajouter une sous-tâche</button>
+        <span class="closeIT">X</span>
+    </li>`);
+        content.addClass(cptTask);
+        content.appendTo(backend);
+        
+        btnAddSubTask.push(document.getElementById('id'+cptTask));
+        btnAddSubTask[cptTask-1].disabled = true;
+        input.push(document.querySelector('.input'+cptTask));
+
+        for(var i=0; i<cptTask; i++){
+            //Pour tous les inputs, on va verifier chaque changement de texte pour activer ou desactiver le bouton
+            input[i].addEventListener("change", function() {
+                if (document.querySelector('.input'+i).value === "") {
+                    document.getElementById('id'+i).disabled = true; 
+                } else {
+                    document.getElementById('id'+i).disabled = false;
+                }
+            });
+        }
+        
+    });
+
+    backend.addEventListener('click',function(e){
+        if(e.target.classList == 'closeIT'){
+            closeBTN = e.target;
+            li = closeBTN.parentElement;
+            /*pour supprimer ul si c'est une sous tache*/
+            let parent = li.parentElement;
+            if(li.parentElement.nodeName == 'UL' && parent.parentElement.nodeName == 'LI'){
+                li = parent;
+            }
+            li.remove();
+        }
+
+        if(e.target.classList == 'createChild'){
+            createChildBTN = e.target;
+            li = createChildBTN.parentElement;
+            let content = $('<ul><li><input type="text" placeholder="Nom de la sous-tâche"><span class="closeIT">X</span></li></ul>');
+            content.appendTo(li);
+        }
+    })
+
+    let btnSubmit = document.getElementById("submit");
+
+    btnSubmit.addEventListener("click", () => {
+        //on crée un tableau pour la structure JSON
+        let fd = new Array();
+        let cptOrderTask = 0;
+        let cptOrderSubtask = 0;
+        let parent = "";
+        //on rempli notre tableau
+        for(var i=0, li; li=backend.childNodes[i]; i++) {
+           if(li.tagName=='LI'){
+              // traitement des li (taches)
+              for(var j=0, ul; ul=li.childNodes[j]; j++){
+                if(ul.tagName=='INPUT'){
+                    //on recupere ce qui est ecrit dans l'input de chaque tache
+                    tache = ul.value;
+                    if(tache != ""){
+                        console.log("parent de la tache", ul.parentElement)
+                        parent = "task"+i;
+                        cptOrderTask += 1;
+                        cptOrderSubtask = 0;
+                        fd.push([parent, tache, null, cptOrderTask]);
+                    }
+                }
+                else if(ul.tagName=='UL'){
+                    li2 = ul.childNodes[0];
+                    if(tache != "" && li2.childNodes[0].value != ""){
+                        cptOrderSubtask += 1;
+                        fd.push(["subtask"+i +j, li2.childNodes[0].value, parent, cptOrderSubtask]);
+                    }
+                }
+              }
+            }
+        }
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#answer").value = JSONString;
+
+    })
+</script>
diff --git a/projects/Cool-in/todo-step1.tmpl b/projects/Cool-in/todo-step1.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..c37d43f2d38fa6eefd9bddb8348c7f0fe38d576f
--- /dev/null
+++ b/projects/Cool-in/todo-step1.tmpl
@@ -0,0 +1,8 @@
+<h2></h2>
+<p>Etape <strong>1/6</strong></p>
+<p class="card-text">
+    En participant à ce projet, vous contribuez à la constitution d'une base de tâches (TODO lists), annotées avec une estimation
+    de leur durée et de leur niveau de stress. Cette base servira à mieux comprendre les questions d'organisation personnelle, de charge mentale, et à améliorer les assistants personnels.
+</p>
+
+<br/>
diff --git a/projects/Cool-in/todo-step2.tmpl b/projects/Cool-in/todo-step2.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..c2aa72c055c66c7e141f79ceb07f88621d4d16e4
--- /dev/null
+++ b/projects/Cool-in/todo-step2.tmpl
@@ -0,0 +1,15 @@
+<h2></h2>
+<p>Etape <strong>2/6</strong></p>
+ <p class="card-text">
+ Entrez sur une ligne une tâche qui pourraient se trouver sur vos listes personnelles (TODO list).
+ Par exemple :
+ <ul>
+    <li>Acheter du pain</li>
+    <li>Organiser le voyage à New York</li>
+    <li>Faire le projet de bases de données</li>
+    <li>Faire du sport</li>
+    <li>Nourrir le chat</li>
+ </ul>
+</p>
+<br/>
+
diff --git a/projects/Cool-in/todo-step3.tmpl b/projects/Cool-in/todo-step3.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..d5abd1ef66d2205f7612e383011a9021bab16c06
--- /dev/null
+++ b/projects/Cool-in/todo-step3.tmpl
@@ -0,0 +1,21 @@
+<h2></h2>
+<p>Etape <strong>3/6</strong></p>
+ <p class="card-text">
+ Catégorisez votre tâche selon les trois sphères suivantes : Personnelle (juste pour soi), Professionnelle
+ (pour le travail), Familiale (pour la famille ou les amis).
+  </p>
+ <p class="card-text">
+  Par exemple :
+ <center>
+ <table>
+    <tr><td>acheter du pain</td><td>Personnelle</td></tr>
+    <td>organiser le voyage à New York</td><td>Famille</td></tr>
+    <td>faire le projet de bases de données</td><td>Professionnelle</td></tr>
+    <td>faire du sport</td><td>Personnelle</td></tr>
+    <td>nourrir le chat</td><td>Famille</td></tr>
+ </table>
+</center>
+</p>
+<br/>
+<br/>
+Catégorie de <strong>TAG</strong> :
\ No newline at end of file
diff --git a/projects/Cool-in/todo-step4.tmpl b/projects/Cool-in/todo-step4.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..88b2df903445a95fea3625b9a956636fd6823547
--- /dev/null
+++ b/projects/Cool-in/todo-step4.tmpl
@@ -0,0 +1,9 @@
+<h2></h2>
+<p>Etape <strong>4/6</strong></p>
+<h2></h2>
+<p class="card-text">
+</p>
+    Pour votre tâche, indiquez son niveau de stress (1 - aucun stress, 5 très stressant).
+<br/>
+<br/>
+Stress de <strong>TAG</strong> :
diff --git a/projects/Cool-in/todo-step5.tmpl b/projects/Cool-in/todo-step5.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..e81d782211dc06f962793b7cc24785a6575b2734
--- /dev/null
+++ b/projects/Cool-in/todo-step5.tmpl
@@ -0,0 +1,8 @@
+<h2></h2>
+<p>Etape <strong>5/6</strong></p>
+<p class="card-text">
+</p>
+    Pour votre tâche, indiquez sa durée estimée.
+<br/>
+<br/>
+Durée de <strong>TAG</strong> :
\ No newline at end of file
diff --git a/projects/Cool-in/todo-step6.tmpl b/projects/Cool-in/todo-step6.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..f564e4053dc4596319efe1a627e00d52bc50ae50
--- /dev/null
+++ b/projects/Cool-in/todo-step6.tmpl
@@ -0,0 +1,6 @@
+<h2></h2>
+<p>Etape <strong>6/6</strong></p>
+<p class="card-text">
+    Merci beaucoup pour votre participation. Et si vous recommenciez pour nous donner 5 réponses ? </p>
+<p>Remerciement de la part de toute l'équipe.</p>
+<br/>
diff --git a/projects/Cool-in/todo.tmpl b/projects/Cool-in/todo.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..8a1d4b6d6f390116a3982439e701aa41cd68e5d1
--- /dev/null
+++ b/projects/Cool-in/todo.tmpl
@@ -0,0 +1,7 @@
+<p class="card-text">
+	The todos that you are wrote:
+	WTODO
+</p>
+
+<br/>
+<p> Vous êtes à l'étape <strong>3/5</strong> <p>
\ No newline at end of file
diff --git a/projects/Headwork/Classify.html b/projects/Headwork/Classify.html
new file mode 100644
index 0000000000000000000000000000000000000000..312b398b00836e9fb58490849377c41ecc3f8084
--- /dev/null
+++ b/projects/Headwork/Classify.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="classifyForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSewzK7rVoomeWrNcMEeCE-P94h3yCHGsNVw9BJMkQr8NOtskQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
\ No newline at end of file
diff --git a/projects/Headwork/ClassifyForm.html b/projects/Headwork/ClassifyForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..aec69c7264db4ddc18577b0ee65f5094529154bf
--- /dev/null
+++ b/projects/Headwork/ClassifyForm.html
@@ -0,0 +1,144 @@
+<center>
+<h2>Formulaire</h2>
+<form name="ClassifyForm">
+ 
+   <fieldset >
+       <legend>Say if the following todos are professional or personal :</legend>
+        <table>
+            <tr>
+                <th></th>
+                <th>
+                    Professional            
+                </th>
+                <th>
+                    Personal
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    First Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category1" id="1" value="professional"/>
+                    <label for="1"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category1" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Second Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category2" id="1" value="professional"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category2" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Third Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category3" id="1" value="professional"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category3" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+        </table>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let category1 = document.querySelectorAll("input[name = 'category1']");
+        for(i=0; i<category1.length; i++){
+            if(category1[i].checked){
+                Classement1 = category1[i].value;
+            }
+        }
+        let category2 = document.querySelectorAll("input[name = 'category2']");
+        for(i=0; i<category2.length; i++){
+            if(category2[i].checked){
+                Classement2 = category2[i].value;
+            }
+        }
+        let category3 = document.querySelectorAll("input[name = 'category3']");
+        for(i=0; i<category3.length; i++){
+            if(category3[i].checked){
+                Classement3 = category3[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("Classement1", Classement1);
+        fd.append("Classement2", Classement2);
+        fd.append("Classement3", Classement3);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/Decompose.html b/projects/Headwork/Decompose.html
new file mode 100644
index 0000000000000000000000000000000000000000..10012f009503e72fb318976938220f94c76f7fe0
--- /dev/null
+++ b/projects/Headwork/Decompose.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="decomposeForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfK_fKmZ6SppX1cDbjhYYbm1Lb7yLknLY0_s4BZ8Pj729GN7Q/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/Headwork/Note.html b/projects/Headwork/Note.html
new file mode 100644
index 0000000000000000000000000000000000000000..b531c11eb30bda13c7cd4eb5bf2841b5392a610e
--- /dev/null
+++ b/projects/Headwork/Note.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="noteForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc753zz7elSuXskP27jbwHHNs9SQ9V2aS1VUwTlaGduwa2TMQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/Headwork/Notek.html b/projects/Headwork/Notek.html
new file mode 100644
index 0000000000000000000000000000000000000000..e6d38d269089baf4d648843544aa66e31edd5c0f
--- /dev/null
+++ b/projects/Headwork/Notek.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="NotekForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfADyOaqYuN65ERzUEapA1ejKJRO20S82qI9SBMVZNl-a-gqA/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/Headwork/Order.html b/projects/Headwork/Order.html
new file mode 100644
index 0000000000000000000000000000000000000000..21c6ea0c421259eefedeff0b615cea60de1fabc0
--- /dev/null
+++ b/projects/Headwork/Order.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="orderForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeTm76jxf9y1ZShrKUUGzXXJu2D05zHwBUcReuJuEuv5W4t3w/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/Headwork/RecordSound.html b/projects/Headwork/RecordSound.html
new file mode 100644
index 0000000000000000000000000000000000000000..838e53f91abf56bb9656da80b481b71394719ad6
--- /dev/null
+++ b/projects/Headwork/RecordSound.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Enregistrement audio</title>
+</head>
+<body>
+    <h2>Enregistrez-vous en lisant la phrase suivante :</h2>
+    <p> Je dois aller acheter du pain !</p>
+    <button id="startRecordingButton">Enregistrez</button>
+    <button id="stopRecordingButton">Arrêtez</button>
+    <button id="playButton">Rejouer l'enregistrement</button>
+    <button id="downloadButton" disabled>Download</button>
+
+    <script>
+        var startRecordingButton = document.getElementById("startRecordingButton");
+        var stopRecordingButton = document.getElementById("stopRecordingButton");
+        var playButton = document.getElementById("playButton");
+        var downloadButton = document.getElementById("downloadButton");
+
+
+        var leftchannel = [];
+        var rightchannel = [];
+        var recorder = null;
+        var recordingLength = 0;
+        var volume = null;
+        var mediaStream = null;
+        var sampleRate = 44100;
+        var context = null;
+        var blob = null;
+
+        startRecordingButton.addEventListener("click", function () {
+            // Initialize recorder
+            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+            navigator.getUserMedia(
+            {
+                audio: true
+            },
+            function (e) {
+                console.log("user consent");
+
+                // creates the audio context
+                window.AudioContext = window.AudioContext || window.webkitAudioContext;
+                context = new AudioContext();
+
+                // creates an audio node from the microphone incoming stream
+                mediaStream = context.createMediaStreamSource(e);
+
+                // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor
+                // bufferSize: the onaudioprocess event is called when the buffer is full
+                var bufferSize = 2048;
+                var numberOfInputChannels = 2;
+                var numberOfOutputChannels = 2;
+                if (context.createScriptProcessor) {
+                    recorder = context.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+                } else {
+                    recorder = context.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+                }
+
+                recorder.onaudioprocess = function (e) {
+                    leftchannel.push(new Float32Array(e.inputBuffer.getChannelData(0)));
+                    rightchannel.push(new Float32Array(e.inputBuffer.getChannelData(1)));
+                    recordingLength += bufferSize;
+                }
+
+                // we connect the recorder
+                mediaStream.connect(recorder);
+                recorder.connect(context.destination);
+            },
+                        function (e) {
+                            console.error(e);
+                        });
+            console.log(blob);
+        });
+
+        stopRecordingButton.addEventListener("click", function () {
+
+            // stop recording
+            recorder.disconnect(context.destination);
+            mediaStream.disconnect(recorder);
+
+            // we flat the left and right channels down
+            // Float32Array[] => Float32Array
+            var leftBuffer = flattenArray(leftchannel, recordingLength);
+            var rightBuffer = flattenArray(rightchannel, recordingLength);
+            // we interleave both channels together
+            // [left[0],right[0],left[1],right[1],...]
+            var interleaved = interleave(leftBuffer, rightBuffer);
+
+            // we create our wav file
+            var buffer = new ArrayBuffer(44 + interleaved.length * 2);
+            var view = new DataView(buffer);
+
+            // RIFF chunk descriptor
+            writeUTFBytes(view, 0, 'RIFF');
+            view.setUint32(4, 44 + interleaved.length * 2, true);
+            writeUTFBytes(view, 8, 'WAVE');
+            // FMT sub-chunk
+            writeUTFBytes(view, 12, 'fmt ');
+            view.setUint32(16, 16, true); // chunkSize
+            view.setUint16(20, 1, true); // wFormatTag
+            view.setUint16(22, 2, true); // wChannels: stereo (2 channels)
+            view.setUint32(24, sampleRate, true); // dwSamplesPerSec
+            view.setUint32(28, sampleRate * 4, true); // dwAvgBytesPerSec
+            view.setUint16(32, 4, true); // wBlockAlign
+            view.setUint16(34, 16, true); // wBitsPerSample
+            // data sub-chunk
+            writeUTFBytes(view, 36, 'data');
+            view.setUint32(40, interleaved.length * 2, true);
+
+            // write the PCM samples
+            var index = 44;
+            var volume = 1;
+            for (var i = 0; i < interleaved.length; i++) {
+                view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
+                index += 2;
+            }
+
+            // our final blob
+            blob = new Blob([view], { type: 'audio/wav' });
+            console.log(blob);
+        });
+
+        playButton.addEventListener("click", function () {
+            if (blob == null) {
+                return;
+            }
+
+            var url = window.URL.createObjectURL(blob);
+            var audio = new Audio(url);
+            audio.play();
+            console.log(blob);
+        });
+
+        downloadButton.addEventListener("click", function () {
+            if (blob == null) {
+                return;
+            }
+            var url = URL.createObjectURL(blob);
+            console.log(url);
+            var a = document.createElement("a");
+            document.body.appendChild(a);
+            a.style = "display: none";
+            a.href = url;
+            a.download = "test.wav";
+            a.click();
+            window.URL.revokeObjectURL(url);
+            SaveBlob();
+            
+        });
+
+        /*async function SaveBlob() {
+            let formData = new FormData();
+            formData.append("blob", blob);
+            
+            const ctrl = new AbortController()    // timeout
+            setTimeout(() => ctrl.abort(), 5000);
+            
+            try {
+               let r = await fetch('Upload', 
+                 {method: "POST", body: formData, signal: ctrl.signal}); 
+               console.log('HTTP response code:',r.status); 
+            } 
+            catch(e) {
+               console.log('ça n'a pas fonctionner...:', e);
+            }
+        }*/
+
+        function flattenArray(channelBuffer, recordingLength) {
+            var result = new Float32Array(recordingLength);
+            var offset = 0;
+            for (var i = 0; i < channelBuffer.length; i++) {
+                var buffer = channelBuffer[i];
+                result.set(buffer, offset);
+                offset += buffer.length;
+            }
+            return result;
+        }
+
+        function interleave(leftChannel, rightChannel) {
+            var length = leftChannel.length + rightChannel.length;
+            var result = new Float32Array(length);
+
+            var inputIndex = 0;
+
+            for (var index = 0; index < length;) {
+                result[index++] = leftChannel[inputIndex];
+                result[index++] = rightChannel[inputIndex];
+                inputIndex++;
+            }
+            return result;
+        }
+
+        function writeUTFBytes(view, offset, string) {
+            for (var i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        }
+
+    </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Headwork/SoundForm.html b/projects/Headwork/SoundForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..5e56f4ad6133035510b542d782451de3b0af4121
--- /dev/null
+++ b/projects/Headwork/SoundForm.html
@@ -0,0 +1,43 @@
+<center>
+<h2>Formulaire avec lecture du son par la balise audio</h2>
+<form name="noteForm">
+   <fieldset >
+       <legend>Quel son entendez-vous ?</legend>
+            <audio controls>
+                <source src="https://lasonotheque.org/UPLOAD/mp3/1891.mp3?v=d" type="audio/mp3">
+                    <!-- format supported : wav, mp3 and ogg -->
+                    Your browser does not support the audio tag.
+            </audio>
+            <br>
+           <input type="radio" name="sound" id="chien" value="chien"/>
+           <label for="chien">chien</label>
+           <input type="radio" name="sound" id="chat" value="chat"/>
+           <label for="chat">chat</label>
+           <input type="radio" name="sound" id="oiseau" value="oiseau"/>
+           <label for="oiseau">oiseau</label>
+           <input type="radio" name="sound" id="autre" value="autre"/>
+           <label for="autre">aucun de ceux proposés</label>
+   </fieldset>
+</form>
+<button id="submit">Submit</button>
+</center>
+<h2>Récupération des données du formulaire</h2>
+<div id="json">
+    <span></span>
+</div>
+<script type="text/javascript">
+    let btnSubmit = document.querySelector("#submit");
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+        let fd = new FormData();
+        let sound = document.querySelectorAll("input[name = 'sound']");
+        for(i=0; i<sound.length; i++){
+            if(sound[i].checked){
+                soundHear = sound[i].value;
+            }
+        }
+        fd.append("soundHear", soundHear);
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#json span").textContent = JSONString;
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/TodosForm.html b/projects/Headwork/TodosForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..01c564b065050f53477e1325730a052b4041a27f
--- /dev/null
+++ b/projects/Headwork/TodosForm.html
@@ -0,0 +1,59 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Write your 10 todos you find the most important in your list (one per line) :</legend>
+       <textarea name="commentaire" id="commentaire" cols="30" rows="10"></textarea>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+    escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on rempli notre FormData
+        fd.append("Commentaire", document.querySelector("#commentaire").value);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        let EscapedJSONString = escape(JSONString);
+        console.log(EscapedJSONString);
+        document.querySelector("#json span").textContent = JSON.stringify(Array.from(fd));;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/TreeForm.html b/projects/Headwork/TreeForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..80df8dbb025c952b3bfef6011449dbfc6feee5cc
--- /dev/null
+++ b/projects/Headwork/TreeForm.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+  <style type="text/css">
+      #backend ul{
+        list-style: none;
+    }
+
+      ul li ul {
+        border-left: 1px solid black;
+      }
+
+      ul li {
+        position: relative;
+      }
+
+      ul ul li:before{
+        content: '';
+        position: absolute;
+        top: 13px;
+        left: -40px;
+        background: black;
+        width: 40px;
+        height: 1px;
+      }
+
+      .closeIT{
+        background: red;
+        color: white;
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+
+      input{
+        margin: 5px;
+      }
+  </style>
+</head>
+<body style="padding: 6px;">
+    <h2>Décomposer ce todo en plusieurs tâches distinctes </h2>
+
+<button id="createParent">Ajouter une tâche</button>
+<ul id="backend"></ul>
+
+
+<button id="submit">Submit</button>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+    let createparent = document.getElementById('createParent');
+    let backend = document.getElementById('backend');
+
+    let cptTask = 0; //compteur pour differencier les inputs
+    let input = new Array(); //tableau qui va contenir tous les inputs
+    let btnAddSubTask = new Array(); //tableau qui va contenir tous les boutons pour ajouter des enfants
+
+    createparent.addEventListener("click", function(){
+        cptTask +=1;
+        let content = $(`<li>
+        <input type="text" class="input`+cptTask+`" placeholder="Nom de la tâche">
+        <button class="createChild" id="id`+cptTask+`">Ajouter une sous-tâche</button>
+        <span class="closeIT">X</span>
+    </li>`);
+        content.addClass(cptTask);
+        content.appendTo(backend);
+        
+        btnAddSubTask.push(document.getElementById('id'+cptTask));
+        btnAddSubTask[cptTask-1].disabled = true;
+        input.push(document.querySelector('.input'+cptTask));
+
+        for(var i=0; i<cptTask; i++){
+            //Pour tous les inputs, on va verifier chaque changement de texte pour activer ou desactiver le bouton
+            input[i].addEventListener("change", function() {
+                if (document.querySelector('.input'+i).value === "") {
+                    document.getElementById('id'+i).disabled = true; 
+                } else {
+                    document.getElementById('id'+i).disabled = false;
+                }
+            });
+        }
+        
+    });
+
+    backend.addEventListener('click',function(e){
+        if(e.target.classList == 'closeIT'){
+            closeBTN = e.target;
+            li = closeBTN.parentElement;
+            /*pour supprimer ul si c'est une sous tache*/
+            let parent = li.parentElement;
+            if(li.parentElement.nodeName == 'UL' && parent.parentElement.nodeName == 'LI'){
+                li = parent;
+            }
+            li.remove();
+        }
+
+        if(e.target.classList == 'createChild'){
+            createChildBTN = e.target;
+            li = createChildBTN.parentElement;
+            let content = $('<ul><li><input type="text" placeholder="Nom de la sous-tâche"><span class="closeIT">X</span></li></ul>');
+            content.appendTo(li);
+        }
+    })
+
+    let btnSubmit = document.getElementById("submit");
+
+    btnSubmit.addEventListener("click", () => {
+        //on crée un tableau pour la structure JSON
+        let fd = new Array();
+        let cptOrderTask = 0;
+        let cptOrderSubtask = 0;
+        let parent = "";
+        //on rempli notre tableau
+        for(var i=0, li; li=backend.childNodes[i]; i++) {
+           if(li.tagName=='LI'){
+              // traitement des li (taches)
+              for(var j=0, ul; ul=li.childNodes[j]; j++){
+                if(ul.tagName=='INPUT'){
+                    //on recupere ce qui est ecrit dans l'input de chaque tache
+                    tache = ul.value;
+                    if(tache != ""){
+                        console.log("parent de la tache", ul.parentElement)
+                        parent = "task"+i;
+                        cptOrderTask += 1;
+                        cptOrderSubtask = 0;
+                        fd.push([parent, tache, null, cptOrderTask]);
+                    }
+                }
+                else if(ul.tagName=='UL'){
+                    li2 = ul.childNodes[0];
+                    if(tache != "" && li2.childNodes[0].value != ""){
+                        cptOrderSubtask += 1;
+                        fd.push(["subtask"+i +j, li2.childNodes[0].value, parent, cptOrderSubtask]);
+                    }
+                }
+              }
+            }
+        }
+
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#json span").textContent = JSONString;
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/Headwork/enumerate.html b/projects/Headwork/enumerate.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f39714b573a2a5bd91954812d7d886a059b931b
--- /dev/null
+++ b/projects/Headwork/enumerate.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="todosform"> 
+          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeLOPGQDuhLKOXXr_Jexd3ebBHJfdfNMsRtJsUO-wuqgEIHLw/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
\ No newline at end of file
diff --git a/projects/Headwork/headworkGUI.sca b/projects/Headwork/headworkGUI.sca
index c6cb120b8b832040df90aeb6689a4b6cbbdff89f..13ca91fd3ab81ce62cd51f25f4103387f413d676 100644
--- a/projects/Headwork/headworkGUI.sca
+++ b/projects/Headwork/headworkGUI.sca
@@ -2,7 +2,7 @@
 	"doc":"A simple workflow for GUI demo",
 	"author": "David Gross-Amblard, Adrien Wacquet, IRISA/UR1",
 	"1": {
-		"2": {
+		"8": {
 			"guard": "none",
 			"actions": [
 				"prepare task 1 as basic",
@@ -104,7 +104,7 @@
 		}
 	},
 	"7": {
-		"9": {
+		"8": {
 			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=6",
 			"actions": [
 				"delete from Task where artifact=CURRENT_ARTIFACT",
@@ -123,10 +123,38 @@
 			]
 		}
 	},
+	"8": {
+		"9": {
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=1",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+                "select @TEMPLATE:=body from Template where id='headwork-json'",
+				"select @TITLE:='Testing JSON answers'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"select @TASKID:=8",
+				"select @DESCRIPTION:=@TITLE",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1,arg2) values (@TASKID,CURRENT_ARTIFACT,@TITLE,@DESCRIPTION,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST,@ANS)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (8,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
 	"9": {
 		"10": {
-			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=7",
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=8",
 			"actions": [
+			    "-- fetch the JSON answer as string",
+                "select @VAL:=value from Answer where idtask=8 and user=SESSION_USER and artifact=CURRENT_ARTIFACT",
+			    "-- delete quotes in the JSON string",
+                "select @VAL2:=replace(@VAL,'''','')",
+			    "-- convert into JSON data",
+                "select @VAL3:=CAST(@VAL2 as JSON)",
+			    "-- extract the first JSON item",
+                "select @VAL4:=JSON_EXTRACT(@VAL3,'$[0]')",
+			    "-- insert the result into the answer table as answer 10",
+                "insert into Answer(idtask,user,artifact,value) values (10,SESSION_USER,CURRENT_ARTIFACT,@VAL4)",
 				"delete from Task where artifact=CURRENT_ARTIFACT",
 				"select @TEMPLATE:='Your Headwork Basics skill is skyrocketing!'",
         		"select @TITLE:='Congratulations!'",
diff --git a/projects/Headwork/init-workflow.sql b/projects/Headwork/init-workflow.sql
index 0d7f6af21f2dc074559b952b7b0b5b0d8dfc8584..6c6c2770bb62f1cefba362b796338af59c96039c 100644
--- a/projects/Headwork/init-workflow.sql
+++ b/projects/Headwork/init-workflow.sql
@@ -4,18 +4,20 @@ DELETE from ArtifactClass where project = 'Headwork';
 
 DROP TABLE IF EXISTS AnswerButton;
 CREATE TABLE AnswerButton(id int,text varchar(100),class varchar(100));
-INSERT INTO AnswerButton values (1,'Soso','danger');
-INSERT INTO AnswerButton values (2,'Why not','warning');
-INSERT INTO AnswerButton values (3,'Awsome','success');
+INSERT INTO AnswerButton values (1,'Mauvaise','danger');
+INSERT INTO AnswerButton values (2,'À revoir','warning');
+INSERT INTO AnswerButton values (3,'Parfaite','success');
 
 
 insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6000,'Headwork basics','Headwork/headwork.sca', 'Artifact', 'Headwork',true);
-create table Headwork(id int primary key);
+--create table Headwork(id int primary key);
 
 insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6001,'Task interface capabilities','Headwork/headworkGUI.sca', null, 'Headwork',true);
 
--- insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6002,'Voting','Headwork/headworkVoting.sca', null, 'Headwork',true);
+--insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6002,'Voting','Headwork/headworkVoting.sca', null, 'Headwork',true);
 
 insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6003,'I want to believe!: Uncertain answers','Headwork/belief.sca', null, 'Headwork',true);
 
+-- insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6002,'Voting','Headwork/headworkVoting.sca', null, 'Headwork',true);
 
+--insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (6003,'I want to believe!: Uncertain answers','Headwork/belief.sca', null, 'Headwork',true);
\ No newline at end of file
diff --git a/projects/Headwork/json.tmpl b/projects/Headwork/json.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..be3d0a535579e396e4b73c1318e9e8f7c09eb085
--- /dev/null
+++ b/projects/Headwork/json.tmpl
@@ -0,0 +1,9 @@
+<h1>JSON biding</h1>
+
+<p>This task sends a JSON to Headwork. By this way, any javascript program can send its answer.
+</p>
+
+<form>
+    <input type="text"/>
+    <input type="hidden" name="answer" value="['3','5']"/>
+</form>
diff --git a/projects/Headwork/noteForm.html b/projects/Headwork/noteForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..e38e7063fe70e736adf6c7b7888943571fa5604b
--- /dev/null
+++ b/projects/Headwork/noteForm.html
@@ -0,0 +1,90 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Note the stress level of this todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let stress = document.querySelectorAll("input[name = 'stress']");
+        for(i=0; i<stress.length; i++){
+            if(stress[i].checked){
+                NiveauStress = stress[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("NiveauStress", NiveauStress);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/notekForm.html b/projects/Headwork/notekForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..e0af084c1f609fceb60682dd9a731dab559b784e
--- /dev/null
+++ b/projects/Headwork/notekForm.html
@@ -0,0 +1,154 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Note the stress level of the first todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress1" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress1" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress1" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress1" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress1" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress1" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress1" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress1" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress1" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress1" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset><br>
+   <fieldset >
+   <legend>Note the stress level of the second todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress2" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress2" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress2" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress2" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress2" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress2" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress2" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress2" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress2" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress2" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset><br>
+   <fieldset >
+   <legend>Note the stress level of the third todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress3" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress3" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress3" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress3" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress3" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress3" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress3" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress3" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress3" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress3" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let stress1 = document.querySelectorAll("input[name = 'stress1']");
+        for(i=0; i<stress1.length; i++){
+            if(stress1[i].checked){
+                NiveauStress1 = stress1[i].value;
+            }
+        }
+        let stress2 = document.querySelectorAll("input[name = 'stress2']");
+        for(i=0; i<stress2.length; i++){
+            if(stress2[i].checked){
+                NiveauStress2 = stress2[i].value;
+            }
+        }
+        let stress3 = document.querySelectorAll("input[name = 'stress3']");
+        for(i=0; i<stress3.length; i++){
+            if(stress3[i].checked){
+                NiveauStress3 = stress3[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("NiveauStress1", NiveauStress1);
+        fd.append("NiveauStress2", NiveauStress2);
+        fd.append("NiveauStress3", NiveauStress3);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/sound-form.tmpl b/projects/Headwork/sound-form.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..5e56f4ad6133035510b542d782451de3b0af4121
--- /dev/null
+++ b/projects/Headwork/sound-form.tmpl
@@ -0,0 +1,43 @@
+<center>
+<h2>Formulaire avec lecture du son par la balise audio</h2>
+<form name="noteForm">
+   <fieldset >
+       <legend>Quel son entendez-vous ?</legend>
+            <audio controls>
+                <source src="https://lasonotheque.org/UPLOAD/mp3/1891.mp3?v=d" type="audio/mp3">
+                    <!-- format supported : wav, mp3 and ogg -->
+                    Your browser does not support the audio tag.
+            </audio>
+            <br>
+           <input type="radio" name="sound" id="chien" value="chien"/>
+           <label for="chien">chien</label>
+           <input type="radio" name="sound" id="chat" value="chat"/>
+           <label for="chat">chat</label>
+           <input type="radio" name="sound" id="oiseau" value="oiseau"/>
+           <label for="oiseau">oiseau</label>
+           <input type="radio" name="sound" id="autre" value="autre"/>
+           <label for="autre">aucun de ceux proposés</label>
+   </fieldset>
+</form>
+<button id="submit">Submit</button>
+</center>
+<h2>Récupération des données du formulaire</h2>
+<div id="json">
+    <span></span>
+</div>
+<script type="text/javascript">
+    let btnSubmit = document.querySelector("#submit");
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+        let fd = new FormData();
+        let sound = document.querySelectorAll("input[name = 'sound']");
+        for(i=0; i<sound.length; i++){
+            if(sound[i].checked){
+                soundHear = sound[i].value;
+            }
+        }
+        fd.append("soundHear", soundHear);
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#json span").textContent = JSONString;
+    })
+</script>
\ No newline at end of file
diff --git a/projects/Headwork/topk.html b/projects/Headwork/topk.html
new file mode 100644
index 0000000000000000000000000000000000000000..e037b1dc46048c7eedac09ba4ae665bca6ec168c
--- /dev/null
+++ b/projects/Headwork/topk.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="topkForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdbKDGcVNy8bKfwgsHHepEUOtc705-RGOzvy5ldmC0gQinMMA/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/Headwork/topkForm.html b/projects/Headwork/topkForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..f88c244dbaf48bab8117126af3bfbe310e0bdd3e
--- /dev/null
+++ b/projects/Headwork/topkForm.html
@@ -0,0 +1,291 @@
+<center>
+<h2>Formulaire</h2>
+<form name="ClassifyForm">
+ 
+   <fieldset >
+       <legend>Say if the following todos are professional or personal :</legend>
+        <table>
+            <tr>
+                <th></th>
+                <th>
+                    Not a priority at all            
+                </th>
+                <th>
+                    Not a priority
+                </th>
+                <th>
+                    Neutral            
+                </th>
+                <th>
+                    Priority
+                </th>
+                <th>
+                    High Priority            
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    First Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    </center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Second Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Third Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="2" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Fourth Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Fifth Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+        </table>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let priority1 = document.querySelectorAll("input[name = 'priority1']");
+        for(i=0; i<priority1.length; i++){
+            if(priority1[i].checked){
+                Classement1 = priority1[i].value;
+            }
+        }
+        let priority2 = document.querySelectorAll("input[name = 'priority2']");
+        for(i=0; i<priority2.length; i++){
+            if(priority2[i].checked){
+                Classement2 = priority2[i].value;
+            }
+        }
+        let priority3 = document.querySelectorAll("input[name = 'priority3']");
+        for(i=0; i<priority3.length; i++){
+            if(priority3[i].checked){
+                Classement3 = priority3[i].value;
+            }
+        }
+        let priority4 = document.querySelectorAll("input[name = 'priority4']");
+        for(i=0; i<priority4.length; i++){
+            if(priority4[i].checked){
+                Classement4 = priority4[i].value;
+            }
+        }
+        let priority5 = document.querySelectorAll("input[name = 'priority5']");
+        for(i=0; i<priority5.length; i++){
+            if(priority5[i].checked){
+                Classement5 = priority5[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("Classement1", Classement1);
+        fd.append("Classement2", Classement2);
+        fd.append("Classement3", Classement3);
+        fd.append("Classement4", Classement4);
+        fd.append("Classement5", Classement5);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/M2-2122/background-spipoll.css b/projects/M2-2122/background-spipoll.css
new file mode 100644
index 0000000000000000000000000000000000000000..47252d46bb8a7049ccfdd47a992505146172b368
--- /dev/null
+++ b/projects/M2-2122/background-spipoll.css
@@ -0,0 +1 @@
+background: no-repeat bottom right/20% url('projects/headwork/background.jpg'); background-color: rgb(197,205,66);
\ No newline at end of file
diff --git a/projects/M2-2122/background-spipoll.jpg b/projects/M2-2122/background-spipoll.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cda18f09b7e7e47c02342fd25d9aa05471353b0d
Binary files /dev/null and b/projects/M2-2122/background-spipoll.jpg differ
diff --git a/projects/M2-2122/background.css b/projects/M2-2122/background.css
new file mode 100644
index 0000000000000000000000000000000000000000..f2f2e598a5db0c15f7a25c17729dcec715e0faf1
--- /dev/null
+++ b/projects/M2-2122/background.css
@@ -0,0 +1 @@
+background: no-repeat bottom right/20% url('projects/Headwork/bulb_textUnder_bubbles.png');
diff --git a/projects/M2-2122/bulb_textUnder_bubbles.png b/projects/M2-2122/bulb_textUnder_bubbles.png
new file mode 100755
index 0000000000000000000000000000000000000000..9a5cf4887f6c98d19182a1e307332cf4bca29f16
Binary files /dev/null and b/projects/M2-2122/bulb_textUnder_bubbles.png differ
diff --git a/projects/M2-2122/init-skills.sql b/projects/M2-2122/init-skills.sql
new file mode 100644
index 0000000000000000000000000000000000000000..1e634231744198f8d61388ba1eac0587ee049c34
--- /dev/null
+++ b/projects/M2-2122/init-skills.sql
@@ -0,0 +1,10 @@
+-- skillTree schema
+-- (id, parent_skill, skill)
+insert into SkillTree values
+(3000, 1, 'M2-2122'),
+(3001, 3000, 'Todo List');
+-- (3005, 1003, 'Headwork Principles'),
+-- (3006, 1003, 'Uncertain Answers');
+
+
+
diff --git a/projects/M2-2122/init-workflow.sql b/projects/M2-2122/init-workflow.sql
new file mode 100644
index 0000000000000000000000000000000000000000..2a0c80fb18c5347730921296b1cea56196f53625
--- /dev/null
+++ b/projects/M2-2122/init-workflow.sql
@@ -0,0 +1,16 @@
+DELETE from Artifact where classid in (select id from ArtifactClass where project = 'M2-2122');
+DELETE from ArtifactClass where project = 'M2-2122';
+-- To do task automaton
+insert into ArtifactClass(id,description, definition, tablename, project, autostart)
+values(8000, 'Base de données de tâches personnelles', 'M2-2122/m2Todo.sca', 'Artifact', 'M2-2122', true);
+
+DROP TABLE IF EXISTS AnswerButton;
+CREATE TABLE AnswerButton(id int,text varchar(100),class varchar(100));
+INSERT INTO AnswerButton values (1,'Personnelle','danger');
+INSERT INTO AnswerButton values (2,'Profesionnelle','warning');
+INSERT INTO AnswerButton values (3,'Familiale','success');
+INSERT INTO AnswerButton values (4,'1','');
+INSERT INTO AnswerButton values (5,'2','');
+INSERT INTO AnswerButton values (6,'3','');
+INSERT INTO AnswerButton values (7,'4','');
+INSERT INTO AnswerButton values (8,'5','');
diff --git a/projects/M2-2122/m2Todo.sca b/projects/M2-2122/m2Todo.sca
new file mode 100644
index 0000000000000000000000000000000000000000..463b324c54c8adc72c4f20e273ee6cf2830962b0
--- /dev/null
+++ b/projects/M2-2122/m2Todo.sca
@@ -0,0 +1,103 @@
+{
+  "author" : "M2-2122 Group 3",
+  "doc" : "",
+  "1": {
+    "nodetip": "Introduction page",
+    "2": {
+      "guard": "none",
+      "actiontip": "Explanation of activity...",
+      "actions": [
+        "prepare task 1 as message",
+        "use 'M2-2122-todo-step1' as template",
+        "use 'Avant de commencer' as title",
+        "use 'Présentation' as description",
+        "forget profile for current artifact",
+        "offer task to anyone",
+        "skill 3001 is relevant for the task",
+        "install task"
+      ]
+    }
+  },
+  "2": {
+    "nodetip": "Writing of todos",
+    "3": {
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=1",
+      "actiontip": "Instantiation of first step",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "prepare task 2 as multi-line input",
+        "use 'M2-2122-todo-step2' as template",
+        "use 'Todos list' as title",
+        "use 'Saisie de tâches' as description",
+        "forget profile for current artifact",
+        "offer task to anyone",
+        "skill 3001 is relevant for the task",
+        "install task"
+      ]
+    }
+  },
+  "3": {
+    "nodetip": "Categorization of todos",
+    "4":{
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=2",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "use 'M2-2122-todo-step3' as template",
+        "select @DESC:='Catégorisation des tâches'",
+        "select @LIST:='select idtask as id,value as text from Answer where user=SESSION_USER and idtask=2 and artifact=CURRENT_ARTIFACT'",
+        "select @ANS:='select id as value, text,class,false as request_feedback from AnswerButton where id between 1 and 3'",
+        "select @TYPE:=5",
+        "insert into Task(id,artifact,title,description,body,type,arg1,arg2) values(3,CURRENT_ARTIFACT,'Your inputs',@DESC,@TEMPLATE,@TYPE,@LIST,@ANS)",
+        "delete from Profile where idartifact=CURRENT_ARTIFACT",
+        "insert into Profile values (3,CURRENT_ARTIFACT,1)"
+      ]
+    }
+  },
+  "4": {
+    "nodetip": "Stress level",
+    "5": {
+      "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=3",
+      "actions": [
+        "delete from Task where artifact=CURRENT_ARTIFACT",
+        "use 'M2-2122-todo-step4' as template",
+        "select @DESC:='Niveau de stress des tâches'",
+        "select @TITLE:='Niveau de stress des tâches'",
+        "select @LIST:='select idtask as id,value as text from Answer where user=SESSION_USER and idtask=2 and artifact=CURRENT_ARTIFACT'",
+        "select @ANS:='select id as value, text,class,false as request_feedback from AnswerButton where id between 4 and 8'",
+        "select @TYPE:=5",
+        "insert into Task(id,artifact,title,description,body,type,arg1,arg2) values(4,CURRENT_ARTIFACT,'Stress level',@DESC,@TEMPLATE,@TYPE,@LIST,@ANS)",
+        "delete from Profile where idartifact=CURRENT_ARTIFACT",
+        "insert into Profile values (4,CURRENT_ARTIFACT,1)"
+      ]
+    }
+  },
+  "5": {
+      "nodetip": "Conclusion page",
+      "6": {
+        "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=4",
+        "actiontip": "Termination",
+        "actions": [
+          "prepare task 5 as message",
+          "use 'M2-2122-todo-step5' as template",
+          "use 'Merci!' as title",
+          "use 'Merci!' as description",
+          "forget profile for current artifact",
+          "offer task to anyone",
+          "skill 3001 is relevant for the task",
+          "install task"
+        ]
+      }
+    },
+  "6": {
+      "nodetip": "Conclusion page",
+      "7": {
+        "guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=5",
+        "actiontip": "Termination",
+        "actions": [
+        		"delete from Task where artifact=CURRENT_ARTIFACT",
+        		"delete from Profile where idartifact=CURRENT_ARTIFACT"
+        ]
+        }
+        },
+  "7": {}
+}
\ No newline at end of file
diff --git a/projects/M2-2122/todo-step1.tmpl b/projects/M2-2122/todo-step1.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..544db0d16f73496f1677488066eb068513366843
--- /dev/null
+++ b/projects/M2-2122/todo-step1.tmpl
@@ -0,0 +1,14 @@
+<h2>Introduction</h2>
+<p class="card-text">
+    En participant à ce projet, vous contribuez à la constitution d'une base de tâches (TODO lists), annotées avec une estimation
+    de leur durée et de leur niveau de stress. Cette base servira à mieux comprendre les questions d'organisation personnelle, de charge mentale, et à améliorer les assistants personnels.
+</p>
+<h2>Données personnelles</h2>
+<p class="card-text">
+    Données personnelles : Avant de commencer, petite mise au point sur vos données personnelles. Nous tenons à vous informer qu'aucune de vos données personnelles n'est enregistrée.
+    La base de tâche ainsi obtenue sera publique à des fins de recherche.
+</p>
+<br/>
+<p>
+Etape <strong>1/5</strong>
+</p>
\ No newline at end of file
diff --git a/projects/M2-2122/todo-step2.tmpl b/projects/M2-2122/todo-step2.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..dfb9fd34f344e86359aee3ae7f6371bb832e3d97
--- /dev/null
+++ b/projects/M2-2122/todo-step2.tmpl
@@ -0,0 +1,16 @@
+<h2></h2>
+ <p class="card-text">
+ Entrez au moins 5 tâches qui pourraient se trouver sur vos listes personnelles (TODO list).
+ <b>Merci de sauter une ligne à chaque tâche</b>.
+ Par exemple :
+ <ul>
+    <li>acheter du pain</li>
+    <li>organiser le voyage à New York</li>
+    <li>faire le projet de bases de données</li>
+    <li>faire du sport</li>
+    <li>nourrir le chat</li>
+ </ul>
+</p>
+<br/>
+<p>Etape <strong>2/5</strong></p>
+
diff --git a/projects/M2-2122/todo-step3.tmpl b/projects/M2-2122/todo-step3.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..241e1689f6bb39693f1a2b9e1ce295f68ee6cda0
--- /dev/null
+++ b/projects/M2-2122/todo-step3.tmpl
@@ -0,0 +1,19 @@
+<h2></h2>
+ <p class="card-text">
+ Catégorisez vos tâches selon les trois sphères suivantes : Personnelle (juste pour soi), Professionnelle
+ (pour le travail), Familiale (pour la famille ou les amis).
+  </p>
+ <p class="card-text">
+  Par exemple :
+ <center>
+ <table>
+    <tr><td>acheter du pain</td><td>Personnelle</td></tr>
+    <td>organiser le voyage à New York</td><td>Famille</td></tr>
+    <td>faire le projet de bases de données</td><td>Professionnelle</td></tr>
+    <td>faire du sport</td><td>Personnelle</td></tr>
+    <td>nourrir le chat</td><td>Famille</td></tr>
+ </table>
+<center>
+</p>
+<br/>
+<p>Etape <strong>3/5</strong></p>
diff --git a/projects/M2-2122/todo-step4.tmpl b/projects/M2-2122/todo-step4.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..e96fb3619b82f4e693ca62b839067fb335dcbff8
--- /dev/null
+++ b/projects/M2-2122/todo-step4.tmpl
@@ -0,0 +1,6 @@
+<h2></h2>
+<p class="card-text">
+</p>
+    Pour chacune de vos tâches, indiquez son niveau de stress (1 - aucun stress, 5 très stressant).
+<br/>
+<p>Etape <strong>4/5</strong></p>
diff --git a/projects/M2-2122/todo-step5.tmpl b/projects/M2-2122/todo-step5.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..4de30c9de96e78202f0bf23ff636a958762a813d
--- /dev/null
+++ b/projects/M2-2122/todo-step5.tmpl
@@ -0,0 +1,7 @@
+<h2></h2>
+<p class="card-text">
+    Merci beaucoup pour votre participation. Si vous le souhaitez, vous pouvez refaire un tour !
+</p>
+<p>Remerciement de la part de toute l'équipe.</p>
+<br/>
+<p>Etape <strong>5/5</strong></p>
diff --git a/projects/M2-2122/todo.tmpl b/projects/M2-2122/todo.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..8a1d4b6d6f390116a3982439e701aa41cd68e5d1
--- /dev/null
+++ b/projects/M2-2122/todo.tmpl
@@ -0,0 +1,7 @@
+<p class="card-text">
+	The todos that you are wrote:
+	WTODO
+</p>
+
+<br/>
+<p> Vous êtes à l'étape <strong>3/5</strong> <p>
\ No newline at end of file
diff --git a/projects/NewGUI/Classify.html b/projects/NewGUI/Classify.html
new file mode 100644
index 0000000000000000000000000000000000000000..312b398b00836e9fb58490849377c41ecc3f8084
--- /dev/null
+++ b/projects/NewGUI/Classify.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="classifyForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSewzK7rVoomeWrNcMEeCE-P94h3yCHGsNVw9BJMkQr8NOtskQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
\ No newline at end of file
diff --git a/projects/NewGUI/ClassifyForm.html b/projects/NewGUI/ClassifyForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..aec69c7264db4ddc18577b0ee65f5094529154bf
--- /dev/null
+++ b/projects/NewGUI/ClassifyForm.html
@@ -0,0 +1,144 @@
+<center>
+<h2>Formulaire</h2>
+<form name="ClassifyForm">
+ 
+   <fieldset >
+       <legend>Say if the following todos are professional or personal :</legend>
+        <table>
+            <tr>
+                <th></th>
+                <th>
+                    Professional            
+                </th>
+                <th>
+                    Personal
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    First Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category1" id="1" value="professional"/>
+                    <label for="1"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category1" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Second Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category2" id="1" value="professional"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category2" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Third Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category3" id="1" value="professional"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="category3" id="2" value="personal"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+            </tr>
+        </table>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let category1 = document.querySelectorAll("input[name = 'category1']");
+        for(i=0; i<category1.length; i++){
+            if(category1[i].checked){
+                Classement1 = category1[i].value;
+            }
+        }
+        let category2 = document.querySelectorAll("input[name = 'category2']");
+        for(i=0; i<category2.length; i++){
+            if(category2[i].checked){
+                Classement2 = category2[i].value;
+            }
+        }
+        let category3 = document.querySelectorAll("input[name = 'category3']");
+        for(i=0; i<category3.length; i++){
+            if(category3[i].checked){
+                Classement3 = category3[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("Classement1", Classement1);
+        fd.append("Classement2", Classement2);
+        fd.append("Classement3", Classement3);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/NewGUI/Decompose.html b/projects/NewGUI/Decompose.html
new file mode 100644
index 0000000000000000000000000000000000000000..10012f009503e72fb318976938220f94c76f7fe0
--- /dev/null
+++ b/projects/NewGUI/Decompose.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="decomposeForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfK_fKmZ6SppX1cDbjhYYbm1Lb7yLknLY0_s4BZ8Pj729GN7Q/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/NewGUI/Note.html b/projects/NewGUI/Note.html
new file mode 100644
index 0000000000000000000000000000000000000000..b531c11eb30bda13c7cd4eb5bf2841b5392a610e
--- /dev/null
+++ b/projects/NewGUI/Note.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="noteForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc753zz7elSuXskP27jbwHHNs9SQ9V2aS1VUwTlaGduwa2TMQ/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/NewGUI/Notek.html b/projects/NewGUI/Notek.html
new file mode 100644
index 0000000000000000000000000000000000000000..e6d38d269089baf4d648843544aa66e31edd5c0f
--- /dev/null
+++ b/projects/NewGUI/Notek.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="NotekForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfADyOaqYuN65ERzUEapA1ejKJRO20S82qI9SBMVZNl-a-gqA/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/NewGUI/Order.html b/projects/NewGUI/Order.html
new file mode 100644
index 0000000000000000000000000000000000000000..21c6ea0c421259eefedeff0b615cea60de1fabc0
--- /dev/null
+++ b/projects/NewGUI/Order.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="orderForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeTm76jxf9y1ZShrKUUGzXXJu2D05zHwBUcReuJuEuv5W4t3w/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/NewGUI/PolygonMap.tmpl b/projects/NewGUI/PolygonMap.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..99574c50ec5d8cec428b6fefd7b81bf0f46d5eef
--- /dev/null
+++ b/projects/NewGUI/PolygonMap.tmpl
@@ -0,0 +1,98 @@
+<head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin=""
+  />
+  <script
+    src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""
+  ></script>
+  <script
+    type="text/javascript"
+    src="https://code.jquery.com/jquery-3.3.1.min.js"
+  ></script>
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"
+  />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
+  <style type="text/css">
+    #map {
+      height: 600px;
+      width: 600px;
+    }
+  </style>
+</head>
+
+<body>
+  <h3>
+    Please draw the pond in front of ISTIC using the top-left tools (double-click to finish, ESC to cancel)
+  </h3>
+<center>
+    <div id="map">
+      <!-- Ici s'affichera la carte -->
+    </div>
+<br/>
+<button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+<input type="hidden" id="answer" name="answer" value=""/>
+</center>
+
+
+<script type="text/javascript">
+  // Coordonnées du campus de Beaulieu
+  var lat = 48.11517;
+  var lon = -1.637434;
+
+  // Création de la carte
+  var macarte = L.map("map").setView([lat, lon], 13);
+
+  // Le theme de la carte
+  var theme = "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png";
+  // Construction de la tuile
+  L.tileLayer(theme, {
+    minZoom: 1,
+    maxZoom: 20,
+  }).addTo(macarte);
+
+  // Inialisation de la variable pour stocker les polygones modifiables
+  window.editableLayers = new L.FeatureGroup();
+  macarte.addLayer(window.editableLayers);
+
+  var drawPluginOptions = {
+    position: "topright",
+    draw: {
+      polygon: {
+        allowIntersection: true,
+      },
+      polyline: true,
+      circle: false,
+      rectangle: false,
+      marker: false,
+    },
+  };
+
+  var drawControl = new L.Control.Draw(drawPluginOptions);
+  macarte.addControl(drawControl);
+  macarte.on('click', onMapClick);
+
+  window.editableLayers = new L.FeatureGroup();
+  //window.test=2;
+  macarte.addLayer(window.editableLayers);
+
+  macarte.on("draw:created", function (e) {
+    var type = e.layerType,
+      layer = e.layer;
+    window.editableLayers.addLayer(layer);
+  });
+
+  function onMapClick(e) {
+          var geojson = window.editableLayers.toGeoJSON();
+          json = JSON.stringify(geojson);
+          document.querySelector("#answer").value = json;
+          //alert(json);
+  }
+
+</script>
diff --git a/projects/NewGUI/RecordSound.tmpl b/projects/NewGUI/RecordSound.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..7650214d7fe39ff85c75701dce548581794820a8
--- /dev/null
+++ b/projects/NewGUI/RecordSound.tmpl
@@ -0,0 +1,205 @@
+<head>
+    <meta charset="utf-8" />
+</head>
+    <h2>Please read the following phrase out loud and record it:</h2>
+    <p>Simply defined, crowdsourcing represents the act of a company or institution taking a function once performed by employees and outsourcing it to an undefined (and generally large) network of people in the form of an open call.
+    </p>
+    <br/>
+    <button type="button" id="startRecordingButton">Record</button>
+    <button type="button" id="stopRecordingButton">Stop</button>
+    <button type="button" id="playButton">Play</button>
+    <button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+    <input type="hidden" id="answer" name="answer" value="[\"3\":\"4\"]"/>
+    <!-- <button type="button" id="downloadButton" disabled>Download</button> -->
+
+    <script>
+        var startRecordingButton = document.getElementById("startRecordingButton");
+        var stopRecordingButton = document.getElementById("stopRecordingButton");
+        var playButton = document.getElementById("playButton");
+        var downloadButton = document.getElementById("downloadButton");
+
+
+        var leftchannel = [];
+        var rightchannel = [];
+        var recorder = null;
+        var recordingLength = 0;
+        var volume = null;
+        var mediaStream = null;
+        var sampleRate = 44100;
+        var context = null;
+        var blob = null;
+
+        startRecordingButton.addEventListener("click", function () {
+            // Initialize recorder
+            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+            navigator.getUserMedia(
+            {
+                audio: true
+            },
+            function (e) {
+                console.log("user consent");
+
+                // creates the audio context
+                window.AudioContext = window.AudioContext || window.webkitAudioContext;
+                context = new AudioContext();
+
+                // creates an audio node from the microphone incoming stream
+                mediaStream = context.createMediaStreamSource(e);
+
+                // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor
+                // bufferSize: the onaudioprocess event is called when the buffer is full
+                var bufferSize = 2048;
+                var numberOfInputChannels = 2;
+                var numberOfOutputChannels = 2;
+                if (context.createScriptProcessor) {
+                    recorder = context.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+                } else {
+                    recorder = context.createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+                }
+
+                recorder.onaudioprocess = function (e) {
+                    leftchannel.push(new Float32Array(e.inputBuffer.getChannelData(0)));
+                    rightchannel.push(new Float32Array(e.inputBuffer.getChannelData(1)));
+                    recordingLength += bufferSize;
+                }
+
+                // we connect the recorder
+                mediaStream.connect(recorder);
+                recorder.connect(context.destination);
+            },
+                        function (e) {
+                            console.error(e);
+                        });
+            console.log(blob);
+        });
+
+        stopRecordingButton.addEventListener("click", function () {
+
+            // stop recording
+            recorder.disconnect(context.destination);
+            mediaStream.disconnect(recorder);
+
+            // we flat the left and right channels down
+            // Float32Array[] => Float32Array
+            var leftBuffer = flattenArray(leftchannel, recordingLength);
+            var rightBuffer = flattenArray(rightchannel, recordingLength);
+            // we interleave both channels together
+            // [left[0],right[0],left[1],right[1],...]
+            var interleaved = interleave(leftBuffer, rightBuffer);
+
+            // we create our wav file
+            var buffer = new ArrayBuffer(44 + interleaved.length * 2);
+            var view = new DataView(buffer);
+
+            // RIFF chunk descriptor
+            writeUTFBytes(view, 0, 'RIFF');
+            view.setUint32(4, 44 + interleaved.length * 2, true);
+            writeUTFBytes(view, 8, 'WAVE');
+            // FMT sub-chunk
+            writeUTFBytes(view, 12, 'fmt ');
+            view.setUint32(16, 16, true); // chunkSize
+            view.setUint16(20, 1, true); // wFormatTag
+            view.setUint16(22, 2, true); // wChannels: stereo (2 channels)
+            view.setUint32(24, sampleRate, true); // dwSamplesPerSec
+            view.setUint32(28, sampleRate * 4, true); // dwAvgBytesPerSec
+            view.setUint16(32, 4, true); // wBlockAlign
+            view.setUint16(34, 16, true); // wBitsPerSample
+            // data sub-chunk
+            writeUTFBytes(view, 36, 'data');
+            view.setUint32(40, interleaved.length * 2, true);
+
+            // write the PCM samples
+            var index = 44;
+            var volume = 1;
+            for (var i = 0; i < interleaved.length; i++) {
+                view.setInt16(index, interleaved[i] * (0x7FFF * volume), true);
+                index += 2;
+            }
+
+            // our final blob
+            blob = new Blob([view], { type: 'audio/wav' });
+            console.log(blob);
+            let JSONString = JSON.stringify(blob); // TODO Can not work this way
+            document.querySelector("#answer").value = "{'Blob':'012212...'}"; //JSONString;
+        });
+
+        playButton.addEventListener("click", function () {
+            if (blob == null) {
+                return;
+            }
+
+            var url = window.URL.createObjectURL(blob);
+            var audio = new Audio(url);
+            audio.play();
+            console.log(blob);
+        });
+
+        downloadButton.addEventListener("click", function () {
+            if (blob == null) {
+                return;
+            }
+            var url = URL.createObjectURL(blob);
+            console.log(url);
+            var a = document.createElement("a");
+            document.body.appendChild(a);
+            a.style = "display: none";
+            a.href = url;
+            a.download = "test.wav";
+            a.click();
+            window.URL.revokeObjectURL(url);
+            SaveBlob();
+            
+        });
+
+        /*async function SaveBlob() {
+            let formData = new FormData();
+            formData.append("blob", blob);
+            
+            const ctrl = new AbortController()    // timeout
+            setTimeout(() => ctrl.abort(), 5000);
+            
+            try {
+               let r = await fetch('Upload', 
+                 {method: "POST", body: formData, signal: ctrl.signal}); 
+               console.log('HTTP response code:',r.status); 
+            } 
+            catch(e) {
+               console.log('ça n'a pas fonctionné...:', e);
+            }
+        }*/
+
+        function flattenArray(channelBuffer, recordingLength) {
+            var result = new Float32Array(recordingLength);
+            var offset = 0;
+            for (var i = 0; i < channelBuffer.length; i++) {
+                var buffer = channelBuffer[i];
+                result.set(buffer, offset);
+                offset += buffer.length;
+            }
+            return result;
+        }
+
+        function interleave(leftChannel, rightChannel) {
+            var length = leftChannel.length + rightChannel.length;
+            var result = new Float32Array(length);
+
+            var inputIndex = 0;
+
+            for (var index = 0; index < length;) {
+                result[index++] = leftChannel[inputIndex];
+                result[index++] = rightChannel[inputIndex];
+                inputIndex++;
+            }
+            return result;
+        }
+
+        function writeUTFBytes(view, offset, string) {
+            for (var i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        }
+
+    </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/NewGUI/TodosForm.html b/projects/NewGUI/TodosForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..01c564b065050f53477e1325730a052b4041a27f
--- /dev/null
+++ b/projects/NewGUI/TodosForm.html
@@ -0,0 +1,59 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Write your 10 todos you find the most important in your list (one per line) :</legend>
+       <textarea name="commentaire" id="commentaire" cols="30" rows="10"></textarea>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+    escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on rempli notre FormData
+        fd.append("Commentaire", document.querySelector("#commentaire").value);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        let EscapedJSONString = escape(JSONString);
+        console.log(EscapedJSONString);
+        document.querySelector("#json span").textContent = JSON.stringify(Array.from(fd));;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/NewGUI/TreeForm.html b/projects/NewGUI/TreeForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..80df8dbb025c952b3bfef6011449dbfc6feee5cc
--- /dev/null
+++ b/projects/NewGUI/TreeForm.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Example</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+  <style type="text/css">
+      #backend ul{
+        list-style: none;
+    }
+
+      ul li ul {
+        border-left: 1px solid black;
+      }
+
+      ul li {
+        position: relative;
+      }
+
+      ul ul li:before{
+        content: '';
+        position: absolute;
+        top: 13px;
+        left: -40px;
+        background: black;
+        width: 40px;
+        height: 1px;
+      }
+
+      .closeIT{
+        background: red;
+        color: white;
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+
+      input{
+        margin: 5px;
+      }
+  </style>
+</head>
+<body style="padding: 6px;">
+    <h2>Décomposer ce todo en plusieurs tâches distinctes </h2>
+
+<button id="createParent">Ajouter une tâche</button>
+<ul id="backend"></ul>
+
+
+<button id="submit">Submit</button>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+    let createparent = document.getElementById('createParent');
+    let backend = document.getElementById('backend');
+
+    let cptTask = 0; //compteur pour differencier les inputs
+    let input = new Array(); //tableau qui va contenir tous les inputs
+    let btnAddSubTask = new Array(); //tableau qui va contenir tous les boutons pour ajouter des enfants
+
+    createparent.addEventListener("click", function(){
+        cptTask +=1;
+        let content = $(`<li>
+        <input type="text" class="input`+cptTask+`" placeholder="Nom de la tâche">
+        <button class="createChild" id="id`+cptTask+`">Ajouter une sous-tâche</button>
+        <span class="closeIT">X</span>
+    </li>`);
+        content.addClass(cptTask);
+        content.appendTo(backend);
+        
+        btnAddSubTask.push(document.getElementById('id'+cptTask));
+        btnAddSubTask[cptTask-1].disabled = true;
+        input.push(document.querySelector('.input'+cptTask));
+
+        for(var i=0; i<cptTask; i++){
+            //Pour tous les inputs, on va verifier chaque changement de texte pour activer ou desactiver le bouton
+            input[i].addEventListener("change", function() {
+                if (document.querySelector('.input'+i).value === "") {
+                    document.getElementById('id'+i).disabled = true; 
+                } else {
+                    document.getElementById('id'+i).disabled = false;
+                }
+            });
+        }
+        
+    });
+
+    backend.addEventListener('click',function(e){
+        if(e.target.classList == 'closeIT'){
+            closeBTN = e.target;
+            li = closeBTN.parentElement;
+            /*pour supprimer ul si c'est une sous tache*/
+            let parent = li.parentElement;
+            if(li.parentElement.nodeName == 'UL' && parent.parentElement.nodeName == 'LI'){
+                li = parent;
+            }
+            li.remove();
+        }
+
+        if(e.target.classList == 'createChild'){
+            createChildBTN = e.target;
+            li = createChildBTN.parentElement;
+            let content = $('<ul><li><input type="text" placeholder="Nom de la sous-tâche"><span class="closeIT">X</span></li></ul>');
+            content.appendTo(li);
+        }
+    })
+
+    let btnSubmit = document.getElementById("submit");
+
+    btnSubmit.addEventListener("click", () => {
+        //on crée un tableau pour la structure JSON
+        let fd = new Array();
+        let cptOrderTask = 0;
+        let cptOrderSubtask = 0;
+        let parent = "";
+        //on rempli notre tableau
+        for(var i=0, li; li=backend.childNodes[i]; i++) {
+           if(li.tagName=='LI'){
+              // traitement des li (taches)
+              for(var j=0, ul; ul=li.childNodes[j]; j++){
+                if(ul.tagName=='INPUT'){
+                    //on recupere ce qui est ecrit dans l'input de chaque tache
+                    tache = ul.value;
+                    if(tache != ""){
+                        console.log("parent de la tache", ul.parentElement)
+                        parent = "task"+i;
+                        cptOrderTask += 1;
+                        cptOrderSubtask = 0;
+                        fd.push([parent, tache, null, cptOrderTask]);
+                    }
+                }
+                else if(ul.tagName=='UL'){
+                    li2 = ul.childNodes[0];
+                    if(tache != "" && li2.childNodes[0].value != ""){
+                        cptOrderSubtask += 1;
+                        fd.push(["subtask"+i +j, li2.childNodes[0].value, parent, cptOrderSubtask]);
+                    }
+                }
+              }
+            }
+        }
+
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#json span").textContent = JSONString;
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/projects/NewGUI/archive .sca/spipollIR.sca b/projects/NewGUI/archive .sca/spipollIR.sca
new file mode 100644
index 0000000000000000000000000000000000000000..181e7d6948b006c53212e1e5918e71b842559c8f
--- /dev/null
+++ b/projects/NewGUI/archive .sca/spipollIR.sca	
@@ -0,0 +1,12 @@
+{
+	"1": {
+		"2": {
+			"guard": "select if((select count(*) = 0 from ARTIFACT where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER), 1, 0 )",
+			"actions": [
+				"delete from ARTIFACT where CLASSID=ARTIFACTCLASS_ACTIVE and OWNERID=SESSION_USER",
+				"insert into ARTIFACT(OWNERID,CLASSID,STATE,NODE,ATTRIBUTES) values (SESSION_USER,ARTIFACTCLASS_ACTIVE,'running',1,1)",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER"
+			]
+		}
+	}
+}
diff --git a/projects/NewGUI/archive .sca/spipollIRhw_v0.sca b/projects/NewGUI/archive .sca/spipollIRhw_v0.sca
new file mode 100644
index 0000000000000000000000000000000000000000..5679838a1636964b6851d6aea41fc0a7f2ea6674
--- /dev/null
+++ b/projects/NewGUI/archive .sca/spipollIRhw_v0.sca	
@@ -0,0 +1,98 @@
+{
+"1": {
+	 "2": {
+		 "guard": "select if((select count(*)>0 from ARTIFACT where OWNERID=SESSION_USER and state='running' and CLASSID=ARTIFACTCLASS_ACTIVE),if((select count(*)<1 from task where artifact=ARTIFACT_ACTIVE), (select true from dual), 0), 0)",
+		 "actions": [
+			 "SELECT @TEMPLATE:=body from templateTable where niv_taxon='ORDRE' and parent='spipoll'",
+			 "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			 "#delete from task where user_id=SESSION_USER and artifact=ARTIFACT_ACTIVE",
+			 "insert into task(title,description,body,checker,checkermsg, artifact) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE from SpipollArtifact",
+			 "insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE) and artifact=ARTIFACT_ACTIVE),1",
+			 "insert into artifact_user (artifact, user_id, state) select ARTIFACT_ACTIVE, SESSION_USER, 'deja pris'"
+		 ]
+	 }
+ },
+	"2": {
+		"3": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"update SpipollArtifact set ordre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 1 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1))) where idartifact = ARTIFACTCLASS_ACTIVE ",
+				"delete from task where artifact = ARTIFACT_ACTIVE and user_id in (select user from answer where artifact = ARTIFACT_ACTIVE)",
+				"update ARTIFACT set STATE='finished' where CLASSID = ARTIFACT_ACTIVE",
+				"update artifact_user set state='close' where artifact = ARTIFACT_ACTIVE",
+				"delete from answer where artifact = ARTIFACT_ACTIVE",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 1 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"update SpipollArtifact set ordre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 1 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+				"update SpipollArtifact set niveau=2 where idartifact = ARTIFACTCLASS_ACTIVE",
+	      "SELECT @TEMPLATE:=body from templateTable where niv_taxon='FAMILLE' and parent=(select ordre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+		    "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+				"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon FAMILY to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+				"delete from answer where artifact=ARTIFACT_ACTIVE and step=1",
+        "#insert into task(title,description,body,checker,checkermsg, artifact, user_id) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE, SESSION_USER from SpipollArtifact",
+        "#insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE) and artifact=ARTIFACT_ACTIVE and user_id=SESSION_USER),1",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"4": {
+		"5": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 2 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=3 where idartifact = ARTIFACT_ACTIVE ",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='GENRE' and parent=(select famille from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon GENRE to SpipollArtifact from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=2",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"5": {
+		"6": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 3 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=4 where idartifact = ARTIFACTCLASS_ACTIVE",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='ESPECE' and parent=(select genre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon ESPECE to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=3",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"6": {
+		"7": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"delete from task where artifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACTCLASS_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE group by value order by count(user) desc limit 1))) where idartifact = ARTIFACTCLASS_ACTIVE ",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	}
+}
diff --git a/projects/NewGUI/archive .sca/spipollIRhw_v1.sca b/projects/NewGUI/archive .sca/spipollIRhw_v1.sca
new file mode 100644
index 0000000000000000000000000000000000000000..9942abbca8d499427afdbd93b2b34fc09bc5fb89
--- /dev/null
+++ b/projects/NewGUI/archive .sca/spipollIRhw_v1.sca	
@@ -0,0 +1,114 @@
+{
+"1": {
+	 "2": {
+		 "guard": "select if((select count(*)>0 from ARTIFACT where OWNERID=SESSION_USER and state='running' and CLASSID=ARTIFACTCLASS_ACTIVE),if((select count(*)<1 from task where artifact=ARTIFACT_ACTIVE), (select true from dual), 0), 0)",
+		 "actions": [
+			 "SELECT @TEMPLATE:=body from templateTable where niv_taxon='ORDRE' and parent='spipoll'",
+			 "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			 "#delete from task where user_id=SESSION_USER and artifact=ARTIFACT_ACTIVE",
+			 "insert into task(title,description,body,checker,checkermsg, artifact) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE from SpipollArtifact",
+			 "insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE) and artifact=ARTIFACT_ACTIVE),1",
+			 "insert into artifact_user (artifact, user_id, state) select ARTIFACT_ACTIVE, SESSION_USER, 'deja pris'",
+			 "update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER"
+		 ]
+	 }
+ },
+	"2": {
+		"3": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"update SpipollArtifact set ordre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 1 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1))) where idartifact = ARTIFACT_ACTIVE ",
+				"delete from task where artifact = ARTIFACT_ACTIVE and user_id in (select user from answer where artifact = ARTIFACT_ACTIVE)",
+				"update ARTIFACT set STATE='finished' where CLASSID = ARTIFACTCLASS_ACTIVE",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+				"update artifact_user set state='close' where artifact = ARTIFACT_ACTIVE",
+				"delete from answer where artifact = ARTIFACT_ACTIVE",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 1 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"update SpipollArtifact set ordre=(select value from answer where artifact=ARTIFACTCLASS_ACTIVE and step = 1 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE ",
+				"update SpipollArtifact set niveau=2 where idartifact = ARTIFACTCLASS_ACTIVE",
+	      "SELECT @TEMPLATE:=body from templateTable where niv_taxon='FAMILLE' and parent=(select ordre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+		    "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+				"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon FAMILY to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+				"delete from answer where artifact=ARTIFACT_ACTIVE and step=1",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+        "#insert into task(title,description,body,checker,checkermsg, artifact, user_id) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE, SESSION_USER from SpipollArtifact",
+        "#insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE) and artifact=ARTIFACT_ACTIVE and user_id=SESSION_USER),1",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"4": {
+		"5": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 2 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=3 where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='GENRE' and parent=(select famille from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon GENRE to SpipollArtifact from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=2",
+			"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"5": {
+		"6": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 3 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=4 where idartifact = ARTIFACTCLASS_ACTIVE",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='ESPECE' and parent=(select genre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon ESPECE to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=3",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"6": {
+		"7": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"delete from task where artifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE group by value order by count(user) desc limit 1))) where idartifact = ARTIFACT_ACTIVE ",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"7": {
+		"8": {
+			"guard": "select if((select count(*) = 0 from ARTIFACT where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER), 1, 0 )",
+			"actions": [
+				"delete from ARTIFACT where CLASSID=ARTIFACTCLASS_ACTIVE and OWNERID=SESSION_USER",
+				"insert into ARTIFACT(OWNERID,CLASSID,STATE,NODE,ATTRIBUTES) values (SESSION_USER,ARTIFACTCLASS_ACTIVE,'running',1,1)",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER"
+			]
+		}
+	}
+}
diff --git a/projects/NewGUI/archive .sca/spipollIRhw_v2.sca b/projects/NewGUI/archive .sca/spipollIRhw_v2.sca
new file mode 100644
index 0000000000000000000000000000000000000000..5f492ec0766182144c08e45324b6dedbf5d39c34
--- /dev/null
+++ b/projects/NewGUI/archive .sca/spipollIRhw_v2.sca	
@@ -0,0 +1,115 @@
+{
+"1": {
+	 "2": {
+		 "guard": "select if((select count(*)>0 from ARTIFACT where OWNERID=SESSION_USER and state='running' and CLASSID=ARTIFACTCLASS_ACTIVE),if((select count(*)<1 from task where artifact=ARTIFACT_ACTIVE), (select true from dual), 0), 0)",
+		 "actions": [
+			 "SELECT @TEMPLATE:=body from templateTable where niv_taxon='ORDRE' and parent='spipoll'",
+			 "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			 "#delete from task where user_id=SESSION_USER and artifact=ARTIFACT_ACTIVE",
+			 "insert into task(title,description,body,checker,checkermsg, artifact) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE from SpipollArtifact",
+			 "insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE) and artifact=ARTIFACT_ACTIVE),1",
+			 "insert into artifact_user (artifact, user_id, state) select ARTIFACT_ACTIVE, SESSION_USER, 'deja pris'",
+			 "update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER"
+		 ]
+	 }
+ },
+	"2": {
+		"3": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"update SpipollArtifact set ordre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 1 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1))) where idartifact = ARTIFACT_ACTIVE ",
+				"delete from task where artifact = ARTIFACT_ACTIVE and user_id in (select user from answer where artifact = ARTIFACT_ACTIVE)",
+				"update ARTIFACT set STATE='finished' where CLASSID = ARTIFACTCLASS_ACTIVE",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+				"update artifact_user set state='close' where artifact = ARTIFACT_ACTIVE",
+				"delete from answer where artifact = ARTIFACT_ACTIVE",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "select count(a.user)>2 from answer as a, task as t, SpipollArtifact as sp where sp.idartifact = ARTIFACTCLASS_ACTIVE and sp.niveau = 1 and json_extract(a.value,'$[0].value') is not NULL and a.idtask = t.id group by json_extract(a.value, '$[0].value') order by count(a.user) desc limit 1",
+			"actions": [
+				"update SpipollArtifact set ordre=(select json_extract(value, '$[0].value') as value from answer as a, task as t, SpipollArtifact as sp where sp.idartifact = ARTIFACTCLASS_ACTIVE and sp.niveau = 1 and json_extract(a.value, '$[0].value') is not NULL and a.idtask = t.id group by json_extract(value, '$[0].value') order by count(a.user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+				"update SpipollArtifact set niveau=2 where idartifact = ARTIFACTCLASS_ACTIVE",
+	      "SELECT @TEMPLATE:=body from templateTable where niv_taxon='FAMILLE' and parent=(select ordre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+		    "SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+				"#update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon FAMILY to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+				"delete from answer where json_extract(value, '$[0].value') is not NULL and json_extract(value, '$[1].value') is NULL and json_extract(value, '$[2].value') is NULL and idtask in (select id from task where artifact in (select ID from ARTIFACT where CLASSID=ARTIFACTCLASS_ACTIVE))",
+				"#delete from answer where artifact=ARTIFACT_ACTIVE and step=1",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+        "#insert into task(title,description,body,checker,checkermsg, artifact, user_id) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE),'Give taxon ORDER to insect in image from the Spipoll',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE, SESSION_USER from SpipollArtifact",
+        "#insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACTCLASS_ACTIVE) and artifact=ARTIFACT_ACTIVE and user_id=SESSION_USER),1",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"4": {
+		"5": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and a.step = 2 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set famille=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 2 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=3 where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='GENRE' and parent=(select famille from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon GENRE to SpipollArtifact from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=2",
+			"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"5": {
+		"6": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 3 group by value order by count(user)  desc limit 1",
+			"actions": [
+			"update SpipollArtifact set genre=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 3 group by value order by count(user) desc limit 1) where idartifact = ARTIFACTCLASS_ACTIVE ",
+			"update SpipollArtifact set niveau=4 where idartifact = ARTIFACTCLASS_ACTIVE",
+			"SELECT @TEMPLATE:=body from templateTable where niv_taxon='ESPECE' and parent=(select genre from SpipollArtifact where idartifact = ARTIFACTCLASS_ACTIVE)",
+			"SELECT @IMG:=file from SpipollArtifact where idartifact=ARTIFACTCLASS_ACTIVE",
+			"update task set body = replace(@TEMPLATE,\"$FILE\",@IMG), description='Give taxon ESPECE to insect in image from the Spipoll' where artifact=ARTIFACT_ACTIVE",
+			"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+			"#delete from answer where artifact=ARTIFACT_ACTIVE",
+			"delete from answer where artifact=ARTIFACT_ACTIVE and step=3",
+			"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+			"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"6": {
+		"7": {
+			"guard": "select count(a.user)>2 from answer as a, SpipollArtifact as p where a.artifact = p.idartifact and a.artifact = ARTIFACT_ACTIVE and p.niveau = 4 group by value order by count(user)  desc limit 1",
+			"actions": [
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE)",
+				"delete from task where artifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set espece=(select value from answer where artifact=ARTIFACT_ACTIVE and step = 4 group by value order by count(user) desc limit 1) where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set niveau=5 where idartifact = ARTIFACT_ACTIVE",
+				"update SpipollArtifact set label=(select skill from skillTree where parent_skill=(select id from skillTree where skill=(select value from answer where artifact=ARTIFACT_ACTIVE group by value order by count(user) desc limit 1))) where idartifact = ARTIFACT_ACTIVE ",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER",
+				"#update skills set level=level+10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value=SpipollArtifact.label)",
+				"#update skills set level=level-10 where idskill=1 and iduser in (select user from answer,SpipollArtifact where idtask=3001 and SpipollArtifact.idp=3001-3000 and answer.value<>SpipollArtifact.label)"
+			]
+		}
+	},
+	"7": {
+		"8": {
+			"guard": "select if((select count(*) = 0 from ARTIFACT where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER), 1, 0 )",
+			"actions": [
+				"delete from ARTIFACT where CLASSID=ARTIFACTCLASS_ACTIVE and OWNERID=SESSION_USER",
+				"insert into ARTIFACT(OWNERID,CLASSID,STATE,NODE,ATTRIBUTES) values (SESSION_USER,ARTIFACTCLASS_ACTIVE,'running',1,1)",
+				"update ARTIFACT set NODE=1 where CLASSID = ARTIFACTCLASS_ACTIVE and OWNERID = SESSION_USER"
+			]
+		}
+	}
+}
diff --git a/projects/NewGUI/archive .sca/spipollIRskills_v0.sca b/projects/NewGUI/archive .sca/spipollIRskills_v0.sca
new file mode 100644
index 0000000000000000000000000000000000000000..c99a57359554c6f10abaa16aeef020bef702e986
--- /dev/null
+++ b/projects/NewGUI/archive .sca/spipollIRskills_v0.sca	
@@ -0,0 +1,36 @@
+{
+	"1": {
+		"2": {
+			"guard": "select if((select count(*) = 0 from task where artifact = ARTIFACT_ACTIVE and user_id = SESSION_USER), 1, 0 )",
+			"actions": [
+        "SELECT @TEMPLATE:=body from templateSkills where niv_taxon='ORDRE' and parent='spipoll'",
+        "delete from task where user_id=SESSION_USER and artifact=ARTIFACT_ACTIVE",
+        "insert into task(title,description,body,checker,checkermsg, artifact, user_id) select distinct (SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE),'declarer vos compétences selon les ORDRE taxonomique du SPIPOLL',replace(@TEMPLATE,\"$FILE\",@IMG),null,'free input', ARTIFACT_ACTIVE, SESSION_USER ",
+        "insert into profile (idtask, idskill) select (select id from task where title=(SELECT definition FROM ARTIFACTCLASS where ID=ARTIFACT_ACTIVE) and artifact=ARTIFACT_ACTIVE and user_id=SESSION_USER),1",
+        "insert into artifact_user (artifact, user_id, state) select ARTIFACT_ACTIVE, SESSION_USER, 'deja pris'"
+      ]
+		}
+	},
+	"2": {
+		"3": {
+			"guard": "select count(*)=1 from answer where user=SESSION_USER and artifact=ARTIFACT_ACTIVE ",
+			"actions": [
+				"# ------------------------",
+				"# insert user skill from task",
+				"# ------------------------",
+				"insert into skills (iduser, idskill, level) values SKILLS",
+				"update artifact_user set state='close' where user_id = SESSION_USER and artifact = ARTIFACT_ACTIVE",
+				"update ARTIFACT set STATE='finished' where CLASSID = ARTIFACT_ACTIVE",
+				"delete from profile where idtask in (select id from task where artifact = ARTIFACT_ACTIVE and user_id=SESSION_USER)",
+				"delete from task where artifact=ARTIFACT_ACTIVE and user_id=SESSION_USER",
+				"delete from answer where user=SESSION_USER and artifact=ARTIFACT_ACTIVE"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "select true from dual",
+			"actions": []
+		}
+	}
+}
diff --git a/projects/NewGUI/background-spipoll.css b/projects/NewGUI/background-spipoll.css
new file mode 100644
index 0000000000000000000000000000000000000000..47252d46bb8a7049ccfdd47a992505146172b368
--- /dev/null
+++ b/projects/NewGUI/background-spipoll.css
@@ -0,0 +1 @@
+background: no-repeat bottom right/20% url('projects/headwork/background.jpg'); background-color: rgb(197,205,66);
\ No newline at end of file
diff --git a/projects/NewGUI/background-spipoll.jpg b/projects/NewGUI/background-spipoll.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cda18f09b7e7e47c02342fd25d9aa05471353b0d
Binary files /dev/null and b/projects/NewGUI/background-spipoll.jpg differ
diff --git a/projects/NewGUI/background.css b/projects/NewGUI/background.css
new file mode 100644
index 0000000000000000000000000000000000000000..f2f2e598a5db0c15f7a25c17729dcec715e0faf1
--- /dev/null
+++ b/projects/NewGUI/background.css
@@ -0,0 +1 @@
+background: no-repeat bottom right/20% url('projects/Headwork/bulb_textUnder_bubbles.png');
diff --git a/projects/NewGUI/belief-step1.tmpl b/projects/NewGUI/belief-step1.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..a0238973f3a491409d249e34ccb7fab82c8b0322
--- /dev/null
+++ b/projects/NewGUI/belief-step1.tmpl
@@ -0,0 +1,11 @@
+
+ <p class="card-text">
+	Sometimes, participant are not sure about their answers. This may prevent them from giving a still interesting information. <br/>
+	No problem ! In Headwork, you can provide <em>uncertain</em> answers, by indicating your <em>level of certainty</em> (bottom of this page).</br>
+	<br/>
+	Give your estimate on the number of snow leopard in the following picture. Please also indicate your certainty (by default you are certain).
+</p>
+<center>
+	<img src="./files/snow-leopard-with-cub.jpg" alt="snow leopards image">
+</center>
+
diff --git a/projects/NewGUI/belief-step2.tmpl b/projects/NewGUI/belief-step2.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..6839c22d015fd4fc775c80b0847050d1ade32d3c
--- /dev/null
+++ b/projects/NewGUI/belief-step2.tmpl
@@ -0,0 +1,23 @@
+
+ <p class="card-text">
+Thanks. In the meantime, four other participants have given their opinion and level of certainty. Here is the result:
+</p>
+<p>
+<center>
+<table border>
+	<tr><td>LeopardAddict</td><td>1</td><td>Slighlty uncertain</td></tr>
+	<tr><td>EverestForEver</td><td>1</td><td>Totally uncertain</td></tr>
+	<tr><td>Anonimal5</td><td>2</td><td>Certain</td></tr>
+	<tr><td>Sagarman</td><td>1</td><td>Uncertain</td></tr>
+</table>
+</center>
+</p>
+<p>
+With a basic MAJORITY VOTING decision procedure, the result would have been 1. But when weighting the opinion with the level of certainty (computations hidden for the sake of simplicity), the better decision in 2. You where 
+TAG1.
+</p>
+<p>
+<div class="alert alert-success" role="alert">
+  Skill  ‘‘Uncertain answers‘‘ granted !
+</div>
+</p>
\ No newline at end of file
diff --git a/projects/NewGUI/belief.sca b/projects/NewGUI/belief.sca
new file mode 100755
index 0000000000000000000000000000000000000000..16b21c4a6d093fd78d324487df5bc8ac0eb0474f
--- /dev/null
+++ b/projects/NewGUI/belief.sca
@@ -0,0 +1,46 @@
+{
+	"author" : "Constance.Thierry@irisa.fr, David.Gross-Amblard@irisa.fr",
+	"doc" : "An example of decision made with belief functions",
+	"1": {
+		"2": {
+			"guard": "select true from dual",
+			"actions": [
+				"select @TEMPLATE:=body from Template where id='headwork-belief-step1'",
+				"insert into Task(id,title,modality,description,body,checker,checkermsg,artifact,ajax) values (1,'demo','belief','Step 1: Using uncertain answers',@TEMPLATE,'REGEXP ''^-?[0-9]+$''','please, enter an integer',CURRENT_ARTIFACT,false)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (1,CURRENT_ARTIFACT,1)"
+			]
+			
+		}
+	},
+	"2": {
+		"3": {
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=1",
+			"actions": [
+				"-- delete from profile",
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='Headwork-belief-step2'",
+				"insert into Answer(idtask,user,artifact,value,mass) values(1,1000,CURRENT_ARTIFACT,1,0.35)",
+				"insert into Answer(idtask,user,artifact,value,mass) values(1,2000,CURRENT_ARTIFACT,1,0.05)",
+				"insert into Answer(idtask,user,artifact,value,mass) values(1,3000,CURRENT_ARTIFACT,2,0.8)",
+				"insert into Answer(idtask,user,artifact,value,mass) values(1,4000,CURRENT_ARTIFACT,1,0.2)",
+				"PIGNISTIC",
+				"insert into Task(id,title,description,body,type,artifact) select 2,'demo','Step 2: Making decisions with uncertain opinions',replace(@TEMPLATE,'TAG1',if(value='2','right!','wrong, sorry')),0,CURRENT_ARTIFACT from Answer where idtask=1 and artifact=CURRENT_ARTIFACT and user=SESSION_USER",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (2,CURRENT_ARTIFACT,1)",
+				"insert into Skills values (SESSION_USER,1006,100) on duplicate key update level=100"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=2",
+			"actions": [
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"delete from Task where artifact=CURRENT_ARTIFACT"
+			]
+		}
+	},
+	"4":{}
+}
+	
diff --git a/projects/NewGUI/bulb_textUnder_bubbles.png b/projects/NewGUI/bulb_textUnder_bubbles.png
new file mode 100755
index 0000000000000000000000000000000000000000..9a5cf4887f6c98d19182a1e307332cf4bca29f16
Binary files /dev/null and b/projects/NewGUI/bulb_textUnder_bubbles.png differ
diff --git a/projects/NewGUI/demo-scenario.md b/projects/NewGUI/demo-scenario.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/projects/NewGUI/enumerate.html b/projects/NewGUI/enumerate.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f39714b573a2a5bd91954812d7d886a059b931b
--- /dev/null
+++ b/projects/NewGUI/enumerate.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="todosform"> 
+          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeLOPGQDuhLKOXXr_Jexd3ebBHJfdfNMsRtJsUO-wuqgEIHLw/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
\ No newline at end of file
diff --git a/projects/NewGUI/gui-1.tmpl b/projects/NewGUI/gui-1.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..397eb603ebbf64508317ba818a167cea8911b8ba
--- /dev/null
+++ b/projects/NewGUI/gui-1.tmpl
@@ -0,0 +1,9 @@
+
+ <p class="card-text">
+	In Headwork, a task can be as simple as a text line.
+	<cite>
+		Please enter the letter A.
+	</cite>
+	Observe that answers can be controled (try to enter a B for example).
+</p>
+
diff --git a/projects/NewGUI/gui-2.tmpl b/projects/NewGUI/gui-2.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..66f75c9ddd12d877cd35776ba38322b50a814d36
--- /dev/null
+++ b/projects/NewGUI/gui-2.tmpl
@@ -0,0 +1,35 @@
+
+ <p class="card-text">
+	Of course, you can put all the fancy HTML and Javascript you want in a question
+	(except security issues, we will see that later).
+
+</p>
+
+<h2>Video embedding</h2>
+<center>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/An55t304Kho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</center>
+
+<p/>
+<p/>
+
+<h2>Map embedding</h2>
+ <center> 
+<div id="mapid" style="width: 600px; height: 400px;"></div>
+</center>
+<script>
+
+	var mymap = L.map('mapid').setView([51.505, -0.09], 13);
+
+	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+		id: 'mapbox/streets-v11',
+		tileSize: 512,
+		zoomOffset: -1
+	}).addTo(mymap);
+
+</script>
+ 
\ No newline at end of file
diff --git a/projects/NewGUI/gui-3.tmpl b/projects/NewGUI/gui-3.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..7838a3210b1148ecce7ac1433bde7c5b3da4e0dc
--- /dev/null
+++ b/projects/NewGUI/gui-3.tmpl
@@ -0,0 +1,6 @@
+ <p class="card-text">
+	You can input multiples values, one by line.
+</p>
+<center>
+</center>
+
diff --git a/projects/NewGUI/gui-4.tmpl b/projects/NewGUI/gui-4.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..354968c85f7b931ee557413d9ce4b19dcd2263aa
--- /dev/null
+++ b/projects/NewGUI/gui-4.tmpl
@@ -0,0 +1,6 @@
+ <p class="card-text">
+	You can select from a dropdown list (observe that its content is dynamic, obtained from your previous answer).
+</p>
+<center>
+</center>
+
diff --git a/projects/NewGUI/gui-5.tmpl b/projects/NewGUI/gui-5.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..9ac8b90c28636771b7c6cc2bc6c02cd767ef8f7b
--- /dev/null
+++ b/projects/NewGUI/gui-5.tmpl
@@ -0,0 +1,6 @@
+ <p class="card-text">
+	You can choose within this radio button (observe that its content is dynamic, obtained from your previous answer).
+</p>
+<center>
+</center>
+
diff --git a/projects/NewGUI/gui-6.tmpl b/projects/NewGUI/gui-6.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..52983bbd51a67dabc919179e1c06a6a02a979c9a
--- /dev/null
+++ b/projects/NewGUI/gui-6.tmpl
@@ -0,0 +1,6 @@
+ <p class="card-text">
+	Again, radio button, but with an alternative free input.
+</p>
+<center>
+</center>
+
diff --git a/projects/NewGUI/init-skills.sql b/projects/NewGUI/init-skills.sql
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/projects/NewGUI/init-workflow.sql b/projects/NewGUI/init-workflow.sql
new file mode 100644
index 0000000000000000000000000000000000000000..4cb027316e2dc95f891314757198a9791f3c2e02
--- /dev/null
+++ b/projects/NewGUI/init-workflow.sql
@@ -0,0 +1,4 @@
+DELETE from Artifact where classid in (select id from ArtifactClass where project = 'NewGUI');
+DELETE from ArtifactClass where project = 'NewGUI';
+
+insert into ArtifactClass(id,description,definition,tablename,project,autostart) values (11001,'Task interface capabilities','NewGUI/newGUI.sca', null, 'NewGUI',true);
diff --git a/projects/NewGUI/newGUI.sca b/projects/NewGUI/newGUI.sca
new file mode 100644
index 0000000000000000000000000000000000000000..e6cb0adf83685da782822ec3c2726cf7dc69ec79
--- /dev/null
+++ b/projects/NewGUI/newGUI.sca
@@ -0,0 +1,79 @@
+{
+	"doc":"A simple workflow for GUI demo",
+	"author": "David Gross-Amblard, Adrien Wacquet, IRISA/UR1",
+	"1": {
+		"2": {
+			"guard": "none",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='NewGUI-pointMap'",
+				"select @TITLE:='Geolocalization - specific localization example'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values (1,CURRENT_ARTIFACT,'demo',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (1,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
+	"2": {
+		"3": {
+			"guard": "task 1 is answered",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='NewGUI-polygonMap'",
+				"select @TITLE:='Geolocalization - area example'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values (2,CURRENT_ARTIFACT,'demo',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (2,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
+	"3": {
+		"4": {
+			"guard": "task 2 is answered",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='NewGUI-sound-form'",
+				"select @TITLE:='Sound identification'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values (3,CURRENT_ARTIFACT,'demo',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (3,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
+	
+	"4": {
+		"5": {
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=3",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"select @TEMPLATE:=body from Template where id='NewGUI-RecordSound'",
+				"select @TITLE:='Sound recording'",
+				"select @CHECKER:=NULL",
+				"select @CHECKERMSG:=NULL",
+				"select @TYPE:=11",
+				"insert into Task(id,artifact,title,description,body,checker,checkermsg,type,arg1) values (4,CURRENT_ARTIFACT,'demo',@TITLE,@TEMPLATE,@CHECKER,@CHECKERMSG,@TYPE,@LIST)",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT",
+				"insert into Profile values (4,CURRENT_ARTIFACT,1)"
+			]
+		}
+	},
+	"5": {
+		"6": {
+			"guard": "select true from Answered where artifact=CURRENT_ARTIFACT and id=4",
+			"actions": [
+				"delete from Task where artifact=CURRENT_ARTIFACT",
+				"delete from Profile where idartifact=CURRENT_ARTIFACT"
+			]
+		}
+	},
+	"6":{}
+}
diff --git a/projects/NewGUI/noteForm.html b/projects/NewGUI/noteForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..e38e7063fe70e736adf6c7b7888943571fa5604b
--- /dev/null
+++ b/projects/NewGUI/noteForm.html
@@ -0,0 +1,90 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Note the stress level of this todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let stress = document.querySelectorAll("input[name = 'stress']");
+        for(i=0; i<stress.length; i++){
+            if(stress[i].checked){
+                NiveauStress = stress[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("NiveauStress", NiveauStress);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/NewGUI/notekForm.html b/projects/NewGUI/notekForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..e0af084c1f609fceb60682dd9a731dab559b784e
--- /dev/null
+++ b/projects/NewGUI/notekForm.html
@@ -0,0 +1,154 @@
+<center>
+<h2>Formulaire</h2>
+<form name="noteForm">
+ 
+   <fieldset >
+       <legend>Note the stress level of the first todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress1" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress1" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress1" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress1" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress1" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress1" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress1" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress1" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress1" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress1" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset><br>
+   <fieldset >
+   <legend>Note the stress level of the second todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress2" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress2" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress2" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress2" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress2" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress2" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress2" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress2" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress2" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress2" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset><br>
+   <fieldset >
+   <legend>Note the stress level of the third todo</legend>
+            <strong>Not stressful</strong>
+           <input type="radio" name="stress3" id="1" value="1"/>
+           <label for="1">1</label>
+           <input type="radio" name="stress3" id="2" value="2"/>
+           <label for="2">2</label>
+           <input type="radio" name="stress3" id="3" value="3"/>
+           <label for="3">3</label>
+           <input type="radio" name="stress3" id="4" value="4"/>
+           <label for="4">4</label>
+           <input type="radio" name="stress3" id="5" value="5"/>
+           <label for="5">5</label>
+           <input type="radio" name="stress3" id="6" value="6"/>
+           <label for="6">6</label>
+           <input type="radio" name="stress3" id="7" value="7"/>
+           <label for="7">7</label>
+           <input type="radio" name="stress3" id="8" value="8"/>
+           <label for="8">8</label>
+           <input type="radio" name="stress3" id="9" value="9"/>
+           <label for="9">9</label>
+           <input type="radio" name="stress3" id="10" value="10"/>
+           <label for="10">10</label>
+            <strong>Extremely stressful</strong>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let stress1 = document.querySelectorAll("input[name = 'stress1']");
+        for(i=0; i<stress1.length; i++){
+            if(stress1[i].checked){
+                NiveauStress1 = stress1[i].value;
+            }
+        }
+        let stress2 = document.querySelectorAll("input[name = 'stress2']");
+        for(i=0; i<stress2.length; i++){
+            if(stress2[i].checked){
+                NiveauStress2 = stress2[i].value;
+            }
+        }
+        let stress3 = document.querySelectorAll("input[name = 'stress3']");
+        for(i=0; i<stress3.length; i++){
+            if(stress3[i].checked){
+                NiveauStress3 = stress3[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("NiveauStress1", NiveauStress1);
+        fd.append("NiveauStress2", NiveauStress2);
+        fd.append("NiveauStress3", NiveauStress3);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/projects/NewGUI/pointMap.tmpl b/projects/NewGUI/pointMap.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..e610a7cbed88cf8d5a7db377cf47e518f30d2c56
--- /dev/null
+++ b/projects/NewGUI/pointMap.tmpl
@@ -0,0 +1,56 @@
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
+    <script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
+    <style type="text/css">
+        #map{ 
+            height:600px;
+            width: 600px;
+        }
+    </style>
+</head>
+<script type="text/javascript">
+
+    // Le theme de la carte
+    var theme = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
+    // On rentre les coordonnées de Rennes (ici j'ai pris l'ISTIC)
+    var lat = 48.115170;
+    var lon = -1.637434;
+  function initMap(){
+
+    // Création de la carte avec les coordonnées et le niveau de zoom, de 1 à 20
+      macarte = L.map('map').setView([lat, lon], 13);
+      L.tileLayer(theme, {
+          minZoom: 1,
+          maxZoom: 20
+      }).addTo(macarte);
+      macarte.on('click', onMapClick);
+  }
+  // Fonction pour ajouter des marqueurs    
+    var marker =null ;
+    function onMapClick(e) {
+        if (marker !== null) {
+                marker.remove();
+            }
+            marker = L.marker(e.latlng).addTo(macarte)
+            var geojson = marker.toGeoJSON();   
+                console.log(geojson);
+            json = JSON.stringify(geojson);
+            document.querySelector("#answer").value = json;
+                
+    }
+    $(document).ready(function(){
+        initMap();
+    });
+</script>
+
+<h3>Please locate ISTIC main entrance on the following map</h3>
+<center>
+<div id="map">
+        <!-- Ici s'affichera la carte -->
+</div>
+<br/>
+<button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+<input type="hidden" id="answer" name="answer" value=""/>
+</center>
+
diff --git a/projects/NewGUI/presentation.html b/projects/NewGUI/presentation.html
new file mode 100644
index 0000000000000000000000000000000000000000..0aac57274d856d4b8b7ab38925a1a74e158cdd35
--- /dev/null
+++ b/projects/NewGUI/presentation.html
@@ -0,0 +1,6 @@
+<h1>Welcome to the HEADWORK project!</h1>
+
+<p>HEADWORK is a crowdsourcing platform for participative projects of any kind. You can select your project of interest
+    in the <b>Project</b> menu. Here you'll find tutorial activities to discover what's inside HEADWORK and its
+    academic foundations. Enjoy!
+</p>
diff --git a/projects/NewGUI/sound-form.tmpl b/projects/NewGUI/sound-form.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..0dc9f0fec940c59196bbc4b177349a8bdc9696da
--- /dev/null
+++ b/projects/NewGUI/sound-form.tmpl
@@ -0,0 +1,41 @@
+<center>
+<form name="noteForm">
+   <fieldset >
+       <legend>A sound has been heard on this pond. Please identify it!</legend>
+            <audio controls>
+                <source src="https://lasonotheque.org/UPLOAD/mp3/1891.mp3?v=d" type="audio/mp3">
+                    <!-- format supported : wav, mp3 and ogg -->
+                    Your browser does not support the audio tag.
+            </audio>
+            <br>
+           <input type="radio" name="sound" id="dog" value="dog"/>
+           <label for="dog">dog</label>
+           <input type="radio" name="sound" id="cat" value="cat"/>
+           <label for="cat">cat</label>
+           <input type="radio" name="sound" id="bird" value="bird"/>
+           <label for="bird">bird</label>
+           <input type="radio" name="sound" id="other" value="other"/>
+           <label for="autre">Other</label>
+   </fieldset>
+
+<br/>
+<button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+<input type="hidden" id="answer" name="answer" value=""/>
+</center>
+
+<script type="text/javascript">
+    let btnSubmit = document.querySelector("#submit");
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+        let fd = new FormData();
+        let sound = document.querySelectorAll("input[name = 'sound']");
+        for(i=0; i<sound.length; i++){
+            if(sound[i].checked){
+                soundHear = sound[i].value;
+            }
+        }
+        fd.append("soundHear", soundHear);
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#answer").value = JSONString;
+    })
+</script>
\ No newline at end of file
diff --git a/projects/NewGUI/step1.tmpl b/projects/NewGUI/step1.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..44b5b4ddc20c3ae597d1355b8072a5e29d4259b2
--- /dev/null
+++ b/projects/NewGUI/step1.tmpl
@@ -0,0 +1,10 @@
+
+ <p class="card-text">
+	Headwork is a crowdsourcing platform that allows you to contribute to interesting tasks. 
+	Let's say that we want to count the snow leopards on the following picture.
+	Please give your estimate below.
+</p>
+<center>
+	<img src="./files/snow-leopard-with-cub.jpg" alt="snow leopards image">
+</center>
+
diff --git a/projects/NewGUI/step2.tmpl b/projects/NewGUI/step2.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..1fb244ff440f0a0f15e25feb6f9c764e8481b471
--- /dev/null
+++ b/projects/NewGUI/step2.tmpl
@@ -0,0 +1,15 @@
+
+ <p class="card-text">
+Thanks. In the meantime, four other participants have given their opinion. Here is the result:
+</p>
+<p>
+<center>
+TAG2
+</center>
+</p>
+<p>
+In order to decide, crowdsourcing platforms typically perform MAJORITY VOTING. Hence, we conclude
+that there were 2 leopards. You where
+TAG1.
+</p>
+<p>Press submit for the next step.</p>
\ No newline at end of file
diff --git a/projects/NewGUI/task-decomposition.tmpl b/projects/NewGUI/task-decomposition.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..5797b3dfd0beb14d811ee5abf2defaef20d7acfd
--- /dev/null
+++ b/projects/NewGUI/task-decomposition.tmpl
@@ -0,0 +1,148 @@
+
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+  <style type="text/css">
+      #backend ul{
+        list-style: none;
+    }
+
+      ul li ul {
+        border-left: 1px solid black;
+      }
+
+      ul li {
+        position: relative;
+      }
+
+      ul ul li:before{
+        content: '';
+        position: absolute;
+        top: 13px;
+        left: -40px;
+        background: black;
+        width: 40px;
+        height: 1px;
+      }
+
+      .closeIT{
+        background: red;
+        color: white;
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+
+      input{
+        margin: 5px;
+      }
+  </style>
+
+    <h2>Décomposer ce todo en plusieurs tâches distinctes </h2>
+
+<button id="createParent" type="button">Ajouter une tâche</button>
+<ul id="backend"></ul>
+
+
+<button id="submit" type="submit" form="taskAnswerForm" formaction="index.php?mode=showTasks" formmethod="post">Submit</button>
+
+<input type="hidden" id="answer" name="answer" value="['3','5']"/>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+    let createparent = document.getElementById('createParent');
+    let backend = document.getElementById('backend');
+
+    let cptTask = 0; //compteur pour differencier les inputs
+    let input = new Array(); //tableau qui va contenir tous les inputs
+    let btnAddSubTask = new Array(); //tableau qui va contenir tous les boutons pour ajouter des enfants
+
+    createparent.addEventListener("click", function(){
+        cptTask +=1;
+        let content = $(`<li>
+        <input type="text" class="input`+cptTask+`" placeholder="Nom de la tâche">
+        <button type="button" class="createChild" id="id`+cptTask+`">Ajouter une sous-tâche</button>
+        <span class="closeIT">X</span>
+    </li>`);
+        content.addClass(cptTask);
+        content.appendTo(backend);
+        
+        btnAddSubTask.push(document.getElementById('id'+cptTask));
+        btnAddSubTask[cptTask-1].disabled = true;
+        input.push(document.querySelector('.input'+cptTask));
+
+        for(var i=0; i<cptTask; i++){
+            //Pour tous les inputs, on va verifier chaque changement de texte pour activer ou desactiver le bouton
+            input[i].addEventListener("change", function() {
+                if (document.querySelector('.input'+i).value === "") {
+                    document.getElementById('id'+i).disabled = true; 
+                } else {
+                    document.getElementById('id'+i).disabled = false;
+                }
+            });
+        }
+        
+    });
+
+    backend.addEventListener('click',function(e){
+        if(e.target.classList == 'closeIT'){
+            closeBTN = e.target;
+            li = closeBTN.parentElement;
+            /*pour supprimer ul si c'est une sous tache*/
+            let parent = li.parentElement;
+            if(li.parentElement.nodeName == 'UL' && parent.parentElement.nodeName == 'LI'){
+                li = parent;
+            }
+            li.remove();
+        }
+
+        if(e.target.classList == 'createChild'){
+            createChildBTN = e.target;
+            li = createChildBTN.parentElement;
+            let content = $('<ul><li><input type="text" placeholder="Nom de la sous-tâche"><span class="closeIT">X</span></li></ul>');
+            content.appendTo(li);
+        }
+    })
+
+    let btnSubmit = document.getElementById("submit");
+
+    btnSubmit.addEventListener("click", () => {
+        //on crée un tableau pour la structure JSON
+        let fd = new Array();
+        let cptOrderTask = 0;
+        let cptOrderSubtask = 0;
+        let parent = "";
+        //on rempli notre tableau
+        for(var i=0, li; li=backend.childNodes[i]; i++) {
+           if(li.tagName=='LI'){
+              // traitement des li (taches)
+              for(var j=0, ul; ul=li.childNodes[j]; j++){
+                if(ul.tagName=='INPUT'){
+                    //on recupere ce qui est ecrit dans l'input de chaque tache
+                    tache = ul.value;
+                    if(tache != ""){
+                        console.log("parent de la tache", ul.parentElement)
+                        parent = "task"+i;
+                        cptOrderTask += 1;
+                        cptOrderSubtask = 0;
+                        fd.push([parent, tache, null, cptOrderTask]);
+                    }
+                }
+                else if(ul.tagName=='UL'){
+                    li2 = ul.childNodes[0];
+                    if(tache != "" && li2.childNodes[0].value != ""){
+                        cptOrderSubtask += 1;
+                        fd.push(["subtask"+i +j, li2.childNodes[0].value, parent, cptOrderSubtask]);
+                    }
+                }
+              }
+            }
+        }
+
+        let JSONString = JSON.stringify(Array.from(fd));
+        document.querySelector("#answer").value = JSONString;
+    })
+</script>
diff --git a/projects/NewGUI/topk.html b/projects/NewGUI/topk.html
new file mode 100644
index 0000000000000000000000000000000000000000..e037b1dc46048c7eedac09ba4ae665bca6ec168c
--- /dev/null
+++ b/projects/NewGUI/topk.html
@@ -0,0 +1,9 @@
+<html>
+  <body>
+    <center>
+        <form name ="topkForm"> 
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdbKDGcVNy8bKfwgsHHepEUOtc705-RGOzvy5ldmC0gQinMMA/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
+        </form>
+    </center>
+  </body>
+</html>
diff --git a/projects/NewGUI/topkForm.html b/projects/NewGUI/topkForm.html
new file mode 100644
index 0000000000000000000000000000000000000000..f88c244dbaf48bab8117126af3bfbe310e0bdd3e
--- /dev/null
+++ b/projects/NewGUI/topkForm.html
@@ -0,0 +1,291 @@
+<center>
+<h2>Formulaire</h2>
+<form name="ClassifyForm">
+ 
+   <fieldset >
+       <legend>Say if the following todos are professional or personal :</legend>
+        <table>
+            <tr>
+                <th></th>
+                <th>
+                    Not a priority at all            
+                </th>
+                <th>
+                    Not a priority
+                </th>
+                <th>
+                    Neutral            
+                </th>
+                <th>
+                    Priority
+                </th>
+                <th>
+                    High Priority            
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    First Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    </center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority1" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    </center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Second Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority2" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Third Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="2" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority3" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Fourth Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority4" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    Fifth Todo
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Not a priority at all"/>
+                    <label for="1"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="2" value="Not a priority"/>
+                    <label for="2"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Neutral"/>
+                    <label for="3"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="Priority"/>
+                    <label for="4"></label>
+                    <center>
+                </td>
+                <td>
+                    <center>
+                    <input type="radio" name="priority5" id="1" value="High Priority"/>
+                    <label for="5"></label>
+                    <center>
+                </td>
+            </tr>
+        </table>
+   </fieldset>
+
+</form>
+
+<button>Submit</button>
+
+</center>
+
+<h2>Récupération des données du formulaire</h2>
+
+<div id="json">
+    <span></span>
+</div>
+
+<script type="text/javascript">
+
+ /*   escape = function (str) {
+  return str
+    .replace(/[\\]/g, '\\\\')
+    .replace(/[\"]/g, '\\\"')
+    .replace(/[\/]/g, '\\/')
+    .replace(/[\b]/g, '\\b')
+    .replace(/[\f]/g, '\\f')
+    .replace(/[\n]/g, '\\n')
+    .replace(/[\r]/g, '\\r')
+    .replace(/[\t]/g, '\\t');
+};*/
+
+    //Le bouton qui va déclencher le script js
+    let btnSubmit = document.querySelector("button");
+
+    btnSubmit.addEventListener("click", () => {
+    //check si le formulaire a été correctement rempli
+
+        //on crée un formData
+        let fd = new FormData();
+
+        //on réccupère les données du formulaire
+        let priority1 = document.querySelectorAll("input[name = 'priority1']");
+        for(i=0; i<priority1.length; i++){
+            if(priority1[i].checked){
+                Classement1 = priority1[i].value;
+            }
+        }
+        let priority2 = document.querySelectorAll("input[name = 'priority2']");
+        for(i=0; i<priority2.length; i++){
+            if(priority2[i].checked){
+                Classement2 = priority2[i].value;
+            }
+        }
+        let priority3 = document.querySelectorAll("input[name = 'priority3']");
+        for(i=0; i<priority3.length; i++){
+            if(priority3[i].checked){
+                Classement3 = priority3[i].value;
+            }
+        }
+        let priority4 = document.querySelectorAll("input[name = 'priority4']");
+        for(i=0; i<priority4.length; i++){
+            if(priority4[i].checked){
+                Classement4 = priority4[i].value;
+            }
+        }
+        let priority5 = document.querySelectorAll("input[name = 'priority5']");
+        for(i=0; i<priority5.length; i++){
+            if(priority5[i].checked){
+                Classement5 = priority5[i].value;
+            }
+        }
+
+        //on rempli notre FormData
+        fd.append("Classement1", Classement1);
+        fd.append("Classement2", Classement2);
+        fd.append("Classement3", Classement3);
+        fd.append("Classement4", Classement4);
+        fd.append("Classement5", Classement5);
+
+        
+        console.log(Array.from(fd));
+
+        let JSONString = JSON.stringify(Array.from(fd));
+
+        console.log(JSONString);
+
+        //let EscapedJSONString = escape(JSONString);
+       // console.log(EscapedJSONString);
+
+        document.querySelector("#json span").textContent = JSONString;
+
+    })
+</script>
\ No newline at end of file
diff --git a/templates/register.tmpl b/templates/register.tmpl
index eaa68e046043ec990bf9ac48422b20a7034b29f9..95297a855e0ea284e843bea7ea65a7712aa21747 100644
--- a/templates/register.tmpl
+++ b/templates/register.tmpl
@@ -1,10 +1,10 @@
 <br/>
 <br/>
 <center>
-    <form action="index.php" method="POST">
+    <form action="index.php" method="POST" onsubmit="return ValidateEmail();">
         <h1>Sign up for a new account</h1>
         <br/>
-        <input type="text" name="username" placeholder="username" required="true"/>
+        <input type="text" id="username" name="username" placeholder="valid email" required="true"/>
         <br/>
         <input type="password" name="password" placeholder="password" required="true"/>
         <br/>
@@ -14,3 +14,24 @@
     </form>
 </center>
 <center>{CHECKALREADYEXISTS}</center>
+
+<script>
+
+
+
+function ValidateEmail(inputText)
+{
+var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+if(username.value.match(mailformat))
+{
+return true;
+}
+else
+{
+alert("Please enter a valid email address!");
+username.focus();
+return false;
+}
+}
+</script>
+
diff --git a/templates/rgpd.tmpl b/templates/rgpd.tmpl
new file mode 100644
index 0000000000000000000000000000000000000000..5c747e66fae24aa33ec48d0728246efbf567d880
--- /dev/null
+++ b/templates/rgpd.tmpl
@@ -0,0 +1,22 @@
+<h2></h2>
+
+<h3>Vos données personnelles</h3>
+
+<p class="card-text">L’utilisateur est informé que lors de ses visites sur le site un cookie peut s’installer automatiquement sur son logiciel de navigation.
+Le cookie est un bloc de données qui ne permet pas d’identifier les utilisateurs mais sert à enregistrer les informations relatives à la navigation de celui-ci sur le site. Le paramétrage du logiciel de navigation permet d’informer de la présence de cookie et éventuellement, de la refuser de la manière décrite à l’adresse suivante : www.cnil.fr.
+L’utilisateur dispose de l’ensemble des droits susvisés s’agissant des données à caractère personnel communiquées par le biais des cookies dans les conditions indiquées ci-dessus. Le site HEADWORK n’utilise pas de cookies pour la publicité, les cookies utilisés sur le site servent uniquement à vous identifier, et à se souvenir de vos préférences.
+Pour plus d’informations sur les cookies, vous pouvez consulter la page de la CNIL dédiée aux cookies.
+</p>
+<p class="card-text">
+Le projet HEADWORK et ses partenaires autorisent tout visiteur selon les présentes conditions et les règles d’usage sur l’Internet, à consulter gratuitement ce site, à simple titre d’information, uniquement pour son usage personnel et privé et à l’exclusion de toutes fins commerciales.
+</p>
+
+<p class="card-text">
+Les informations fournies par l’utilisateur sont accessibles par les services en charge de HEADWORK. Elles ne sont pas diffusées à des tiers.
+Les données sont conservées sans limite de temps, sauf en cas de demande de désinscription de l’utilisateur.
+</p>
+
+<p class="card-text">
+Les utilisateurs avec un compte, utilisant le site s’engagent à détenir les droits de propriété intellectuelle de tous les éléments et contenus téléversés librement sur le site HEADWORK : informations, textes, publications, photographies, vidéos, photographies, dessins et/ou images.
+En téléversant ces contenus sur HEADWORK, les utilisateurs s’engagent également à en céder tous les droits patrimoniaux (reproduction utilisation adaptation traduction) gratuitement et non exclusif au projet HEADWORK pour tout usage non-commercial de promotion des Sciences Participatives, d’études et d’analyses.
+</p>
diff --git a/templates/template-main.php b/templates/template-main.php
index 102a00afca217bd69277dd745420e93e2b300e4b..bfa30b772827747984771168b2ffeda7c68d6eda 100755
--- a/templates/template-main.php
+++ b/templates/template-main.php
@@ -67,15 +67,13 @@
 <body  style="<?php echo file_get_contents("projects/".$_SESSION['project']."/background.css"); ?>">
 <?php endif;?>
 
-<!-- no-repeat bottom right/20% url('projects/headwork/background.jpg'); background-color: rgb(197,205,66);"> -->
-<!-- <body> --> 
 	<nav class="navbar navbar-dark justify-content-between bg-dark flex-sm-row flex-column" style="background-color: black;">
 
 		<!-- Navbar content -->
 
 		<ul id="menu" class="nav nav-pills">
 
-			<a class="navbar-brand" href="#">HEADWORK <span class="box">Beta<span></a>
+			<a class="navbar-brand" href="/">HEADWORK <span class="box">Beta<span></a>
 
 			<!--  if logged -->
   
@@ -187,10 +185,10 @@
 		</div>
    <?php endif ?>
 
-<?php if (isset($var['ID'])): ?>
+<!-- <?php if (isset($var['ID'])): ?>
 	<script src="js/feedback.js"></script>
 	<script src="js/chat.js"></script>
-<?php endif ?>
+<?php endif ?> -->
 </main>
 </body>
 </html>