Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:best-worst [11.05.2021 09:24] – sophia.schauer
+++ de:create:best-worst [05.05.2025 22:43] (aktuell) – [Verfeinerung] admin
@@ Zeile 8: / Zeile 8: @@
 {{:de:create:scr.best-worst.png?nolink|best-worst}}
-=====Umsetzung=====
+===== Umsetzung =====
 Beim Erstellen einer MaxDiff Frage, wird aus zwei Auswahlfragen eine [[de:create:combine|kombinierte Frage]].
@@ Zeile 55: / Zeile 55: @@
 {{:de:create:scr.best-worst.png?nolink|best-worst}}
+===== Verfeinerung =====
+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.
+<code javascript>
+<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>
+</code>
+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.
+<code php>
+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;
+  }
+');
+</code>