From a99c57ff86e1154b776fb3edced693c8f6b20a5d Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Fri, 20 Jun 2025 14:41:27 +0200
Subject: [PATCH] Fix dropdown "jumping" issue
https://gitlab.tetras-libre.fr/macao/macao-legacy/-/issues/37
---
macao/assets/_custom.scss | 8 +++
macao/assets/quiz.js | 12 ++++
macao/content/activities/devActi2/quiz.json | 63 ++++++---------------
3 files changed, 38 insertions(+), 45 deletions(-)
diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss
index 2cce685..e116ac3 100644
--- a/macao/assets/_custom.scss
+++ b/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";
diff --git a/macao/assets/quiz.js b/macao/assets/quiz.js
index 14db91f..1adac26 100644
--- a/macao/assets/quiz.js
+++ b/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
diff --git a/macao/content/activities/devActi2/quiz.json b/macao/content/activities/devActi2/quiz.json
index b6a6f81..54be48f 100644
--- a/macao/content/activities/devActi2/quiz.json
+++ b/macao/content/activities/devActi2/quiz.json
@@ -1,49 +1,22 @@
{
- "pages": [
+ "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": [
{
- "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
- }
- ]
- },
- {
- "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>",
- "choices": [
- {
- "value": 0,
- "text": "&Test 1;"
- },
- {
- "value": 1,
- "text": "Test1;"
- }
- ],
- "correctAnswer": 0
- }
- ]
+ "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": 1, "text": "at" },
+ { "value": 2, "text": "for" },
+ { "value": 3, "text": "in" },
+ { "value": 4, "text": "of" },
+ { "value": 5, "text": "on" },
+ { "value": 6, "text": "to" }
+ ],
+ "enableHtml": true,
+ "correctAnswer": 4
}
- ],
- "goNextPageAutomatic": true,
- "showQuestionNumbers": "none",
- "isSurveySummaryVisible": true,
- "processValue": true
+ ]
}
-
--
GitLab