Select Question Matrix

Eine Frage mit einer Antwort, die aus mehreren Auswahlfeldern besteht.

Optionen

• question | (string|node): Frage, die oben in der Auswahlfragenmatrix angezeigt werden soll. Default: ''.
• rows | array: Zeilenbeschriftungen. Default: [].
• cols | array: Spaltenbezeichnungen. Default: [].
• options | object: Objekt mit Schlüssel-Wert-Paaren, deren Schlüssel die Form Zeile:Spalte haben, z. B. 0:0, 0:1, 1:0 usw., und deren entsprechende Werte Arrays der möglichen Antwortmöglichkeiten für die einzelnen Auswahlfragen sind. Default: {}.
• solution | object: Lösungsobjekt mit Schlüssel-Wert-Paaren, deren Schlüssel die Form Zeile:Spalte haben, z.B. 0:0, 0:1, 1:0 usw., und deren zugehörige Werte der Index des richtigen Antwortelements aus dem jeweiligen Options-Array sind. Default: {}.
• hints | array<(string|node)>: Hinweise, die bei der Beantwortung der Frage helfen. Default: [].
• hintPlacement | string: Platzierung der Hinweise (entweder top, left, right, oder bottom). Default: 'bottom'.
• feedback | boolean: steuert, ob Feedback-Tasten angezeigt werden sollen. Default: true.
• provideFeedback | string: ob Sie "kein" Feedback, "individuelles" Feedback zu den eingereichten Antworten oder "allgemeines" Feedback für alle Fragen geben möchten. Default: 'individual'.
• allowIncomplete | boolean: ob Eingaben ohne Auswahl in jedem Auswahlfeld erlaubt werden sollen. Default: false.
• nTries | number: nach wie vielen Versuchen keine weiteren Antworten akzeptiert werden (wenn provideFeedback nicht none ist). Default: 3.
• failureMsg | string: Benachrichtigungstext, der beim Absenden falscher Antworten angezeigt wird. Default: none.
• successMsg | string: Benachrichtigungstext, der beim Absenden richtiger Antworten angezeigt wird. Default: none.
• cellLabels | object: Beschriftungen für Zellen, die durch ein Objekt definiert sind, dessen Schlüssel das Format "Zeile:Spalte" haben. Default: {}.
• chat | boolean: steuert, ob das Element einen integrierten Chat haben soll. Default: false.
• panelProps | object: zusätzliche Eigenschaften, die an die äußere Komponente
  zu übergeben sind. Default: {}.
• className | string: Klassenname. Default: ''.
• style | object: CSS-Inline-Stile. Default: {}.
• onChange | function: Callback-Funktion, die beim Ändern der Antworten aufgerufen wird. Default: onChange() {}.
• onSubmit | function: Callback-Funktion, die bei der Übermittlung mit den Antworten als erstem und einem die Korrektheit angebenden Booleschen Wert als zweitem Parameter aufgerufen wird. Default: onSubmit() {}.

Beispiele

• Minimal
• With Hints
• With Style
• Feedback Messages

Live-Editor

<SelectQuestionMatrix question="Test your art history knowledge" rows={[ 'Composer', 'Author' ]} cols={[ '18th Century', '19th Century' ]} options={{ '0:0': [ 'Philipp Emmanuel Bach', 'Johann Wolfgang von Goethe', 'Nicolas Poussin'], '0:1': [ 'Gustave Flaubert', 'Gustave Courbet', 'Richard Wagner'] , '1:0': [ 'Philipp Emmanuel Bach', 'Johann Wolfgang von Goethe', 'Nicolas Poussin'], '1:1': [ 'Gustave Flaubert', 'Gustave Courbet', 'Richard Wagner'] }} solution={{ '0:0': 0, '0:1': 2, '1:0': 1, '1:1': 0 }} />

<SelectQuestionMatrix
    question="Test your art history knowledge"
    rows={[ 'Composer', 'Author' ]} 
    cols={[ '18th Century', '19th Century' ]} 
    options={{ 
        '0:0': [ 'Philipp Emmanuel Bach', 'Johann Wolfgang von Goethe', 'Nicolas Poussin'], 
        '0:1': [ 'Gustave Flaubert', 'Gustave Courbet', 'Richard Wagner'] ,
        '1:0': [ 'Philipp Emmanuel Bach', 'Johann Wolfgang von Goethe', 'Nicolas Poussin'],
        '1:1': [ 'Gustave Flaubert', 'Gustave Courbet', 'Richard Wagner'] 
    }} 
    solution={{ '0:0': 0, '0:1': 2, '1:0': 1, '1:1': 0 }}
/>

Ergebnis

ReferenceError: Provider is not defined