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.