Select Question Matrix

Et spørgsmål med et svar, der består af flere afkrydsningsfelter.

Indstillinger

• question | (string|node): spørgsmål, der skal vises øverst i matrixen for valg af spørgsmål. Default: ''.
• rows | array: rækkeetiketter. Default: [].
• cols | array: kolonneetiketter. Default: [].
• options | object: objekt med nøgle-værdipar med nøgler af formen row:col, f.eks. 0:0, 0:1, 1:0 osv., og deres tilsvarende værdier er arrays af de mulige svarmuligheder for de enkelte udvalgte spørgsmål. Default: {}.
• solution | object: løsningsobjekt med nøgle-værdipar med nøgler af formen row:col, f.eks. 0:0, 0:1, 1:0 osv., og deres tilsvarende værdier er indekset for det korrekte svarelement fra det respektive options-array.. Default: {}.
• hints | array<(string|node)>: tips, der giver vejledning om, hvordan spørgsmålet skal besvares. Default: [].
• hintPlacement | string: placeringen af vejledningerne (enten top, left, right eller bottom). Default: 'bottom'.
• feedback | boolean: styrer, om der skal vises feedback-knapper. Default: true.
• provideFeedback | string: om der skal gives "ingen" feedback overhovedet, "individuel" feedback på de(t) indsendte svar eller "samlet" feedback for alle spørgsmål. Default: 'individual'.
• allowIncomplete | boolean: om der skal tillades indsendelser, uden at der er foretaget et valg i hvert afkrydsningsfelt. Default: false.
• nTries | number: efter hvor mange forsøg der ikke accepteres flere svar (hvis provideFeedback ikke er none). Default: 3.
• failureMsg | string: Meddelelsestekst, der vises ved indsendelse af forkerte svar. Default: none.
• successMsg | string: Meddelelsestekst, der vises ved indsendelse af korrekte svar. Default: none.
• cellLabels | object: etiketter for celler defineret af objekt med nøgler i formatet row:col.. Default: {}.
• chat | boolean: kontrollerer, om elementet skal have en integreret chat. Default: false.
• panelProps | object: yderligere egenskaber, der skal overføres til den ydre
  -komponent. Default: {}.
• className | string: klassens navn. Default: ''.
• style | object: CSS inline-stilarter. Default: {}.
• onChange | function: callback-funktion, der påkaldes ved ændring af svarene. Default: onChange() {}.
• onSubmit | function: callback-funktion, der påkaldes ved indsendelse med svarene som første parameter og en boolean, der angiver korrekthed, som anden parameter. Default: onSubmit() {}.

Eksempler

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

Resultat

ReferenceError: Provider is not defined