Select Question Matrix

Egy kérdés, amelynek válasza több válaszdobozból áll.

Opciók

• question | (string|node): a kérdés kiválasztása mátrix tetején megjelenítendő kérdés. Default: ''.
• rows | array: sorcímkék. Default: [].
• cols | array: oszlopcímkék. Default: [].
• options | object: objektum kulcs-érték párokkal, amelyek kulcsai a sor:oszlop formájúak, pl. 0:0, 0:1, 1:0 stb., és a hozzájuk tartozó értékek az egyes select kérdések lehetséges válaszlehetőségeit tartalmazó tömbök.. Default: {}.
• solution | object: megoldás objektum kulcs-érték párokkal, amelyek kulcsainak a sor:oszlop formája van, pl. 0:0, 0:1, 1:0 stb., és a hozzájuk tartozó értékek a megfelelő válasz elemének indexe a megfelelő opciók tömbből.. Default: {}.
• hints | array<(string|node)>: a kérdés megválaszolására vonatkozó útmutatásokat ad. Default: [].
• hintPlacement | string: a tippek elhelyezése (vagy top, left, right, vagy bottom). Default: 'bottom'.
• feedback | boolean: szabályozza, hogy megjelenjenek-e a visszajelző gombok. Default: true.
• provideFeedback | string: hogy egyáltalán "semmilyen" visszajelzést, "egyéni" visszajelzést adjon a beadott válasz(ok)ra, vagy "általános" visszajelzést az összes kérdésre vonatkozóan.. Default: 'individual'.
• allowIncomplete | boolean: engedélyezi-e, hogy az egyes jelölőnégyzetekben történő kiválasztás nélkül is lehessen benyújtani a pályázatokat. Default: false.
• nTries | number: hány próbálkozás után nem fogadunk el további válaszokat (ha a provideFeedback nem none). Default: 3.
• failureMsg | string: a hibás válaszok elküldésekor megjelenő értesítő szöveg. Default: none.
• successMsg | string: a helyes válaszok elküldésekor megjelenő értesítő szöveg. Default: none.
• cellLabels | object: a sor:oszlop formátumú kulcsokkal rendelkező objektum által meghatározott cellák címkéi. Default: {}.
• chat | boolean: szabályozza, hogy az elemnek legyen-e integrált chatje. Default: false.
• panelProps | object: további tulajdonságok, amelyeket a külső
  komponensnek kell átadni.. Default: {}.
• className | string: osztály neve. Default: ''.
• style | object: CSS inline stílusok. Default: {}.
• onChange | function: callback függvény, amelyet a válaszok megváltoztatásakor hívnak meg. Default: onChange() {}.
• onSubmit | function: callback függvény, amely az elküldéskor hívódik elő a válaszokkal, mint első, és egy boolean értékkel, amely a helyességet jelzi, mint második paraméter.. Default: onSubmit() {}.

Példák

• Minimal
• With Hints
• With Style
• Feedback Messages

Élő szerkesztő

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

Eredmény

ReferenceError: Provider is not defined