Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
en:create:feedback-visual [07.02.2017 13:58] – [Mehrere Werte (I)] m.andrejevic | en:create:feedback-visual [12.06.2022 13:48] – [Multiple Values (II)] christina.treppy |
---|
====== Personal evaluation for the participant ====== | ====== Individual Feedback for Participants ====== |
| |
| |
Using the functions ''[[:en:create:functions:value]]'', ''[[:en:create:functions:valueMean]]'', the participant's answers can already be evaluated during the Questionnaire session (also see [[:en:create:points]]). Some questions, like for instance [[:en:create:questions:IAT]], deliver an evaluation directly. Additionally, with the help of ''[[:en:create:functions:statistic]]'' function, it is possible to evaluate values of all the previously tested participants. | Using the functions ''[[:en:create:functions:value]]'', ''[[:en:create:functions:valueMean]]'', the participant's answers can already be evaluated during the Questionnaire session (also see [[:en:create:points]]). Some questions, like for instance [[:en:create:questions:IAT]], deliver an evaluation directly. Additionally, with the help of ''[[:en:create:functions:statistic]]'' function, it is possible to evaluate values of all the previously tested participants. |
| |
| **Note:** This tutorial shows how feedback can be displayed within or at the end of a questionnaire. Using the additional [[:en:results:analyses|automatic data analysis]] module, it is possible to provide a PDF with a personal feedback for download, see [[:en:results:report]]. |
| |
| **Note:** Instructions on how to give feedback on individual questions (correct/incorrect) can be found in a separate tutorial: [[:en:create:feedback-correct]] |
| |
| **Note:** Another tutorial explains how to provide a print view of a participant's own answers ("print/save my questionnaire"): ''[[:en:create:functions:answersprint]]'' |
| |
===== Presenting outcome as text ===== | ===== Presenting outcome as text ===== |
} | } |
</code> | </code> |
| |
| |
==== Multiple Values ==== | ==== Multiple Values ==== |
| |
Multiple values are commonly displayed in a table. The easiest way to do this is with text-blocks and placeholders. For instance you could save the following HTML code under **Textblocks and Labels** inside a new textblock //results//. | Multiple values are commonly displayed in a table. The easiest way to do this is with text-blocks and placeholders. For instance you could save the following HTML code under **Textblocks and Labels** inside a new textblock //results// ("HTML code" representation). |
| |
<code html> | <code html> |
{{:de:create:exp.feedback-visual.textelement.png?nolink|An example for visual presentation of a single value}} | {{:de:create:exp.feedback-visual.textelement.png?nolink|An example for visual presentation of a single value}} |
| |
Save the following HTML code as a textblock, for example under the identifier "responseSD". | Save the following HTML code as a text in the list fo questions (the following examples assume that it gets the ID "RS01"). |
| |
<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"> |
<!-- The actual Marking is going to be inserted at the above defined right place --> | <!-- The actual Marking is going to be inserted at the above defined right place --> |
<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> |
| |
In the HTML code there are two placeholders: ''%title%'' and ''%z-value*100%''. The second placeholder is actually called ''%z-value%''. Using ''*100'', it's value is going to be multiplied by 100 before it is inserted in the HTML code. This HTML code is therefore designed to show a z-value between -3 and +3. | The HTML code contains two placeholders: ''%title%'' and ''%zValue100%''. It is designed to show a z-value between -3 and +3 and can be used as follows: |
This can be used accordingly: | |
| |
<code php> | <code php> |
// Use textblocks (only if $value delivered a valid value) | // Use textblocks (only if $value delivered a valid value) |
if ($value > 0) { | if ($value > 0) { |
text('responseSD', array( | show('RS01', array( |
'%title%' => 'Extraversion', | '%title%' => 'Extraversion', |
'%z-value%' => $zValue | '%zValue%' => (string)round($zValue * 100) |
)); | )); |
} | } |
| |
Using the function ''[[:en:create:functions:diagram2]]'', one can place desired Diagrams into the Questionnaire. To learn how to use it please refer to the documentation of the function. An optimized function ''chart()'' is going to be available in future versions of SoSci Survey. | Using the function ''[[:en:create:functions:diagram2]]'', one can place desired Diagrams into the Questionnaire. To learn how to use it please refer to the documentation of the function. An optimized function ''chart()'' is going to be available in future versions of SoSci Survey. |
==== Mehrere Werte (II) ==== | ==== Multiple Values (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. | You can use the ChartJS library to display nifty diagrams in your questionnaire. If the category labels are saved in the array ''$labels'', the results are saved in the array ''$ownData'' and reference data is saved in the array ''$refData'', you can use the following text (in the example it has the identifier "CH01", as //Darstellung// "HTML_Code") and the associated PHP code to display a bar chart. You can find clarifications and details at [[https://www.chartjs.org/|ChartJS Documentation]]. |
| |
<code html> | <code html> |
<!-- Container für das Diagramm --> | <!-- Container for the diagram --> |
<div id="chart" style="height: 600px"></div> | <div id="chart" style="height: 600px"></div> |
| |
}, | }, |
series: [{ | series: [{ |
name: 'Durchschnitt', | name: 'Average', |
data: %refData%, | data: %refData%, |
color: '#BBBBBB', | color: '#BBBBBB', |
} | } |
}, { | }, { |
name: 'Ihr Wert', | name: 'Your Value', |
data: %ownData%, | data: %ownData%, |
color: '#009900', | color: '#009900', |
| |
<code php> | <code php> |
// Bibliothek jQuery verfügbar machen | // Make jQuery library available |
option('script', 'jQuery 1.x'); | library('jQuery'); |
// Textbaustein mit dem HTML-Code für das Chart einbinden | // Bind the textblock with the HTML code for the chart |
text('chart', array( | text('chart', array( |
'%labels%' => json_encode($labels), | '%labels%' => json_encode($labels), |