Як вбудувати у свою статтю запитання з декількох тестів

З мого досвіду, доповнення навчання практичними вправами значно покращує моє розуміння теми. Це особливо актуально, коли я можу перевірити свої знання, коли йду, і отримувати миттєвий відгук про кожне питання.

Формат вікторини з множинним вибором ідеально підходить для цього. Я розробив метод для вбудовування питань із множинним вибором в математичні статті, які я пишу для freeCodeCamp, і хочу показати іншим авторам, як робити те саме.

Як додати код до своєї статті

Редактор Ghost дозволяє вбудовувати блоки коду в цілу статтю. Доступ до редактора коду можна отримати, натиснувши круглу кнопку зі знаком плюс (+), що використовується для додавання зображень, відео YouTube тощо:

Натисніть кнопку "HTML", щоб додати редактор до статті. Редактор підтримує HTML, CSS і навіть JavaScript.

Після того, як ви почнете додавати код, клацніть де-небудь поза рамкою редактора, щоб відтворити код і переглянути свій прогрес. Двічі клацніть на виведеному виводі, щоб знову відкрити вікно редактора:

Щоб перевірити працездатність коду, збережіть статтю, натиснувши Ctrl / ⌘ + S, а потім натисніть кнопку «Переглянути попередній перегляд», яка з’явиться в нижньому лівому куті:

Ваша стаття відкриється на окремій вкладці, де ви зможете побачити, як відображатиметься ваш код після публікації вашої статті. Витратьте трохи часу, щоб перевірити стиль та функціональність вашої вікторини з кількома виборами.

Код зразка для тестування з декількома варіантами доступний у наступному розділі. Все, що вам потрібно зробити, це вставити його у власну статтю та змінити питання та відповіді.

Як працює вікторина з множинним вибором

Ви можете додати скільки завгодно різних запитань. Однак, хоча у вашій статті може бути кілька тестів, усі вони містяться в одному тілі 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
Подати

Ви також можете знайти повний шаблонний код тут, на GitHub.