diff --git a/src/main/java/com/bernard/misael/questions/DccQuestion.java b/src/main/java/com/bernard/misael/questions/DccQuestion.java
index 85a9321..fbe0382 100644
--- a/src/main/java/com/bernard/misael/questions/DccQuestion.java
+++ b/src/main/java/com/bernard/misael/questions/DccQuestion.java
@@ -31,9 +31,9 @@ public class DccQuestion implements QuestionType{
     @Override
     public JsonNode clientQuestionData(int step, JsonNode answer) throws QuestionTypeException{
         ObjectNode o = JsonNodeFactory.instance.objectNode();
+        o.put("text", this.text);
         switch (step) {
             case 0:
-                o.put("text", this.text);
                 return o;
             case 1:
                 Random r = new Random();
diff --git a/src/main/resources/templates/form.html b/src/main/resources/templates/form.html
index e65adea..b2d1c48 100644
--- a/src/main/resources/templates/form.html
+++ b/src/main/resources/templates/form.html
@@ -8,10 +8,28 @@
     <div th:replace="~{header}"/>
     <script th:src="@{/webjars/jquery/1.9.1/jquery.min.js}"></script>
     <main>
-        Youhou ! (Y devrait y avoir le form ici ^^) <span th:text="${formid}"/> <br/>
+        <span id="question-text"></span>
+        <div id="answer-select">
+            <button id="answer-select-duo">Duo</button>
+            <button id="answer-select-carre">Carré</button>
+            <button id="answer-select-cache">Cache</button>
+        </div>
+        <div id="answer-cache">
+            <input id="answer-cache-input" type="text"/>
+            <button id="answer-cache-button">Envoyer la réponse</button>
+        </div>
+        <div id="answer-duo">
+            <button id="answer-duo-button-1"></button>
+            <button id="answer-duo-button-2"></button>
+        </div>
+        <div id="answer-carre">
+            <button id="answer-carre-button-1"></button>
+            <button id="answer-carre-button-2"></button>
+            <button id="answer-carre-button-3"></button>
+            <button id="answer-carre-button-4"></button>
+        </div>
 
         <button id="question-button">Poser la question</button>
-        <button id="answer1-button">Première réponse</button>
         <script>
             e = new RegExp("/([0-9]+)$")
             e.test(window.location.href)
@@ -27,14 +45,46 @@
                         console.log(res)
                         qindex=res["index"]
                         qstep=res["step"]
+                        if(!res["success"]) {
+                            alert(res["message"])
+                            return
+                        }
+                        $("#question-text").text(res["data"]["text"])
+                        if(qstep==0){
+                            $("#answer-select").show()
+                            $("#answer-duo").hide()
+                            $("#answer-carre").hide()
+                            $("#answer-cache").hide()
+                        }else if(qstep==1){
+                            awrs = res["data"]["answers"]
+
+                            $("#answer-select").hide()
+                            $("#answer-duo").hide()
+                            $("#answer-carre").hide()
+                            $("#answer-cache").hide()
+                            if(typeof awrs === 'undefined'){
+                                $("#answer-cache").show()
+                                $("#answer-cache-input").text("")
+                            } else if (awrs.length == 2) {
+                                $("#answer-duo").show()
+                                $("#answer-duo-button-1").text(res.data.answers[0])
+                                $("#answer-duo-button-2").text(res.data.answers[1])
+                            } else if (awrs.length == 4) {
+                                $("#answer-carre").show()
+                                $("#answer-carre-button-1").text(res.data.answers[0])
+                                $("#answer-carre-button-2").text(res.data.answers[1])
+                                $("#answer-carre-button-3").text(res.data.answers[2])
+                                $("#answer-carre-button-4").text(res.data.answers[3])
+                            }
+                        }
                     }
                 })
             }
-            function answer() {
+            function answer1(q) {
                 asw={
                     index: qindex,
-                    step: qstep,
-                    data: Math.floor(Math.random() * 3)*2
+                    step: 0,
+                    data: q
                 }
                 $.ajax({
                     contentType: 'application/json',
@@ -44,11 +94,52 @@
                     dataType: "json",
                     success: function(res) {
                         console.log(res)
+                        if(res["success"]){
+                            next()
+                        } else {
+                            alert(res["message"])
+                        }
                     }
                 })
             }
+            function answer2(value) {
+                asw={
+                    index: qindex,
+                    step: 1,
+                    data: value
+                }
+                $.ajax({
+                    contentType: 'application/json',
+                    type: "POST",
+                    url: "/questions/answer/"+qid,
+                    data: JSON.stringify(asw),
+                    dataType: "json",
+                    success: function(res) {
+                        console.log(res)
+                        if(res["success"]){
+                            next()
+                        } else {
+                            alert(res["message"])
+                        }
+                    }
+                })
+            }
+
+            $("#answer-select").hide()
+            $("#answer-duo").hide()
+            $("#answer-carre").hide()
+            $("#answer-cache").hide()
+            $("#answer-select-duo").on('click',() => answer1(2))
+            $("#answer-select-carre").on('click',() => answer1(4))
+            $("#answer-select-cache").on('click',() => answer1(0))
+            $("#answer-cache-button").on('click',() => answer2($("#answer-cache-input").text()))
+            $("#answer-duo-button-1").on('click',() => answer2(awrs[0]))
+            $("#answer-duo-button-2").on('click',() => answer2(awrs[1]))
+            $("#answer-carre-button-1").on('click',() => answer2(awrs[0]))
+            $("#answer-carre-button-2").on('click',() => answer2(awrs[1]))
+            $("#answer-carre-button-3").on('click',() => answer2(awrs[2]))
+            $("#answer-carre-button-4").on('click',() => answer2(awrs[3]))
             $("#question-button").on('click',next)
-            $("#answer1-button").on('click',answer)
         </script>
     </main>
 </body>