Added controls of quizz on watch page
This commit is contained in:
Mysaa Java
@@ -27,6 +27,10 @@
|
||||
|
||||
<ol id="questions-list">
|
||||
</ol>
|
||||
|
||||
<div class="buttonbar">
|
||||
<button id="mark-complete">Marquer le quizz comme terminé</button>
|
||||
</div>
|
||||
|
||||
<span id="error-textbox" style="color: red"></span>
|
||||
|
||||
@@ -412,6 +416,18 @@
|
||||
}
|
||||
unReorderMode()
|
||||
}
|
||||
|
||||
function markComplete() {
|
||||
if (confirm("Voulez-vous vraiment marquer ce quizz comme terminé ? Vous ne pourrez plus l'éditer !")) {
|
||||
$.ajax({
|
||||
url: "/questions/mark-complete/"+quizzid,
|
||||
type: "GET",
|
||||
success: function(res) {
|
||||
console.log("SUPER")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function makeEditBlockBCC(id,question) {
|
||||
@@ -470,6 +486,7 @@
|
||||
$("#edit-question-name-confirm").on("click",commitEditName)
|
||||
$("#edit-question-name-cancel").on("click",cancelEditName)
|
||||
$("#add-question").on("click",addQuestion)
|
||||
$("#mark-complete").on("click",markComplete)
|
||||
getdata()
|
||||
</script>
|
||||
</main>
|
||||
|
||||
@@ -7,17 +7,23 @@
|
||||
<body>
|
||||
<div th:replace="~{header}"/>
|
||||
<main>
|
||||
<h3>Quizz à répondre</h3>
|
||||
<h3>Quizz disponibles</h3>
|
||||
<ul>
|
||||
<li th:if="${#lists.isEmpty(answerableQuizz)}">Aucun quizz de disponible malheureusement :(</li>
|
||||
<li th:each="q : ${answerableQuizz}"><a th:href="@{/questions/form/{id}(id=${q.id})}">Quizz <span th:text="${q.name}"/></a></li>
|
||||
</ul>
|
||||
<h3>Quizz à éditer</h3>
|
||||
<h3>Quizz en édition</h3>
|
||||
<ul>
|
||||
<li th:if="${#lists.isEmpty(editableQuizz)}">Aucun quizz de disponible malheureusement :(</li>
|
||||
<li th:each="q : ${editableQuizz}"><a th:href="@{/questions/quizz-edit/{id}(id=${q.id})}">Quizz <span th:text="${q.name}"/></a></li>
|
||||
</ul>
|
||||
<a sec:authorize="hasAuthority('CREATE_QUIZZ')" th:href="@{/questions/new-quizz}">Nouveau Quizz</a>
|
||||
|
||||
<h3>Quizz terminés</h3>
|
||||
<ul>
|
||||
<li th:if="${#lists.isEmpty(completedQuizz)}">Aucun quizz de disponible malheureusement :(</li>
|
||||
<li th:each="q : ${completedQuizz}"><a th:href="@{/questions/watch/{id}(id=${q.id})}">Quizz <span th:text="${q.name}"/></a></li>
|
||||
</ul>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<div th:replace="~{html-head}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/showformadvancements.css}"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{header}"/>
|
||||
<script th:src="@{/webjars/jquery/1.9.1/jquery.min.js}" type="text/javascript"></script>
|
||||
<script th:src="@{/webjars/lodash/4.17.21/lodash.js}" type="text/javascript"></script>
|
||||
<main>
|
||||
|
||||
<button id="refresh-data">Refresh</button>
|
||||
<table id="forms-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Position</th>
|
||||
<th>Step</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="forms-body">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<span id="error-textbox" style="color: red"></span>
|
||||
|
||||
<script th:inline="javascript">
|
||||
/*<![CDATA[*/
|
||||
var quizzid = /*[[${quizzId}]]*/ -1;
|
||||
/*]]>*/
|
||||
</script>
|
||||
<script>
|
||||
function error(txt) {
|
||||
console.log(txt)
|
||||
$("#error-textbox").text(txt)
|
||||
}
|
||||
|
||||
formsdata=[]
|
||||
|
||||
function getdata() {
|
||||
$('#refresh-data').prop('disabled',true)
|
||||
$.ajax({
|
||||
url: "/questions/getformadvancements/"+quizzid,
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
$('#refresh-data').prop('disabled',false)
|
||||
return
|
||||
}
|
||||
formsdata=res["data"]
|
||||
|
||||
$('.form-line').remove()
|
||||
for(let qf of formsdata) {
|
||||
html = `
|
||||
<tr class="form-line done-${qf["done"]}" id="q-${qf["qfid"]}">
|
||||
<td>${qf["username"]}</td>
|
||||
<td>${qf["position"]}</td>
|
||||
<td>${qf["step"]}</td>
|
||||
</tr>
|
||||
`
|
||||
content = $('<li/>').html(html).contents()
|
||||
$(`#forms-body`).append(content)
|
||||
}
|
||||
$('#refresh-data').prop('disabled',false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$('#refresh-data').on('click',getdata)
|
||||
getdata()
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<div th:replace="~{html-head}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/showformadvancements.css}"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{header}"/>
|
||||
<script th:src="@{/webjars/jquery/1.9.1/jquery.min.js}" type="text/javascript"></script>
|
||||
<script th:src="@{/webjars/lodash/4.17.21/lodash.js}" type="text/javascript"></script>
|
||||
<main>
|
||||
|
||||
<div class="button-bar">
|
||||
<button id="make-public">Rendre public</button>
|
||||
<button id="make-private">Rendre privé</button>
|
||||
<span id="question-count-number">Nombre de questions accessibles:</span>
|
||||
<button id="set-question-begin"><<</button>
|
||||
<button id="set-question-decrement"><</button>
|
||||
<span id="last-question-number">x</span>
|
||||
<button id="set-question-increment">></button>
|
||||
<button id="set-question-last">>></button>
|
||||
</div>
|
||||
<button id="refresh-data">Refresh</button>
|
||||
<table id="forms-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Nombre de questions répondues</th>
|
||||
<th>Étape</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="forms-body">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<span id="error-textbox" style="color: red"></span>
|
||||
|
||||
<script th:inline="javascript">
|
||||
/*<![CDATA[*/
|
||||
var quizzid = /*[[${quizzId}]]*/ -1;
|
||||
/*]]>*/
|
||||
</script>
|
||||
<script>
|
||||
function error(txt) {
|
||||
console.log(txt)
|
||||
$("#error-textbox").text(txt)
|
||||
}
|
||||
|
||||
formsdata = []
|
||||
pqc = null
|
||||
qCount = null
|
||||
|
||||
allButtons = [
|
||||
$('#refresh-data'),
|
||||
$('#make-public'),
|
||||
$('#make-private'),
|
||||
$('#set-question-begin'),
|
||||
$('#set-question-decrement'),
|
||||
$('#question-count-number'),
|
||||
$('#last-question-number'),
|
||||
$('#set-question-increment'),
|
||||
$('#set-question-last')
|
||||
]
|
||||
|
||||
function activateButtons() {
|
||||
if(pqc === null) {
|
||||
$('#make-public').show()
|
||||
$('#make-private').hide()
|
||||
$('#set-question-begin').hide()
|
||||
$('#set-question-decrement').hide()
|
||||
$('#question-count-number').hide()
|
||||
$('#last-question-number').hide()
|
||||
$('#set-question-increment').hide()
|
||||
$('#set-question-last').hide()
|
||||
} else {
|
||||
$('#make-public').hide()
|
||||
$('#make-private').show()
|
||||
$('#question-count-number').show()
|
||||
$('#set-question-begin').show()
|
||||
$('#set-question-decrement').show()
|
||||
if(pqc == 0) {
|
||||
$('#set-question-begin').prop('disabled', true)
|
||||
$('#set-question-decrement').prop('disabled', true)
|
||||
} else {
|
||||
$('#set-question-begin').prop('disabled', false)
|
||||
$('#set-question-decrement').prop('disabled', false)
|
||||
}
|
||||
$('#last-question-number').show()
|
||||
$('#last-question-number').text(pqc)
|
||||
$('#set-question-last').show()
|
||||
$('#set-question-increment').show()
|
||||
if(pqc == qCount) {
|
||||
$('#set-question-last').prop('disabled', true)
|
||||
$('#set-question-increment').prop('disabled', true)
|
||||
} else {
|
||||
$('#set-question-last').prop('disabled', false)
|
||||
$('#set-question-increment').prop('disabled', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getdata() {
|
||||
$('#refresh-data').prop('disabled',true)
|
||||
$.ajax({
|
||||
url: "/questions/watchdata/"+quizzid,
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
$('#refresh-data').prop('disabled',false)
|
||||
return
|
||||
}
|
||||
formsdata=res["data"]
|
||||
pqc = res["publicQuestionCount"]
|
||||
qCount = res["questionCount"]
|
||||
|
||||
$('.form-line').remove()
|
||||
for(let qf of formsdata) {
|
||||
html = `
|
||||
<tr class="form-line done-${qf["done"]}" id="q-${qf["qfid"]}">
|
||||
<td>${qf["username"]}</td>
|
||||
<td>${qf["position"]}</td>
|
||||
<td>${qf["step"]}</td>
|
||||
</tr>
|
||||
`
|
||||
content = $('<li/>').html(html).contents()
|
||||
$(`#forms-body`).append(content)
|
||||
}
|
||||
|
||||
for(const b of allButtons) b.prop('disabled', false)
|
||||
activateButtons()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function setPQC(n) {
|
||||
for(const b of allButtons) b.prop('disabled', true)
|
||||
$.ajax({
|
||||
url: "/questions/set-public-question-count/"+quizzid,
|
||||
type: "POST",
|
||||
data: JSON.stringify({'publicQuestionCount': n}),
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
getdata()
|
||||
}
|
||||
})
|
||||
}
|
||||
function setPublicQuestionCount(n) {
|
||||
return function (e) { setPQC(n) }
|
||||
}
|
||||
|
||||
function setPublicQuestionCountRelative(n) {
|
||||
return function (e) { setPQC(pqc + n) }
|
||||
}
|
||||
|
||||
$('#refresh-data').on('click',getdata)
|
||||
$('#make-private').on('click',setPublicQuestionCount(null))
|
||||
$('#make-public').on('click',setPublicQuestionCount(0))
|
||||
$('#set-question-begin').on('click',setPublicQuestionCount(0))
|
||||
$('#set-question-decrement').on('click',setPublicQuestionCountRelative(-1))
|
||||
$('#set-question-increment').on('click',setPublicQuestionCountRelative(+1))
|
||||
$('#set-question-end').on('click',setPublicQuestionCount(qCount))
|
||||
getdata()
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user