Select Question Matrix

O întrebare cu un răspuns format din mai multe casete de selectare.

Opțiuni

• question | (string|node): întrebarea care trebuie afișată în partea de sus a matricei de selectare a întrebărilor. Default: ''.
• rows | array: etichete de rând. Default: [].
• cols | array: etichete de coloană. Default: [].
• options | object: obiect cu perechi cheie-valoare cu chei de forma row:col, de exemplu 0:0, 0:1, 1:0 etc., iar valorile corespunzătoare sunt array-uri cu variantele de răspuns posibile pentru fiecare întrebare selectată în parte.. Default: {}.
• solution | object: obiect soluție cu perechi cheie-valoare cu chei de forma row:col, de exemplu 0:0, 0:1, 1:0 etc., iar valorile lor corespunzătoare sunt indicii elementului de răspuns corect din tabloul options respectiv.. Default: {}.
• hints | array<(string|node)>: indicii care oferă îndrumări privind modul de răspuns la întrebare. Default: [].
• hintPlacement | string: plasarea indicilor (fie top, left, right, sau bottom). Default: 'bottom'.
• feedback | boolean: controlează dacă se afișează butoanele de feedback. Default: true.
• provideFeedback | string: dacă se va oferi "niciun feedback", "feedback individual" pentru răspunsul (răspunsurile) trimis(e) sau "feedback general" pentru toate întrebările.. Default: 'individual'.
• allowIncomplete | boolean: dacă se permite transmiterea de documente fără a se face o selecție în fiecare căsuță de selectare. Default: false.
• nTries | number: după câte încercări nu mai sunt acceptate alte răspunsuri (dacă provideFeedback nu este none). Default: 3.
• failureMsg | string: text de notificare afișat la trimiterea răspunsurilor incorecte. Default: none.
• successMsg | string: text de notificare afișat la trimiterea răspunsurilor corecte. Default: none.
• cellLabels | object: etichete pentru celulele definite de un obiect cu chei având formatul row:col.. Default: {}.
• chat | boolean: controlează dacă elementul trebuie să aibă un chat integrat. Default: false.
• panelProps | object: proprietăți suplimentare care trebuie transmise componentei exterioare
  . Default: {}.
• className | string: numele clasei. Default: ''.
• style | object: Stiluri inline CSS. Default: {}.
• onChange | function: funcția callback invocată la modificarea răspunsurilor. Default: onChange() {}.
• onSubmit | function: funcția callback invocată la trimiterea răspunsurilor ca prim parametru și un boolean care indică corectitudinea ca al doilea parametru. Default: onSubmit() {}.

Exemple

• Minimal
• With Hints
• With Style
• Feedback Messages

Editor live

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

Rezultat

ReferenceError: Provider is not defined