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

Como adicionar código ao seu artigo

O editor Ghost permite incorporar blocos de código ao longo de um artigo. Para acessar o editor de código, clique no botão redondo com um sinal de adição (+) usado para adicionar imagens, vídeos do YouTube e assim por diante:

Clique no botão “HTML” para adicionar um editor ao artigo. O editor suporta HTML, CSS e até JavaScript.

Depois de começar a adicionar código, clique em qualquer lugar fora do quadro do editor para renderizar o código e visualizar seu progresso. Clique duas vezes na saída renderizada para reabrir a janela do editor:

Para testar a funcionalidade do seu código, salve o artigo pressionando Ctrl / ⌘ + S e clique no botão “Visualizar visualização” que aparece no canto inferior esquerdo:

Seu artigo será aberto em uma guia separada, onde você poderá ver como o seu código será renderizado assim que o artigo for publicado. Reserve um tempo para verificar o estilo e a funcionalidade do seu questionário de múltipla escolha.

O código padrão 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 o questionário de múltipla escolha funciona

Você pode adicionar quantas perguntas quiser. No entanto, embora seu artigo possa ter vários testes, eles estão todos contidos em um corpo HTML único Por trás das cenas. Cada elemento da pergunta começa com o seguinte código:

  WRITE YOUR QUESTION HERE
  Choose 1 answer

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

  ...                  ANSWER 1      
  
                  ANSWER 2      
  
  ...

No momento da redação deste artigo, o editor de código incorporado do Ghost não suporta literais de modelo, portanto, algumas coisas precisam ser codificadas.

Lembre-se de que todas as perguntas são essencialmente carregadas juntas nos bastidores, portanto, os números de dois dígitos em cada id representa o seguinte:

o primeiro dígito indica a ordem da questão de múltipla escolha no artigo (1 é a questão 1, 2 é a questão 2 e assim por diante)
o segundo dígito indica a ordem de cada resposta possível dentro do seu bloco de perguntas (1 é a opção de resposta 1, 2 é a opção de resposta 2, etc.)

Por exemplo, block-12 representa questão 1 / resposta escolha 2, enquanto block-43 é pergunta 4 / resposta escolha 3.

Essa convenção de indexação é necessária para que diferentes blocos de perguntas funcionem independentemente um do outro.

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


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

Like the name suggests, the displayAnswer1 function handles the first question within an article. If there's a third question in your article, displayAnswer3 will handle it.
In the example above, option-11 is the correct answer, and the styling in the first if block is updated to show the right answer was selected. If any of the other incorrect answers are selected, the styling is updated to reflect that.





Feel free to play with the displayAnswer_ functions in your own article. Just remember to attach the appropriate styling to the correct and incorrect answers.
Here's the second part of the code that handles user interaction:





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

This function is called showCorrectAnswer1 because it handles the first multiple choice question in the article. You'll have to add showCorrectAnswer2, showCorrectAnswer3, and more if your article has more than one question.
Please play around with the styling and dimensions used throughout the code, and customize it to your taste. Also, I'm sure there are other ways to implement multiple choice quizzes, but this is mine, and I'm happy to share it with you.





Here's the full code and a working example:


  What fraction of a day is 6 hours?
  Choose 1 answer






  

  
    
      
      6/24
    
  
  

  
    
      
      6
    
  
  

  
    
      
      1/3
    
  
  

  
    
      
      1/6
    
  
  
  






Você também pode encontrar o código completo aqui no GitHub.