From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 21 Aug 2023 15:14:04 +0000 (+0200)
Subject: Merge branch 'mobile' of git.cubedesigners.com:fluidbook-toolbox-quiz into mobile... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=162c7a2894d4b7069acddc290e9c12c2fcee4020;p=fluidbook-toolbox-quiz.git

Merge branch 'mobile' of git.cubedesigners.com:fluidbook-toolbox-quiz into mobile-master

# Conflicts:
#	js/quiz.js
#	js/quiz.question.js
#	style/102-intro.sass
#	views/footer.blade.php
---

162c7a2894d4b7069acddc290e9c12c2fcee4020
diff --cc js/quiz.js
index ec114b4,1ba8e34..ace99fc
--- a/js/quiz.js
+++ b/js/quiz.js
@@@ -47,8 -46,16 +47,11 @@@ Quiz.prototype = 
          console.log(this.data.theme)
  
          this.timeoutAnimation = false
+         this.intervalCountDown = false
+         this.timeoutCountdown = false
+ 
 -        // commencer
 -        $(document).on("click", "#start", function() {
 -            $this.start()
 -        })
 -
          //
 -        $("#quiz").css("background-image","url("+this.data.theme.backgroundImage+")")
 +        $("#quiz").css("background-image", "url(" + this.data.theme.backgroundImage + ")")
  
          // La fonction resize est appelée à chaque fois qu'un resize de la fenêtre survient (et à l'init de l'app)
          $(window).on('resize', function () {
@@@ -85,7 -174,210 +88,26 @@@
          this.resize.resize();
      },
  
 -    next: function (responses) {
 -        // on arrête l'animation si le joueur passe à la question suivante
 -        this.stopAnimationValidation()
 -
 -        let status = quiz.score.questionStatus
 -        let currentPosition = quiz.score.lastAnsweredQuestion + 1
 -
 -        const $el = $(".active-screen .btn.action")
 -
 -        quiz.score.updateScore()
 -        // if form exist and responses are validated
 -        // dont miss to add this second condition
 -        if($(".active-screen form").length > 0) {
 -            if(status.length > 0) {
 -                if(status[$(".active-screen").data("position")].ok === "not answered") {
 -                    clearInterval(this.intervalCountDown)
 -                    clearTimeout(this.timeoutCountdown)
 -                    this.validateResponse(responses);
 -                    this.updateBtnValidation("validated")
 -                    return false
 -                }
 -            }
 -        }
 -
 -        $el.parents(".container-screen").addClass("none").removeClass("next active-screen").next(".container-screen").removeClass("none").addClass("next active-screen")
 -        this.resetForm()
 -        // on incrémente de 1 la position actuelle de la question (qui commence à l'index zero)
 -        // 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()
 -        }else {
 -            this.countdown(responses)
 -        }
 -    },
 -
 -    // marque page automatique
 -    // si le joueur recharge la page, le rediriger là où il en était
 -    setDisplay: function() {
 -        const   currentQuestion = quiz.score.lastAnsweredQuestion + 1,
 -            questions = this.quiz.questions
 -
 -        if(questions.length > 0) {
 -            if (quiz.score.lastAnsweredQuestion > -1 && questions.length <= currentQuestion) {
 -                //
 -            }
 -        }
 -    },
 -
 -    resetForm: () => {
 -        $("form").find("input").prop("checked", false)
 -    },
 -
 -    updateBtnValidation: function(status) {
 -        let $btnAction = $(".footer-question .action"),
 -            validationText = $btnAction.data("validation-text"),
 -            continueText = $btnAction.data("continue-text")
 -
 -        $btnAction.find('.text').text(status === "validated" ? continueText : validationText)
 -    },
 -
 -    validateResponse: function(responses) {
 -        const form = $(".active-screen form")
 -        const activeScreen = $(".active-screen")
 -        const position = activeScreen.data("position")
 -
 -        if(form) {
 -            if(form.length > 0) {
 -                let validated = quiz.score.setAnswer(position,responses);
 -                if(validated.ok === "ok") {
 -                    this.animationValidation("OK")
 -                }else {
 -                    this.animationValidation("NOK")
 -                }
 -                this.resultAfterValidation(validated.status[position].answers)
 -            }
 -            return false
 -        }
 -    },
 -
 -    activeNav: function(position = 1) {
 -        const questionStatus = quiz.score.questionStatus
 -        const lastAnsweredQuestion = quiz.score.lastAnsweredQuestion
 -        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")
 -
 -            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")
 -                }
 -            }
 -        }
 -    },
 -
 -    animationValidation: function(status) {
 -        let selector = $("#anim")
 -        let text = status === "NOK" ? "Not quite" : "Perfect"
 -        let $this = this
 -        this.animations.load(status, selector, {'\\$text': text});
 -        selector.addClass("active")
 -        this.timeoutAnimation = setTimeout(function(e){
 -            $this.stopAnimationValidation()
 -        }, 10000)
 -    },
 -
 -    stopAnimationValidation: function() {
 -        $("#anim").removeClass("active").empty()
 -        if(this.timeoutAnimation)
 -            clearTimeout(this.timeoutAnimation)
 -    },
 -
 -    resultAfterValidation: function(datas) {
 -        for(let k in datas) {
 -            let n = (parseInt(k) + 1)
 -            let icon = getSpriteIcon("quiz-ok")
 -            let $el = $(".active-screen .question-multiple .list-item:nth-of-type("+n+") label")
 -            $el.addClass(datas[k])
 -            if(datas[k] === "nok") {
 -                icon = getSpriteIcon("quiz-wrong")
 -            }
 -            if(datas[k] !== "neutral") {
 -                $el.find(".access").addClass(datas[k]).html(icon)
 -            }
 -        }
 -    },
 -
 -    result: function() {
 -        let maxScore = quiz.score.maxScore,
 -            score = quiz.score.score
 -
 -        let status = quiz.score.questionStatus
 -        let reviewList = this.question.getAll();
 -
 -        const counter = $("#progress-counter")
 -        if(score < (maxScore / 2)) {
 -            counter.addClass("nok")
 -        }else if(score >= (maxScore / 2)) {
 -            counter.addClass("ok")
 -        }
 -
 -        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 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)
 -
 -        // mise en place de la scrollbar personnalisé
 -        // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
 -        const simpleBar = new SimpleBar($ul.get(0))
 -    },
 -
+     countdown: function(res) {
+         const time = this.question.current().countdown_time*1000
+         if(this.question.current().countdown_enable) {
+             let value = 100
+             let this_ = this
+             this.intervalCountDown = setInterval(function () {
+                 value -= (10 / time) * 100
+                 document.documentElement.style.setProperty("--width-bg-countdown", value + "%")
+             }, 10)
+ 
+             this.timeoutCountdown = setTimeout(function () {
+                 clearInterval(this_.intervalCountDown)
+                 this_.validateResponse(res);
+                 this_.updateBtnValidation("validated")
+                 return false
+             }, time)
+         }
+     },
+ 
 -    restart: function() {
 +    restart: function () {
  
      }
  }