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.
