Inhaltsverzeichnis

CRM/RTR-Messung Audio

Anzeige der Bewertung im Fragebogen

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.

Live-Chart

Für die Anzeige eines Diagramms während der Datenerhebung speichern Sie folgenden HTML-/JavaScript-Code in einer Rubrik (FragenkatalogText hinzufügenDarstellungHTML-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'
]);

Chart nach Abschluss

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ügenDarstellungHTML-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.