function QuizDragAndDrop(quiz) {
this.quiz = quiz;
- this.activeScreen = $(".active-screen")
- this.list = this.activeScreen.find(".list")
- this.listHtml = this.list.html()
- this.zone1 = this.activeScreen.find(".zone-1 .zone-content")
- this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
- this.htmlZone1 = this.zone1.html()
- this.htmlZone2 = this.zone2.html()
- this.init()
+ this.animating = false;
+ this.init();
}
QuizDragAndDrop.prototype = {
init: function () {
+ const $this = this;
gsap.registerPlugin(InertiaPlugin);
gsap.registerPlugin(Draggable);
+
+ $(document).on("click", ".move-card", function () {
+ let move = $(this).attr("aria-keyshortcuts"), zone = false;
+
+ if (move === "ARROWLEFT") {
+ zone = $this.zone1
+ } else {
+ zone = $this.zone2
+ }
+
+ $this.sendCurrentAnswerToArea(zone);
+ });
},
start: function () {
- const $this = this
- this.isMobile = this.quiz.resize.isMobile()
+
this.activeScreen = this.quiz.screens.getActiveScreen()
this.list = this.activeScreen.find(".list")
this.listHtml = this.list.html()
this.offsetLeftItemDragged = 0
this.offsetRightItemDragged = 0
- $(document).on("click", ".move-card", function () {
- let move = $(this).attr("aria-keyshortcuts"),
- zone = false;
-
- if (move === "ARROWLEFT") {
- zone = $this.zone1
- } else {
- zone = $this.zone2
- }
-
- $this.sendCurrentAnswerToArea(zone);
- });
-
- this.retreiveAnswer()
+ this.initQuestion();
},
sendCurrentAnswerToArea: function (area) {
+ if (this.animating === true) {
+ return;
+ }
+ this.animating = true;
const $this = this;
const current = this.activeScreen.find(".list-item:first-child");
$(current).addClass('isDragging').removeClass('isNext').css('transform', 'scale(1)');
}
if (this.quiz.resize.isMobile()) {
rules = {
- scale: 0.8,
- duration: .3,
- autoAlpha: 0,
+ scale: 0.8, duration: .3, autoAlpha: 0,
}
}
gsap.timeline()
.to(current, {
- ...rules,
- onStart: function () {
+ ...rules, onStart: function () {
current.addClass("isValidated")
gsap.set(current.next(), {opacity: 1})
- },
- onComplete: function () {
+ }, onComplete: function () {
$this.slapping(area, current)
}
})
.to(".list .overlay", {
- y: -heightTarget,
- opacity: 0,
- onStart: function () {
- if(current.next('.list-item').length===0){
- console.log(':)');
- $this.toggleScreen(0, "none");
- }else {
+ y: -heightTarget, opacity: 0, onStart: function () {
+ if (current.next('.list-item').length === 0) {
+ $this.quiz.screens.toggleScreen(0, "none");
+ } else {
current.next('.list-item').addClass("isNext")
}
}
}, "<")
.to(".list .overlay", {
- y: 0,
- opacity: 1,
- duration: 0
+ y: 0, opacity: 1, duration: 0
}, "+=0.3")
+ .then(function () {
+ $this.animating = false;
+ });
}
},
+ reset: function () {
+ this.initQuestion();
+ this.quiz.screens.toggleScreen(1, 'all');
+ },
+
createDraggable: function ($this) {
Draggable.create($this.item, {
- type: $this.isMobile ? "y" : "x,y",
+ type: $this.quiz.resize.isMobile() ? "y" : "x,y",
edgeResistance: 0.2,
inertia: false,
bounds: "#quiz",
// fix bug scale !important from css
gsap.to(this.target, {
- scale: 1,
- duration: 0,
- immediateRender: true
+ scale: 1, duration: 0, immediateRender: true
})
//set rotation on desktop
- if (!$this.isMobile) {
+ if (!$this.quiz.resize.isMobile()) {
$this.rotateItem(this, direction)
}
//
if (!$this.getZoneOverlap(this.target)) {
gsap.to(this.target, {
- x: 0,
- y: 0,
+ x: 0, y: 0,
})
}
let text = target.find('p').text();
let id = "answer-" + target.data("id");
- if (!this.isMobile) {
+ if (!this.quiz.resize.isMobile()) {
$(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>" + text + "</p>").attr('data-order', target.data("id"))
}
target.remove()
},
- toggleScreen: function (opacity, pointer) {
- gsap.to(".active-screen .screen", {
- opacity: opacity,
- pointerEvents: pointer
- })
- },
-
getZoneOverlap: function (target) {
let zone = false
var rectSelection = target.getBoundingClientRect();
[].forEach.call(document.querySelectorAll(".zone-content"), function (div) {
var rect = div.getBoundingClientRect();
- if (rect.bottom > rectSelection.top
- && rect.right > rectSelection.left
- && rect.top < rectSelection.bottom
- && rect.left < rectSelection.right) {
+ if (rect.bottom > rectSelection.top && rect.right > rectSelection.left && rect.top < rectSelection.bottom && rect.left < rectSelection.right) {
div.classList.add("active")
} else {
div.classList.remove("active")
getSlotInformations: function (zone) {
let x = ($(zone).find(".slot:not(.active)").offset().left - this.list.offset().left),
y = ($(zone).find(".slot:not(.active)").offset().top - this.list.offset().top),
- w = $(zone).find(".slot").innerWidth(),
- h = $(zone).find(".slot").innerHeight(),
- el = $(zone).find(".slot")
+ w = $(zone).find(".slot").innerWidth(), h = $(zone).find(".slot").innerHeight(), el = $(zone).find(".slot")
return {"x": x, "y": y, "w": w, "h": h, "el": el}
},
- retreiveAnswer: function () {
+ initQuestion: function () {
//
const htmlList = this.quiz.draganddrop.listHtml
const htmlZone1 = this.quiz.draganddrop.htmlZone1
getFormData: function (responses) {
//
},
-
- isDragAndDrop: function() {
- return $(".active-screen").find(".question-draganddrop").length
- }
}
export default QuizQuestion;
const $this = this;
// Réinitialiser les réponses
$(document).on("click", ".btn.reset", function () {
- $this.resetForm(false);
+ $this.resetForm();
});
// Préparer les réponses du joueur dans l'objet this.responses
$(document).on("click", ".next .action", function () {
console.log("countdown_enable", parseInt($this.quiz.question.current().countdown_enable))
console.log("intervalCountDown", $this.intervalCountDown)
- if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable))
- || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
+ if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
alert('Please select at least one answer');
return false;
}
$this.nextQuestion();
}
});
- },
- instantReview: function (review) {
+ }, instantReview: function (review) {
this.quiz.progressbar.update();
this.quiz.animations.instantReviewAnimation(review.ok === 'ok' ? 'OK' : 'NOK');
}
$this.activeScreen = screenToShow;
+ if ($this.getActiveScreenType() === 'draganddrop') {
+ $this.quiz.draganddrop.start()
+ }
+
//
$this.animateContent(screenToShow);
+
+
// Reset form to prevent browser letting a option selected after a refresh
$this.resetForm();
$this.currentQuestionAnswers = [];
$this.quiz.progressbar.update();
- if($this.quiz.question.isDragAndDrop()) {
- $this.quiz.draganddrop.start()
- }
if (screen === 'outro') {
$this.outro.show();
});
},
- animateContent: function(screenToShow) {
+ animateContent: function (screenToShow) {
const $this = this
$this.timeline = gsap.timeline();
- if(screenToShow.find(".header-question").length > 0) {
+ if (screenToShow.find(".header-question").length > 0) {
//
$this.timeline.to(screenToShow, {
autoAlpha: 1
}).to(".active-screen .header-question *", {
- opacity: 1,
- duration: .5
+ opacity: 1, duration: .5
})
//
- if($this.quiz.question.isDragAndDrop()) {
+ if ($this.getActiveScreenType() === 'draganddrop') {
$this.quiz.animations.animateDragAndDropCarrousel($this.timeline)
- }else {
+ } else {
$this.quiz.animations.setAnimItemMultiple($this.timeline)
}
//
$this.timeline.to(".active-screen .footer-question", {
- y: 0,
- duration: 1,
- opacity: 1,
- ease: "circ.out",
- onComplete: function () {
+ y: 0, duration: 1, opacity: 1, ease: "circ.out", onComplete: function () {
// if countdown enable we launch it
if ($this.quiz.question.current() !== undefined) {
if (parseInt($this.quiz.question.current().countdown_enable)) {
}
}
}, 1.4)
- }else {
+ } else {
gsap.to(screenToShow, {
autoAlpha: 1
})
}
},
+ toggleScreen: function (opacity, pointer) {
+ gsap.to(".active-screen .screen", {
+ opacity: opacity, pointerEvents: pointer
+ })
+ },
+
getCurrentForm: function () {
return this.getActiveScreen().find('form');
},
resetForm: function (only = true) {
- this.getCurrentForm().find("input").prop("checked", false)
- if(!only) {
- if(this.quiz.question.isDragAndDrop()) {
- this.quiz.draganddrop.toggleScreen(1,"initial")
- this.quiz.draganddrop.retreiveAnswer()
- }
+ let type = this.getActiveScreenType();
+ if (type === 'multiple') {
+ this.getCurrentForm().find("input").prop("checked", false)
+ } else if (type === 'draganddrop') {
+ this.quiz.draganddrop.reset();
}
},
return this.activeScreen;
},
+ getActiveScreenType: function () {
+ return this.getActiveScreen().attr('data-type');
+ },
+
/**
* Si un écran est affiché, on le masque puis on exécute le callback. Sinon, on exécute immédiatement le callback
* @param callback
}
},
- countdown: function() {
+ countdown: function () {
const $this = this;
- const time = this.quiz.question.current().countdown_time*1000
+ const time = this.quiz.question.current().countdown_time * 1000
let value = 100
clearTimeout($this.runningManTimeout)
this.intervalCountDown = setInterval(function () {
value -= (10 / time) * 100
document.documentElement.style.setProperty("--width-bg-countdown", value + "%")
- if(value <= 0) {
+ if (value <= 0) {
clearInterval($this.intervalCountDown)
$this.intervalCountDown = 0;
$this.currentQuestionAnswers = []
}, 10)
},
- resetCountdownBackground: function() {
+ resetCountdownBackground: function () {
document.documentElement.style.setProperty("--width-bg-countdown", "100%")
},
};
@php
$absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
@endphp
-<div class="container-screen none" data-screen="welcome">
+<div class="container-screen none" data-type="intro" data-screen="welcome">
@include('header_title', ['data', $data])
<div class="screen" id="welcome">
<h2>{{$data->intro_title?:$__('Welcome')}}</h2>
-<div class="container-screen none" data-screen="outro">
+<div class="container-screen none" data-type="outro" data-screen="outro">
@include('header_title', ['data', $data])
<div class="screen score" id="score">
<div class="score-content">
<span class="score-text" id="score-counter">0</span>
<span class="score-text">/</span>
<span class="score-text" id="maxScore-counter">8</span>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="SCORE" x="0px" y="0px" viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;" xml:space="preserve">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+ id="SCORE" x="0px" y="0px" viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;"
+ xml:space="preserve">
<style type="text/css">
- .st0{opacity:0.16;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;enable-background:new ;}
- .st1{fill:none;stroke-linecap:round;stroke-miterlimit:10;}
+ .st0 {
+ opacity: 0.16;
+ fill: none;
+ stroke: #FFFFFF;
+ stroke-miterlimit: 10;
+ enable-background: new;
+ }
+
+ .st1 {
+ fill: none;
+ stroke-linecap: round;
+ stroke-miterlimit: 10;
+ }
</style>
<circle id="circle" class="st0" cx="74" cy="74" r="70"/>
<circle id="progress-circle" class="st1" cx="74" cy="74" r="70" stroke="currentColor"/>
</div>
<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>
+ <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
-<div class="container-screen none question-draganddrop" data-screen="q-{{$position}}">
+<div class="container-screen none question-draganddrop" data-type="draganddrop" data-screen="q-{{$position}}">
@include('screens.question_draganddrop_area',['area'=>1,'question'=>$question,'theme'=>$theme])
@include('header_question', ['question' => $question, 'data' => $data, 'max' => $max, 'position' => $position])
<div class="screen question-draganddrop">
$propositions = [...$additional_prop,...$propositions];
@endphp
-<div class="container-screen none question-match" data-screen="q-{{$position}}">
+<div class="container-screen none question-match" data-type="match" data-screen="q-{{$position}}">
@include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
<div class="screen">
-<div class="container-screen none" data-screen="q-{{$position}}">
+<div class="container-screen none" data-screen="q-{{$position}}" data-type="multiple">
@include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
<div class="screen question-multiple">
<form id="form-{{$position}}">
projects / fluidbook-toolbox-quiz.git / commitdiff