Select Question Matrix

Uma pergunta com uma resposta que consiste em múltiplas caixas de seleção.

Opções

• question | (string|node): pergunta a ser exibida na parte superior da matriz de perguntas selecionadas. Default: ''.
• rows | array: etiquetas em linha. Default: [].
• cols | array: etiquetas de coluna. Default: [].
• options | object: objeto com pares de chaves de valor com chaves com a forma row:col, por exemplo 0:0, 0:1, 1:0 etc., e seus valores correspondentes sendo matrizes das possíveis escolhas de resposta para as perguntas individuais selecionadas. Default: {}.
• solution | object: objeto de solução com pares de chaves de valor com chaves com a forma row:col, por exemplo 0:0, 0:1, 1:0 etc., e seus valores correspondentes sendo o índice do elemento de resposta correto da respectiva matriz de opções. Default: {}.
• hints | array<(string|node)>: dicas que orientam como responder à pergunta. Default: [].
• hintPlacement | string: colocação das dicas (ou top, left, right, ou bottom). Default: 'bottom'.
• feedback | boolean: controla se devem ser exibidos botões de feedback. Default: true.
• provideFeedback | string: se fornecer "nenhum" feedback, "feedback individual" sobre a(s) resposta(s) apresentada(s), ou "feedback global" para todas as perguntas. Default: 'individual'.
• allowIncomplete | boolean: permitir ou não envios sem uma seleção feita em cada caixa de seleção. Default: false.
• nTries | number: depois de quantas tentativas não são aceitas mais respostas (se provideFeedback não for ninguém). Default: 3.
• failureMsg | string: texto de notificação exibido ao enviar respostas incorretas. Default: none.
• successMsg | string: texto de notificação exibido ao apresentar as respostas corretas. Default: none.
• cellLabels | object: etiquetas para células definidas por objeto com chaves com o formato row:col. Default: {}.
• chat | boolean: controla se o elemento deve ter um bate-papo integrado. Default: false.
• panelProps | object: propriedades adicionais a serem passadas para o componente externo
  . Default: {}.
• className | string: nome da classe. Default: ''.
• style | object: Estilos em linha CSS. Default: {}.
• onChange | function: função de chamada de retorno invocada ao alterar as respostas. Default: onChange() {}.
• onSubmit | function: função chamada de retorno invocada no momento da apresentação com as respostas como primeiro e um booleano indicando a correção como segundo parâmetro. Default: onSubmit() {}.

Exemplos

• Minimal
• With Hints
• With Style
• Feedback Messages

Editor ao vivo

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

Resultado

ReferenceError: Provider is not defined