wip #6182 @7:00

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index c3d668d2a1f57c7cba4f7b3f09d93a18ab8d550c..0041f60bc868c3af7faadfce2d067c45cfd90344 100644 (file)
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -1,5 +1,6 @@
 import $ from "cash-dom";
 import gsap from "gsap";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 import lottie from "lottie-web";
 
@@ -8,6 +9,7 @@ import QuizResize from "./quiz.resize";
 import QuizAnimations from "./quiz.animations";
 import QuizScore from './quiz.score';
 import QuizScorm from './quiz.scorm';
+import QuizQuestion from './quiz.question';
 
 window.cubeSCORM = new CubeSCORM();
 window.$ = window.jQuery = $;
@@ -26,6 +28,7 @@ Quiz.prototype = {
         this.score=new QuizScore(this);
         this.scorm=new QuizScorm(this);
         this.resize = new QuizResize(this);
+        this.question = new QuizQuestion(this);
 
         // Ici seront injectées dans this.data toutes les données du quiz et du thème pour qu'elles soient disponibles
         // dans l'object à tout moment
@@ -33,6 +36,7 @@ Quiz.prototype = {
         console.log(this.data);
         // ICI tout commence vraiment
         console.log(this.data.theme)
+
         $("#quiz").css("background-image","url("+this.data.theme.backgroundImage+")")
 
         this.animations.load('OK', $("#anim"), {'\\$text': 'Salut :)'});
@@ -42,6 +46,17 @@ Quiz.prototype = {
             $this.quizResize();
         });
         this.quizResize();
+
+        $(document).on("click", ".next .action", function (){
+            $this.next();
+        })
+
+        key('space', function (e){
+            e.preventDefault()
+            $this.next();
+        })
+
+        console.log(quiz.score)
     },
 
     updateIcons: function () {
@@ -68,6 +83,22 @@ Quiz.prototype = {
         this.updateIcons();
         this.resize.resize();
     },
+
+    next: function () {
+        const $el = $(".next .action")
+        $el.parents(".container-screen").addClass("none").removeClass("next").next(".container-screen").removeClass("none").addClass("next")
+    },
+
+    setDisplay: function() {
+        const   currentQuestion = quiz.score.lastAnsweredQuestion + 1,
+                questions = this.quiz.questions
+
+        if(questions.length > 0) {
+            if (quiz.score.lastAnsweredQuestion > -1 && questions.length <= currentQuestion) {
+
+            }
+        }
+    }
 }
 
 $(function () {

diff --git a/resources/quizv2/js/quiz.question.js b/resources/quizv2/js/quiz.question.js
new file mode 100644 (file)
index 0000000..9c35d2c
--- /dev/null
+++ b/resources/quizv2/js/quiz.question.js
@@ -0,0 +1,11 @@
+var QuizQuestion = function(quiz) {
+    this.quiz = quiz;
+    this.init();
+}
+
+QuizQuestion.prototype = {
+    init: function(){
+    }
+}
+
+module.exports = QuizQuestion;

diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index 3a7bd8220835fd2e5f2479f4201736d2b4b7756f..d4c2c2004db9b412dcfbfedf37e30d13f77c6960 100644 (file)
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -15,9 +15,8 @@
         @content
 
 
-@mixin opacity($opacity)
-    opacity: $opacity
-    filter: alpha(opacity=($opacity * 100))
+@mixin opacity($rule: background-color)
+    #{$rule}: #{$texts-color}2f
 
 
 @mixin flex-config($justify-content: false, $flex: false, $flex-direction: false, $align-items: false)

diff --git a/resources/quizv2/style/005-utilities.sass b/resources/quizv2/style/005-utilities.sass
new file mode 100644 (file)
index 0000000..96177f9
--- /dev/null
+++ b/resources/quizv2/style/005-utilities.sass
@@ -0,0 +1,8 @@
+.radius
+    border-radius: 16px
+
+.relative
+    position: relative
+
+.none
+    display: none

diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index 7120e1fe6c3fcba619bbb58d90c26d4651e347c1..26ae0e89961cf8f18d583a9ae3be084f6c4ef455 100644 (file)
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -1,3 +1,5 @@
+@import 005-utilities
+
 body
     background-color: $neutral-color
     font-family: $font
@@ -15,12 +17,9 @@ body
     max-width: 1200px
     min-height: 680px
     margin: 0 auto
-    padding: 0 24px 24px
+    padding: 24px 24px
     position: relative
 
-.radius
-    border-radius: 16px
-
 .btn
     padding: 0 12px
     text-align: center
@@ -36,7 +35,7 @@ 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
-        background-color: #{$texts-color}2f
+        +opacity()
         padding-left: 22px
     &.reset
         max-width: 144px
@@ -46,6 +45,17 @@ body
         border-radius: 4px
         padding: 6px 12px
         +font-size(16)
-        background-color: #{$texts-color}2f
+        +opacity()
         text-transform: uppercase
         margin-left: 16px
+
+.screen
+    position: relative
+    z-index: 1
+    &-image
+        position: absolute
+        top: 0
+        left: 0
+        height: 100%
+        width: 100%
+        z-index: 0

diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass
index b71c20d1ea75caf2b03f894b658329dcc9eef7b1..5db18e7d4ca0dc34706f08f9421fdb73f8cd2ac5 100644 (file)
--- a/resources/quizv2/style/101-header-footer.sass
+++ b/resources/quizv2/style/101-header-footer.sass
@@ -1,3 +1,8 @@
+header,
+#footer
+    position: relative
+    z-index: 1
+
 #title
     height: 80px
     +flex-config(space-between,false,row,center)
@@ -5,6 +10,29 @@
     height: 40px
     filter: brightness(10)
 
+#question
+    text-align: center
+    .abovetitle
+        +font-size(16)
+    .progress-container
+        margin: 6px 0 16px
+    .progress-item
+        width: 16px
+        height: 4px
+        border-radius: 100px
+        +opacity()
+        display: inline-flex
+        &:not(:last-of-type)
+            margin-right: 7px
+        &.active
+            background-color: $texts-color
+        &.error
+            background-color: red
+        &.success
+            background-color: green
+    h1
+        +font-size(24)
+
 #footer
     position: absolute
     bottom: 0

diff --git a/resources/quizv2/style/102-intro.sass b/resources/quizv2/style/102-intro.sass
index 4478eb9c328ad380594b0c11468a735f55b4388b..d68a01d9b8405a7cb86268780319ad0565a806a0 100644 (file)
--- a/resources/quizv2/style/102-intro.sass
+++ b/resources/quizv2/style/102-intro.sass
@@ -1,6 +1,7 @@
 #welcome
     max-width: 590px
     margin: 0 auto
+    top: 160px
     h2
         margin: 0 0 12px
         +font-size(20)

diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php
index 4c74b1954cac8e592351d145837a372e472b2346..86fa6c182b1d97164907c18edbc9806a71179fbe 100644 (file)
--- a/resources/views/quizv2/footer.blade.php
+++ b/resources/views/quizv2/footer.blade.php
@@ -5,8 +5,8 @@
             <span class="access">R</span>
         </a>
     @endisset
-    <a class="btn primary">
-        {{$data->intro_button}}
+    <a class="btn primary action">
+        {{$text}}
         <span class="access">space</span>
         @isset($time)
             <span data-icon="running-man"></span>

diff --git a/resources/views/quizv2/header_question.blade.php b/resources/views/quizv2/header_question.blade.php
new file mode 100644 (file)
index 0000000..ecca76e
--- /dev/null
+++ b/resources/views/quizv2/header_question.blade.php
@@ -0,0 +1,9 @@
+<header id="question">
+    <p class="abovetitle">{{ __('Question').' '.($position+1).'/'.$max }} </p>
+    <div class="progress-container">
+        @for($i = 0; $i < $max; $i++)
+            <span class="progress-item"></span>
+        @endfor
+    </div>
+    <h1 id="titleQuestion">{{$data['question']}}</h1>
+</header>

diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index 9d0847ea5756d6a290d03aa33c0c7d666c9adada..7ab6c34fffec0c22f8de122a05397206e57a961d 100644 (file)
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -11,11 +11,15 @@
 </head>
 <body>
 @include("quizv2.sprite")
+@php($totalQuestion = sizeof($data->questions))
 <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])
+        @endforeach
     </div>
 </div>
 <div id="anim"></div>

diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php
index 655ddacf0092cb54fab4b2db3149483a1e27b9a7..11c599cb23a4dea574c4cbdc5976c9a67fbca1dc 100644 (file)
--- a/resources/views/quizv2/screens/intro.blade.php
+++ b/resources/views/quizv2/screens/intro.blade.php
@@ -1,6 +1,15 @@
-@include('quizv2.header_title', ['data', $data])
-<div class="screen" id="welcome">
-    <h2>{{$data->intro_title}}</h2>
-    <p>{{$data->intro_text}}</p>
+@php
+    $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
+    $svg = file_get_contents($absPath."_1690797039/".$data->theme->introImage, true);
+@endphp
+<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>
+    </div>
+    <div class="screen-image">
+        <img src="{{$data->theme->introImage}}">
+    </div>
+    @include('quizv2.footer', ['data' => $data, 'text' => $data->intro_button])
 </div>
-@include('quizv2.footer', ['data' => $data])

diff --git a/resources/views/quizv2/screens/question_multiple.blade.php b/resources/views/quizv2/screens/question_multiple.blade.php
new file mode 100644 (file)
index 0000000..28c96e1
--- /dev/null
+++ b/resources/views/quizv2/screens/question_multiple.blade.php
@@ -0,0 +1,13 @@
+<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>
+            @endforeach
+        </ul>
+    </div>
+    <div class="screen-image">
+    </div>
+    @include('quizv2.footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true])
+</div>