Best-Worst (MaxDiff)

Bei dem Frageformat Best-Worst bzw. MaxDiff (Maximum Difference Scaling) geht es darum, aus verschiedenen Aussagen zu entscheiden, welche „am wichtigsten“ und welche „am wenigsten wichtig“ für einen Teilnehmer ist. Es geht also um eine maximale Differenz zwischen zwei Items.

Im Beispiel geht es darum, dass der Teilnehmer angeben soll, welche Eigenschaft entscheidend für die Auswahl ist.

Beim Erstellen einer MaxDiff Frage, wird aus zwei Auswahlfragen eine kombinierte Frage.

Zunächst wird in dem Beispiel eine Rubrik namens „MaxDiff“ mit der Kennung „MD“ und folglich eine Auswahlfrage mit der Kennung „MD01“ (für MaxDiff) angelegt. In der Frage wird der Frage-Text eingetragen sowie die 4 Eigenschaften („guter Geschmack“, …) als Antwortoptionen.

Als Überschrift über den Items wird eine Beschreibung benötigt („am wenigsten wichtig“). Der Text wird im Karteireiter Auswahloptionen in das Feld Text über den Optionen eingeben und die Anzeigeoption über den Auswahlfeldern gewählt. Unter Ausrichtung der Auswahlfelder wird die Position links gewählt.

Nun wird die Frage gespeichert und anschließend dupliziert (). Sie sieht nun in der Vorschau folgendermaßen aus:

Die duplizierte Frage bekommt automatisch die neue Kennung MD02 und ist zunächst identisch mit MD01. In der neuen Frage werden nun der Text über den Optionen und die Ausrichtung der Auswahlfelder geändert. Aus „am wenigsten wichtig“ wird „am wichtigsten“ und die Ausrichtung der Auswahlfelder wird zu rechts geändert. Diese sieht nach dem Speichern wie folgt aus:

Beim Fragebogen zusammenstellen zieht man auf eine leere Seite ein PHP-Code Element (Einführung in PHP-Code). Als Inhalt wird der folgende PHP-Code eingetragen.

question('MD01', 'combine=MD02', 'gap=none');

So werden die beiden Fragen zu einer Frage kombiniert und das Ergebnis sieht folgendermaßen aus:

Um die Frage noch in der richtigen Ausrichtung anzuzeigen, also dass die Auswahloptionen mittig zwischen den Auswahlfeldern liegen, muss die Seite mittels pageCSS um CSS-Code erweitert werden:

question('MD01', 'combine=MD02', 'gap=none');
 
pageCSS('
  td.s2col2 {
    text-align: center;
  }
');

Dieser CSS-Code weist den Browser an, die zweite Spalte (s2col2) – in dem Fall ist das die Spalte mit den Eigenschaften – mittig auszurichten. Beachten Sie, dass das auch andere Fragen betreffen kann, die eventuell noch auf der Seite platziert wurden. In diesem Fall kann noch die Kennung der Frage vor den CSS-Code gesetzt werden: #MD01_qst td.s2col2 {….

Nach der Bearbeitung des Codes erscheint die Frage mit den Auswahloptionen mittig:

Falls Sie vermeiden möchten, dass man ein Item gleichzeitig als beste und schlechteste Option wählen kann, ist JavaScript erforderlich. Erstellen Sie im Fragenkatalog einen „Neuen Text“ mit der Darstellung „HTML-Code“ und folgendem Inhalt.

<script>
function BestWorst(leftID, rightID) {
 
    // Collect the options
    let leftOptions = document.querySelectorAll('input[name="' + leftID + '"]');
    let rightOptions = document.querySelectorAll('input[name="' + rightID + '"]');
 
    let count = Math.min(leftOptions.length, rightOptions.length);
 
    // If any is selected, the counterpart is disabled an unselected
    function updateBlocking() {
        for (let i=0; i<count; i++) {
            if (leftOptions[i].checked) {
                rightOptions[i].checked = false;
                rightOptions[i].disabled = true;
            } else {
                rightOptions[i].disabled = false;
            }
 
            if (rightOptions[i].checked) {
                leftOptions[i].checked = false;
                leftOptions[i].disabled = true;
            } else {
                leftOptions[i].disabled = false;
            }
        }
    }
 
    // Enable listeners
    for (let i=0; i<count; i++) {
        leftOptions[i].addEventListener("click", updateBlocking);
        rightOptions[i].addEventListener("click", updateBlocking);
    }
 
    // Initial prüfen
    updateBlocking();
}
 
document.addEventListener("DOMContentLoaded", function () {
    new BestWorst("%leftName%", "%rightName%");
});
 
</script>

Für das weitere Beispiel nehmen wir an, dass der Text die Kennung „JS01“ hat. Nun binden Sie diesen Texte und ein wenig CSS-Code unter Ihrer kombinierten Frage ein. Die Kennungen der beiden Teilfragen müssen Sie beim show() ein zweites Mal eintragen.

question('MD01', 'combine=MD02', 'gap=none');
 
// JavaScript-Code
show('JS01', [
  '%leftName%' => 'MD01',
  '%rightName%' => 'MD02',
]);
 
pageCSS('
  td.s2col2,
  th.s2col1,
  th.s2col3 {
    text-align: center;
  }
  input[disabled] {
    opacity: 0.5;
  }
');