[Scorecards] Changed fractions to 'Out of' in question marking

After doing some testing and I noticed that the fractions might be confusing for some users. By using something more literal we might make it easier to analyse the information for the questions.

Author: lucascumsille

scoring/templates/scoring/council.html

@@ -327,28 +327,39 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                 </td>
 
                 <td data-column="score" class="score border-bottom">
-                    <span>{{ answer.score|format_mark }}/{{ answer.max }}</span>
-                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
-                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
-                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
-                    <!-- TODO: Change text-success to text-dark if there is no variation -->
-                    <!-- TODO: If there is no variation then display '-' -->
-                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
-                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    <div class="d-flex flex-row gap-3 justify-content-end align-items-center">
+                        <p class="mb-0">
+                          <span class="fs-5">{{ answer.score|format_mark }} <span class="fs-7">out of </span> {{ answer.max }}
+                          </span>
+                        </p>
+
+                        <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                        <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                        <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                        <!-- TODO: Change text-success to text-dark if there is no variation -->
+                        <!-- TODO: If there is no variation then display '-' -->
+                        <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                        <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                        <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    </div>
                 </td>
 
               {% for comparison in answer.comparisons %}
                 <td data-column="score" class="d-none d-md-table-cell score border-bottom">
-                    <span>{{ comparison.score|format_mark }}/{{ comparison.max }}</span>
-                    <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
-                    <!-- TODO: Change text-success to text-danger if variation is negative  -->
-                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
-                    <!-- TODO: Change text-success to text-dark if there is no variation -->
-                    <!-- TODO: If there is no variation then display '-' -->
-                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
-                    <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
-                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    <div class="d-flex flex-row gap-3 justify-content-end align-items-center">
+                        <p class="mb-0">
+                          <span class="fs-5">{{ comparison.score|format_mark }} <span class="fs-7">out of </span> {{ comparison.max }}
+                          </span>
+                        </p>
+                        <!-- TODO: Change bg-green-100 to bg-red-100 if variation is negative -->
+                        <!-- TODO: Change text-success to text-danger if variation is negative  -->
+                        <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no variation -->
+                        <!-- TODO: Change text-success to text-dark if there is no variation -->
+                        <!-- TODO: If there is no variation then display '-' -->
+                        <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                        <!-- TODO Designer: Add tooltip to badge explaining this is a variation -->
+                        <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Variation with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    </div>
                 </td>
               {% endfor %}