From c3d34bc3c6fbd408e7232918a61bde0211d0ce4e Mon Sep 17 00:00:00 2001
From: Rasmus Fuhse <fuhse@data-quest.de>
Date: Wed, 3 Jan 2024 15:03:47 +0000
Subject: Resolve "Likertskala und Polskala sollen absolute Zahlen in der
 Auswertungen anzeigen"

Closes #2911

Merge request studip/studip!1963
---
 .../question_types/likert/likert_evaluation.php    | 60 ++++++++++++++-
 .../rangescale/rangescale_evaluation.php           | 88 ++++++++++++++++++----
 .../assets/stylesheets/scss/questionnaire.scss     | 79 +++++++++++++++++++
 3 files changed, 208 insertions(+), 19 deletions(-)

diff --git a/app/views/questionnaire/question_types/likert/likert_evaluation.php b/app/views/questionnaire/question_types/likert/likert_evaluation.php
index ac0a671..fd4eb01 100644
--- a/app/views/questionnaire/question_types/likert/likert_evaluation.php
+++ b/app/views/questionnaire/question_types/likert/likert_evaluation.php
@@ -17,6 +17,12 @@ $options = $vote->questiondata['options'];
 </div>
 
 <table class="default nohover">
+    <colgroup>
+        <col>
+        <? foreach ($options as $option) : ?>
+        <col style="width: 70px">
+        <? endforeach ?>
+    </colgroup>
     <thead>
         <tr>
             <th><?= _('Aussage') ?></th>
@@ -34,7 +40,17 @@ $options = $vote->questiondata['options'];
                     <strong><?= htmlReady($statement) ?></strong>
                 </td>
 
-                <? foreach($options as $option_index => $option) : ?>
+                <?
+            $average = 0;
+            if (count($answers) > 0) {
+                foreach ($answers as $answer) {
+                    $average += $answer['answerdata']['answers'][$key];
+                }
+                $average /= count($answers);
+            }
+            ?>
+
+            <? foreach($options as $option_index => $option) : ?>
                     <?
                     $hits = 0;
                     $names = [];
@@ -46,23 +62,61 @@ $options = $vote->questiondata['options'];
                             }
                         }
                     }
-                    $color = 'hsl(0 0% '.round(70 + (30 * (1 - ($hits / $countAnswers ?? 1)) )).'%)';
                     ?>
-                    <td style="background-color: <?= $color ?>;" <?= count($names) > 0 ? 'title="'.htmlReady(implode(', ', $names)).'"' : ''?>>
+                <td <?= count($names) > 0 ? 'title="'.htmlReady(implode(', ', $names)).'"' : ''?>>
+                    <? if ($option_index === 0 && count($answers)) : ?>
+                        <div class="average" style="margin-left: <?=  80 * $average + 34 ?>px;">
+                            Ø<?= htmlReady(str_replace('.', ',', (string) round($average, 2) + 1)) ?>
+                        </div>
+                    <? endif ?><?
+                    $bubble_width = 70;
+                    $font_size = 2.5;
+                    if ($countAnswers === 1) {
+                        $bubble_width /= 3;
+                        $font_size /= 3;
+                    } elseif ($countAnswers === 2) {
+                        $bubble_width /= 2;
+                        $font_size /= 2;
+                    } elseif ($countAnswers === 3) {
+                        $bubble_width /= 1.5;
+                        $font_size /= 1.5;
+                    }
+                    ?>
+                    <? if (count($answers) > 0) : ?>
+                        <div class="centerline"></div>
+                    <? endif ?>
+                    <? if ($countAnswers) : ?>
+                        <? $bubble_width = $hits > 0 ? ($bubble_width - 14) * $hits / $countAnswers + 14 : 0 ?>
+                        <? $font_size = $hits > 0 ? ($font_size - 0.5) * $hits / $countAnswers + 0.5 : 0 ?>
                         <? if ($filtered !== null && $filtered == $key.'_'.$option_index) : ?>
                             <a href=""
+                               class="questionnaire-evaluation-circle-container"
                                onclick="STUDIP.Questionnaire.removeFilter('<?= htmlReady($vote['questionnaire_id']) ?>'); return false;"
                                title="<?= _('Zeige wieder alle Ergebnisse ohne Filterung an.') ?>">
+                                <div class="questionnaire-evaluation-circle">
+                                    <div class="value" style="font-size: <?= $font_size ?>em; max-width: <?= $bubble_width ?>px; max-height: <?= $bubble_width ?>px;">
+                                        <?= htmlReady($hits) ?>
+                                    </div>
+                                </div>
                                 <?= Icon::create('filter2', Icon::ROLE_CLICKABLE)->asImg(16, ['class' => 'text-bottom']) ?>
                                 <?= round(100 * $hits / $countAnswers) ?>%
                             </a>
                         <? else : ?>
                             <a href=""
+                               class="questionnaire-evaluation-circle-container"
                                onclick="STUDIP.Questionnaire.addFilter('<?= htmlReady($vote['questionnaire_id']) ?>', '<?= htmlReady($vote->getId()) ?>', '<?= $key.'_'.$option_index ?>'); return false;"
                                title="<?= _('Zeige nur Ergebnisse von Personen an, die diese Option gewählt haben.') ?>">
+                                <div class="questionnaire-evaluation-circle">
+                                    <div class="value" style="font-size: <?= $font_size ?>em; max-width: <?= $bubble_width ?>px; max-height: <?= $bubble_width ?>px;">
+                                        <?= htmlReady($hits) ?>
+                                    </div>
+                                </div>
                                 <?= round(100 * $hits / $countAnswers) ?>%
                             </a>
                         <? endif ?>
+                    <? else : ?>
+                        0%
+                        <? endif ?>
                     </td>
                 <? endforeach ?>
             </tr>
diff --git a/app/views/questionnaire/question_types/rangescale/rangescale_evaluation.php b/app/views/questionnaire/question_types/rangescale/rangescale_evaluation.php
index 9fa5748..2715934 100644
--- a/app/views/questionnaire/question_types/rangescale/rangescale_evaluation.php
+++ b/app/views/questionnaire/question_types/rangescale/rangescale_evaluation.php
@@ -17,11 +17,17 @@ $options = range($vote->questiondata['minimum'], $vote->questiondata['maximum'])
 </div>
 
 <table class="default nohover">
+    <colgroup>
+        <col>
+        <? foreach ($options as $option) : ?>
+            <col style="width: 70px">
+        <? endforeach ?>
+    </colgroup>
     <thead>
         <tr>
             <th><?= _('Aussage') ?></th>
             <? for ($i = $vote->questiondata['minimum'] ?? 1; $i <= $vote->questiondata['maximum']; $i++) : ?>
-                <th><?= htmlReady($i) ?></th>
+                <th class="rangescale_center"><?= htmlReady($i) ?></th>
             <? endfor ?>
         </tr>
     </thead>
@@ -33,7 +39,18 @@ $options = range($vote->questiondata['minimum'], $vote->questiondata['maximum'])
                 <strong><?= htmlReady($statement) ?></strong>
             </td>
 
-            <? foreach($options as $option) : ?>
+            <?
+            $average = 0;
+            if (count($answers) > 0) {
+                foreach ($answers as $answer) {
+                    $average += $answer['answerdata']['answers'][$key];
+                }
+                $average /= count($answers);
+                $average = round($average, 2);
+            }
+            ?>
+
+            <? foreach($options as $option_index => $option) : ?>
                 <?
                 $hits = 0;
                 $names = [];
@@ -45,22 +62,61 @@ $options = range($vote->questiondata['minimum'], $vote->questiondata['maximum'])
                         }
                     }
                 }
-                $color = 'hsl(0 0% '.round(70 + (30 * (1 - ($hits / $countAnswers ?? 1)) )).'%)';
                 ?>
-                <td style="background-color: <?= $color ?>;" style="white-space: nowrap;"<?= count($names) > 0 ? 'title="'.htmlReady(implode(', ', $names)).'"' : ''?>>
-                    <? if ($filtered !== null && $filtered == ($key.'_'.$option)) : ?>
-                        <a href=""
-                           onclick="STUDIP.Questionnaire.removeFilter('<?= htmlReady($vote['questionnaire_id']) ?>'); return false;"
-                           title="<?= _('Zeige wieder alle Ergebnisse ohne Filterung an.') ?>">
-                            <?= Icon::create('filter2', Icon::ROLE_CLICKABLE)->asImg(16, ['class' => 'text-bottom']) ?>
-                            <?= round(100 * $hits / $countAnswers) ?>%
-                        </a>
+                <td style="white-space: nowrap;"<?= count($names) > 0 ? 'title="'.htmlReady(implode(', ', $names)).'"' : ''?>>
+                    <? if ($option_index === 0 && count($answers) > 0) : ?>
+                        <div class="average" style="margin-left: <?= (count($options) * 80) * $average / $vote->questiondata['maximum'] - $vote->questiondata['minimum'] * 80 + 34 ?>px;">
+                            Ø<?= htmlReady(str_replace('.', ',', (string) round($average, 2))) ?>
+                        </div>
+                    <? endif ?>
+                    <?
+                    $bubble_width = 70;
+                    $font_size = 2.5;
+                    if ($countAnswers === 1) {
+                        $bubble_width /= 3;
+                        $font_size /= 3;
+                    } elseif ($countAnswers === 2) {
+                        $bubble_width /= 2;
+                        $font_size /= 2;
+                    } elseif ($countAnswers === 3) {
+                        $bubble_width /= 1.5;
+                        $font_size /= 1.5;
+                    }
+                    ?>
+                    <? if (count($answers) > 0) : ?>
+                        <div class="centerline"></div>
+                    <? endif ?>
+                    <? if ($countAnswers) : ?>
+                        <? $bubble_width = $hits > 0 ? ($bubble_width - 14) * $hits / $countAnswers + 14 : 0 ?>
+                        <? $font_size = $hits > 0 ? ($font_size - 0.5) * $hits / $countAnswers + 0.5 : 0 ?>
+                        <? if ($filtered !== null && $filtered == ($key.'_'.$option)) : ?>
+                            <a href=""
+                               class="questionnaire-evaluation-circle-container"
+                               onclick="STUDIP.Questionnaire.removeFilter('<?= htmlReady($vote['questionnaire_id']) ?>'); return false;"
+                               title="<?= _('Zeige wieder alle Ergebnisse ohne Filterung an.') ?>">
+                                <div class="questionnaire-evaluation-circle">
+                                    <div class="value" style="font-size: <?= $font_size ?>em; max-width: <?= $bubble_width ?>px; max-height: <?= $bubble_width ?>px;">
+                                        <?= htmlReady($hits) ?>
+                                    </div>
+                                </div>
+                                <?= Icon::create('filter2', Icon::ROLE_CLICKABLE)->asImg(16, ['class' => 'text-bottom']) ?>
+                                <?= round(100 * $hits / $countAnswers) ?>%
+                            </a>
+                        <? else : ?>
+                            <a href=""
+                               class="questionnaire-evaluation-circle-container"
+                               onclick="STUDIP.Questionnaire.addFilter('<?= htmlReady($vote['questionnaire_id']) ?>', '<?= htmlReady($vote->getId()) ?>', '<?= $key.'_'.$option ?>'); return false;"
+                               title="<?= _('Zeige nur Ergebnisse von Personen an, die diese Option gewählt haben.') ?>">
+                                <div class="questionnaire-evaluation-circle">
+                                    <div class="value" style="font-size: <?= $font_size ?>em; max-width: <?= $bubble_width ?>px; max-height: <?= $bubble_width ?>px;">
+                                        <?= htmlReady($hits) ?>
+                                    </div>
+                                </div>
+                                <?= round(100 * $hits / $countAnswers) ?>%
+                            </a>
+                        <? endif ?>
                     <? else : ?>
-                        <a href=""
-                           onclick="STUDIP.Questionnaire.addFilter('<?= htmlReady($vote['questionnaire_id']) ?>', '<?= htmlReady($vote->getId()) ?>', '<?= $key.'_'.$option ?>'); return false;"
-                           title="<?= _('Zeige nur Ergebnisse von Personen an, die diese Option gewählt haben.') ?>">
-                            <?= round(100 * $hits / $countAnswers) ?>%
-                        </a>
+                        0%
                     <? endif ?>
                 </td>
             <? endforeach ?>
diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss
index 7591be4..f5e726b 100644
--- a/resources/assets/stylesheets/scss/questionnaire.scss
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -342,6 +342,85 @@ $width: 270px;
             color: var(--red);
         }
     }
+
+    .average {
+        position: absolute;
+        border-left: 2px solid var(--red);
+        height: 70px;
+        z-index: 1;
+        font-size: 0.7em;
+        padding-left: 5px;
+    }
+    .rangescale_center {
+        text-align: center;
+    }
+    .centerline {
+        border-top: 1px solid var(--base-color);
+        position: relative;
+        top: 35px;
+        margin-left: -5px;
+        margin-right: -5px;
+        z-index: 2;
+    }
+    .questionnaire-evaluation-circle-container {
+        text-align: center;
+        display: block;
+        .questionnaire-evaluation-circle {
+            width: 70px;
+            height: 70px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: auto;
+            margin-right: auto;
+            z-index: 3;
+            position: relative;
+            > .value {
+                border-radius: 100px;
+                color: var(--white);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: var(--base-color);
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .centerline {
+        border-top: 1px solid var(--base-color);
+        position: relative;
+        top: 35px;
+        margin-left: -5px;
+        margin-right: -5px;
+        z-index: 2;
+    }
+    .questionnaire-evaluation-circle-container {
+        text-align: center;
+        display: block;
+        .questionnaire-evaluation-circle {
+            width: 70px;
+            height: 70px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: auto;
+            margin-right: auto;
+            z-index: 3;
+            position: relative;
+            > .value {
+                border-radius: 100px;
+                color: white;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: var(--base-color);
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
 }
 
 .courseselector,
-- 
cgit v1.0