Hogyan lehet beágyazni a feleletválasztós kvíz kérdéseket a cikkébe

Tapasztalataim szerint a tanulmány gyakorlati gyakorlatokkal való kiegészítése nagyban javítja a téma megértését. Ez különösen igaz, amikor menet közben kipróbálhatom tudásomat, és azonnali visszajelzést kapok minden kérdésről.

A feleletválasztós kvíz formátum erre tökéletes. Kidolgoztam egy módszert a feleletválasztós kérdések beágyazására a freeCodeCamp számára írt matematikai cikkekbe, és más szerzőknek is szeretném megmutatni, hogyan kell ezt csinálni.

Hogyan adhatunk kódot a cikkhez

A Ghost szerkesztő lehetővé teszi kódblokkok beágyazását egy cikkbe. A kódszerkesztő úgy érhető el , hogy a képek, YouTube-videók stb. Hozzáadásához használt plusz előjellel (+) kerek gombra kattint :

Kattintson a "HTML" gombra szerkesztő hozzáadásához a cikkhez. A szerkesztő támogatja a HTML-t, a CSS-t és még a JavaScript-et is.

Miután elkezdte hozzáadni a kódot, kattintson a szerkesztő keretén kívül bárhová a kód megjelenítéséhez és az előrehaladás megtekintéséhez. Kattintson duplán a renderelt kimenetre a szerkesztőablak újbóli megnyitásához:

A kód működésének teszteléséhez mentse el a cikket a Ctrl / ⌘ + S megnyomásával, majd kattintson a bal alsó sarokban megjelenő "Előnézet megtekintése" gombra:

A cikk külön fülön nyílik meg, ahol láthatja, hogyan jelenik meg kódja a cikk közzététele után. Szánjon egy kis időt, hogy ellenőrizze a feleletválasztós teszt stílusát és működését.

A feleletválasztós kvíz kazánlapkódja a következő szakaszban található. Csak annyit kell tennie, hogy beilleszti a saját cikkébe, és megváltoztatja a kérdést és a válaszokat.

Hogyan működik a feleletválasztós kvíz

Hozzáadhat annyi különféle kérdést, amennyit csak akar. Bár a cikknek több vetélkedője is lehet, mindet egyetlen HTML-test tartalmazza a színfalak mögött. Minden kérdéselem a következő kóddal kezdődik:

WRITE YOUR QUESTION HERE

Choose 1 answer


A következő divelemek mindegyike tartalmaz egy lehetséges választ:

 ... ANSWER 1 
ANSWER 2
...

Az írás idején a Ghost beágyazott kódszerkesztője nem támogatja a sablon literálokat, ezért néhány dolgot keményen kódolni kell.

Ne feledje, hogy az összes kérdés lényegében a kulisszák mögé kerül, így a két számjegyű szám ida következőket jelenti:

  • Az első számjegy a feleletválasztós kérdés sorrendjét jelzi a cikkben (1 az első kérdés, 2 a második kérdés és így tovább)
  • A második számjegy az egyes lehetséges válaszok sorrendjét jelöli a kérdésblokkjában (1 az első válasz, 2 a második válasz, stb.)

Például, block-12jelentése kérdés 1 / válasz választás 2 , míg block-43a szóban forgó 4 / válasz választás 3 .

Erre az indexelési egyezményre azért van szükség, hogy a különböző kérdésblokkok egymástól függetlenül működjenek.

Hasonló logika érvényes az interaktivitásért felelős függvénynevekre is. A felhasználói interakciókat kezelő kód a címkékbe kerül, és két részből áll. Az első rész a válaszokat kiértékelő és az eredményeket megjelenítő függvény:

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

Ahogy a neve is sugallja, a displayAnswer1függvény kezeli az első kérdést egy cikken belül. Ha van egy harmadik kérdés a cikkében, displayAnswer3akkor kezelni fogja.

A fenti példában option-11a helyes válasz, és az első ifblokk stílusa frissül, hogy megmutassa a megfelelő választ. Ha a többi helytelen választ választja, a stílus frissül, hogy ezt tükrözze.

Játsszon nyugodtan displayAnswer_a saját cikkében található funkciókkal. Ne felejtse el csatolni a megfelelő stílust a helyes és helytelen válaszokhoz.

Itt van a kód második része, amely kezeli a felhasználói interakciókat:

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

Ezt a függvényt azért hívják, showCorrectAnswer1mert kezeli a cikk első feleletválasztós kérdését. Hozzá kell adnia showCorrectAnswer2,, showCorrectAnswer3és még többet, ha a cikknek több kérdése van.

Kérjük, játsszon végig a kódban használt stílusokkal és méretekkel, és testre szabhatja ízlésének megfelelően. Biztos vagyok benne, hogy a feleletválasztós vetélkedők megvalósításának más módjai is vannak, de ez az enyém, és szívesen megosztom veletek.

Itt van a teljes kód és egy működő példa:

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

A nap hány része 6 óra?

Válasszon 1 választ


6/24
6.
1/3
1/6
Beküldés

A kazán teljes kódját itt is megtalálja a GitHubon.