Select Question Matrix

Una domanda con una risposta composta da più caselle di selezione.

Opzioni

• question | (string|node): domanda da visualizzare nella parte superiore della matrice delle domande selezionate. Default: ''.
• rows | array: etichette di fila. Default: [].
• cols | array: etichette a colonna. Default: [].
• options | object: con coppie chiave-valore con chiavi aventi la forma row:col, p.e. 0:0, 0:1, 1:0 ecc. e i loro valori corrispondenti sono array delle possibili scelte di risposta per le singole domande selezionate. Default: {}.
• solution | object: oggetto soluzione con coppie chiave-valore con chiavi che hanno la forma row:col, p.e. 0:0, 0:1, 1:0 ecc. e i loro valori corrispondenti sono l'indice dell'elemento di risposta corretto dalla rispettiva matrice options. Default: {}.
• hints | array<(string|node)>: suggerimenti che forniscono indicazioni su come rispondere alla domanda. Default: [].
• hintPlacement | string: posizionamento dei suggerimenti (top, left, right o bottom). Default: 'bottom'.
• feedback | boolean: controlla se visualizzare i pulsanti di feedback. Default: true.
• provideFeedback | string: se fornire un feedback "nessuno", un feedback "individuale" sulla/e risposta/e fornita/e o un feedback "generale" per tutte le domande. Default: 'individual'.
• allowIncomplete | boolean: se consentire l'invio senza selezione in ogni casella di selezione. Default: false.
• nTries | number: dopo quanti tentativi non vengono accettate altre risposte (se "fornire feedback" non è "nessuno"). Default: 3.
• failureMsg | string: testo di notifica visualizzato in seguito all'invio di risposte errate. Default: none.
• successMsg | string: testo di notifica visualizzato al momento dell'invio delle risposte corrette. Default: none.
• cellLabels | object: etichette per le celle definite dall'oggetto con chiavi aventi il formato row:col. Default: {}`.
• chat | boolean: controlla se l'elemento deve avere una chat integrata. Default: false.
• panelProps | object: proprietà aggiuntive da passare al componente esterno
  . Default: {}.
• className | string: nome della classe. Default: ''.
• style | object: Stili in linea CSS. Default: {}.
• onChange | function: funzione di callback invocata quando si cambiano le risposte. Default: onChange() {}.
• onSubmit | function: funzione di callback invocata all'invio con le risposte come primo parametro e un booleano che indica la correttezza come secondo parametro. Default: onSubmit() {}.

Esempi

• Minimal
• With Hints
• With Style
• Feedback Messages

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

Risultato

ReferenceError: Provider is not defined