Kapitel 18. QSortable: Die NumQ als Drag & Drop Liste

Von der Idee her werden die NumQ(s) zusammen mit leeren HTML Listendefinitionen <ul> (= Unsortierte Liste) in einem Screen untergebracht. Ein Javascript-Aufruf versteckt die NumQs und befüllt die noch leeren Listen mit deren Labels als bewegliche Items. Die Platzierung der HTML Listen ist also maßgeblich dafür an welchen Stellen die Listen später auf der Seite dargestellt werden. Die HTML Syntax einer solchen Liste sähe wie folgt aus und wird anschließend erklärt:

<ul type='TARGET|SOURCE' numq='NUMQ' maxitems=NUMBER></ul>

Aus diesen Definitionen geht hervor, dass NumQs von Quelllisten entsprechend immer ohne Eingabezwang angelegt werden müssen, während der Eingabezwang auf der NumQ einer Zielliste festlegt, wie viele Items tatsächlich einsortiert werden müssen. Funktionell können Items per Drag & Drop nur in allen target-Listen und Ihrer ursprünglichen source-Liste abgelegt werden. Ein Platzhalter deutet beim Bewegen eines Items an, wenn es fallen gelassen werden kann.

Minimalbeispiel für die Anwendung der QSortable:

opennumformat rank1_5 = 1 1 0 0 0 5 "Bitte bringen Sie die 5 Items in eine Reihenfolge.";
numq myNumQ;
text="Welches Item gefällt Ihnen am besten?";
title="
  Items
  <div><ul type='source' numq='myNumQ' maxitems='0'></ul></div>
  Ranking
  <div><ul type='target' numq='myNumQ' maxitems='0'></ul></div>
";
labels=
1 "Item A" format rank1_5
2 "Item B" format rank1_5
3 "Item C" format rank1_5
4 "Item D" format rank1_5
5 "Item E" format rank1_5
;
// assert (num(myNumQ) eq 3) "Es müssen genau 3 Items einsortiert werden";
javascript="qSortable.numQ2Sortable();";
    

Das oben gezeigte Beispiel nutzt eine NumQ gleichzeitig als Quell- und als Zielliste, die untereinander dargestellt werden. Es ist keine Information über den Eingabezwang ersichtlich. Je nach Einstellung in defaultnomissing müssten also entweder alle Items einsortiert werden oder nicht. Das auskommentierte assert würde nur unter Aufhebung des allgemeinen Eingabezwangs Sinn machen und bewirken, dass genau 3 Items in die Zielliste übernommen werden müssen. Bei aktiviertem Eingabezwang hätten wir hier zwei gegensätzliche Anforderungen, die zusammen nicht erfüllbar sind. Der Befragte wäre in einer Sackgasse. Bei alleiniger Verwendung des assert wäre auch maxitems='3' an der Zielliste gebräuchlich, damit der Befragte schon beim Ausfüllen der Frage unterstützt wird. Die Darstellung dieses Beispiels sähe je nach Rahmenlayout z.B. wie folgt aus:

Abbildung 18.2. QSortable Minimalbeispiel

Derzeit gibt es für die QSortable einen Fehlertext (qSortable.errorMsg, der erscheint wenn versucht wird Ziellisten mit mehr Items zu befüllen als vorgesehen ist und Möglichkeiten die Darstellung über CSS zu modifizieren. Der Fehlertext kann direkt vor dem Aufruf der Javascript Funktion geändert werden:

javascript="
  qSortable.errorMsg = 'Sie können maximal 3 Items in die Zielfläche legen.';
  qSortable.targetOnly = true;
  qSortable.numQ2Sortable();
";
      

Mit dem Parameter qSortable.targetOnly lässt sich festlegen, ob die Items einer Quellliste auch in eine andere Quellliste oder nur in die Zielliste einsortiert werden dürfen. (Voreinstellung: nur in die Zielliste)

Bei mehrsprachigen Studien ist darauf zu achten, dass javascript Sektionen nicht bei der Übersetzung berücksichtigt werden. Hier lässt sich mit @insert() arbeiten, um den Fehlertext aus einer Quelle zu beziehen.

Das Layout der QSortable lässt sich mit CSS anpassen. Über folgende CSS Klassen sind die Bestandteile der Darstellung selektierbar:

Abbildung 18.3. QSortable CSS Layout

Einige Beispiele zur Verdeutlichung:

css="
  .connectedSortable             { width:400px } /* Listenbreite 400 Pixel  */
  .connectedSortable li          { width:380px } /* Itembreite 380 Pixel    */
  .connectedSortable[type=target]{             } /* betrifft nur Ziellisten */
  
  /* Sortable zu NumQ f1 ohne Platznummern */
  .connectedSortable[numq=f1] .ui-sort-placeholder{ display:none; }
";