diff --git a/app/views/questionnaire/question_types/likert/likert_evaluation.php b/app/views/questionnaire/question_types/likert/likert_evaluation.php
index ac0a671d04a12a35e9f5afc3a0dc9e56106795ef..fd4eb019eca338adb4b0ff2b0073b16974195797 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 9fa5748029787f94423c15e2a2c80e91a087a6ba..2715934beeadc769310a05133564c9a350168ca1 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 7591be4bdefd175384ae37cb7b585024db86b52a..f5e726bc81396f9eb6c5c2161acce492745c37b4 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,