Cómo integrar preguntas de cuestionario de opción múltiple en su artículo

En mi experiencia, complementar el estudio con ejercicios prácticos mejora enormemente mi comprensión de un tema. Esto es especialmente cierto cuando puedo poner a prueba mis conocimientos sobre la marcha y recibir comentarios instantáneos para cada pregunta.

El formato de cuestionario de opción múltiple es perfecto para esto. Desarrollé un método para incorporar preguntas de opción múltiple en los artículos de matemáticas que escribo de forma gratuita en CodeCamp, y quiero mostrarles a otros autores cómo hacer lo mismo.

Cómo agregar código a su artículo

El editor Ghost le permite incrustar bloques de código a lo largo de un artículo. Se puede acceder al editor de código haciendo clic en el botón redondo con un signo más (+) que se usa para agregar imágenes, videos de YouTube, etc.

Haga clic en el botón "HTML" para agregar un editor al artículo. El editor admite HTML, CSS e incluso JavaScript.

Una vez que comience a agregar código, haga clic en cualquier lugar fuera del marco del editor para representar el código y ver su progreso. Haga doble clic en la salida renderizada para volver a abrir la ventana del editor:

Para probar la funcionalidad de su código, guarde el artículo presionando Ctrl / ⌘ + S, luego haga clic en el botón "Ver vista previa" que aparece en la esquina inferior izquierda:

Su artículo se abrirá en una pestaña separada donde podrá ver cómo se procesará su código una vez que se publique su artículo. Tómese su tiempo para verificar el estilo y la funcionalidad de su cuestionario de opción múltiple.

El código estándar para el cuestionario de opción múltiple está disponible en la siguiente sección. Todo lo que necesita hacer es pegarlo en su propio artículo y cambiar la pregunta y las respuestas.

Cómo funciona el cuestionario de opción múltiple

Puede agregar tantas preguntas diferentes como desee. Sin embargo, aunque su artículo puede tener varios cuestionarios, todos están contenidos en un solo cuerpo HTML detrás de escena. Cada elemento de la pregunta comienza con el siguiente código:

WRITE YOUR QUESTION HERE

Choose 1 answer


Cada uno de los siguientes divelementos contiene una posible respuesta:

 ... ANSWER 1 
ANSWER 2
...

En el momento de redactar este artículo, el editor de código incrustado de Ghost no admite literales de plantilla, por lo que algunas cosas deben codificarse de forma rígida.

Recuerde que todas las preguntas se cargan esencialmente juntas detrás de escena, por lo que los números de dos dígitos en cada una idrepresentan lo siguiente:

  • El primer dígito indica el orden de la pregunta de opción múltiple en el artículo (1 es la pregunta uno, 2 es la pregunta dos, y así sucesivamente)
  • El segundo dígito indica el orden de cada respuesta posible dentro de su bloque de preguntas (1 es la opción de respuesta uno, 2 es la opción de respuesta dos, etc.)

Por ejemplo, block-12representa la pregunta 1 / opción de respuesta 2 , mientras que block-43es la pregunta 4 / opción de respuesta 3 .

Esta convención de indexación es necesaria para que los diferentes bloques de preguntas funcionen de forma independiente entre sí.

Se aplica una lógica similar a los nombres de las funciones responsables de la interactividad. El código que maneja la interacción del usuario se coloca dentro de las etiquetas y consta de dos partes. La primera parte es la función que evalúa las respuestas y muestra los 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 = '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() } }

Como sugiere el nombre, la displayAnswer1función maneja la primera pregunta dentro de un artículo. Si hay una tercera pregunta en su artículo, la displayAnswer3manejaré.

En el ejemplo anterior, option-11es la respuesta correcta y el estilo en el primer ifbloque se actualiza para mostrar que se seleccionó la respuesta correcta. Si se selecciona alguna de las otras respuestas incorrectas, el estilo se actualiza para reflejarlo.

Siéntase libre de jugar con las displayAnswer_funciones de su propio artículo. Solo recuerde adjuntar el estilo apropiado a las respuestas correctas e incorrectas.

Aquí está la segunda parte del código que maneja la interacción del usuario:

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

Esta función se llama showCorrectAnswer1porque maneja la primera pregunta de opción múltiple del artículo. Tendrá que agregar showCorrectAnswer2, showCorrectAnswer3y más si su artículo tiene más de una pregunta.

Juegue con el estilo y las dimensiones utilizados en todo el código y personalícelo a su gusto. Además, estoy seguro de que hay otras formas de implementar cuestionarios de opción múltiple, pero esta es mía y me complace compartirla con ustedes.

Aquí está el código completo y un ejemplo de trabajo:

What fraction of a day is 6 hours?

Choose 1 answer


6/24
6
1/3
1/6
Submit // 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) }) }

¿Qué fracción de un día son 6 horas?

Elige 1 respuesta


24/6
6
1/3
1/6
Enviar

También puede encontrar el código estándar completo aquí en GitHub.