Version 5.1.3

bihor · Apr 22, 2024 · eb6b4d7 · eb6b4d7
1 parent 21e2c3a
commit eb6b4d7
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 16 deletions.
diff --git a/Classes/Controller/QuizController.php b/Classes/Controller/QuizController.php
@@ -1259,7 +1259,7 @@ protected function setAllUserAnswersForOneQuestion(Question &$oneQuestion, int $
                 // ausgewählte Kategorien einer Antwort
                 $catAnswers = unserialize($aSelectedQuestion->getEntered());
                 foreach ($catAnswers as $key => $value) {
-                    if (!is_array($allCategoryResults[$key])) {
+                    if (!isset($allCategoryResults[$key]) || !is_array($allCategoryResults[$key])) {
                         $allCategoryResults[$key] = [];
                     }
                     if (isset($allCategoryResults[$key][$value])) {

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # fp_masterquiz
 
-version 5.1.2
+version 5.1.3
 
 TYPO3 extension to create a quiz, poll or test. The participant result will be saved in the DB too and can be deleted automatically via Scheduler.
 

diff --git a/Resources/Private/Backend/Partials/Question/Chart.html b/Resources/Private/Backend/Partials/Question/Chart.html
@@ -5,19 +5,69 @@ <h4>{question.title}</h4>
   <f:if condition="({question.qmode} == 0) || ({question.qmode} == 4)"> / {question.totalAnswers}</f:if>
 </p>
 
-<ul class="chart">
-<f:for each="{question.answers}" as="answer3" iteration="iter3">
-  <li>
-    <span style="height:{answer3.allPercent}%" title="{answer3.title}: {answer3.allAnswers}x ({answer3.allPercent}%)"></span>
-  </li>
-</f:for>
-</ul>
-<f:if condition="({question.qmode} == 3) || ({question.qmode} == 5)">
-  <ul>
-  <f:for each="{question.textAnswers}" key="textAnswer" as="textCount">
-    <li>{textAnswer}: {textCount.sum}x ({textCount.percent}%)
-  </f:for>
-  </ul>
+<f:if condition="{question.qmode} == 8">
+  <f:then>
+    <f:comment>Pure CSS Color Bars from: https://speckyboy.com/code-snippets-css3-bar-graphs/</f:comment>
+    <div id="bar-chart">
+      <div class="graph">
+        <ul class="x-axis">
+          <f:for each="{question.answers}" as="answer3" iteration="iter3">
+            <li>
+              <span>{answer3.title}</span>
+            </li>
+          </f:for>
+        </ul>
+        <ul class="y-axis">
+          <li><span>100%</span></li>
+          <li><span>80</span></li>
+          <li><span>60</span></li>
+          <li><span>40</span></li>
+          <li><span>20</span></li>
+          <li><span>0</span></li>
+        </ul>
+        <div class="bars">
+          <f:for each="{question.answers}" as="answer3" iteration="iter3">
+          <div class="bar-group">
+            <f:for each="{question.categoriesArray}" key="catkey" as="category" iteration="itercat">
+                <f:for each="{answer3.allCategoryAnswers}" key="an3key" as="an3array">
+                  <f:if condition="{answer3.uid} == {an3key}">
+                    <f:for each="{an3array}" key="cat3key" as="cat3count">
+                      <f:if condition="{catkey} == {cat3key}">
+                        <div class="bar stat-{itercat.cycle}" style="height: {cat3count * 100 / question.allAnswers}%;">
+                          <span>{cat3count}</span>
+                        </div>
+                      </f:if>
+                    </f:for>
+                  </f:if>
+                </f:for>
+            </f:for>
+          </div>
+          </f:for>
+        </div>
+      </div>
+      <div>
+        <f:for each="{question.categoriesArray}" key="catkey" as="category" iteration="itercat">
+          <span class="cat-bg cat-bg-{itercat.cycle}">&nbsp;</span>{category}&nbsp; &nbsp;
+        </f:for>
+      </div>
+    </div>
+  </f:then>
+  <f:else>
+    <ul class="chart">
+      <f:for each="{question.answers}" as="answer3" iteration="iter3">
+        <li>
+          <span style="height:{answer3.allPercent}%" title="{answer3.title}: {answer3.allAnswers}x ({answer3.allPercent}%)"></span>
+        </li>
+      </f:for>
+    </ul>
+    <f:if condition="({question.qmode} == 3) || ({question.qmode} == 5)">
+      <ul>
+        <f:for each="{question.textAnswers}" key="textAnswer" as="textCount">
+          <li>{textAnswer}: {textCount.sum}x ({textCount.percent}%)
+        </f:for>
+      </ul>
+    </f:if>
+  </f:else>
 </f:if>
 <hr />
 </html>
diff --git a/Resources/Private/Backend/Templates/Quiz/Charts.html b/Resources/Private/Backend/Templates/Quiz/Charts.html
@@ -63,6 +63,140 @@
           height: 0;
         }
       }
+
+      #bar-chart {
+        height: 380px;
+        width: 70%;
+        position: relative;
+        margin: 50px auto 0;
+      }
+      #bar-chart * {
+        box-sizing: border-box;
+      }
+      #bar-chart .cat-bg {
+        width: 23px;
+        height: 13px;
+        display: inline-block;
+        margin-right: 5px;
+      }
+      #bar-chart .graph {
+        height: 283px;
+        position: relative;
+      }
+      #bar-chart .bars {
+        height: 253px;
+        padding: 0 2%;
+        position: absolute;
+        width: 100%;
+        z-index: 10;
+      }
+      #bar-chart .bar-group {
+        display: block;
+        float: left;
+        height: 100%;
+        position: relative;
+        width: 12%;
+        margin-right: 10%;
+      }
+      #bar-chart .bar-group:last-child {
+        margin-right: 0;
+      }
+      #bar-chart .bar-group .bar {
+        height: 0;
+        -webkit-animation: animate-height;
+        -moz-animation: animate-height;
+        animation: animate-height;
+        animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
+        -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
+        -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
+        animation-duration: 0.4s;
+        -webkit-animation-duration: 0.4s;
+        -moz-animation-duration: 0.4s;
+        animation-fill-mode: forwards;
+        -webkit-animation-fill-mode: forwards;
+        box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
+        border: 1px solid #2d2d2d;
+        border-radius: 3px 3px 0 0;
+        bottom: 0;
+        cursor: pointer;
+        height: 0;
+        position: absolute;
+        text-align: center;
+        width: 15%;
+      }
+      #bar-chart .bar-group .bar:nth-child(2) {
+        left: 20%;
+      }
+      #bar-chart .bar-group .bar:nth-child(3) {
+        left: 40%;
+      }
+      #bar-chart .bar-group .bar:nth-child(4) {
+        left: 60%;
+      }
+      #bar-chart .bar-group .bar:nth-child(5) {
+        left: 80%;
+      }
+      #bar-chart .bar-group .bar span {
+        display: none;
+      }
+      #bar-chart ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      #bar-chart .x-axis {
+        bottom: 0;
+        position: absolute;
+        text-align: center;
+        width: 100%;
+      }
+      #bar-chart .x-axis li {
+        float: left;
+        margin-right: 10.5%;
+        font-size: 11px;
+        width: 11.5%;
+      }
+      #bar-chart .x-axis li:last-child {
+        margin-right: 0;
+      }
+      #bar-chart .y-axis {
+        position: absolute;
+        text-align: right;
+        width: 100%;
+      }
+      #bar-chart .y-axis li {
+        border-top: 1px solid #4e5464;
+        display: block;
+        height: 50.6px;
+        width: 100%;
+      }
+      #bar-chart .y-axis li span {
+        display: block;
+        font-size: 11px;
+        margin: -10px 0 0 -60px;
+        padding: 0 10px;
+        width: 40px;
+      }
+      #bar-chart .stat-1, #bar-chart .cat-bg-1 {
+        background-image: -webkit-linear-gradient(left, #D1ECFABF 0%, #D1ECFABF 47%, #8893E3BF 50%, #8893E3BF 100%);
+        background-image: linear-gradient(to right, #D1ECFABF 0%, #D1ECFABF 47%, #8893E3BF 50%, #8893E3BF 100%);
+      }
+      #bar-chart .stat-2, #bar-chart .cat-bg-2 {
+        background-image: -webkit-linear-gradient(left, #D18896BF 0%, #D18896BF 47%, #AC4054BF 50%, #AC4054BF 100%);
+        background-image: linear-gradient(to right, #D18896BF 0%, #D18896BF 47%, #AC4054BF 50%, #AC4054BF 100%);
+      }
+      #bar-chart .stat-3, #bar-chart .cat-bg-3 {
+        background-image: -webkit-linear-gradient(left, #7EE64DBF 0%, #7EE64DBF 47%, #43AF0EBF 50%, #43AF0EBF 100%);
+        background-image: linear-gradient(to right, #7EE64DBF 0%, #7EE64DBF 47%, #43AF0EBF 50%, #43AF0EBF 100%);
+      }
+      #bar-chart .stat-4, #bar-chart .cat-bg-4 {
+        background-image: -webkit-linear-gradient(left, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
+        background-image: linear-gradient(to right, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
+      }
+      #bar-chart .stat-5, #bar-chart .cat-bg-5 {
+        background-image: -webkit-linear-gradient(left, #ff8800 0%, #ff8800 47%, #a92a03 50%, #a92a03 100%);
+        background-image: linear-gradient(to right, #ff8800 0%, #ff8800 47%, #a92a03 50%, #a92a03 100%);
+      }
     </style>
 	<h1><f:translate key="LLL:EXT:fp_masterquiz/Resources/Private/Language/locallang_mod1.xlf:charts-participants" default="Listing for" /> {pid}</h1>
     <h2>{quiz.name}</h2>

diff --git a/ext_emconf.php b/ext_emconf.php
@@ -16,7 +16,7 @@
     'category' => 'plugin',
     'author' => 'Kurt Gusbeth',
     'state' => 'stable',
-    'version' => '5.1.2',
+    'version' => '5.1.3',
     'constraints' => [
         'depends' => [
             'typo3' => '12.4.0-12.4.99',