wip #6182 @3:30 resumé des réponses

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index d29b1bc47412773b3d8daa16b5c4dc23f447c6bf..f4f358951183ac7883c550e01d7415c57ca4d2f4 100644 (file)
--- 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 78aa33a2d2ae920dc94a10cc462dc90a6c4840c4..f659d07e05fddaa8e2224f047ad3b88601bb66b0 100644 (file)
--- 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 4b7b6d35ca5d7d41e51a0d0be94745b4d204c3b7..97ff0eb446701d20af851f4b20edfb95215fc572 100644 (file)
--- 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 b0c036b27f5bc106e107bb97f865da06ab9b9d18..bed0379da774d5c12a1e81ec60d826cafb712a1d 100644 (file)
--- 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
-<!--<div class="container-screen active-screen next">-->
-<div class="container-screen none">
+<div class="container-screen active-screen next">
     @include('quizv2.header_title', ['data', $data])
     <div class="screen" id="welcome">
         <h2 class="none">{{$data->intro_title}}</h2>

diff --git a/resources/views/quizv2/screens/outro.blade.php b/resources/views/quizv2/screens/outro.blade.php
index 2df72921de5f2edd7a0c8b31ec70a17eab4f804c..e289f90427ddeaa69ae5817c95e3d6bac40581cd 100644 (file)
--- a/resources/views/quizv2/screens/outro.blade.php
+++ b/resources/views/quizv2/screens/outro.blade.php
@@ -1,4 +1,4 @@
-<div class="container-screen active-screen">
+<div class="container-screen none">
     @include('quizv2.header_title', ['data', $data])
     <div class="screen score" id="score">
         <div class="score-content">
@@ -35,42 +35,20 @@
         <div class="score-answers-review">
             <h2>Answers review</h2>
             <p class="subtitle">Review your answers before you go</p>
-            <ul id="answers-list" data-simplebar>
-                <li class="item">
-                    <p class="position">Question 1</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 2</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 3</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 4</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 5</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 6</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
-                <li class="item">
-                    <p class="position">Question 7</p>
-                    <p class="question">Which of the following definitions best characterizes drive ?</p>
-                    <p class="answer">Pushing others to get results</p>
-                </li>
+            <ul id="answers-list">
+                @verbatim
+                <script id="template" type="text/x-handlebars-template">
+                    {{#each reviewList}}
+                        <li class="item {{this.status}}">
+                            <p class="position">Question {{inc @index}}</p>
+                            <p class="question">{{this.question}}</p>
+                            {{#each this.answers}}
+                                <p class="answer">{{this.answer}}</p>
+                            {{/each}}
+                        </li>
+                    {{/each}}
+                </script>
+                @endverbatim
             </ul>
         </div>
     </div>