From e88a49e25b78b7b62d7814c48baf14c4957b3a68 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 31 Jul 2023 18:54:19 +0200 Subject: [PATCH] wip #6182 @7:00 --- resources/quizv2/js/quiz.js | 31 +++++++++++++++++++ resources/quizv2/js/quiz.question.js | 11 +++++++ resources/quizv2/style/004-mixins.sass | 5 ++- resources/quizv2/style/005-utilities.sass | 8 +++++ resources/quizv2/style/100-global.sass | 22 +++++++++---- resources/quizv2/style/101-header-footer.sass | 28 +++++++++++++++++ resources/quizv2/style/102-intro.sass | 1 + resources/views/quizv2/footer.blade.php | 4 +-- .../views/quizv2/header_question.blade.php | 9 ++++++ resources/views/quizv2/index.blade.php | 4 +++ .../views/quizv2/screens/intro.blade.php | 19 +++++++++--- .../screens/question_multiple.blade.php | 13 ++++++++ 12 files changed, 139 insertions(+), 16 deletions(-) create mode 100644 resources/quizv2/js/quiz.question.js create mode 100644 resources/quizv2/style/005-utilities.sass create mode 100644 resources/views/quizv2/header_question.blade.php create mode 100644 resources/views/quizv2/screens/question_multiple.blade.php diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js index c3d668d2a..0041f60bc 100644 --- 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 index 000000000..9c35d2c65 --- /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 3a7bd8220..d4c2c2004 100644 --- 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 index 000000000..96177f955 --- /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 7120e1fe6..26ae0e899 100644 --- 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 b71c20d1e..5db18e7d4 100644 --- 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 4478eb9c3..d68a01d9b 100644 --- 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 4c74b1954..86fa6c182 100644 --- a/resources/views/quizv2/footer.blade.php +++ b/resources/views/quizv2/footer.blade.php @@ -5,8 +5,8 @@ R @endisset - - {{$data->intro_button}} + + {{$text}} space @isset($time) diff --git a/resources/views/quizv2/header_question.blade.php b/resources/views/quizv2/header_question.blade.php new file mode 100644 index 000000000..ecca76e79 --- /dev/null +++ b/resources/views/quizv2/header_question.blade.php @@ -0,0 +1,9 @@ +
+

{{ __('Question').' '.($position+1).'/'.$max }}

+
+ @for($i = 0; $i < $max; $i++) + + @endfor +
+

{{$data['question']}}

+
diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php index 9d0847ea5..7ab6c34ff 100644 --- a/resources/views/quizv2/index.blade.php +++ b/resources/views/quizv2/index.blade.php @@ -11,11 +11,15 @@ @include("quizv2.sprite") +@php($totalQuestion = sizeof($data->questions))
@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
diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php index 655ddacf0..11c599cb2 100644 --- 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]) -
-

{{$data->intro_title}}

-

{{$data->intro_text}}

+@php + $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL(); + $svg = file_get_contents($absPath."_1690797039/".$data->theme->introImage, true); +@endphp + -@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 index 000000000..28c96e1f3 --- /dev/null +++ b/resources/views/quizv2/screens/question_multiple.blade.php @@ -0,0 +1,13 @@ +
+ @include('quizv2.header_question', ['data' => $data, 'max' => $max, 'position' => $position]) +
+
    + @foreach($data['answers'] as $answer) +
  • {{$answer['answer']}}
    • + @endforeach +
+
+
+
+ @include('quizv2.footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true]) +
-- 2.39.5