Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
de:create:feedback-visual [30.01.2019 09:17] – [Persönliche Auswertung für den Teilnehmer] msd-media | de:create:feedback-visual [03.05.2024 10:47] (aktuell) – [Einzelne Werte] admin |
---|
| |
**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:** 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 ===== | ===== Darstellung in Textform ===== |
} | } |
</code> | </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 ==== |
| |
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> | <code html> |
| |
<code php> | <code php> |
text('result', array( | show('result', array( |
'%val-extra%' => valueMean('AB01_01', 'AB01_05', 'AB01_09'), | '%val-extra%' => valueMean('AB01_01', 'AB01_05', 'AB01_09'), |
'%val-neuro%' => valueMean('AB01_02', 'AB01_06', 'AB01_10') | '%val-neuro%' => valueMean('AB01_02', 'AB01_06', 'AB01_10') |
{{:de:create:exp.feedback-visual.textelement.png?nolink|Beispiel für die visuelle Darstellung eines einzelnen Werts}} | {{:de:create:exp.feedback-visual.textelement.png?nolink|Beispiel für die visuelle Darstellung eines einzelnen Werts}} |
| |
Speichern Sie den folgenden HTML-Code als Textbaustein, z.B. mit der Kennung "responseSD". | Speichern Sie den folgenden HTML-Code als neuen Text im Fragenkatalog (im Folgenden wird angenommen, dass er die Kennung "RS01" erhält). |
| |
<code html> | <code html> |
<div style="position: absolute; top: -2px; left: 50%; width: 65px; height: 27px"> | <div style="position: absolute; top: -2px; left: 50%; width: 65px; height: 27px"> |
<!-- Die eigentliche Markierung wird an der richtigen Stelle eingefügt --> | <!-- Die eigentliche Markierung wird an der richtigen Stelle eingefügt --> |
<img src="ofb://slider.button.rhomb" alt="" style="position: absolute; left: %z-value*100%%; margin-left: -8px" /> | <img src="ofb://slider.button.rhomb" alt="" style="position: absolute; left: %zValue100%%; margin-left: -8px" /> |
</div> | </div> |
</div> | </div> |
</code> | </code> |
| |
Im HTML-Code sind zwei Platzhalter: ''%title%'' und ''%z-value*100%''. Der zweite Platzhalter heißt eigentlich ''%z-value%'', sein Wert wird wegen dem ''*100'' aber mit 100 multipliziert, bevor er in den HTML-Code eingesetzt wird. Dieser HTML-Code ist dafür ausgelegt, einen z-Wert zwischen -3 und +3 anzuzeigen. Entsprechend sähe die Verwendung aus wie folgt: | Der HTML-Code verwendet zwei Platzhalter: ''%title%'' und ''%zValue100%''. Dieser HTML-Code ist dafür ausgelegt, einen z-Wert zwischen -3 und +3 anzuzeigen. Entsprechend sähe die Verwendung aus wie folgt: |
| |
<code php> | <code php> |
// Textbaustein verwenden (nur, wenn $value einen gültigen Wert geliefert hat) | // Textbaustein verwenden (nur, wenn $value einen gültigen Wert geliefert hat) |
if ($value > 0) { | if ($value > 0) { |
text('responseSD', array( | show('RS01', array( |
'%title%' => 'Extraversion', | '%title%' => 'Extraversion', |
'%z-value%' => $zValue | '%zValue100%' => (string)round($zValue * 100) |
)); | )); |
} | } |
</code> | </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 (II) ==== | ==== 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. |
| |
<code html> | <code html> |
<!-- Container für das Diagramm --> | <!-- 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"> | <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%, | 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 | |
} | |
}] | |
}); | |
}); | }); |
| |
| |
<code php> | <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 | // Textbaustein mit dem HTML-Code für das Chart einbinden |
text('chart', array( | show('TX09', [ |
'%labels%' => json_encode($labels), | '%labels%' => json_encode($labels), |
'%ownData%' => json_encode($ownData), | '%ownData%' => json_encode($ownData), |
'%refData%' => json_encode($refData) | '%refData%' => json_encode($refData) |
)); | ]); |
</code> | </code> |