Select Question Matrix

Een vraag met een antwoord bestaande uit meerdere selectievakjes.

Opties

• question | (string|node): vraag die bovenin de geselecteerde vragenmatrix moet worden weergegeven. Default: ''.
• rows | array: rij-etiketten. Default: [].
• cols | array: kolomlabels. Default: [].
• options | object: object met sleutelwaardeparen met toetsen die de vorm rij:col hebben, bijvoorbeeld 0:0, 0:1, 1:0 etc., en de bijbehorende waarden zijn arrays van de mogelijke antwoordkeuzes voor de individuele selectievragen. Default: {}.
• solution | object: Oplossingsobject met sleutelwaardeparen met toetsen die de vorm rij:col hebben, bijvoorbeeld 0:0, 0:1, 1:0 etc., en hun corresponderende waarden zijn de index van het juiste antwoordelement uit de respectievelijke opties array. Default: {}.
• hints | array<(string|node)>: tips die een leidraad bieden voor het beantwoorden van de vraag. Default: [].
• hintPlacement | string: plaatsing van de hints (ofwel top, left, right, of bottom). Default: 'bottom'.
• feedback | boolean: regelt of er terugmeldingsknoppen moeten worden weergegeven. Default: true.
• provideFeedback | string: of er geen feedback wordt gegeven, individuele feedback op het (de) ingediende antwoord(en), of overal feedback voor alle vragen. Default: 'individual'.
• allowIncomplete | boolean: of de inzendingen moeten worden toegestaan zonder dat in elk selectievakje een keuze is gemaakt. Default: false.
• nTries | number: na hoeveel pogingen geen verdere antwoorden worden geaccepteerd (als provideFeedback niet niet is). Default: 3.
• failureMsg | string: meldingstekst die wordt weergegeven bij het indienen van onjuiste antwoorden. Default: none.
• successMsg | string: meldingstekst die wordt weergegeven bij het indienen van de juiste antwoorden. Default: none.
• cellLabels | object: labels voor cellen gedefinieerd door object met sleutels in het formaat row:col. Default: {}.
• chat | boolean: bepaalt of het element een geïntegreerde chat moet hebben. Default: false.
• panelProps | object: aanvullende eigenschappen die aan de buitenste
  component moeten worden doorgegeven. Default: {}.
• className | string: klassennaam. Default: ''.
• style | object: CSS inline-stijlen. Default: {}.
• onChange | function: callback functie die wordt aangeroepen bij het veranderen van de antwoorden. Default: onChange() {}.
• onSubmit | function: callback-functie die wordt aangeroepen bij de indiening met de antwoorden als eerste en een booleaanse functie die de juistheid als tweede parameter aangeeft. Default: onSubmit() {}.

Voorbeelden

• Minimal
• With Hints
• With Style
• Feedback Messages

Live redacteur

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

Resultaat

ReferenceError: Provider is not defined