This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:feedback-visual [04.04.2019 15:13] – admin | en:create:feedback-visual [07.12.2023 07:01] (current) – admin | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
Using the functions '' | Using the functions '' | ||
+ | **Note:** This tutorial shows how feedback can be displayed within or at the end of a questionnaire. Using the additional [[: | ||
+ | |||
+ | **Note:** Instructions on how to give feedback on individual questions (correct/ | ||
+ | |||
+ | **Note:** Another tutorial explains how to provide a print view of a participant' | ||
===== Presenting outcome as text ===== | ===== Presenting outcome as text ===== | ||
Line 46: | Line 51: | ||
} | } | ||
</ | </ | ||
+ | |||
==== Multiple Values ==== | ==== Multiple Values ==== | ||
- | Multiple values are commonly displayed in a table. The easiest way to do this is with text-blocks and placeholders. | + | 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 // |
<code html> | <code html> | ||
Line 74: | Line 80: | ||
<code php> | <code php> | ||
- | text(' | + | show(' |
' | ' | ||
' | ' | ||
Line 90: | Line 96: | ||
{{: | {{: | ||
- | Save the following HTML code as a textblock, for example under the identifier | + | 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> | ||
Line 102: | Line 108: | ||
<div style=" | <div style=" | ||
<!-- 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=" | + | <img src=" |
</ | </ | ||
</ | </ | ||
Line 108: | Line 114: | ||
</ | </ | ||
- | In the HTML code there are two placeholders: | + | The HTML code contains |
- | This can be used accordingly: | + | |
<code php> | <code php> | ||
Line 125: | Line 130: | ||
// Use textblocks (only if $value delivered a valid value) | // Use textblocks (only if $value delivered a valid value) | ||
if ($value > 0) { | if ($value > 0) { | ||
- | | + | |
' | ' | ||
- | ' | + | ' |
)); | )); | ||
} | } | ||
Line 138: | Line 143: | ||
==== Multiple Values (II) ==== | ==== Multiple Values (II) ==== | ||
- | As long as the // | + | You can use the ChartJS |
<code html> | <code html> | ||
<!-- Container for the diagram --> | <!-- Container for the diagram --> | ||
- | <div id="chart" | + | <canvas |
- | <script type=" | ||
<script type=" | <script type=" | ||
<!-- | <!-- | ||
- | $(function | + | var chartCanvas = document.getElementById(' |
- | $('#chart').highcharts({ | + | var chart01 = new Chart(chartCanvas, |
- | | + | type: 'line', |
- | | + | data: { |
- | }, | + | |
- | title: { | + | |
- | text: null | + | |
- | | + | |
- | xAxis: { | + | |
- | categories: %labels%, | + | |
- | title: { | + | |
- | text: null | + | }, { |
- | } | + | |
- | }, | + | |
- | | + | |
- | bar: { | + | |
- | dataLabels: { | + | |
- | enabled: true | + | |
- | } | + | |
- | } | + | |
- | }, | + | |
- | legend: { | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | borderWidth: | + | |
- | backgroundColor: | + | |
- | | + | |
- | }, | + | |
- | credits: { | + | |
- | enabled: false | + | |
- | }, | + | |
- | series: [{ | + | |
- | | + | |
data: %refData%, | data: %refData%, | ||
- | | + | |
- | | + | |
- | | + | pointRadius: |
+ | }] | ||
+ | }, | ||
+ | options: { | ||
+ | indexAxis: ' | ||
+ | scales: { | ||
+ | x: { | ||
+ | | ||
} | } | ||
- | }, { | + | } |
- | name: 'Your Value', | + | } |
- | data: %ownData%, | + | |
- | color: '# | + | |
- | dataLabels: { | + | |
- | enabled: false | + | |
- | } | + | |
- | }] | + | |
- | }); | + | |
}); | }); | ||
Line 205: | Line 186: | ||
<code php> | <code php> | ||
- | // Make jQuery | + | // Make ChartJS |
- | option('script', 'jQuery 1.x'); | + | library('ChartJS' |
- | // Bind the textblock | + | |
- | text('chart', | + | // Test data (here you would read data from the dataset) |
+ | $labels = [' | ||
+ | $ownData = [57, 42, 80]; | ||
+ | $refData = [52, 48, 74]; | ||
+ | |||
+ | // Include text module | ||
+ | show('TX09', | ||
' | ' | ||
' | ' | ||
' | ' | ||
- | )); | + | ]); |
</ | </ |