Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:feedback-visual [26.07.2020 12:25] – msd-media
+++ de:create:feedback-visual [03.05.2024 10:47] (aktuell) – [Einzelne Werte] admin
@@ Zeile 4: / Zeile 4: @@
 **Hinweis:** Diese Anleitung zeigt, wie Feedback innerhalb bzw. am Ende eines Fragebogens angezeigt werden kann. Mithilfe des Zusatzmoduls für die [[:de:results:analyses|automatische Datenauswertung]] ist es auch möglich, ein PDF mit persönlicher Auswertung zum Download anzubieten, vgl. [[:de:results:report]].
+**Hinweis:** Wie man den Befragten Feedback auf einzelne Fragen geben kann (richtig/falsch), wird in einer separaten Anleitung erklärt: [[:de:create:feedback-correct]]
+**Hinweis:** Ebenfalls eine separate Anleitung erklärt, wie man einer Person eine Druckansicht ihrer eigenen Antworten ("ausgefüllten Fragebogen zum Ausdrucken/Speichern") anbieten kann: ''[[:de:create:functions:answersprint]]''
 ===== Darstellung in Textform =====
@@ Zeile 46: / Zeile 50: @@
 }
 </code>
+**Hinweis:** Die Zeile ''$zValue = ($value - 5) / 2.8;'' nimmt eine z-Transformation unter der Annahme vor, dass die Werte einer Verteilung mit dem Mittelwert 5 und der Standardabweichung 2,8 folgen. Die resultierenden Werte ''$zValue'' liegen dann in 99% der Fälle im Bereich ''[-3;+3]''. Sie müssen keine z-Transformation vornehmen, aber wenn Sie es tun, müssen Sie die Werte anpassen.
 ==== Mehrere Werte ====
-Mehrere Werte werden häufig tabellarisch dargestellt. Am einfachsten funktioniert dies mit einem Textbaustein und Platzhaltern. Speichern Sie z.B. den folgenden HTML-Code unter **Textbausteine u. Beschriftungen** im neuen Textbaustein //results//.
+Mehrere Werte werden häufig tabellarisch dargestellt. Am einfachsten funktioniert dies mit einem Textbaustein und Platzhaltern. Speichern Sie z.B. den folgenden HTML-Code unter **Textbausteine u. Beschriftungen** im neuen Textbaustein //results// (Darstellung "HTML-Code").
 <code html>
@@ Zeile 75: / Zeile 81: @@
 <code php>
-text('result', array(
+show('result', array(
   '%val-extra%' => valueMean('AB01_01', 'AB01_05', 'AB01_09'),
   '%val-neuro%' => valueMean('AB01_02', 'AB01_06', 'AB01_10')
@@ Zeile 132: / Zeile 138: @@
 }
 </code>
+**Hinweis:** Die Zeile ''$zValue = ($value - 5) / 2.8'' nimmt eine z-Transformation unter der Annahme vor, dass die Werte einer Verteilung mit dem Mittelwert 5 und der Standardabweichung 2,8 folgen. Die resultierenden Werte ''$zValue'' liegen dann in 99% der Fälle im Bereich ''[-3;+3]''. Sie müssen keine z-Transformation vornehmen, aber wenn Sie es tun, müssen Sie die Werte anpassen.
@@ Zeile 141: / Zeile 149: @@
 ==== Mehrere Werte (II) ====
-Sofern auf dem Befragungsserver das Plug-In //Highcharts// zur Verfügung steht, können mit der Highcharts-Bibliothek sehr schicke Diagramme im Fragebogen angezeigt werden. Wenn die Kategorie-Beschriftungen in im Array ''$labels'' gespeichert sind, die Ergebnisse im Array ''$ownData'' und Referenzdaten im Array ''$refData'', kann man mit folgendem Textbaustein "chart" (//Darstellung// "HTML_Code") und dem zugehörigen PHP-Code ein Balken-Diagramm anzeigen. Erklärungen und Details sind der [[http://www.highcharts.com/docs|Highcharts Dokumentation]] zu entnehmen.
+Mit der Bibliothek ChartJS können sehr schicke Diagramme im Fragebogen angezeigt werden. Wenn die Kategorie-Beschriftungen im Array ''$labels'' gespeichert sind, die Ergebnisse im Array ''$ownData'' und Referenzdaten im Array ''$refData'', kann man mit folgendem Text (im Beispiel hat er die Kennung "CH01", als //Darstellung// stellen Sie bitte "HTML_Code" ein) und dem zugehörigen PHP-Code ein Balken-Diagramm anzeigen. Erklärungen und Details sind der [[https://www.chartjs.org/|ChartJS Dokumentation]] zu entnehmen.
-**Tipp:** Das PlugIn ChartJS steht standardmäßig zur Verfügung und bietet vergleichbare Möglichkeiten wie Highcharts.
 <code html>
 <!-- Container für das Diagramm -->
-<div id="chart" style="height: 600px"></div>
+<canvas id="myChart" width="400" height="300"></canvas>
-<script type="text/javascript" src="../plugins/highcharts/highcharts.js"></script>
 <script type="text/javascript">
 <!--
-$(function () {
+var chartCanvas = document.getElementById('myChart').getContext('2d');
-    $('#chart').highcharts({
+var chart01 = new Chart(chartCanvas, {
-        chart: {
+    type: 'line',
-            type: 'bar'
+    data: {
-        },
+        labels: %labels%,
-        title: {
+        datasets: [{
-            text: null
+            label: 'Ihr Wert',
-        },
+            data: %ownData%,
-        xAxis: {
+            backgroundColor: '#FF9900',
-            categories: %labels%,
+            borderColor: '#FFCCAA',
-            title: {
+            pointRadius: 8
-                text: null
+        }, {
-            }
+            label: 'Durchschnitt',
-        },
-        plotOptions: {
-            bar: {
-                dataLabels: {
-                    enabled: true
-                }
-            }
-        },
-        legend: {
-            layout: 'horizontal',
-            align: 'center',
-            verticalAlign: 'bottom',
-            floating: false,
-            borderWidth: 0,
-            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
-            shadow: false
-        },
-        credits: {
-            enabled: false
-        },
-        series: [{
-            name: 'Durchschnitt',
             data: %refData%,
-            color: '#BBBBBB',
+            backgroundColor: '#AAAAAA',
-            dataLabels: {
+            borderColor: '#DDDDDD',
-                enabled: false
+            pointRadius: 8
+        }]
+    },
+    options: {
+        indexAxis: 'y',
+        scales: {
+            x: {
+                beginAtZero: true
             }
-        }, {
+        }
-            name: 'Ihr Wert',
+    }
-            data: %ownData%,
-            color: '#009900',
-            dataLabels: {
-                enabled: false
-            }
-        }]
-    });
 });
@@ Zeile 210: / Zeile 192: @@
 <code php>
-// Bibliothek jQuery verfügbar machen
+// Bibliothek ChartJS verfügbar machen
-option('script', 'jQuery 1.x');
+library('ChartJS');
+// Testdaten (hier würde man Daten aus dem Datensatz auslesen)
+$labels = ['Motivation', 'Engagement', 'Qualifikation'];
+$ownData = [57, 42, 80];
+$refData = [52, 48, 74];
 // Textbaustein mit dem HTML-Code für das Chart einbinden
-text('chart', array(
+show('TX09', [
   '%labels%' => json_encode($labels),
   '%ownData%' => json_encode($ownData),
   '%refData%' => json_encode($refData)
-));
+]);
 </code>