Select Question Matrix

Una pregunta con una respuesta que consiste en múltiples cuadros de selección.

Opciones

• question | (string|node): pregunta que se mostrará en la parte superior de la matriz de preguntas seleccionadas. Default: ''.
• rows | array: etiquetas de fila. Default: [].
• cols | array: etiquetas de columna. Default: [].
• options | object: con pares clave-valor con claves que tienen la forma "fila:col", por ejemplo "0:0", "0:1", "1:0", etc., y sus valores correspondientes son arreglos de las posibles opciones de respuesta para las preguntas individuales seleccionadas. Default: {}.
• solution | object: Objeto de solución con pares clave-valor con claves que tienen la forma "fila:col", por ejemplo "0:0", "0:1", "1:0", etc., y sus valores correspondientes son el índice del elemento de respuesta correcta de la respectiva matriz de "opciones". Default: {}.
• hints | array<(string|node)>: consejos que proporcionan orientación sobre cómo responder a la pregunta. Default: [].
• hintPlacement | string: la colocación de las pistas (ya sea top, left, right o bottom). Default: 'bottom'.
• feedback | boolean: controla si se muestran los botones de retroalimentación. Default: true.
• provideFeedback | string: si proporcionar "ninguna" retroalimentación en absoluto, retroalimentación "individual" en las respuestas presentadas, o retroalimentación "general" para todas las preguntas. Default: 'individual'.
• allowIncomplete | boolean: si se permite la presentación de propuestas sin que se haga una selección en cada casilla de selección. Default: false.
• nTries | number: después de cuántos intentos no se aceptan más respuestas (si "ProvideFeedback" no es "ninguno"). Default: 3.
• failureMsg | string: El texto de la notificación que se muestra al presentar las respuestas incorrectas. Default: none.
• successMsg | string: El texto de la notificación que se muestra al presentar las respuestas correctas. Default: none.
• cellLabels | object: etiquetas para las celdas definidas por el objeto con claves que tienen el formato row:col. Default: {}.
• chat | boolean: controla si el elemento debe tener un chat integrado. Default: false.
• panelProps | object: propiedades adicionales que se pasan al componente exterior
  . Default: {}.
• className | string: nombre de la clase. Default: ''.
• style | object: Estilos en línea CSS. Default: {}.
• onChange | function: función callback invocada al cambiar las respuestas. Default: onChange() {}.
• onSubmit | function: La función de devolución de llamada invocada en el momento de la presentación con las respuestas como primer parámetro y un booleano que indica la corrección como segundo parámetro. Default: onSubmit() {}.

Ejemplos

• Minimal
• With Hints
• With Style
• Feedback Messages

Editor en 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