Select Question Matrix

Μια ερώτηση με απάντηση που αποτελείται από πολλαπλά πλαίσια επιλογής.

Επιλογές

• question | (string|node): ερώτηση που θα εμφανίζεται στην κορυφή του πίνακα επιλογής ερωτήσεων. Default: ''.
• rows | array: ετικέτες γραμμής. Default: [].
• cols | array: ετικέτες στήλης. Default: [].
• options | object: αντικείμενο με ζεύγη κλειδιών-τιμών με κλειδιά που έχουν τη μορφή row:col, π.χ. 0:0, 0:1, 1:0 κ.λπ., και οι αντίστοιχες τιμές τους είναι πίνακες με τις πιθανές επιλογές απαντήσεων για τις επιμέρους ερωτήσεις select.. Default: {}.
• solution | object: αντικείμενο λύσης με ζεύγη κλειδιών-τιμών με κλειδιά που έχουν τη μορφή row:col, π.χ. 0:0, 0:1, 1:0 κ.λπ., και οι αντίστοιχες τιμές τους είναι ο δείκτης του σωστού στοιχείου απάντησης από τον αντίστοιχο πίνακα options.. Default: {}.
• hints | array<(string|node)>: υποδείξεις που παρέχουν καθοδήγηση για τον τρόπο απάντησης στην ερώτηση. Default: [].
• hintPlacement | string: τοποθέτηση των υποδείξεων (είτε top, left, right ή bottom). Default: 'bottom'.
• feedback | boolean: ελέγχει αν θα εμφανίζονται κουμπιά ανάδρασης. Default: true.
• provideFeedback | string: αν θα παρέχει καθόλου ανατροφοδότηση, ατομική ανατροφοδότηση για την/τις υποβληθείσα/ες απάντηση/ες ή συνολική ανατροφοδότηση για όλες τις ερωτήσεις.. Default: 'individual'.
• allowIncomplete | boolean: αν θα επιτρέπονται υποβολές χωρίς επιλογή σε κάθε πλαίσιο επιλογής. Default: false.
• nTries | number: μετά από πόσες προσπάθειες δεν θα γίνονται δεκτές περαιτέρω απαντήσεις (αν το provideFeedback δεν είναι none). Default: 3.
• failureMsg | string: κείμενο ειδοποίησης που εμφανίζεται κατά την υποβολή λανθασμένων απαντήσεων. Default: none.
• successMsg | string: κείμενο ειδοποίησης που εμφανίζεται κατά την υποβολή σωστών απαντήσεων. Default: none.
• cellLabels | object: ετικέτες για κελιά που ορίζονται από αντικείμενο με κλειδιά που έχουν τη μορφή row:col. Default: {}.
• chat | boolean: ελέγχει αν το στοιχείο θα πρέπει να έχει ενσωματωμένη συνομιλία. Default: false.
• panelProps | object: πρόσθετες ιδιότητες που πρέπει να μεταβιβαστούν στο εξωτερικό στοιχείο
  . Default: {}.
• className | string: όνομα κλάσης. Default: ''.
• style | object: Στυλ γραμμής CSS. Default: {}.
• onChange | function: συνάρτηση επανάκλησης που καλείται κατά την αλλαγή των απαντήσεων. Default: onChange() {}.
• onSubmit | function: συνάρτηση επανάκλησης που καλείται κατά την υποβολή με τις απαντήσεις ως πρώτη παράμετρο και ένα boolean που υποδεικνύει την ορθότητα ως δεύτερη παράμετρο. Default: onSubmit() {}.

Παραδείγματα

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

Αποτέλεσμα

ReferenceError: Provider is not defined