Select Question Matrix

A question with an answer consisting of multiple select boxes.

Options

• question | (string|node): question to be displayed at the top of the select question matrix. Default: ''.
• rows | array: row labels. Default: [].
• cols | array: column labels. Default: [].
• options | object: object with key-value pairs with keys having the form row:col, e.g. 0:0, 0:1, 1:0 etc., and their corresponding values being arrays of the possible answer choices for the individual select questions. Default: {}.
• solution | object: solution object with key-value pairs with keys having the form row:col, e.g. 0:0, 0:1, 1:0 etc., and their corresponding values being the index of the correct answer element from the respective options array. Default: {}.
• hints | array<(string|node)>: hints providing guidance on how to answer the question. Default: [].
• hintPlacement | string: placement of the hints (either top, left, right, or bottom). Default: 'bottom'.
• feedback | boolean: controls whether to display feedback buttons. Default: true.
• provideFeedback | string: whether to provide none feedback at all, individual feedback on the submitted answer(s), or overall feedback for all questions. Default: 'individual'.
• allowIncomplete | boolean: whether to allow submissions without a selection made in each select box. Default: false.
• nTries | number: after how many tries no further answers are accepted (if provideFeedback is not none). Default: 3.
• failureMsg | string: notification text displayed upon submitting incorrect answers. Default: none.
• successMsg | string: notification text displayed upon submitting correct answers. Default: none.
• cellLabels | object: labels for cells defined by object with keys having the format row:col. Default: {}.
• chat | boolean: controls whether the element should have an integrated chat. Default: false.
• panelProps | object: additional properties to be passed to the outer
  component. Default: {}.
• className | string: class name. Default: ''.
• style | object: CSS inline styles. Default: {}.
• onChange | function: callback function invoked upon changing the answers. Default: onChange() {}.
• onSubmit | function: callback function invoked upon submission with the answers as a first and a boolean indicating correctness as second parameter. Default: onSubmit() {}.

Examples

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

Result

ReferenceError: Provider is not defined