Sådan integreres flere valg quizspørgsmål i din artikel

Efter min erfaring forbedrer jeg min forståelse af et emne ved at supplere studiet med praktiske øvelser. Dette gælder især når jeg kan teste min viden, når jeg går og modtager øjeblikkelig feedback for hvert spørgsmål.

Flervalgsquizformatet er perfekt til dette. Jeg udviklede en metode til at integrere multiple choice-spørgsmål i de matematiske artikler, jeg skriver for freeCodeCamp, og jeg vil vise andre forfattere, hvordan man gør det samme.

Sådan tilføjes kode til din artikel

Ghost-editoren giver dig mulighed for at integrere kodeblokke i en artikel. Du kan få adgang til kodeeditoren ved at klikke på den runde knap med et plustegn (+), der bruges til at tilføje billeder, YouTube-videoer og så videre:

Klik på "HTML" -knappen for at tilføje en editor til artiklen. Editoren understøtter HTML, CSS og endda JavaScript.

Når du begynder at tilføje kode, skal du klikke et vilkårligt sted uden for editorens ramme for at gengive koden og se dine fremskridt. Dobbeltklik på det gengivne output for at åbne redigeringsvinduet igen:

For at teste funktionaliteten af ​​din kode skal du gemme artiklen ved at trykke på Ctrl / ⌘ + S og derefter klikke på knappen "Vis forhåndsvisning", der vises i nederste venstre hjørne:

Din artikel åbnes i en separat fane, hvor du kan se, hvordan din kode vil blive gengivet, når din artikel er offentliggjort. Tag dig tid til at kontrollere styling og funktionalitet i din multiple choice quiz.

Kedelpladekode til multiple choice-quizzen er tilgængelig i næste afsnit. Alt hvad du skal gøre er at indsætte det i din egen artikel og ændre spørgsmål og svar.

Sådan fungerer multiple choice quizzen

Du kan tilføje så mange forskellige spørgsmål, som du vil. Selvom din artikel muligvis har flere quizzer, er de alle indeholdt i en enkelt HTML-krop bag kulisserne. Hvert spørgsmålselement starter med følgende kode:

WRITE YOUR QUESTION HERE

Choose 1 answer


Hvert af de følgende divelementer indeholder et muligt svar:

 ... ANSWER 1 
    
ANSWER 2
...

I skrivende stund understøtter Ghosts integrerede kodeditor ikke skabelonbogstaver, så nogle ting skal være hårdkodede.

Husk, at alle spørgsmålene i det væsentlige er lagt sammen bag kulisserne, så de tocifrede tal i hver idrepræsenterer følgende:

  • Det første ciffer angiver rækkefølgen af ​​multiple choice-spørgsmålet i artiklen (1 er spørgsmål et, 2 er spørgsmål to osv.)
  • Det andet ciffer angiver rækkefølgen af ​​hvert muligt svar inden for dets spørgsmålsblok (1 er svarvalg et, 2 er svarvalg to osv.)

block-12Repræsenterer f.eks. Spørgsmål 1 / svarvalg 2 , mens det block-43er spørgsmål 4 / svarvalg 3 .

Denne indekseringskonvention er nødvendig for, at forskellige spørgsmålsblokke fungerer uafhængigt af hinanden.

Lignende logik gælder for funktionsnavne, der er ansvarlige for interaktivitet. Koden, der håndterer brugerinteraktion, er placeret i tags og består af to dele. Første del er funktionen, der evaluerer svar og viser resultater:

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() } }

Som navnet antyder, displayAnswer1håndterer funktionen det første spørgsmål i en artikel. Hvis der er et tredje spørgsmål i din artikel, displayAnswer3vil det håndtere det.

I eksemplet ovenfor option-11er det korrekte svar, og stylingen i den første ifblok opdateres for at vise, at det rigtige svar blev valgt. Hvis der vælges et af de andre forkerte svar, opdateres stylingen, så den afspejler det.

Du er velkommen til at lege med displayAnswer_funktionerne i din egen artikel. Husk bare at vedhæfte den passende styling til de korrekte og forkerte svar.

Her er den anden del af koden, der håndterer brugerinteraktion:

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

Denne funktion kaldes, showCorrectAnswer1fordi den håndterer det første multiple choice-spørgsmål i artiklen. Du bliver nødt til at tilføje showCorrectAnswer2, showCorrectAnswer3og mere, hvis din artikel har mere end et spørgsmål.

Spil med styling og dimensioner, der bruges i hele koden, og tilpas den efter din smag. Jeg er også sikker på, at der er andre måder at gennemføre multiple choice-quizzer på, men dette er min, og jeg er glad for at dele det med dig.

Her er den fulde kode og et fungerende eksempel:

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

Hvilken brøkdel af en dag er 6 timer?

Vælg 1 svar


6/24
6
1/3
1/6
Indsend

Du kan også finde den komplette kedelpladekode her på GitHub.