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


Na minha experiência, suplementar o estudo com exercícios práticos melhora muito minha compreensão de um tópico. Isso é especialmente verdade quando posso testar meus conhecimentos à medida que recebo feedback instantâneo para cada pergunta.

O formato de questionário de múltipla escolha é perfeito para isso. Desenvolvi um método para incorporar perguntas de múltipla escolha nos artigos de matemática que escrevo para freeCodeCamp, e quero mostrar a outros autores como fazer o mesmo.

XBOX em Oferta

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:

  ...
  


...

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



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



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *