CRM/RTR audio measuring

Using the chart library ChartJS, the rating can be displayed as a chart, either after the assessment (on the following page), or live during the recording.

To display a chart during data collection, save the following HTML/JavaScript code in a section (List of Questions → Add Text → Display “HTML Code”).

<div>
    <canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>
 
 
<script type="text/javascript">
<!--
 
// Initialise chart 
var chart = new Chart(
    document.getElementById('chart'),
    {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Rating',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: [],
            }],
        },
        options: {
            scales: {
                yAxis: {
                    min: 0,
                    max: 100
                }
            }
        }
    }
);
 
// Updating the chart during recording
var rtr = document.getElementById("%questionID%_tab");
rtr.addEventListener("change", function(evt) {
    var response = evt.detail.response;
    var samples = evt.detail.duration * evt.detail.resolution;
 
    // Set labels for the whole duration
    if (chart.data.labels.length < evt.detail.duration) {
        labels = [];
        for (var i=0; i<samples; i++) {
            labels.push((i + 1) / evt.detail.resolution);
        }
        chart.data.labels = labels;
    }
 
    chart.data.datasets[0].data = response;
    chart.update("none");
});
 
// -->
</script>

The placeholder %questionID% is replaced by the following PHP code with the identifier of the question. Place the following PHP code under Compose Questionnaire directly under the CRM question. The identifier CR01 must be replaced with the identifier of the CRM question, and the identifier CR02 must be replaced with the identifier of the text containing the JavaScript code.

library('ChartJS');
show('CR02', [
    '%questionID%' => 'CR01'
]);

If the chart is to be displayed on a later page in the questionnaire, the data is retrieved from the dataset using value(). To do this, create the following HTML/JavaScript code in a section in the Questionnaire (Add text → Display “HTML code”).

<div>
    <canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>
 
 
<script type="text/javascript">
<!--
 
var myChart = new Chart(
    document.getElementById('chart'),
    {
        type: 'line',
        data: {
            labels: %labels%,
            datasets: [{
                label: 'Rating',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: %data%,
            }]
        },
        options: {}
    }
);
 
// -->
</script>

Place the following PHP code in the questionnaire (Compose Questionnaire) where you want the chart to appear. Replace “CR01rsp” with the variable identifier of your CRM question. If the question's identifier is AB01, the variable identifier will be “AB01rsp” by default.

$data = value('CR01rsp', 'label');
$data = explode(',', $data);
 
$values = [null];
foreach ($data as $value) {
  $iValue = (int)$value;
  if ($iValue >= 0) {
    $values[] = (int)$value;
  } else {
    $values[] = NULL;
  }
}
 
replace('%data%', json_encode($values));
replace('%labels%', json_encode(array_keys($values)));
library('ChartJS');
option('nextbutton', false);

Drag the text module created above to the same page in the questionnaire (Compose Questionnaire) under the PHP code.