From: soufiane Date: Wed, 9 Aug 2023 18:03:30 +0000 (+0200) Subject: wip #6182 @7:00 outro X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1f19ee3fb65d956de3608a93ef90c487dff96e1e;p=fluidbook-toolbox.git wip #6182 @7:00 outro --- diff --git a/package-lock.json b/package-lock.json index fb59c5417..d78c80297 100644 --- 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 fe25d9daa..fa088366e 100644 --- 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 ea363b85f..d29b1bc47 100644 --- 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 index 000000000..95ad51e25 --- /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 cd1056578..3e9cd8974 100644 --- 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 bed0379da..b0c036b27 100644 --- 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 -