Exercise: Restore styles for unique answer image

assets/css/scss/_exercise.scss

@@ -60,4 +60,43 @@
 
 .question_menu {
   @apply p-4 flex flex-row gap-1;
+}
+
+/** Question unique answer image */
+.question_options {
+  &.type-17 {
+    @apply grid grid-flow-col auto-cols-max;
+  }
+
+  .exercise-unique-answer-image {
+    .radio {
+      padding-left: 10px;
+      margin-left: 0;
+    }
+  }
+
+  label {
+    > input {
+      .thumbnail {
+        @apply p-2;
+        box-sizing: border-box;
+        border: 2px solid #eeeeee;
+
+        p {
+          @apply m-0;
+        }
+
+        img {
+          max-width: 100%;
+        }
+      }
+
+      &:checked {
+        + .thumbnail {
+          border: 2px solid #337AB7;
+          box-shadow: 0 4px 18px #C8C8C8;
+        }
+      }
+    }
+  }
 }

public/main/inc/lib/exercise.lib.php

@@ -117,7 +117,7 @@ class ExerciseLib
                 return '';
             }
 
-            echo '<div class="question_options">';
+            echo '<div class="question_options type-'.$answerType.'">';
             // construction of the Answer object (also gets all answers details)
             $objAnswerTmp = new Answer($questionId, $course_id, $exercise);
             $nbrAnswers = $objAnswerTmp->selectNbrAnswers();
@@ -520,16 +520,14 @@ class ExerciseLib
                             if ($show_comment) {
                                 if (empty($comment)) {
                                     $s .= '<div id="answer'.$questionId.$numAnswer.'"
-                                            class="exercise-unique-answer-image" style="text-align: center">';
+                                            class="exercise-unique-answer-image text-center">';
                                 } else {
                                     $s .= '<div id="answer'.$questionId.$numAnswer.'"
-                                            class="exercise-unique-answer-image col-xs-6 col-sm-12"
-                                            style="text-align: center">';
+                                            class="exercise-unique-answer-image col-xs-6 col-sm-12 text-center">';
                                 }
                             } else {
                                 $s .= '<div id="answer'.$questionId.$numAnswer.'"
-                                        class="exercise-unique-answer-image col-xs-6 col-md-3"
-                                        style="text-align: center">';
+                                        class="exercise-unique-answer-image col-xs-6 col-md-3 text-center">';
                             }
                         }