Din experiența mea, suplimentarea studiului cu exerciții practice mă îmbunătățește foarte mult înțelegerea unui subiect. Acest lucru este valabil mai ales atunci când îmi pot testa cunoștințele pe măsură ce merg și primesc feedback instant pentru fiecare întrebare.

Formatul testului cu alegeri multiple este perfect pentru aceasta. Am dezvoltat o metodă pentru a încorpora întrebări cu răspunsuri multiple în articolele de matematică pe care le scriu pentru Routech și vreau să le arăt altor autori cum să procedeze la fel.

Cum să adăugați cod la articolul dvs.

Editorul Ghost vă permite să încorporați blocuri de cod pe tot parcursul unui articol. Editorul de cod poate fi accesat făcând clic pe butonul rotund cu semnul plus (+) folosit pentru adăugarea de imagini, videoclipuri YouTube și așa mai departe:

Cum sa incorporati intrebari cu test cu alegere multipla in

Faceți clic pe butonul „HTML” pentru a adăuga un editor la articol. Editorul acceptă HTML, CSS și chiar JavaScript.

Odată ce ați început să adăugați cod, faceți clic oriunde în afara cadrului editorului pentru a reda codul și a vă vedea progresul. Faceți dublu clic pe ieșirea redată pentru a redeschide fereastra editorului:

Cum sa incorporati intrebari cu test cu alegere multipla in

Pentru a testa funcționalitatea codului dvs., salvați articolul apăsând Ctrl / ⌘ + S, apoi faceți clic pe butonul „Vizualizare previzualizare” care apare în colțul din stânga jos:

1612113545 162 Cum sa incorporati intrebari cu test cu alegere multipla in

Articolul dvs. se va deschide într-o filă separată unde puteți vedea cum va fi redat codul dvs. după publicarea articolului dvs. Alocați-vă ceva timp pentru a verifica stilul și funcționalitatea testului cu alegeri multiple.

Codul boilerplate pentru testul cu alegeri multiple este disponibil în secțiunea următoare. Tot ce trebuie să faceți este să îl lipiți în propriul articol și să schimbați întrebarea și răspunsurile.

Cum funcționează testul cu alegeri multiple

Puteți adăuga câte întrebări doriți. Cu toate acestea, deși articolul dvs. poate avea mai multe teste, toate sunt conținute într-un corp unic HTML în spatele scenelor. Fiecare element de întrebare începe cu următorul cod:

<div style="transform: scale(0.65); position: relative; top: -100px;">
  <h3>WRITE YOUR QUESTION HERE</h3>
  <p>Choose 1 answer</p>
  <hr />

Fiecare dintre următoarele div elements conține un posibil răspuns:

  ...
  <div id='block-11' style="padding: 10px;">
    <label for="option-11" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="6/24" id='option-11' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      ANSWER 1</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style="padding: 10px;">
    <label for="option-12" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="6" id='option-12' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      ANSWER 2</label>
    <span id='result-12'></span>
  </div>
  <hr />
  ...

La momentul scrierii, editorul de cod încorporat al Ghost nu acceptă literele șablonului, așa că unele lucruri trebuie să fie codificate greu.

Amintiți-vă că toate întrebările sunt încărcate în esență în spatele scenei, deci numerele din două cifre din fiecare id reprezintă următoarele:

  • primul cifră indică ordinea întrebării cu alegere multiplă din articol (1 este întrebarea unu, 2 este întrebarea a doua și așa mai departe)
  • al doilea cifra indică ordinea fiecărui răspuns posibil în cadrul blocului său de întrebări (1 este alegerea răspunsului unu, 2 este alegerea răspunsului doi etc.)

De exemplu, block-12 reprezintă întrebare 1 / răspuns la alegerea 2, in timp ce block-43 este întrebarea 4 / răspunsul la alegerea 3.

Această convenție de indexare este necesară pentru ca diferite blocuri de întrebări să funcționeze independent unele de altele.

O logică similară se aplică pentru numele funcțiilor responsabile de interactivitate. Codul care gestionează interacțiunea cu utilizatorul este plasat în interior <script> etichete și constă din două părți. Prima parte este funcția care evaluează răspunsurile și afișează rezultatele:

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

După cum sugerează și numele, displayAnswer1 funcția gestionează prima întrebare dintr-un articol. Dacă există o a treia întrebare în articolul dvs., displayAnswer3 se va descurca.

În exemplul de mai sus, option-11 este răspunsul corect, iar stilul în primul if blocul este actualizat pentru a afișa răspunsul corect a fost selectat. Dacă este selectat oricare dintre celelalte răspunsuri incorecte, stilul este actualizat pentru a reflecta acest lucru.

Simțiți-vă liber să jucați cu displayAnswer_ funcții în propriul articol. Nu uitați să atașați stilul adecvat răspunsurilor corecte și incorecte.

Iată a doua parte a codului care gestionează interacțiunea utilizatorului:

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

Această funcție se numește showCorrectAnswer1 deoarece gestionează prima întrebare cu răspuns multiplu din articol. Va trebui să adăugați showCorrectAnswer2, showCorrectAnswer3, și mai mult dacă articolul dvs. are mai multe întrebări.

Vă rugăm să vă jucați cu stilul și dimensiunile utilizate în întregul cod și personalizați-l după gustul dvs. De asemenea, sunt sigur că există și alte modalități de a implementa teste cu alegeri multiple, dar acesta este al meu și sunt bucuros să vă împărtășesc cu dvs.

Iată codul complet și un exemplu de lucru:

<div style="transform: scale(0.65); position: relative; top: -100px;">
  <h3>What fraction of a day is 6 hours?</h3>
  <p>Choose 1 answer</p>
  <hr />

  <div id='block-11' style="padding: 10px;">
    <label for="option-11" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="6/24" id='option-11' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      6/24</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style="padding: 10px;">
    <label for="option-12" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="6" id='option-12' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      6</label>
    <span id='result-12'></span>
  </div>
  <hr />

  <div id='block-13' style="padding: 10px;">
    <label for="option-13" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="1/3" id='option-13' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      1/3</label>
    <span id='result-13'></span>
  </div>
  <hr />

  <div id='block-14' style="padding: 10px;">
    <label for="option-14" style=" padding: 5px; font-size: 2.5rem;">
      <input type="radio" name="option" value="1/6" id='option-14' style="transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;" />
      1/6</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <button type="button" onclick='displayAnswer1()' style="width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;">Submit</button>
</div>
<a id='showanswer1'></a>
<script>
  //    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)
    })
  }
</script>

Ce fracțiune a zilei este de 6 ore?

Alegeți 1 răspuns







De asemenea, puteți găsi codul complet al cazanului aici pe GitHub.