From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 1 Aug 2023 15:06:46 +0000 (+0200)
Subject: wip #6182 @6:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=473ed0712e9982677609d2cf336d75b2633bbc11;p=fluidbook-toolbox.git

wip #6182 @6:00
---

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index 0041f60bc..48912a7a6 100644
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -3,6 +3,7 @@ import gsap from "gsap";
 import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 import lottie from "lottie-web";
+import SplitType from 'split-type'
 
 
 import QuizResize from "./quiz.resize";
@@ -56,7 +57,31 @@ Quiz.prototype = {
             $this.next();
         })
 
-        console.log(quiz.score)
+        let title = new SplitType("#welcome h2", { types: 'words, chars' })
+        let text = new SplitType("#welcome p", { types: 'words, chars' })
+
+        gsap.from(title.words, {
+            opacity: 0,
+            y: 20,
+            duration: 1,
+            stagger: 0.05,
+            onStart: () => {
+                $(title.elements).removeClass("none")
+            }
+        })
+
+        gsap.to(text.words, {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            ease: "power1.inOut",
+            stagger: {
+                amount: 0.2
+            },
+            onStart: () => {
+                $(text.elements).removeClass("none")
+            }
+        })
     },
 
     updateIcons: function () {
diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index d4c2c2004..2ec7f9b7d 100644
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -15,8 +15,8 @@
         @content
 
 
-@mixin opacity($rule: background-color)
-    #{$rule}: #{$texts-color}2f
+@mixin opacity($opacity, $rule: background-color)
+    #{$rule}: rgba($texts-color,$opacity)
 
 
 @mixin flex-config($justify-content: false, $flex: false, $flex-direction: false, $align-items: false)
diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index 26ae0e899..445e7dc35 100644
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -35,19 +35,20 @@ body
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
         box-shadow: 0 4px 6px rgba(0,0,0,.2)
     &.secondary
-        +opacity()
+        +opacity(.16)
         padding-left: 22px
     &.reset
         max-width: 144px
     &.info
         max-width: 177px
-    .access
-        border-radius: 4px
-        padding: 6px 12px
-        +font-size(16)
-        +opacity()
-        text-transform: uppercase
-        margin-left: 16px
+
+.access
+    border-radius: 4px
+    padding: 6px 12px
+    +font-size(16)
+    +opacity(.16)
+    text-transform: uppercase
+    margin-left: 16px
 
 .screen
     position: relative
diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass
index 5db18e7d4..40fae6524 100644
--- a/resources/quizv2/style/101-header-footer.sass
+++ b/resources/quizv2/style/101-header-footer.sass
@@ -20,7 +20,7 @@ header,
         width: 16px
         height: 4px
         border-radius: 100px
-        +opacity()
+        +opacity(.16)
         display: inline-flex
         &:not(:last-of-type)
             margin-right: 7px
diff --git a/resources/quizv2/style/102-intro.sass b/resources/quizv2/style/102-intro.sass
index d68a01d9b..f6d3b3221 100644
--- a/resources/quizv2/style/102-intro.sass
+++ b/resources/quizv2/style/102-intro.sass
@@ -5,5 +5,12 @@
     h2
         margin: 0 0 12px
         +font-size(20)
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
+
     p
         +font-size(16)
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
+
+        .word
+            opacity: 0
+            transform: translateY(100px)
diff --git a/resources/quizv2/style/103-question-multiple.sass b/resources/quizv2/style/103-question-multiple.sass
new file mode 100644
index 000000000..18aa697ab
--- /dev/null
+++ b/resources/quizv2/style/103-question-multiple.sass
@@ -0,0 +1,14 @@
+.question-multiple
+    top: 93px
+    .list
+        display: grid
+        grid-template-columns: repeat(2, 1fr)
+        grid-gap: 16px
+        &-item
+            width: 100%
+            height: 58px
+            @extend .radius
+            background-color: $neutral-color
+            +flex-config(space-between,false,false,center)
+            padding: 0 16px
+            cursor: pointer
diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index b40d11bcc..b65a3b214 100644
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -6,3 +6,4 @@
 @import 100-global
 @import 101-header-footer
 @import 102-intro
+@import 103-question-multiple
diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index 7ab6c34ff..ae666d9e5 100644
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -11,14 +11,17 @@
 </head>
 <body>
 @include("quizv2.sprite")
-@php($totalQuestion = sizeof($data->questions))
+@php
+    $totalQuestion = sizeof($data->questions);
+    $alphabet = range('A', 'Z');
+@endphp
 <div class="container">
     <div id="quiz">
         @if($data->intro_enable)
             @include('quizv2.screens.intro', ['data'=> $data])
         @endif
         @foreach($data->questions as $key => $question)
-            @include('quizv2.screens.question_'.$question['type'], ['data'=> $question, 'max' => $totalQuestion, 'position' => $key])
+            @include('quizv2.screens.question_'.$question['type'], ['data'=> $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
         @endforeach
     </div>
 </div>
diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php
index 11c599cb2..c5c681100 100644
--- a/resources/views/quizv2/screens/intro.blade.php
+++ b/resources/views/quizv2/screens/intro.blade.php
@@ -5,8 +5,8 @@
 <div class="container-screen active-screen next">
     @include('quizv2.header_title', ['data', $data])
     <div class="screen" id="welcome">
-        <h2>{{$data->intro_title}}</h2>
-        <p>{{$data->intro_text}}</p>
+        <h2 class="none">{{$data->intro_title}}</h2>
+        <p class="none">{{$data->intro_text}}</p>
     </div>
     <div class="screen-image">
         <img src="{{$data->theme->introImage}}">
diff --git a/resources/views/quizv2/screens/question_multiple.blade.php b/resources/views/quizv2/screens/question_multiple.blade.php
index 28c96e1f3..29702f0a3 100644
--- a/resources/views/quizv2/screens/question_multiple.blade.php
+++ b/resources/views/quizv2/screens/question_multiple.blade.php
@@ -1,12 +1,18 @@
 <div class="container-screen none" data-position="{{$position}}">
     @include('quizv2.header_question', ['data' => $data, 'max' => $max, 'position' => $position])
-    <div class="screen" id="question_1">
-        <ul>
-            @foreach($data['answers'] as $answer)
-               <li>{{$answer['answer']}}</li>
+    <form class="screen question-multiple">
+        <ul class="list">
+            @foreach($data['answers'] as $key => $answer)
+               <li class="list-item">
+                    <label for="question-{{$key}}">
+                        {{$answer['answer']}}
+                        <input type="checkbox" name="question-{{$key}}" class="none">
+                    </label>
+                   <span class="access">{{$alphabet[$key]}}</span>
+               </li>
             @endforeach
         </ul>
-    </div>
+    </form>
     <div class="screen-image">
     </div>
     @include('quizv2.footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true])