Kako u svoj članak ugraditi pitanja kviza s više izbora

Programiranje

Prema mom iskustvu, nadopunjavanje studija praktičnim vježbama uvelike poboljšava moje razumijevanje teme. To je osobito istinito kada mogu provjeravati svoje znanje dok primam trenutne povratne informacije za svako pitanje.

Format kviza s više izbora savršen je za ovo. Razvio sam metodu za ugradnju pitanja s više izbora u matematičke članke koje pišem za freeCodeCamp, a drugim autorima želim pokazati kako to učiniti.

Kako dodati kôd u svoj članak

Uređivač Ghost omogućuje vam ugrađivanje blokova koda u cijeli članak. Uređivaču koda možete pristupiti klikom na okrugli gumb sa znakom plus (+) koji se koristi za dodavanje slika, YouTube videozapisa i tako dalje:

Kliknite gumb "HTML" da biste dodali uređivač u članak. Uređivač podržava HTML, CSS, pa čak i JavaScript.

Nakon što započnete s dodavanjem koda, kliknite bilo gdje izvan okvira uređivača da biste generirali kôd i pogledali svoj napredak. Dvaput kliknite na prikazani izlaz da biste ponovo otvorili prozor uređivača:

Da biste testirali funkcionalnost koda, spremite članak pritiskom na Ctrl / ⌘ + S, a zatim kliknite gumb "Pregled pregleda" koji se pojavljuje u donjem lijevom kutu:

Vaš će se članak otvoriti na zasebnoj kartici na kojoj možete vidjeti kako će se vaš kôd prikazivati ​​nakon objavljivanja članka. Odvojite malo vremena da provjerite stil i funkcionalnost kviza s višestrukim izborom.

Šifra tablice za kviz s višestrukim izborom dostupan je u sljedećem odjeljku. Sve što trebate jest zalijepiti ga u vlastiti članak i promijeniti pitanje i odgovore.

Kako funkcionira kviz s višestrukim izborom

Možete dodati koliko god želite različitih pitanja. Međutim, iako vaš članak može imati više kvizova, svi su oni sadržani unutar jednog HTML-a iza kulisa. Svaki element pitanja započinje sljedećim kodom:

WRITE YOUR QUESTION HERE
Choose 1 answer

Svaki od sljedećih divelemenata sadrži mogući odgovor:

 ... ANSWER 1 
 ANSWER 2 
 ...

U vrijeme pisanja ovog teksta, ugrađeni uređivač koda Ghost ne podržava literal predložaka, pa neke stvari moraju biti teško kodirane.

Imajte na umu da su sva pitanja u osnovi zajedno učitana iza scene, pa dvoznamenkasti brojevi u svakom idpredstavljaju sljedeće:

  • Prva znamenka označava redoslijed izbora pitanje višestrukog u članku (1. pitanje jedno, dva je pitanje dva, i tako dalje)
  • Drugi znamenka označava redoslijed svaki mogući odgovor unutar svog pitanje bloka (1 je odgovor izbor jedan, dva je odgovor izbor dva, itd)

Na primjer, block-12predstavlja pitanje 1 / odabir odgovora 2 , dok block-43je pitanje 4 / odabir odgovora 3 .

Ova konvencija indeksiranja neophodna je kako bi različiti blokovi pitanja funkcionirali neovisno jedni od drugih.

Slična se logika odnosi na imena funkcija odgovornih za interaktivnost. Kôd koji upravlja interakcijom korisnika smješten je unutar oznaka i sastoji se od dva dijela. Prvi dio je funkcija koja ocjenjuje odgovore i prikazuje rezultate:

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

Kao što naziv sugerira, displayAnswer1funkcija obrađuje prvo pitanje u članku. Ako u vašem članku postoji treće pitanje, displayAnswer3riješit ćete ga.

U gornjem primjeru option-11je točan odgovor, a stil u prvom ifbloku ažuriran je tako da prikazuje odabrani pravi odgovor. Ako je odabran bilo koji drugi netočan odgovor, stil se ažurira tako da odražava to.

Slobodno se igrajte sa displayAnswer_funkcijama u vlastitom članku. Samo zapamtite da točnim i netočnim odgovorima priložite odgovarajući stil.

Evo drugog dijela koda koji obrađuje korisničku interakciju:

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

Ova se funkcija naziva showCorrectAnswer1jer obrađuje prvo pitanje s višestrukim izborom u članku. Morate dodati showCorrectAnswer2, showCorrectAnswer3i više ako vaš članak ima više od jednog pitanja.

Poigrajte se stilom i dimenzijama korištenim u cijelom kodu i prilagodite ga svom ukusu. Također, siguran sam da postoje i drugi načini za implementaciju kvizova s ​​više izbora, ali ovo je moj i rado ću ga podijeliti s vama.

Evo cijelog koda i radnog primjera:

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

Koji dio dana je 6 sati?

Odaberite 1 odgovor

6/24
6
1/3
1/6
podnijeti

Kompletni kôd uzorka možete pronaći i ovdje na GitHubu.