Como incorporar um questionário de múltipla escolha ao seu artigo

Artigo original: How To Embed Multiple Choice Quiz Questions into Your Article

Na minha experiência, complementar os estudos com exercícios práticos aumenta consideravelmente meu entendimento sobre um assunto. Isso é verdadeiro, especialmente, quando posso testar meus conhecimentos na hora e receber feedback instantâneo sobre cada pergunta.

O formato de questionário de múltipla escolha é perfeito para isso. Eu desenvolvi um método de incorporar perguntas de múltipla escolha nos artigos sobre matemática que escrevo para o freeCodeCamp. Quero, neste artigo, mostrar para outros autores como eles podem fazer o mesmo.

Como adicionar código ao seu artigo

O editor do Ghost (editor usado pelo freeCodeCamp) permite incorporar blocos de código em um artigo. O editor de código pode ser acessado clicando no botão redondo com o sinal de mais (+) usado para adicionar imagens, vídeos do YouTube, entre outros:

Clique no botão "HTML" para adicionar outro editor ao artigo. O editor tem suporte para HTML, CSS e JavaScript.

Ao começar a adicionar o código, clique em qualquer lugar fora do quadro do editor para renderizar o código e visualizar o andamento. Clique duas vezes no resultado renderizado para reabrir a janela do editor:

Para testar a funcionalidade de seu código, salve o artigo e pressione Ctrl/⌘ + S. Depois, clique no botão "View Preview" (Visualização prévia) que aparece no canto inferior esquerdo:

Seu artigo será aberto em uma outra guia, onde você poderá ver como seu código será renderizado quando o artigo for publicado. Aproveite para conferir o estilo e a funcionalidade de seu questionário de múltipla escolha.

O código boilerplate para o questionário de múltipla escolha está disponível na próxima seção. Tudo o que você precisa fazer é colá-lo em seu próprio artigo e alterar a pergunta e as respostas.

Como funciona o questionário de múltipla escolha

Você pode adicionar quantas perguntas diferentes quiser. Porém, embora seu artigo possa ter diversas perguntas, elas estarão todas contidas em um único corpo do HTML internamente. Cada elemento de pergunta começa com o código abaixo:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>ESCREVA SUA PERGUNTA AQUI</h3>
  <p>Selecione 1 resposta</p>
  <hr />

Cada um dos elementos div abaixo contém uma resposta possível:

  ...
  <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;' />
      RESPOSTA 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;' />
      RESPOSTA 2</label>
    <span id='result-12'></span>
  </div>
  <hr />
  ...

Na hora em que escrevemos o artigo, o editor de código incorporado do Ghost não dá suporte a template literals, o que significa que algumas coisas precisam ser colocadas diretamente no código.

Lembre-se de que todas as perguntas são, essencialmente, carregadas juntas internamente. Assim, os números de dois algarismos de cada id representam o seguinte:

O primeiro algarismo indica a ordem da pergunta de múltipla escolha no artigo (1 é a questão um, 2 é a questão dois e assim por diante)
O segundo algarismo indica a ordem de cada resposta possível dentro deste bloco de pergunta específico (1 é a resposta um, 2 é a resposta dois e assim por diante)

Por exemplo, block-12 representa pergunta 1/resposta 2, enquanto block-43 é a pergunta 4/resposta 3.

Essa convenção de índices (id) é necessária para que blocos de perguntas diferentes funcionem independentemente dos outros.

Uma lógica semelhante se aplica aos nomes das funções responsáveis pela interatividade. O código que lida com a interação do usuário é colocado dentro das tags <script> e é composto por duas partes. A primeira parte é a função que avalia as respostas e exibe os resultados:

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 = 'Correto!'
    }
    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 = 'Incorreto!'
      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 = 'Incorreto!'
      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 = 'Incorreto!'
      showCorrectAnswer1()
    }
  }

Como o nome em inglês sugere, a função displayAnswer1 trata da primeira pergunta do artigo. Se houver uma terceira pergunta, displayAnswer3 tratará dela.

No exemplo acima, option-11 é a resposta correta. O estilo no primeiro bloco if é autalizado para mostrar que a resposta correta foi selecionada. Se qualquer outra resposta – ou seja, uma resposta incorreta – for selecionada, o estilo será atualizado para refletir isso.

Fique à vontade para brincar com as funções displayAnswer_ em seu próprio artigo. Lembre-se apenas de associar o estilo adequado às respostas corretas e incorretas.

Aqui está a segunda parte do código que lida com a interação do usuário:

function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Mostrar a resposta certa'
    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 = 'Correto!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }

A função é chamada de showCorrectAnswer1 porque lida com a primeira pergunta de múltipla escolha do artigo. Você terá de adicionar showCorrectAnswer2, showCorrectAnswer3 e assim por diante se mais perguntas forem adicionadas ao seu artigo.

Fique à vontade, também, para brincar com o estilo e com as dimensões no código. Personalize-os como quiser. Além disso, tenho certeza de que há outras maneiras de implementar questionários de múltipla escolha. Essa foi a minha maneira. É um prazer, para mim, compartilhá-la com vocês.

Aqui temos o código completo e um exemplo funcional:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>A que parte de um dia correspondem 6 horas?</h3>
  <p>Escolha 1 resposta</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;'>Enviar</button>
</div>
<a id='showanswer1'></a>
<script>
  //    A função avalia a resposta e exibe o resultado
  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 = 'Correto!'
    }
    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 = 'Incorreto!'
      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 = 'Incorreto!'
      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 = 'Incorreto!'
      showCorrectAnswer1()
    }
  }
  // a função exibe o link para a resposta correta
  function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Mostrar a resposta certa'
    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 = 'Correto!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }
</script>

A que parte de um dia correspondem 6 horas?

Escolha 1 resposta

6/24

1/3

1/6

Você também pode encontrar o código boilerplate completo neste repositório do GitHub.