From 21bd798f0fe7399d69bbe3950f883860f6e8adbe Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 10 Aug 2023 16:06:07 +0200 Subject: [PATCH] =?utf8?q?wip=20#6182=20@3:30=20resum=C3=A9=20des=20r?= =?utf8?q?=C3=A9ponses?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- resources/quizv2/js/quiz.js | 58 +++++++++++++++---- resources/quizv2/js/quiz.question.js | 6 +- resources/quizv2/style/105-outro.sass | 5 +- .../views/quizv2/screens/intro.blade.php | 3 +- .../views/quizv2/screens/outro.blade.php | 52 +++++------------ 5 files changed, 70 insertions(+), 54 deletions(-) diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js index d29b1bc47..f4f358951 100644 --- a/resources/quizv2/js/quiz.js +++ b/resources/quizv2/js/quiz.js @@ -4,8 +4,9 @@ import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import {CubeSCORM} from '/application/resources/scorm/scorm'; import lottie from "lottie-web"; import SplitType from 'split-type' -import 'simplebar' +import SimpleBar from 'simplebar' import 'simplebar/dist/simplebar.css' +import Handlebars from "handlebars"; import QuizResize from "./quiz.resize"; import QuizAnimations from "./quiz.animations"; @@ -140,6 +141,7 @@ Quiz.prototype = { const $el = $(".active-screen .btn.action") let status = quiz.score.questionStatus + let currentPosition = quiz.score.lastAnsweredQuestion + 1 quiz.score.updateScore() // if form exist and responses are validated @@ -160,6 +162,10 @@ Quiz.prototype = { // pour récupérer le premier enfant de la nav this.activeNav( (parseInt(this.question.currentPosition())+1) ) this.updateBtnValidation() + // si c'est la dernière question a été validée alors on affiche le résultat au prochain screen + if(this.question.last(currentPosition)) { + this.result() + } }, // @@ -208,20 +214,22 @@ Quiz.prototype = { activeNav: function(position = 1) { const questionStatus = quiz.score.questionStatus const lastAnsweredQuestion = quiz.score.lastAnsweredQuestion - let $el = $(".progress-container .progress-item:nth-child("+position+")") + if($(".active-screen").find(".progress-item").length > 0) { + let $el = $(".progress-container .progress-item:nth-child(" + position + ")") - $(".progress-container .progress-item").removeClass("active") - $el.addClass("active") + $(".progress-container .progress-item").removeClass("active") + $el.addClass("active") - let n = (lastAnsweredQuestion + 1) - let $_el = $(".progress-container .progress-item:nth-child("+n+")") + let n = (lastAnsweredQuestion + 1) + let $_el = $(".progress-container .progress-item:nth-child(" + n + ")") - if(lastAnsweredQuestion > -1) { - if (questionStatus[lastAnsweredQuestion].ok === 'ok') { - $_el.addClass("ok") - } - if (questionStatus[lastAnsweredQuestion].ok === 'nok') { - $_el.addClass("nok") + if (lastAnsweredQuestion > -1) { + if (questionStatus[lastAnsweredQuestion].ok === 'ok') { + $_el.addClass("ok") + } + if (questionStatus[lastAnsweredQuestion].ok === 'nok') { + $_el.addClass("nok") + } } } }, @@ -260,7 +268,33 @@ Quiz.prototype = { let maxScore = quiz.score.maxScore, score = quiz.score.score + let status = quiz.score.questionStatus + let reviewList = this.question.getAll(); + + reviewList = reviewList.map((c,i) => { + return { + 'question': c['question'], + 'answers': c['answers'].filter((c) => { + return c['correct'] === 1 + }), + 'status': status[i].ok + } + }) + let $ul = $("#answers-list") + + $("[id^=score-]").text(score) + $("[id^=maxScore-]").text(maxScore) + + Handlebars.registerHelper("inc", (value) => { return parseInt(value) + 1; }); + + const source = $("#template").html(); + const template = Handlebars.compile(source); + const html = template({reviewList: reviewList}); + $ul.html(html) + // mise en place de la scrollbar personnalisé + // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar + const simpleBar = new SimpleBar($ul.get(0)) } } diff --git a/resources/quizv2/js/quiz.question.js b/resources/quizv2/js/quiz.question.js index 78aa33a2d..f659d07e0 100644 --- a/resources/quizv2/js/quiz.question.js +++ b/resources/quizv2/js/quiz.question.js @@ -9,7 +9,7 @@ QuizQuestion.prototype = { }, getAll: function() { - return this.quiz.questions + return this.quiz.data.questions }, byPosition: function(pos) { @@ -25,6 +25,10 @@ QuizQuestion.prototype = { return this.byPosition(currentPosition) }, + last: function(position) { + return this.quiz.data.questions.length === parseInt(position) + }, + getFormData: function(responses) { // }, diff --git a/resources/quizv2/style/105-outro.sass b/resources/quizv2/style/105-outro.sass index 4b7b6d35c..97ff0eb44 100644 --- a/resources/quizv2/style/105-outro.sass +++ b/resources/quizv2/style/105-outro.sass @@ -79,6 +79,7 @@ .item padding-left: 20px margin-bottom: 22px + position: relative * +font-size(14) &:after @@ -92,13 +93,13 @@ &.ok // &:after - background: $ok-color + background-color: $ok-color .position color: $ok-color &.nok // &:after - background: $nok-color + background-color: $nok-color .position color: $nok-color diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php index b0c036b27..bed0379da 100644 --- a/resources/views/quizv2/screens/intro.blade.php +++ b/resources/views/quizv2/screens/intro.blade.php @@ -1,8 +1,7 @@ @php $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL(); @endphp - -
+