Auswahl begrenzen

Question

Wenn es möglich ist, wäre ich froh um eine Lösung.
Ziel ist es auf der ganzen Seite, die Sie im Pretest gesehen haben die Auswahl an Tipps auf 5 zu begrenzen. Momentan sind die 4 Themenbereiche auf dieser Seite als 4 Einzelne Fragen konzipiert. Ich nehme mal an, man müsste bei einer Begrenzung von maximal 5 Tipps alle Beriche (Wohnen, Mobilität usw) in einer Frage haben, oder?
Wenn ja, wäre es natürlich trotzdem schön, wenn man die Antwortmöglichkeiten thematisch (mit Überschrift) darstellen könnte, also die Überschriften Wohnen usw. erhalten blieben.

Answer 1

Anstt den 4 einzelnen Fragen können Sie auch ein Item links in der Navigation auswählen und auf "+Überschrift" klicken, um eine Zwischenüberschrift einzufügen.

Allerdings ist eine JavaScript-Lösung für die Begrenzung der Kreuzchen unabhängig (!) davon, ob die Eingabefelder in einer Frage stehen oder zu unterschiedlichen Fragen gehören. Hier müssen Sie ohnehin alle Eingabefelder einzeln spezifizieren.

Der Code könnte etwa wie folgt aussehen und müsste unter der Frage platziert werden:

<script type="text/javascript">

// Ermitteln der aktuellen Auswahl
function getSelection(inputList) {
  var selected = [];
  for (var i=0; i<inputList.length; i++) {
    if (document.getElementById(inputList[i]).checked) {
      selected.push(inputList[i]);
    }
  }
  return selected;
}

// Setzen einer vorgegeben Auswahl
function setSelection(inputList, selection) {
  for (var i=0; i<inputList.length; i++) {
    if (selected.indexOf(inputList[i]) < 0) {
      document.getElementById(inputList[i]).checked = false;
    } else {
      document.getElementById(inputList[i]).checked = true;
    }     
  }
}

// Speichern der "gültigen" Auswahl
var validSelection;

var inputList = [
    "A305_021", "A305_022",
    "A305_031", "A305_032",
    // ...
    "A306_011", "A306_012",
    // u.s.w.
];

// Funktion zum Abzählen der Kreuzchen
function confirm() {
  var selected = getSelection(inputList);
  if (selected.length > 5) {
    if (validSelection && (validSelection.length <= 5)) {
      setSelection(validSelection);
    } else {
      setSelection(selection.slice(0,5));      
    }
  }
  validSelection = getSelection(inputList);
}

// Aktivieren der Funktion
for (var i=0; i<inputList.length; i++) {
  document.getElementById(inputList[i]).addEventListener("click", confirm);
}

</script>

Vermutlich hat das Script noch den ein oder anderen kleinen Fehler - aber diese sollten mit der Fehlerkonsole des Browsers schnell zu beheben sein. Posten Sie gerne einen aktuellen Pretest-Link, wenn Sie dazu nochmal Unterstützung benötigen.

Comments

Besten Dank :-)
Nach Rücksprache mit unsere Projektleitung belassen wir es aus Budgetgründen erstmal so wie es jetzt ist. Für ich ist Ihre Antwort trotzdem sehr hilfreich, vor allem wenn es um weitere Projekte geht oder eine Anpassung doch noch gemacht werden soll.