wip #6182 @7:00 outro

diff --git a/package-lock.json b/package-lock.json
index fb59c5417634cdb35ff2c4a187851358663fa5c1..d78c80297f657b001cef56a36cfe79b1845f3ba9 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "application",
+    "name": "fluidbook-toolbox",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -18,6 +18,7 @@
                 "line-awesome": "^1.3.0",
                 "lottie-web": "^5.12.2",
                 "lz4js": "^0.2.0",
+                "malihu-custom-scrollbar-plugin": "^3.1.5",
                 "noty": "^3.2.0-beta-deprecated",
                 "pako": "^2.1.0",
                 "pdfjs-dist": "^3.5.141",
@@ -6475,6 +6476,11 @@
                 "jquery": ">=1.7.2"
             }
         },
+        "node_modules/jquery-mousewheel": {
+            "version": "3.1.13",
+            "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
+            "integrity": "sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg=="
+        },
         "node_modules/jquery.scrollto": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/jquery.scrollto/-/jquery.scrollto-2.1.3.tgz",
@@ -6809,6 +6815,14 @@
                 "semver": "bin/semver.js"
             }
         },
+        "node_modules/malihu-custom-scrollbar-plugin": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/malihu-custom-scrollbar-plugin/-/malihu-custom-scrollbar-plugin-3.1.5.tgz",
+            "integrity": "sha512-lwW3LgI+CNDMPnP4ED2la6oYxWMkCXlnhex+s2wuOLhFDFGnGmQuTQVdRK9bvDLpxs10sGlfErVufJy9ztfgJQ==",
+            "dependencies": {
+                "jquery-mousewheel": ">=3.0.6"
+            }
+        },
         "node_modules/map-obj": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",

diff --git a/package.json b/package.json
index fe25d9daac1db662d3ca1c157902f306c4c9c17c..fa088366eace35531fe9664ef7e96a451ec52800 100644 (file)
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
         "line-awesome": "^1.3.0",
         "lottie-web": "^5.12.2",
         "lz4js": "^0.2.0",
+        "malihu-custom-scrollbar-plugin": "^3.1.5",
         "noty": "^3.2.0-beta-deprecated",
         "pako": "^2.1.0",
         "pdfjs-dist": "^3.5.141",

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index ea363b85f7ba5290907bd5dc6735e92238d80500..d29b1bc47412773b3d8daa16b5c4dc23f447c6bf 100644 (file)
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -4,7 +4,8 @@ import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 import lottie from "lottie-web";
 import SplitType from 'split-type'
-
+import 'simplebar'
+import 'simplebar/dist/simplebar.css'
 
 import QuizResize from "./quiz.resize";
 import QuizAnimations from "./quiz.animations";
@@ -17,6 +18,9 @@ window.$ = window.jQuery = $;
 
 window.key = require('keymaster-reloaded');
 
+import ResizeObserver from 'resize-observer-polyfill';
+window.ResizeObserver = ResizeObserver;
+
 function Quiz() {
 }
 

diff --git a/resources/quizv2/style/105-outro.sass b/resources/quizv2/style/105-outro.sass
new file mode 100644 (file)
index 0000000..95ad51e
--- /dev/null
+++ b/resources/quizv2/style/105-outro.sass
@@ -0,0 +1,138 @@
+.score
+    height: 576px //680(hauteur de base) - 80(hauteur du header) - 24(padding inférieure)
+    +opacity(.48,background-color,$neutral-color)
+    border-radius: 40px
+    overflow: hidden
+    +flex-config(false,false,row,stretch)
+
+    .subtitle
+        +opacity(.8,color,$texts-color)
+
+    &-content
+        flex: 1
+        padding: 24px
+        position: relative
+        h1
+            +font-size(40)
+            margin-bottom: 9px
+        .subtitle
+            +font-size(16)
+    &-content-wrapper
+        +flex-config(false,false,false,center)
+
+    &-counter
+        height: 0
+        padding-bottom: 31%
+        width: 31%
+        max-width: 210px
+        position: relative
+        +font-size(80)
+        margin-right: 60px
+
+        #progress-counter
+            width: 100%
+            height: 100%
+            position: absolute
+            top: 0
+            left: 0
+            border-radius: 100px
+            background: transparent
+            +flex-config(center,false,false,center)
+            svg
+                overflow: visible
+                width: calc(100% - 12px)
+                height: calc(100% - 12px)
+                transform: rotate(-90deg)
+                position: absolute
+                circle
+                    stroke-width: 12px
+                circle:not(#progress-circle)
+                    +opacity(.16,color,$texts-color)
+                circle#progress-circle
+                    color: $ok-color
+                    transition: stroke-dashoffset 0.5s ease-in-out
+
+    &-answers-review
+        width: 36.11111%
+        background-color: $neutral-color
+        padding: 24px 24px 0
+        position: relative
+        h2
+            +font-size(24)
+            margin-bottom: 5px
+        .subtitle
+            +font-size(16)
+            margin-bottom: 22px
+
+        &:after
+            content: ""
+            width: 100%
+            height: 80px
+            position: absolute
+            bottom: 0
+            left: 0
+            background: linear-gradient(to bottom,transparent, rgba($texts-color,.08))
+
+    #answers-list
+        height: 85%
+        padding-right: 24px
+        .item
+            padding-left: 20px
+            margin-bottom: 22px
+            *
+                +font-size(14)
+            &:after
+                content: ""
+                width: 12px
+                height: 12px
+                position: absolute
+                left: 0
+                top: 4px
+                border-radius: 20px
+            &.ok
+                //
+                &:after
+                    background: $ok-color
+                .position
+                    color: $ok-color
+            &.nok
+                //
+                &:after
+                    background: $nok-color
+                .position
+                    color: $nok-color
+
+            .question
+                margin-bottom: 2px
+
+            .answer
+                +opacity(.8,color,$texts-color)
+
+
+    footer
+        position: absolute
+        width: calc(100% - 48px)
+        bottom: 24px
+        .restart-sentence
+            margin-bottom: 14px
+        .controls
+            +flex-config(space-between)
+
+
+    // SimpleBar personalisation
+    .simplebar-wrapper
+        height: 100%
+    .simplebar-track
+        +opacity(.08,background-color,$texts-color)
+        border-radius: 20px
+        &.simplebar-vertical
+            height: 93%
+            width: 5px
+            .simplebar-scrollbar::before
+                background-color: #77679f
+                opacity: 1 !important
+                width: 3px
+                top: 1px
+                bottom: 1px
+                left: 1px
+                right: 1px

diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index cd10565782c8fe02dac2340298f6264f5ff5084a..3e9cd8974de7af531b7b0c2a3664537f190d0170 100644 (file)
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -8,3 +8,4 @@
 @import 102-intro
 @import 103-question-multiple
 @import 104-animations
+@import 105-outro

diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php
index bed0379da774d5c12a1e81ec60d826cafb712a1d..b0c036b27f5bc106e107bb97f865da06ab9b9d18 100644 (file)
--- a/resources/views/quizv2/screens/intro.blade.php
+++ b/resources/views/quizv2/screens/intro.blade.php
@@ -1,7 +1,8 @@
 @php
     $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
 @endphp
-<div class="container-screen active-screen next">
+<!--<div class="container-screen active-screen next">-->
+<div class="container-screen none">
     @include('quizv2.header_title', ['data', $data])
     <div class="screen" id="welcome">
         <h2 class="none">{{$data->intro_title}}</h2>

diff --git a/resources/views/quizv2/screens/outro.blade.php b/resources/views/quizv2/screens/outro.blade.php
index 6d8dc98fe2879df2ce5654ad66623ef82d6e762b..2df72921de5f2edd7a0c8b31ec70a17eab4f804c 100644 (file)
--- a/resources/views/quizv2/screens/outro.blade.php
+++ b/resources/views/quizv2/screens/outro.blade.php
@@ -1,34 +1,76 @@
-<div class="container-screen none">
+<div class="container-screen active-screen">
     @include('quizv2.header_title', ['data', $data])
-    <div class="screen" id="result">
-        <div class="result-content">
-            <div class="result-content-wrapper">
-                <div class="result-counter">
-                    <span id="score-counter"></span>/<span id="maxScore-counter"></span>
-                    <div id="progress-counter"></div>
+    <div class="screen score" id="score">
+        <div class="score-content">
+            <div class="score-content-wrapper">
+                <div class="score-counter">
+                    <div id="progress-counter">
+                        <span id="score-counter">0</span>/<span id="maxScore-counter">0</span>
+                        <svg width="100%" height="100%" id="svg">
+                            <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke="currentColor" />
+                            <circle id="progress-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentColor" />
+                        </svg>
+                    </div>
                 </div>
-                <div class="result-text">
+                <div class="score-text">
                     <h1>Congratulation!</h1>
-                    <p class="above-title">You have completed the quiz with <span id="score-text"></span>
+                    <p class="subtitle">You have completed the quiz<br/> with <span id="score-text"></span>
                         correct answers out of <span id="maxScore-text"></span></p>
                 </div>
             </div>
-            <div class="restart-sentence">Want to improve your score?</div>
             <footer>
-                <a class="btn secondary reset">
-                    Restart
-                    <span class="access">R</span>
-                </a>
-                <a class="btn primary action">
-                    Leave
-                    <span class="access space">space</span>
-                </a>
+                <div class="restart-sentence">Want to improve your score?</div>
+                <div class="controls">
+                    <a class="btn secondary reset">
+                        Restart
+                        <span class="access">R</span>
+                    </a>
+                    <a class="btn primary action">
+                        Leave
+                        <span class="access space">space</span>
+                    </a>
+                </div>
             </footer>
         </div>
-        <div class="result-answers-review">
+        <div class="score-answers-review">
             <h2>Answers review</h2>
-            <p class="above-title"></p>
-            <ul id="answers-list">
+            <p class="subtitle">Review your answers before you go</p>
+            <ul id="answers-list" data-simplebar>
+                <li class="item">
+                    <p class="position">Question 1</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 2</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 3</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 4</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 5</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 6</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
+                <li class="item">
+                    <p class="position">Question 7</p>
+                    <p class="question">Which of the following definitions best characterizes drive ?</p>
+                    <p class="answer">Pushing others to get results</p>
+                </li>
             </ul>
         </div>
     </div>