Select Question Matrix

Kysymys, jonka vastaus koostuu useista valintaruuduista.

Vaihtoehdot

• question | (string|node): kysymys, joka näytetään valintakysymysmatriisin yläreunassa.. Default: ''.
• rows | array: rivien merkinnät. Default: [].
• cols | array: sarakkeiden merkinnät. Default: [].
• options | object: objekti, jossa on avain-arvopareja, joiden avaimet ovat muotoa row:col, esim. 0:0, 0:1, 1:0 jne., ja niiden vastaavat arvot ovat yksittäisten valintakysymysten mahdollisten vastausvaihtoehtojen taulukoita.. Default: {}.
• solution | object: ratkaisuobjekti, jossa on avain-arvopareja, joiden avaimet ovat muotoa row:col, esim. 0:0, 0:1, 1:0 jne. ja joiden vastaavat arvot ovat oikean vastauselementin indeksi vastaavasta options-joukosta.. Default: {}.
• hints | array<(string|node)>: vihjeitä, joissa annetaan ohjeita kysymykseen vastaamiseen.. Default: [].
• hintPlacement | string: vihjeiden sijainti (joko top, left, right tai bottom).. Default: 'bottom'.
• feedback | boolean: ohjaa, näytetäänkö palautepainikkeet. Default: true.
• provideFeedback | string: annetaanko palautetta "ei lainkaan", "yksittäistä" palautetta annetuista vastauksista vai "yleistä" palautetta kaikista kysymyksistä.. Default: 'individual'.
• allowIncomplete | boolean: sallitaanko lähettäminen ilman kussakin valintaruudussa tehtyä valintaa.. Default: false.
• nTries | number: kuinka monen yrityksen jälkeen vastauksia ei enää hyväksytä (jos provideFeedback ei ole none).. Default: 3.
• failureMsg | string: ilmoitusteksti, joka näytetään virheellisten vastausten lähettämisen yhteydessä. Default: none.
• successMsg | string: ilmoitusteksti, joka näytetään oikeiden vastausten lähettämisen yhteydessä. Default: none.
• cellLabels | object: sellaisten solujen merkinnät, jotka on määritelty objektilla, jonka avaimet ovat muotoa row:col.. Default: {}.
• chat | boolean: valvoo, onko elementillä integroitu chat. Default: false.
• panelProps | object: lisäominaisuudet, jotka välitetään ulommalle
  -komponentille.. Default: {}.
• className | string: luokan nimi. Default: ''.
• style | object: CSS-inline-tyylit. Default: {}.
• onChange | function: callback-funktio, joka kutsutaan vastausten muuttuessa. Default: onChange() {}.
• onSubmit | function: callback-funktio, joka käynnistetään lähetyksen yhteydessä ja jonka ensimmäisenä parametrina ovat vastaukset ja toisena boolean-parametrina oikeellisuutta osoittava boolean-arvo.. Default: onSubmit() {}.

Esimerkkejä

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

Tulos

ReferenceError: Provider is not defined