CRM/RTR-Messung Audio

Mithilfe der Diagramm-Bibliothek ChartJS lässt sich die Bewertung als Diagramm anzeigen. Wahlweise im Anschluss an die Bewertung (auf der folgenden Seite) oder live während der Aufzeichnung.

Für die Anzeige eines Diagramms während der Datenerhebung speichern Sie folgenden HTML-/JavaScript-Code in einer Rubrik (Fragenkatalog → Text hinzufügen → Darstellung „HTML-Code“).

<div>
    <canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>
 
 
<script type="text/javascript">
<!--
 
// Chart initialisieren
var chart = new Chart(
    document.getElementById('chart'),
    {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Bewertung',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: [],
            }],
        },
        options: {
            scales: {
                yAxis: {
                    min: 0,
                    max: 100
                }
            }
        }
    }
);
 
// Aktualisierung des Charts während der Aufnahme
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>

Der Platzhalter %questionID% wird durch folgenden PHP-Code durch die Kennung der Frage ersetzt. Platzieren Sie den folgenden PHP-Code unter Fragebogen zusammenstellen direkt unter der CRM-Frage. Die Kennung „CR01“ muss durch die Kennung der CRM-Frage ersetzt werden, die Kennung „CR02“ durch die Kennung des Textes mit dem JavaScript-Code.

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

Wenn das Diagramm auf einer späteren Seite im Fragebogen angezeigt werden soll, werden die Daten mittels value() aus dem Datensatz abgerufen. Legen Sie dafür folgenden HTML-/JavaScript-Code in einer Rubrik im Fragenkatalog an (Text hinzufügen → Darstellung „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: 'Bewertung',
                backgroundColor: 'rgb(99, 99, 200)',
                borderColor: 'rgb(99, 99, 200)',
                data: %data%,
            }]
        },
        options: {}
    }
);
 
// -->
</script>

Den folgenden PHP-Code platzieren Sie dort im Fragebogen (Fragebogen zusammenstellen) wo das Chart erscheinen soll. Ersetzen Sie „CR01rsp“ durch die Variablenkennung Ihrer CRM-Frage. Wenn die Frage die Kennung AB01 hat, lautet die Kennung der Variable standardmäßig „AB01rsp“.

$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);

Ziehen Sie den oben erstellten Textbaustein auf dieselbe Seite im Fragebogen (Fragebogen zusammenstellen) unter den PHP-Code.