Πώς να ενσωματώσετε ερωτήσεις κουίζ πολλαπλής επιλογής στο άρθρο σας

Σύμφωνα με την εμπειρία μου, η συμπλήρωση της μελέτης με πρακτικές ασκήσεις βελτιώνει σημαντικά την κατανόησή μου για ένα θέμα. Αυτό ισχύει ιδιαίτερα όταν μπορώ να δοκιμάσω τις γνώσεις μου καθώς πηγαίνω και λαμβάνω άμεσα σχόλια για κάθε ερώτηση.

Η μορφή κουίζ πολλαπλών επιλογών είναι ιδανική για αυτό. Ανέπτυξα μια μέθοδο για να ενσωματώσω ερωτήσεις πολλαπλής επιλογής στα άρθρα μαθηματικών που γράφω για το FreeCodeCamp και θέλω να δείξω σε άλλους συγγραφείς πώς να κάνουν το ίδιο.

Πώς να προσθέσετε κώδικα στο άρθρο σας

Ο επεξεργαστής Ghost σας επιτρέπει να ενσωματώσετε τμήματα κώδικα σε ένα άρθρο. Μπορείτε να έχετε πρόσβαση στον επεξεργαστή κώδικα κάνοντας κλικ στο στρογγυλό κουμπί με το σύμβολο συν (+) που χρησιμοποιείται για την προσθήκη εικόνων, βίντεο YouTube και ούτω καθεξής:

Κάντε κλικ στο κουμπί "HTML" για να προσθέσετε ένα πρόγραμμα επεξεργασίας στο άρθρο. Ο επεξεργαστής υποστηρίζει HTML, CSS, ακόμη και JavaScript.

Μόλις αρχίσετε να προσθέτετε κώδικα, κάντε κλικ οπουδήποτε έξω από το πλαίσιο επεξεργασίας για να αποδώσετε τον κώδικα και να δείτε την πρόοδό σας. Κάντε διπλό κλικ στην έξοδο που αποδίδεται για να ανοίξετε ξανά το παράθυρο του προγράμματος επεξεργασίας:

Για να ελέγξετε τη λειτουργικότητα του κωδικού σας, αποθηκεύστε το άρθρο πατώντας Ctrl / ⌘ + S και, στη συνέχεια, κάντε κλικ στο κουμπί "Προβολή προεπισκόπησης" που εμφανίζεται στην κάτω αριστερή γωνία:

Το άρθρο σας θα ανοίξει σε ξεχωριστή καρτέλα όπου μπορείτε να δείτε πώς θα αποδίδεται ο κώδικάς σας μόλις δημοσιευτεί το άρθρο σας. Αφιερώστε λίγο χρόνο για να ελέγξετε το στυλ και τη λειτουργικότητα του κουίζ πολλαπλών επιλογών.

Ο κωδικός Boilerplate για το κουίζ πολλαπλών επιλογών είναι διαθέσιμος στην επόμενη ενότητα. Το μόνο που χρειάζεται να κάνετε είναι να το επικολλήσετε στο δικό σας άρθρο και να αλλάξετε την ερώτηση και τις απαντήσεις.

Πώς λειτουργεί το κουίζ πολλαπλών επιλογών

Μπορείτε να προσθέσετε όσες διαφορετικές ερωτήσεις θέλετε. Ωστόσο, ενώ το άρθρο σας μπορεί να έχει πολλά κουίζ, όλα περιέχονται σε ένα μόνο σώμα HTML πίσω από τα παρασκήνια. Κάθε στοιχείο ερώτησης ξεκινά με τον ακόλουθο κώδικα:

WRITE YOUR QUESTION HERE

Choose 1 answer


Κάθε ένα από τα ακόλουθα divστοιχεία περιέχει μια πιθανή απάντηση:

 ... ANSWER 1 
    
ANSWER 2
...

Τη στιγμή της σύνταξης, ο ενσωματωμένος επεξεργαστής κώδικα του Ghost δεν υποστηρίζει τις γραμματοσειρές προτύπων, οπότε ορισμένα πράγματα πρέπει να είναι σκληρά κωδικοποιημένα.

Θυμηθείτε ότι όλες οι ερωτήσεις ουσιαστικά φορτώνονται μαζί πίσω από τα παρασκήνια, οπότε οι διψήφιοι αριθμοί σε καθένα idαντιπροσωπεύουν τα ακόλουθα:

  • Το πρώτο ψηφίο υποδεικνύει τη σειρά της ερώτησης πολλαπλής επιλογής στο άρθρο (1 είναι η πρώτη ερώτηση, 2 είναι η δεύτερη ερώτηση και ούτω καθεξής)
  • Το δεύτερο ψηφίο δείχνει τη σειρά κάθε πιθανής απάντησης στο μπλοκ ερωτήσεων (1 είναι η επιλογή απάντησης μία, η 2 είναι η επιλογή απάντησης δύο κ.λπ.)

Για παράδειγμα, block-12αντιπροσωπεύει την ερώτηση 1 / επιλογή απάντησης 2 , ενώ block-43είναι η ερώτηση 4 / επιλογή 3 .

Αυτή η σύμβαση ευρετηρίασης είναι απαραίτητη ώστε διαφορετικά μπλοκ ερωτήσεων να λειτουργούν ανεξάρτητα το ένα από το άλλο.

Παρόμοια λογική ισχύει και για τα ονόματα συναρτήσεων που είναι υπεύθυνα για τη διαδραστικότητα Ο κώδικας που χειρίζεται την αλληλεπίδραση χρήστη τοποθετείται εντός ετικετών και αποτελείται από δύο μέρη. Το πρώτο μέρος είναι η συνάρτηση που αξιολογεί τις απαντήσεις και εμφανίζει τα αποτελέσματα:

function displayAnswer1() { if (document.getElementById('option-11').checked) { document.getElementById('block-11').style.border = '3px solid limegreen' document.getElementById('result-11').style.color = 'limegreen' document.getElementById('result-11').innerHTML = 'Correct!' } if (document.getElementById('option-12').checked) { document.getElementById('block-12').style.border = '3px solid red' document.getElementById('result-12').style.color = 'red' document.getElementById('result-12').innerHTML = 'Incorrect!' showCorrectAnswer1() } if (document.getElementById('option-13').checked) { document.getElementById('block-13').style.border = '3px solid red' document.getElementById('result-13').style.color = 'red' document.getElementById('result-13').innerHTML = 'Incorrect!' showCorrectAnswer1() } if (document.getElementById('option-14').checked) { document.getElementById('block-14').style.border = '3px solid red' document.getElementById('result-14').style.color = 'red' document.getElementById('result-14').innerHTML = 'Incorrect!' showCorrectAnswer1() } }

Όπως υποδηλώνει το όνομα, η displayAnswer1συνάρτηση χειρίζεται την πρώτη ερώτηση σε ένα άρθρο. Εάν υπάρχει μια τρίτη ερώτηση στο άρθρο σας, displayAnswer3θα το χειριστεί.

Στο παραπάνω παράδειγμα, option-11είναι η σωστή απάντηση και το στυλ στο πρώτο ifμπλοκ ενημερώνεται για να δείξει ότι επιλέχθηκε η σωστή απάντηση. Εάν επιλεγεί κάποια από τις άλλες εσφαλμένες απαντήσεις, το στυλ ενημερώνεται για να το αντικατοπτρίζει.

Μη διστάσετε να παίξετε με τις displayAnswer_λειτουργίες στο δικό σας άρθρο. Απλώς θυμηθείτε να επισυνάψετε το κατάλληλο στυλ στις σωστές και εσφαλμένες απαντήσεις.

Εδώ είναι το δεύτερο μέρος του κώδικα που χειρίζεται την αλληλεπίδραση των χρηστών:

function showCorrectAnswer1() { let showAnswer1 = document.createElement('p') showAnswer1.innerHTML = 'Show Corrent Answer' showAnswer1.style.position = 'relative' showAnswer1.style.top = '-180px' showAnswer1.style.fontSize = '1.75rem' document.getElementById('showanswer1').appendChild(showAnswer1) showAnswer1.addEventListener('click', () => { document.getElementById('block-11').style.border = '3px solid limegreen' document.getElementById('result-11').style.color = 'limegreen' document.getElementById('result-11').innerHTML = 'Correct!' document.getElementById('showanswer1').removeChild(showAnswer1) }) }

Αυτή η συνάρτηση ονομάζεται showCorrectAnswer1επειδή χειρίζεται την πρώτη ερώτηση πολλαπλής επιλογής στο άρθρο. Θα πρέπει να προσθέσετε showCorrectAnswer2, showCorrectAnswer3και περισσότερο αν το άρθρο σας έχει περισσότερες από μία ερώτηση.

Παίξτε με το στυλ και τις διαστάσεις που χρησιμοποιούνται σε ολόκληρο τον κώδικα και προσαρμόστε το σύμφωνα με το γούστο σας. Επίσης, είμαι βέβαιος ότι υπάρχουν και άλλοι τρόποι εφαρμογής κουίζ πολλαπλών επιλογών, αλλά αυτό είναι δικό μου και χαίρομαι που το μοιράζομαι μαζί σας.

Ακολουθεί ο πλήρης κώδικας και ένα λειτουργικό παράδειγμα:

What fraction of a day is 6 hours?

Choose 1 answer


6/24
6
1/3
1/6
Submit // The function evaluates the answer and displays result function displayAnswer1() { if (document.getElementById('option-11').checked) { document.getElementById('block-11').style.border = '3px solid limegreen' document.getElementById('result-11').style.color = 'limegreen' document.getElementById('result-11').innerHTML = 'Correct!' } if (document.getElementById('option-12').checked) { document.getElementById('block-12').style.border = '3px solid red' document.getElementById('result-12').style.color = 'red' document.getElementById('result-12').innerHTML = 'Incorrect!' showCorrectAnswer1() } if (document.getElementById('option-13').checked) { document.getElementById('block-13').style.border = '3px solid red' document.getElementById('result-13').style.color = 'red' document.getElementById('result-13').innerHTML = 'Incorrect!' showCorrectAnswer1() } if (document.getElementById('option-14').checked) { document.getElementById('block-14').style.border = '3px solid red' document.getElementById('result-14').style.color = 'red' document.getElementById('result-14').innerHTML = 'Incorrect!' showCorrectAnswer1() } } // the functon displays the link to the correct answer function showCorrectAnswer1() { let showAnswer1 = document.createElement('p') showAnswer1.innerHTML = 'Show Corrent Answer' showAnswer1.style.position = 'relative' showAnswer1.style.top = '-180px' showAnswer1.style.fontSize = '1.75rem' document.getElementById('showanswer1').appendChild(showAnswer1) showAnswer1.addEventListener('click', () => { document.getElementById('block-11').style.border = '3px solid limegreen' document.getElementById('result-11').style.color = 'limegreen' document.getElementById('result-11').innerHTML = 'Correct!' document.getElementById('showanswer1').removeChild(showAnswer1) }) }

Τι κλάσμα της ημέρας είναι 6 ώρες;

Επιλέξτε 1 απάντηση


6/24
6
1/3
1/6
υποβάλλουν

Μπορείτε επίσης να βρείτε τον πλήρη κωδικό boilerplate εδώ στο GitHub.