Select Question Matrix

Pytanie z odpowiedzią składającą się z wielu pól wyboru.

Opcje

• question | (string|node): pytanie, które ma być wyświetlane w górnej części matrycy pytań wybranych. Default: ''.
• rows | array: etykiety wierszy. Default: [].
• cols | array: etykiety kolumnowe. Default: [].
• options | object: obiekt z parami klucz-wartość z kluczami posiadającymi postać row:col, np. 0:0, 0:1, 1:0 itd., a odpowiadające im wartości są tablicami możliwych do wyboru odpowiedzi na poszczególne wybrane pytania. Default: {}.
• solution | object: obiekt rozwiązania z parami klucz-wartość z kluczami o postaci row:col, np. 0:0, 0:1, 1:0 itd., a odpowiadające im wartości są indeksem prawidłowego elementu odpowiedzi z odpowiedniej tablicy opcji. Default: {}`.
• hints | array<(string|node)>: podpowiedzi zawierające wskazówki, jak odpowiedzieć na pytanie. Default: [].
• hintPlacement | string: umieszczenie podpowiedzi (albo top, left, right, albo bottom). Default: 'bottom'.
• feedback | boolean: kontroluje, czy mają być wyświetlane przyciski sprzężenia zwrotnego. Default: true.
• provideFeedback | string: czy w ogóle przekazywać "żadne" informacje zwrotne, "indywidualne" informacje zwrotne dotyczące przedłożonych odpowiedzi, czy też "ogólne" informacje zwrotne dotyczące wszystkich pytań. Default: 'individual'.
• allowIncomplete | boolean: czy zezwolić na składanie wniosków bez zaznaczenia w każdym polu wyboru. Default: false.
• nTries | number: po ilu próbach nie są akceptowane żadne dalsze odpowiedzi (jeśli provideFeedback nie jest żadna). Default: 3.
• failureMsg | string: tekst powiadomienia wyświetlany po udzieleniu błędnych odpowiedzi. Default: none.
• successMsg | string: tekst powiadomienia wyświetlany po udzieleniu prawidłowych odpowiedzi. Default: none.
• cellLabels | object: etykiety dla komórek zdefiniowanych przez obiekt o kluczach w formacie row:col. Default: {}.
• chat | boolean: kontroluje, czy dany element powinien mieć zintegrowaną rozmowę. Default: false.
• panelProps | object: dodatkowe właściwości przekazywane do zewnętrznego komponentu
  . Default: {}.
• className | string: nazwa klasy. Default: ''.
• style | object: Style CSS inline. Default: {}.
• onChange | function: funkcja wywołania zwrotnego wywoływana po zmianie odpowiedzi. Default: onChange() {}.
• onSubmit | function: funkcja callback wywołana po przesłaniu odpowiedzi jako pierwsza i boolean wskazująca poprawność jako drugi parametr. Default: onSubmit() {}.

Przykłady

• Minimal
• With Hints
• With Style
• Feedback Messages

Edytor na żywo

<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 }}
/>

Wynik

ReferenceError: Provider is not defined