From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 20 Sep 2023 18:20:41 +0000 (+0200)
Subject: wip #6107 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=764cc1ead8899832b38ce8a4550a2c535c67606f;p=fluidbook-toolbox-quiz.git

wip #6107 @3
---

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 2e5a2bf..e71c82c 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -38,7 +38,6 @@ QuizDragAndDrop.prototype = {
         this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
         this.htmlZone1 = this.zone1.html()
         this.htmlZone2 = this.zone2.html()
-        this.quiz.screens.currentQuestionAnswers = [];
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
@@ -228,11 +227,9 @@ QuizDragAndDrop.prototype = {
                 div.classList.remove("active")
             }
         });
-
         if ($(".zone-content.active").length > 0) {
             zone = $(".zone-content.active").parent().data("zone")
         }
-
         return zone
     },
 
@@ -240,10 +237,11 @@ QuizDragAndDrop.prototype = {
 
         let a = this.getAreaElement(zone);
         let freeSlot = $(a).find('.slot:not(.active)').eq(0);
-        let freeSlotOffset = $(freeSlot).offset();
+        let freeSlotRect = $(freeSlot).get(0).getBoundingClientRect();
+        let listRect = this.list.get(0).getBoundingClientRect();
 
-        let x = (freeSlotOffset.left - this.list.offset().left), y = (freeSlotOffset.top - this.list.offset().top),
-            w = $(a).find(".slot").innerWidth(), h = $(a).find(".slot").innerHeight(), el = $(a).find(".slot")
+        let x = (freeSlotRect.left - listRect.left), y = (freeSlotRect.top - listRect.top),
+            w = freeSlotRect.width, h = freeSlotRect.height, el = $(a).find(".slot")
 
         return {"x": x, "y": y, "w": w, "h": h, "el": el}
     },
@@ -253,6 +251,7 @@ QuizDragAndDrop.prototype = {
     },
 
     initQuestion: function () {
+        this.quiz.screens.currentQuestionAnswers = [];
         //
         const htmlList = this.quiz.draganddrop.listHtml
         const htmlZone1 = this.quiz.draganddrop.htmlZone1
diff --git a/js/quiz.js b/js/quiz.js
index d36ae0d..00ffaf9 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -48,18 +48,12 @@ Quiz.prototype = {
         this.draganddrop = new QuizDraganddrop(this);
         this.match = new QuizMatch(this);
 
-        console.log(this.data);
-        // ICI tout commence vraiment
-        console.log(this.data.theme)
-
-        //
-        $("#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 () {
             $this.quizResize();
         });
         this.quizResize();
+        $('#quiz').addClass('ready');
 
         // Afficher l'écran d'introduction et lancer l'animation
         this.screens.intro.show();
diff --git a/js/quiz.progressbar.js b/js/quiz.progressbar.js
index cf19511..b61df88 100644
--- a/js/quiz.progressbar.js
+++ b/js/quiz.progressbar.js
@@ -5,8 +5,7 @@ function QuizProgressbar(quiz) {
 QuizProgressbar.prototype = {
     update: function () {
         let $this = this;
-        const questionStatus = this.quiz.score.questionStatus
-        console.log(questionStatus);
+        const questionStatus = this.quiz.score.questionStatus;
         $('.progress-container').each(function () {
             let $cont = this;
             $.each(questionStatus, function (questionIndex, status) {
diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index c83ce65..89f9d01 100644
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -8,6 +8,10 @@ QuizResize.prototype = {
         this.hh = $(window).height();
         this.ratio = this.ww / this.hh;
 
+        this.desktopWidth = 1200;
+        this.desktopHeight = 680;
+        this.mobileWidth = 390;
+
         this.updateViewport();
 
         if (this.isMobile()) {
@@ -62,8 +66,25 @@ QuizResize.prototype = {
     updateViewport: function () {
         if (!this.isMobile()) {
             $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, test=yes');
+            let s = 1;
+            let qcss = {};
+            if (this.ww < this.desktopWidth || this.hh < this.desktopHeight) {
+                let sw = this.ww / this.desktopWidth;
+                let sh = this.hh / this.desktopHeight;
+                s = Math.min(sw, sh);
+                qcss.borderRadius = 0;
+            } else {
+                qcss.borderRadius = '';
+            }
+            qcss.transform = 'scale(' + s + ')';
+            qcss.transformOrigin = '0 0 0';
+            qcss.left = (this.ww - (this.desktopWidth * s)) / 2;
+            qcss.top = (this.hh - (this.desktopHeight * s)) / 2;
+            qcss.margin = '';
+            $("#quiz").css(qcss);
         } else {
-            $('meta[name="viewport"]').attr('content', 'width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, test=yes');
+            $('meta[name="viewport"]').attr('content', 'width=' + this.mobileWidth + ', user-scalable=no, initial-scale=1.0, shrink-to-fit=no, test=yes');
+            $("#quiz").css({transform: '', transformOrigin: '', top: '', left: '', margin: '0 auto'});
         }
     },
 
diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass
index 65d5730..e69de29 100644
--- a/style/001-global-variables.sass
+++ b/style/001-global-variables.sass
@@ -1 +0,0 @@
-$screenSizeMobile: 391px
diff --git a/style/003-reset.sass b/style/003-reset.sass
index 45897f9..7786d0c 100644
--- a/style/003-reset.sass
+++ b/style/003-reset.sass
@@ -30,6 +30,10 @@ footer, header, hgroup, menu, nav, section, main
     display: block
 
 
+html, body
+    min-height: 100%
+    height: 100%
+
 body
     line-height: 1
 
diff --git a/style/004-mixins.sass b/style/004-mixins.sass
index bd8e37f..1cb10b7 100644
--- a/style/004-mixins.sass
+++ b/style/004-mixins.sass
@@ -8,13 +8,6 @@
         @content
 
 
-@mixin breakpoint($breakpoint, $direction: min)
-    $breakpoint-values: map-get($breakpoints, $breakpoint)
-    $breakpoint: map-get($breakpoint-values, $direction)
-    @media (#{$direction}-width: $breakpoint)
-        @content
-
-
 @mixin opacity($opacity, $rule: background-color, $color: $texts-color)
     #{$rule}: rgba($color,$opacity)
 
@@ -41,9 +34,7 @@
 
 
 @mixin padding-container()
-    padding: 16px
-    +breakpoint(md)
-        padding: 24px
+    padding: 24px
 
 @mixin radius($size)
     border-radius: $size
diff --git a/style/100-global.sass b/style/100-global.sass
index 55f213e..34b362f 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -8,11 +8,29 @@ body
 [data-icon] svg
     height: 20px
 
-.container
-    +flex-config(center, false, false, center)
-    min-height: 100vh
-
 #quiz
+    opacity: 0
+    transition: opacity 200ms
+
+    &.ready
+        transition: opacity 200ms
+        opacity: 1
+
+    background-color: $background-color
+
+    @if ($background-custom)
+        background-image: url($background-desktop-image)
+        background-repeat: $background-desktop-repeat
+        background-size: $background-desktop-size
+        background-position-x: $background-desktop-position-x
+        background-position-y: $background-desktop-position-y
+
+        .m &
+            background-image: url($background-mobile-image)
+            background-repeat: $background-mobile-repeat
+            background-size: $background-mobile-size
+            background-position-x: $background-mobile-position-x
+            background-position-y: $background-mobile-position-y
 
     min-width: 1200px
     max-width: 1200px
@@ -20,7 +38,6 @@ body
     min-height: 680px
     max-height: 680px
 
-    margin: 0 auto
     +padding-container()
     position: relative
     overflow: hidden
diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index e42c80f..273e409 100644
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -5,8 +5,8 @@
     .list
         display: grid
         grid-gap: 16px
-        +breakpoint(md)
-            grid-template-columns: repeat(2, 1fr)
+        grid-template-columns: repeat(2, 1fr)
+
         &-item
             opacity: 0
             label
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 5dff609..bdeeca6 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -24,11 +24,6 @@
             .zone-content
                 right: 24px
 
-        &.zone-1,
-        &.zone-2
-            &.active
-                .card-holder
-                    +opacity(.2, background-color, $texts-color)
 
         .zone-content
             position: absolute
@@ -38,9 +33,13 @@
             height: 50%
             padding: 0 8px
 
-            transition: background-color .2s ease
+            &.active
+                .card-holder
+                    +opacity(.2, background-color, $texts-color)
+
 
             .card-holder
+                transition: background-color .2s ease
                 +opacity(.08, background-color, $texts-color)
                 +radius(16px)
                 min-height: 196px