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";
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) {
},
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
}
})
- //
- // 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
}
</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>