175 lines
7.5 KiB
HTML
175 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" dir="ltr">
|
|
<head>
|
|
<div th:replace="~{html-head}"/>
|
|
<link rel="stylesheet" th:href="@{/css/form.css}"/>
|
|
</head>
|
|
|
|
<body>
|
|
<div th:replace="~{header}"/>
|
|
<script th:src="@{/webjars/jquery/1.9.1/jquery.min.js}"></script>
|
|
<main>
|
|
<span id="question-text"></span>
|
|
<span id="question-counter">0/0</span>
|
|
<div id="answers">
|
|
<div class="buttonbox" id="answer-select">
|
|
<button class="squared-button bcol1" id="answer-select-duo">Duo</button>
|
|
<button class="squared-button bcol2" id="answer-select-carre">Carré</button>
|
|
<button class="squared-button bcol3" id="answer-select-cache">Cache</button>
|
|
</div>
|
|
<div class="buttonbox" id="answer-cache">
|
|
<textarea class="squared-input" id="answer-cache-input" type="text"></textarea>
|
|
<button class="squared-button bcol4" id="answer-cache-button">Envoyer la réponse</button>
|
|
</div>
|
|
<div class="buttonbox" id="answer-duo">
|
|
<button class="squared-button bcol1" id="answer-duo-button-1"></button>
|
|
<button class="squared-button bcol2" id="answer-duo-button-2"></button>
|
|
</div>
|
|
<div class="buttonbox" id="answer-carre">
|
|
<button class="squared-button bcol1" id="answer-carre-button-1"></button>
|
|
<button class="squared-button bcol2" id="answer-carre-button-2"></button>
|
|
<button class="squared-button bcol3" id="answer-carre-button-3"></button>
|
|
<button class="squared-button bcol4" id="answer-carre-button-4"></button>
|
|
</div>
|
|
</div>
|
|
<span id="error-textbox" style="color: red"></span>
|
|
<button id="question-button">Poser la question</button>
|
|
<script th:inline="javascript">
|
|
/*<![CDATA[*/
|
|
var qid = /*[[${formid}]]*/ -1;
|
|
var qlength = /*[[${quizzLength}]]*/ -1;
|
|
/*]]>*/
|
|
</script>
|
|
<script>
|
|
qindex = 0
|
|
qstep = 0
|
|
function error(txt) {
|
|
console.log(txt)
|
|
$("#error-textbox").text(txt)
|
|
}
|
|
function clearerror() {
|
|
$("#error-textbox").text("")
|
|
}
|
|
function next() {
|
|
$.ajax({
|
|
url: "/questions/question/"+qid,
|
|
type: "GET",
|
|
dataType: "json",
|
|
success: function(res) {
|
|
console.log(res)
|
|
qindex=res["index"]
|
|
qstep=res["step"]
|
|
if(!res["success"]) {
|
|
console.log(res["message"])
|
|
error(res["message"])
|
|
return
|
|
}
|
|
clearerror()
|
|
$("#question-counter").text((res["index"]+1)+"/"+qlength)
|
|
$("#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").val("")
|
|
} 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 answer1(q) {
|
|
asw={
|
|
index: qindex,
|
|
step: 0,
|
|
data: q
|
|
}
|
|
$.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"]){
|
|
clearerror()
|
|
next()
|
|
} else {
|
|
error(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"]){
|
|
clearerror()
|
|
$("#answer-select").hide()
|
|
$("#answer-duo").hide()
|
|
$("#answer-carre").hide()
|
|
$("#answer-cache").hide()
|
|
if(qindex+1 >= qlength) {
|
|
$("#question-text").text("Plus de questions !")
|
|
} else {
|
|
$("#question-text").text("Question suivante ...")
|
|
next()
|
|
}
|
|
} else {
|
|
isdone = false
|
|
error(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").val()))
|
|
$("#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)
|
|
</script>
|
|
</main>
|
|
</body>
|
|
</html> |