From 4a669ffd82b905791e69a4a244dbff8ad15ff05a Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 27 Jan 2025 07:16:22 +0000
Subject: [PATCH] [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.
---
scoring/templates/scoring/council.html | 82 +++++++++++++++-----------
1 file changed, 46 insertions(+), 36 deletions(-)
diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
index 0fdaed5f..0fd33fb2 100644
--- a/scoring/templates/scoring/council.html
+++ b/scoring/templates/scoring/council.html
@@ -276,21 +276,21 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
{% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %}
<span>{{ section.weighted_score|floatformat:0 }}%</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: Change bg-green-100 to bg-red-100 if comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% else %}
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
<span>{{section.weighted_score|floatformat:0 }}%</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: Change bg-green-100 to bg-red-100 if comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% endif %}
@@ -324,26 +324,36 @@ <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 comparison is negative -->
- <!-- TODO: Change text-success to text-danger if comparison is negative -->
- <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
- <!-- TODO: Change text-success to text-dark if there is no comparison -->
- <!-- TODO: If there is no comparison then display '-' -->
- <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
- <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison 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 comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
+ <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+ <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison 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 comparison is negative -->
- <!-- TODO: Change text-success to text-danger if comparison is negative -->
- <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
- <!-- TODO: Change text-success to text-dark if there is no comparison -->
- <!-- TODO: If there is no comparison then display '-' -->
- <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
- <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison 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 comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
+ <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+ <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison 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 %}
@@ -377,22 +387,22 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
</td>
<td class="score border-bottom border-opacity-25 border-primary is--section-score">
{{ plan_score.weighted_total|floatformat:0 }}%
- <!-- 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: Change bg-green-100 to bg-red-100 if comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% for comparison in comparisons %}
<td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score">
{{ comparison.weighted_total|floatformat:0 }}%
- <!-- 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: Change bg-green-100 to bg-red-100 if comparison is negative -->
+ <!-- TODO: Change text-success to text-danger if comparison is negative -->
+ <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+ <!-- TODO: Change text-success to text-dark if there is no comparison -->
+ <!-- TODO: If there is no comparison then display '-' -->
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
</td>
{% endfor %}