From: soufiane <soufiane@cubedesigners.com>
Date: Wed, 23 Aug 2023 16:10:55 +0000 (+0200)
Subject: wip #6194 @1:00 animation label question multiple
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0a4ce2d1f4a9641eb7dec3ea62b74a5c4f3fed4b;p=fluidbook-toolbox-quiz.git

wip #6194 @1:00 animation label question multiple
---

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 83d5055..c680692 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -149,6 +149,10 @@ QuizScreens.prototype = {
                 ease: "power1.inOut",
                 stagger: .15
             }, .7)
+            .to(".active-screen .list-item .content", {
+                autoAlpha: 1,
+                stagger: .1
+            }, "<+=.3")
             .to(".active-screen .footer-question", {
                 y: 0,
                 duration: 1,
diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index d0a2d32..e42c80f 100644
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -14,12 +14,12 @@
                 height: 58px
                 @extend .radius
                 +opacity(.80,background-color,$neutral-color)
-                +flex-config(space-between,false,false,center)
                 padding: 0 16px
                 cursor: pointer
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
+                display: flex
                 &:after
                     content: ""
                     width: 100%
@@ -34,6 +34,10 @@
                     +opacity(.24,background-color,$ok-color)
                 *
                     z-index: 1
+                .content
+                    opacity: 0
+                    width: 100%
+                    +flex-config(space-between,false,false,center)
 
             input:checked+label
                 border-color: $texts-color
diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index ba09318..fe38b09 100644
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -9,8 +9,10 @@
                                name="answer"
                                id="question-{{$position.$key}}" class="none" value="{{$key}}">
                         <label for="question-{{$position.$key}}" aria-keyshortcuts="{{$alphabet[$key]}}">
-                            <span class="relative">{{$answer['answer']}}</span>
-                            <span class="access">{{$alphabet[$key]}}</span>
+                            <span class="content">
+                                <span class="relative">{{$answer['answer']}}</span>
+                                <span class="access">{{$alphabet[$key]}}</span>
+                            </span>
                         </label>
                     </li>
                 @endforeach
@@ -21,5 +23,5 @@
         <img src="{{$theme->standardImage}}"/>
         <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
     </div>
-    @include('footer', ['question' =>$question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
 </div>