]> _ Git - fluidbook-toolbox-quiz.git/commitdiff
wip #6385 @0.25
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 11 Oct 2023 12:25:26 +0000 (14:25 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 11 Oct 2023 12:25:26 +0000 (14:25 +0200)
js/quiz.screen.outro.js
views/screens/outro.blade.php

index 89781352375a6a1304dcedd37b293dae72363a9f..f1d7342652725e1e6dd5bb3f51d00818f88c33b8 100644 (file)
@@ -1,7 +1,6 @@
 import gsap from "gsap";
 import SimpleBar from 'simplebar'
 import 'simplebar/dist/simplebar.css'
-import Handlebars from "handlebars";
 import SplitType from 'split-type';
 import {DrawSVGPlugin} from "gsap/DrawSVGPlugin.js";
 
@@ -14,9 +13,13 @@ function QuizScreenOutro(screens) {
 
 QuizScreenOutro.prototype = {
     initEvents: function () {
+        const $this = this;
         $(document).on("click", ".toggle-answers-review", function () {
             $(".score-answers-review_container").toggleClass("active")
-        })
+        });
+        $(document).on('click', '.btn.restart', function () {
+            $this.quiz.restart();
+        });
     },
 
     animate: function (score, percent) {
@@ -141,7 +144,10 @@ QuizScreenOutro.prototype = {
     },
 
     displayReviewList: function () {
-        let $ul = $("#answers-list")
+        let $ul = $("#answers-list");
+        if ($ul.length === 0) {
+            return;
+        }
         let reviewList = this.quiz.question.getAll();
         let status = this.quiz.score.questionStatus
 
@@ -155,20 +161,18 @@ QuizScreenOutro.prototype = {
             }
         })
 
-        //
-        // HANDLEBARS TEMPLATING
-        //
-        // on applique une incrementation de +1
-        // utilisé pour la numérotation des questions
-        Handlebars.registerHelper("inc", (value) => {
-            return parseInt(value) + 1;
-        });
-
-        // on envoie le html avec les nouvelles données
-        const source = $("#template-answers-review").html();
-        const template = Handlebars.compile(source);
-        const html = template({reviewList: reviewList});
-        $ul.html(html)
+        let html = '';
+        for (var i in reviewList) {
+            let review = reviewList[i];
+            html += '<li class="item ' + review.status + '">';
+            html += '<p class="position">' + this.quiz.l10n.__('Question :index', {index: i + 1}) + '</p>';
+            html += '<p class="question">' + review.question + '</p>';
+            for (var j in review.answers) {
+                html += '<p class="answer">' + review.answers[j].answer + '</p>';
+            }
+            html += '</li>';
+        }
+        $ul.html(html);
 
         // mise en place de la scrollbar personnalisé
         // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
index fa5ef9bec8a4c07549af58185087af48cabdc0f3..f21a3b712eacb466e38f4deb2ddde567b912c1ea 100644 (file)
@@ -26,7 +26,8 @@
                                 }
                             </style>
                             <circle id="circle" class="circle" cx="74" cy="74" r="70"/>
-                            <circle id="progress-circle" class="progress-circle" cx="74" cy="74" r="70" stroke="currentColor"/>
+                            <circle id="progress-circle" class="progress-circle" cx="74" cy="74" r="70"
+                                    stroke="currentColor"/>
                         </svg>
                     </div>
                     <div id="anime-result">
             </footer>
         </div>
         @if($data->review !== "never")
-        <div class="score-answers-review_container">
-            <div class="score-answers-review">
-                <h2>{{$__('Answers review')}}
-                    <span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span>
-                </h2>
-                <p class="subtitle">{{$__('Review your answers before you go')}}</p>
-                <ul id="answers-list">
-                    @verbatim
-                        <script id="template-answers-review" 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 class="score-answers-review_container">
+                <div class="score-answers-review">
+                    <h2>{{$__('Answers review')}}
+                        <span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span>
+                    </h2>
+                    <p class="subtitle">{{$__('Review your answers before you go')}}</p>
+                    <ul id="answers-list"></ul>
+                </div>
             </div>
-        </div>
         @endif
     </div>
 </div>