Fix dropdown "jumping" issue

macao-legacy#37

macao/assets/_custom.scss

@@ -188,8 +188,16 @@ em:not(:has(strong)) {
     padding: 3px;
     padding-right: 4px;
     border-radius: 5px;
+}
 
+// ***********************************
+// Dropdowns
+// ***********************************
+// Min width for dropdowns
+.sv-dropdown_select-wrapper {
+  min-width: 150px !important;
 }
+
 @import "plugins/_scrollbars.scss";
 
 

macao/assets/quiz.js

@@ -138,6 +138,18 @@ $(function () {
             helpButton.onclick = () => toggleHelpComment(options.question, options.htmlElement);
             options.htmlElement.appendChild(helpButton);
         }
+
+        if( options.question.getType() === "dropdown" ) {
+            // Very ugly fix to avoid sliding dropdown on focus
+            $('.book-article').css({
+                'will-change' : 'unset',
+                'transition': 'none',
+            });
+            $('.book-page').css({
+                'will-change' : 'unset',
+                'transition': 'none',
+            });
+        }
     });
 
     // Add "Check answers" button

macao/content/activities/devActi2/quiz.json

 {
-  "pages": [
-    {
-      "elements": [
-        {
-          "name": "pg310_1",
-          "type": "radiogroup",
-          "title": "<div><audio id=\"e29anj_s1lc_remarque_accen1_13_1.mp3\"><source src=\"/macao-hugo/media/e29anj_s1lc_remarque_accen1/e29anj_s1lc_remarque_accen1_13.mp3\" type=\"audio/mpeg\"></audio><button onclick=\"document.getElementById('e29anj_s1lc_remarque_accen1_13_1.mp3').play()\" class=\"notext\">Play</button> AAA</div>",
-          "choices": [
-            {
-              "value": 0,
-              "text": "Test 1;"
-            },
-            {
-              "value": 1,
-              "text": "Test 1;"
-            }
-          ],
-          "correctAnswer": 0
-        }
-      ]
-    },
-    {
+  "correctComment": "C'est cela!\n **OF** est le seul mot commun aux deux énoncés.",
+  "incorrectComment": "Vous vous trompez.\n **OF** est le seul mot commun aux deux énoncés. Vous pouvez réécouter les énoncés.",
   "elements": [
     {
-          "name": "pg310_2",
-          "type": "radiogroup",
-          "title": "<div><audio id=\"e29anj_s1lc_remarque_accen1_13_2.mp3\"><source src=\"/macao-hugo/media/e29anj_s1lc_remarque_accen1/e29anj_s1lc_remarque_accen1_13.mp3\" type=\"audio/mpeg\"></audio><button onclick=\"document.getElementById('e29anj_s1lc_remarque_accen1_13_2.mp3').play()\" class=\"notext\">Play</button> BBB</div>",
+      "type": "dropdown",
+      "name": "question1",
+      "customFormat": "one_line",
+      "title": "<div><audio id=\"e29_macao1_2b11_01.mp3\" ><source src=\"/macao-hugo\/macao\/static\/media\/e29_macao1_2b11\/e29_macao1_2b11_01.mp3\" type=\"audio\/mpeg\"><\/audio><button onclick=\"document.getElementById('e29_macao1_2b11_01.mp3').play()\">Play<\/button><\/div> <div><audio id=\"e29_macao1_2b21_01.mp3\" ><source src=\"\/macao-hugo\/macao\/static\/media\/e29_macao1_2b21\/e29_macao1_2b21_01.mp3\" type=\"audio\/mpeg\"><\/audio><button onclick=\"document.getElementById('e29_macao1_2b21_01.mp3').play()\">Play<\/button><\/div>",
       "choices": [
-            {
-              "value": 0,
-              "text": "&Test 1;"
-            },
-            {
-              "value": 1,
-              "text": "Test1;"
-            }
+        { "value": 1, "text": "at" },
+        { "value": 2, "text": "for" },
+        { "value": 3, "text": "in" },
+        { "value": 4, "text": "of" },
+        { "value": 5, "text": "on" },
+        { "value": 6, "text": "to" }
       ],
-          "correctAnswer": 0
+      "enableHtml": true,
+      "correctAnswer": 4
     }
   ]
 }
-  ],
-  "goNextPageAutomatic": true,
-  "showQuestionNumbers": "none",
-  "isSurveySummaryVisible": true,
-  "processValue": true
-}
-