Fix Minefield text with image question type

bcc-code · Oct 16, 2024 · fbc636a · fbc636a
1 parent 105d890
commit fbc636a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/Experience/Games/MineField.js b/src/Experience/Games/MineField.js
@@ -97,7 +97,7 @@ export default class MineField {
     setHTMLForQuestion(index) {
         const question = instance.data[index]
         const questionContent =
-            question.type === 'text'
+            question.type === 'text' || question.type === 'text_image'
                 ? `<p>${question.question_text}</p>`
                 : `<div id="task-image"><img src="${question.question_image}" alt="Question Image" /></div>`
 
@@ -107,10 +107,13 @@ export default class MineField {
         question.answers.forEach((answer, index) => {
             const bulletIcon = `url('games/minefield/${colors[index % colors.length]}')`
 
-            answersHTML +=
-                question.type === 'text' || question.type === 'text_with_image'
-                    ? `<div class=""><div class="bg-cover" style="background-image: ${bulletIcon};"></div> <p> ${answer.answer_text}<p></div>`
-                    : `<img src="${answer.answer_image}" alt="Answer Image" />`
+            if (question.type === 'text') {
+                answersHTML += `<div><div class="bg-cover" style="background-image: ${bulletIcon};"></div> <p>${answer.answer_text}<p></div>`
+            } else if (question.type === 'image') {
+                answersHTML += `<img src="${answer.answer_image}" alt="Answer Image" />`
+            } else if (question.type === 'text_image') {
+                answersHTML += `<div><div class="bg-cover" style="background-image: ${bulletIcon};"></div><img src="${answer.answer_image}" alt="Answer Image" /></div>`
+            }
         })
 
         const questionHTML = `

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -4536,7 +4536,7 @@ img.lazyloaded ~ div.img-loader {
 
     .right {
         width: 35%;
-        height: 50vh;
+        height: 61.5vh;
     }
 
     .finish-line {
@@ -4656,7 +4656,7 @@ img.lazyloaded ~ div.img-loader {
 
         img {
             width: 96px;
-            height: 96px;
+            height: auto;
             display: inline-block;
         }
     }