Nemo: Interaktionstyp `DROP`

Bei diesem Interaktionstyp wird unten ein großes Bild gezeigt. Mehrere Buttons sind oben nebeneinander dargestellt. Bei Auswahl eines Buttons wandert dieser nach unten auf das Bild.

Parameter

{
1    "variableId": "MK02",
2    "imageSource": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeCAYAAADNK...",
3    "text": "Koffer"
}

1: variableId setzt die Bezeichnung der Antwortvariablen auf einen bestimmten Wert. Standard hier ist DROP.
2: imageSource enthält ein Bild in base64-Kodierung
3: text liefert Text für das <alt>-Attribut (Unterstützung der Barrierefreiheit)

Optionen

{
    "options": [
        {
1            "imageSource": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeCAYAAADNK..."
        },
        {
2            "text": "Schnee"
        },
        {
3            "icon": "CHECK_GREEN"
        }
    ],
}

1: imageSource enthält ein Bild in base64-Kodierung
2: text liefert einen Text für den Button
3: icon erzeugt ein Bild aus einer Sammlung von vordefinierten Symbolen; zugelassen: CHECK_GREEN und CLOSE_RED

Bei den Optionen handelt es sich technisch um eine Liste (Array), und jeder Eintrag kann einen von drei Parametern haben. Die Spezifikation verhindert nicht, dass man mehrere Varianten des Parameters gleichzeitig verwendet, das ist aber in der Regel ohne Wirkung: Der zweite Parameter wird ignoriert (Reihenfolge imageSource > icon > text).

Die ursprüngliche Intention für diesen Interaktionstyp war es, Objekte als Bild auszuwählen. Damit wäre nur der Parameter imageSource zulässig. Um die Verwendbarkeit dieses Modells zu erweitern, sind auch die Optionsparameter text und icon zulässig.

Auswahl und Antwortwert

Die ausgewählte Antwort wird durch eine Farbänderung im Hintergrund (blau) und bei der Schrift (weiß) visualisiert (Parameter text) oder durch einen fetten blauen Rand. Außerdem “wandert” der Button auf das untere Bild. Sollte sich dort bereits ein Button befinden, “wandert” dieser wieder an seine vorherige Stelle. Ein Klick auf einen Button, der sich auf dem Bild befindet, lässt diesen ebenfalls an seine Ausgangsposition zurückwandern.

Die Antwortdaten folgen der Standardstruktur des IQB. Als id wird die gewählte variableId bzw. der Standard DROP gesetzt, und der Status wäre zunächst VALUE_CHANGED (zur Kodierung siehe hier).

Der Antwortwert ist eine Zahl mit der Position des gewählten Buttons. 1 steht für die erste Option.

Zurück nach oben