Select Question Matrix

Une question dont la réponse consiste en plusieurs cases de sélection.

Options

• question | (string|node): question à afficher en haut de la matrice de sélection des questions. Default: ''.
• rows | array: étiquettes de lignes. Default: [].
• cols | array: étiquettes de colonnes. Default: [].
• options | object: objet avec des paires clé-valeur avec des clés ayant la forme "row:col", par exemple "0:0", "0:1", "1:0", etc., et leurs valeurs correspondantes étant des tableaux de choix de réponse possibles pour les différentes questions de sélection. Default: {}.
• solution | object: objet solution avec des paires clé-valeur avec des clés ayant la forme row:col, par exemple 0:0, 0:1, 1:0 etc., et leurs valeurs correspondantes étant l'index de l'élément de réponse correcte du tableau options respectif. Default: {}.
• hints | array<(string|node)>: des conseils sur la façon de répondre à la question. Default: [].
• hintPlacement | string: l'emplacement des indices (soit top, left, right ou bottom). Default: 'bottom'.
• feedback | boolean: contrôle l'affichage des boutons de rétroaction. Default: true.
• provideFeedback | string: s'il convient de fournir un retour d'information "aucun", un retour d'information "individuel" sur la ou les réponses soumises, ou un retour d'information "global" pour toutes les questions. Default: 'individual'.
• allowIncomplete | boolean: s'il faut autoriser les soumissions sans sélection dans chaque case de sélection. Default: false.
• nTries | number: après combien d'essais aucune autre réponse n'est acceptée (si "provideFeedback" n'est pas "none"). Default: 3.
• failureMsg | string: texte de notification affiché lors de la soumission de réponses incorrectes. Default: none.
• successMsg | string: texte de notification affiché lors de la soumission des réponses correctes. Default: none.
• cellLabels | object: des étiquettes pour les cellules définies par objet avec des clés ayant le format "row:col. Default: {}.
• chat | boolean: contrôle si l'élément doit avoir un chat intégré. Default: false.
• panelProps | object: propriétés supplémentaires à transmettre au composant externe
  . Default: {}.
• className | string: nom de la classe. Default: ''.
• style | object: Styles CSS en ligne. Default: {}.
• onChange | function: fonction callback invoquée lors de la modification des réponses. Default: onChange() {}.
• onSubmit | function: fonction de rappel invoquée lors de la soumission avec les réponses comme premier paramètre et un booléen indiquant l'exactitude comme second paramètre. Default: onSubmit() {}.

Exemples

• Minimal
• With Hints
• With Style
• Feedback Messages

Éditeur en direct

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

Résultat

ReferenceError: Provider is not defined