StarS: Interaktionstyp BUTTONS

Bei diesem Interationstyp werden Buttons gezeigt. Sie werden horizontal und vertikal zentriert.

Es gibt mehrere Varianten dieses Interaktionstyps. Für eine schnelle Umsetzung werden zunächst die häufigsten als Bild gezeigt und darunter die jeweils dafür nötige Unitdefinition vollständig in einem Code-Fenster dargestellt. Dazu bitte auf Unitdefintion JSON klicken (ausklappen). Man kann über einen kleinen Button oben rechts im Code-Fenster die Syntax in die Zwischenablage kopieren und dann im Ziel einfügen. Es müssen dann anschließend Text sowie die Audio- und Bilddefinitionen ersetzt werden.

Unitdefintion JSON 
{
  "id": "stars-unit-definition",
  "version": "0.12",
  "backgroundColor": "#E1E9FF",
  "continueButtonShow": "ALWAYS",
  "mainAudio": {
    "audioSource": "data:audio/mpeg;base64,//OEZAAAAAAAAAAAAAAAAAA.......",
    "firstClickLayer": false,
    "animateButton": false,
    "maxPlay": 0
  },
  "interactionType": "BUTTONS",
  "interactionParameters": {
    "buttonType": "MEDIUM_SQUARE",
    "multiSelect": false,
    "numberOfRows": 2,
    "options": {
      "buttons": [
        {
                "imageSource": "data:image/png;base64,iVBORw0KGgoAAAA...."
        },
        {
                "imageSource": "data:image/png;base64,iVBORw0KGgoAAAA...."
        },
        {
                "imageSource": "data:image/png;base64,iVBORw0KGgoAAAA...."
        },
        {
                "imageSource": "data:image/png;base64,iVBORw0KGgoAAAA...."
        }
      ]
    }
  },
  "variableInfo": [
    {
        "variableId": "BUTTONS",
        "responseComplete": "ON_ANY_RESPONSE",
        "codingSource": "VALUE",
        "codes": [
            {
                "method": "EQUALS",
                "parameter": "2",
                "code": 1,
                "score": 1
            }
        ]
    }
  ]
}

Achtung: Im Beispiel oben kann man mehrere Optionen anklicken (multiSelect": true). Die Kodierung ist entsprechend angepasst.

Unitdefintion JSON 
{
  "id": "stars-unit-definition",
  "version": "0.12",
  "backgroundColor": "#E1E9FF",
  "continueButtonShow": "ALWAYS",
  "mainAudio": {
    "audioSource": "data:audio/mpeg;base64,//OEZAAAAAAAAAAAAAAAAAAAAA.....",
    "firstClickLayer": false,
    "animateButton": false,
    "maxPlay": 0
  },
  "interactionType": "BUTTONS",
  "interactionParameters": {
    "variableId": "BUTTONS",
    "imageSource": "",
    "imagePosition": "LEFT",
    "text": "",
    "buttonType": "BIG_SQUARE",
    "multiSelect": true,
    "numberOfRows": 2,
    "options": {
      "buttons": [
        {
          "text": "A"
        },
        {
          "text": "B"
        },
        {
          "text": "C"
        },
        {
          "text": "D"
        }
      ]
    }
  },
  "variableInfo": [
    {
        "variableId": "BUTTONS",
        "responseComplete": "ON_ANY_RESPONSE",
        "codingSource": "VALUE",
        "codes": [
            {
                "method": "EQUALS",
                "parameter": "0101",
                "code": 1,
                "score": 1
            }
        ]
    }
  ]
}

Unitdefintion JSON 
{
  "id": "stars-unit-definition",
  "version": "0.12",
  "backgroundColor": "#3cf",
  "continueButtonShow": "ALWAYS",
  "mainAudio": {
    "audioSource": "data:audio/mpeg;base64,//OEZAAAAAAAAAAAAAAAAA..............",
    "firstClickLayer": false,
    "animateButton": false,
    "maxPlay": 0
  },
  "interactionType": "BUTTONS",
  "interactionParameters": {
    "imageSource": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4A......",
    "imagePosition": "LEFT",
    "buttonType": "TEXT",
    "multiSelect": false,
    "options": {
      "buttons": [
        {
          "text": "Fisch"
        },
        {
          "text": "Tisch"
        },
        {
          "text": "Chaiselonge"
        },
        {
          "text": "Stuhl"
        }
      ]
    }
  },
  "variableInfo": [
    {
        "variableId": "BUTTONS",
        "responseComplete": "ON_ANY_RESPONSE",
        "codingSource": "VALUE",
        "codes": [
            {
                "method": "EQUALS",
                "parameter": "2",
                "code": 1,
                "score": 1
            }
        ]
    }
  ]
}

Achtung: Im Beispiel oben kann man mehrere Optionen anklicken (multiSelect": true). Die Kodierung zielt auf die Summe der angeklickten Buttons ab.

Unitdefintion JSON 
{
  "id": "stars-unit-definition",
  "version": "0.7",
  "backgroundColor": "#3cf",
  "continueButtonShow": "ALWAYS",
  "mainAudio": {
    "audioSource": "data:audio/mpeg;base64,//OEZAAAAAAAAAAAAAAAAAAAA......",
    "firstClickLayer": false,
    "animateButton": false,
    "maxPlay": 0
  },
  "interactionType": "BUTTONS",
  "interactionParameters": {
    "imageSource": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA.....",
    "imagePosition": "TOP",
    "buttonType": "SMALL_SQUARE",
    "multiSelect": true,
    "options": {
      "repeatButton": {
        "option": {
          "icon": "CLAP_HANDS"
        },
        "numberOfOptions": 6
      }
    }
  },
  "variableInfo": [
    {
        "variableId": "BUTTONS",
        "responseComplete": "ON_ANY_RESPONSE",
        "codingSource": "SUM",
        "codes": [
            {
                "method": "EQUALS",
                "parameter": "3",
                "code": 1,
                "score": 1
            }
        ]
    }
  ]
}

Achtung: Im Beispiel oben kann man mehrere Optionen anklicken (multiSelect": true). Die Kodierung zielt auf die Summe der angeklickten Buttons ab.

Unitdefintion JSON 
{
  "id": "stars-unit-definition",
  "version": "0.7",
  "backgroundColor": "#3cf",
  "continueButtonShow": "ALWAYS",
  "mainAudio": {
    "audioSource": "data:audio/mpeg;base64,//OEZAAAAAAAAAAAAAAAAAAAA......",
    "firstClickLayer": false,
    "animateButton": false,
    "maxPlay": 0
  },
  "interactionType": "BUTTONS",
  "interactionParameters": {
    "buttonType": "CIRCLE",
    "multiSelect": true,
    "options": {
      "repeatButton": {
        "option": {
          "text": ""
        },
        "numberOfOptions": 6
      }
    }
  },
  "variableInfo": [
    {
        "variableId": "BUTTONS",
        "responseComplete": "ON_ANY_RESPONSE",
        "codingSource": "SUM",
        "codes": [
            {
                "method": "EQUALS",
                "parameter": "3",
                "code": 1,
                "score": 1
            }
        ]
    }
  ]
}

variableId

Die Antwort wird stets mit einer id gespeichert. Dies nennt man “Variable”. Der Standard-Wert ist BUTTONS. Diese Variablen-ID muss im Bereich Kodierung verwendet werden.

Wenn man eine bestimmte Variablen-ID in den Antwortdaten haben möchte, kann man diesen Wert anpassen. In der Kodierung muss dann auch die Variablen-ID geändert werden.

Stimulus Image/Text

Zusätzlich oder alternativ zum Haupt-Audio kann Text oder ein Image übergeben werden.

  • imageSource: Image als base64-kodierter String
  • imagePosition: Man kann über die Konstanten TOP und LEFT (Standard) die Position des Images beeinflussen.
  • text: Normaler String, wird ggf. nach Bedarf umgebrochen.

Darstellung der Buttons

{
1    "buttonType": "BIG_SQUARE",
2    "numberOfRows": 2,
3    "options": {
        "buttons": [
            {
                "text": "Ja"
            },
            {
                "text": "Nein"
            }
        ]
    }
}
1
buttonType legt Form, Größe und teilw. Position fest. Es sind Quadrate in verschiedenen Größen (BIG_SQUARE, MEDIUM_SQUARE Standard, SMALL_SQUARE), Text (TEXT) und CIRCLE als runder Button möglich.
2
numberOfRows: wenn > 1, erzwingt dieser Parameter mehrere Zeilen der Button-Darstellung. Der verfügbare Platz spielt dabei keine Rolle. Standardwert ist 1
3
options gibt es in zwei Varianten (s. u.)

Optionen als buttons

In dieser Variante (s. Beispiel oben) muss jeder Button einzeln definiert werden. Es ist ein text, ein imageSource oder ein icon mit den möglichen Werten CHECK_GREEN, CLOSE_RED und CLAP_HANDS möglich.

Optionen als repeatButton

Hier wird nur ein Button definiert, der dann aber vervielfältigt wird:

{
    "options": {
        "repeatButton": {
            "option": {
                "icon": "CLAP_HANDS"
            },
            "numberOfOptions": 3
        }
    }
}

Antwortwert

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

Für value muss unterschieden werden, ob multiSelect gesetzt wurde:

  • multiSelect true: Der Antwortwert ist ein String. Jedes Zeichen ist 0 oder 1 und steht für einen Button, ob er gewählt wurde oder nicht.
  • multiSelect false: Der Antwortwert ist eine Zahl mit der Position des gewählten Buttons. 1 steht für den ersten Button.
Zurück nach oben