},
}
-module.exports = QuizAccessibility;
+export default QuizAccessibility;
}
-module.exports = QuizAnimations;
+export default QuizAnimations;
import QuizAccessibility from './quiz.accessibility';
import QuizUtils from './quiz.utils';
import QuizScreens from './quiz.screens';
+import QuizProgressbar from "./quiz.progressbar";
window.cubeSCORM = new CubeSCORM();
window.$ = window.jQuery = $;
this.utils = new QuizUtils(this);
this.accessibility = new QuizAccessibility(this);
this.screens = new QuizScreens(this);
+ this.progressbar=new QuizProgressbar(this);
// Ici seront injectées dans this.data toutes les données du quiz et du thème pour qu'elles soient disponibles
// dans l'object à tout moment
console.log(this.data.theme)
this.timeoutAnimation = false
-
- // commencer
- $(document).on("click", "#start", function () {
- $this.start()
- })
-
//
$("#quiz").css("background-image", "url(" + this.data.theme.backgroundImage + ")")
gsap.to($(this), {scale: 1, duration: .2});
})
- //
- this.activeNav()
- },
-
- start: function () {
- const $this = this
- gsap.timeline().to("#welcome-screen", {
- opacity: 0,
- onComplete: function () {
- let responses = $this.responses
- $this.next(responses);
- $("#welcome-screen").removeClass("next active-screen").addClass("none").next(".container-screen").removeClass("none").addClass("next active-screen")
- }
- })
+ this.progressbar.update();
},
updateIcons: function () {
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[this.question.currentPosition()].ok === "not answered") {
- 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.screens.outro.show();
- }
- },
-
- // 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)
- }
- }
- },
-
-
restart: function () {
}
--- /dev/null
+function QuizProgressbar(quiz) {
+ this.quiz = quiz;
+}
+
+QuizProgressbar.prototype = {
+ update: 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")
+ }
+ }
+ }
+ },
+}
+
+export default QuizProgressbar;
\ No newline at end of file
},
}
-module.exports = QuizQuestion;
+export default QuizQuestion;
},
}
-module.exports = QuizResize;
+export default QuizResize;
},
};
-module.exports = QuizScore;
+export default QuizScore;
QuizScorm.prototype = {};
-module.exports = QuizScorm;
+export default QuizScorm;
import gsap from "gsap";
import SplitType from 'split-type';
-function QuizScreenIntro(quiz) {
- this.quiz = quiz;
+function QuizScreenIntro(screens) {
+ this.quiz = screens.quiz;
+ this.screens = screens;
}
QuizScreenIntro.prototype = {
show: function () {
- console.log(':)');
+ let $this = this;
+
$("#welcome-screen").addClass('active-screen next').removeClass('none');
this.animate();
+
+ $(document).on("click", "#start", function () {
+ $this.screens.gotoQuestion(1);
+ return false;
+ });
},
animate: function () {
+import gsap from "gsap";
+
import QuizScreenIntro from './quiz.screen.intro';
import QuizScreenOutro from "./quiz.screen.outro";
function QuizScreens(quiz) {
this.quiz = quiz;
- this.intro = new QuizScreenIntro(quiz);
- this.outro = new QuizScreenOutro(quiz);
+ this.intro = new QuizScreenIntro(this);
+ this.outro = new QuizScreenOutro(this);
}
-QuizScreens.prototype = {};
+QuizScreens.prototype = {
+ gotoQuestion: function (question) {
+ const $this = this;
+ let callback = function () {
+ let responses = $this.quiz.responses
+ $this.next(responses);
+ }
+
+ let screen;
+ if (question == 1) {
+ screen = $("#welcome-screen");
+ }
+
+ this.hideScreen(screen, callback);
+ },
+
+ 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")
+
+ this.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[this.question.currentPosition()].ok === "not answered") {
+ 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.quiz.progressbar.update((parseInt(this.quiz.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.quiz.question.last(currentPosition)) {
+ this.outro.show();
+ }
+ },
+
+
+ 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)
+ },
+
+ animationValidation: function (status) {
+ let selector = $("#anim")
+ let text = status === "NOK" ? "Not quite" : "Perfect"
+ let $this = this
+ this.quiz.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);
+ }
+ },
+
+
+ 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
+ }
+ },
+
+
+
+ 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)
+ }
+ }
+ },
+
+
+ hideScreen: function (screen, callback) {
+ let cb = function () {
+ $(screen).removeClass("next active-screen").addClass("none");
+ //next(".container-screen").removeClass("none").addClass("next active-screen");
+ callback();
+ };
+
+ if (this.quiz.utils.isVisible(screen)) {
+ gsap.timeline().to("#welcome-screen", {
+ autoAlpha: 0, onComplete: function () {
+ cb();
+ }
+ })
+ } else {
+ cb();
+ }
+ },
+};
export default QuizScreens;
\ No newline at end of file
}
}
-module.exports = QuizUtils;
\ No newline at end of file
+export default QuizUtils;
\ No newline at end of file
projects / fluidbook-toolbox-quiz.git / commitdiff