8  Interactive Multiple Choice Questions

This page demonstrates the setup of an naquiz multiple-choice quiz. The advantage of this extension is that we don’t need to use a Shiny server.

8.1 Multiple Choice Questions

8.1.1 Basic MCQ

A simple naquiz example looks something like the question below to the reader (click the Markdown tab to see how to write the markdown for it).

Bill Gates was the founder of:

✗Apple

✓Microsoft

✗Facebook

✗Google

:::::{.question}
Bill Gates was the founder of:

::::{.choices}

:::{.choice}
Apple
:::  

:::{.choice .correct-choice}
Microsoft
:::

:::{.choice}
Facebook  
:::

:::{.choice}
Google   
:::

::::
:::::
Caution

The nested colon dividers and their counts can look confusing on the page, and missed/extra colons can break the layout of your page.

  • The {.question} divider gets five colons.
  • The {.choices} divider that surrounds the choices presented to the reader gets four colons.
  • Each individual {.choice} divider gets three colons.

It presents a series of radio buttons from which the reader can choose one option. On clicking the option, the reader receives very basic feedback: a red cross (incorrect) or green tick (correct).

8.1.2 Add a “clear answer” button

The naquiz MCQs can be decorated with useful buttons for reader interaction. The example below has a “Clear Answer” button, which unchecks the reader’s selected answer.

Bill Gates was the founder of:

✗Apple

✓Microsoft

✗Facebook

✗Google

:::::{.question}
Bill Gates was the founder of:

::::{.choices}

:::{.choice}
Apple
:::  

:::{.choice .correct-choice}
Microsoft
:::

:::{.choice}
Facebook  
:::

:::{.choice}
Google   
:::

:::{.button-clear title="Clear answer" button-class="btn btn-xs"}
:::

::::
:::::
Important

The button to clear reader answers needs to be linked with the available choices, and so is placed inside the {.choices} division of the MCQ.

8.1.3 Add a “hint” button

The example below includes a “hint” button, which the reader can use to get a clue to the answer.

Bill Gates was the founder of:

✗Apple

✓Microsoft

✗Facebook

✗Google

The company name starts with an ‘M’…

:::::{.question}
Bill Gates was the founder of:

::::{.choices}

:::{.choice}
Apple
:::  

:::{.choice .correct-choice}
Microsoft
:::

:::{.choice}
Facebook  
:::

:::{.choice}
Google   
:::

:::{.button-clear title="Clear answer" button-class="btn btn-xs"}
:::

::::

::::{.btn-group}
:::{.button-hint title="Show hint" button-class="btn btn-xs"}
The company name starts with an 'M'...
:::
::::

:::::
Important

We can place additional buttons within a button group divider, specified as ::::{.btn-group}, inside the question divider (the five colons :::::).

Here, we have linked a {.button-hint} that, when clicked, expands to show the hint text.

8.1.4 Add an “answer” button

We can add a further button to provide students with the answer we’d like them to read, directly.

Bill Gates was the founder of:

✗Apple

✓Microsoft

✗Facebook

✗Google

The company name starts with an ‘M’…

Bill Gates and Paul Allen founded Microsoft on April 4, 1975.

:::::{.question}
Bill Gates was the founder of:

::::{.choices}

:::{.choice}
Apple
:::  

:::{.choice .correct-choice}
Microsoft
:::

:::{.choice}
Facebook  
:::

:::{.choice}
Google   
:::

:::{.button-clear title="Clear answer" button-class="btn btn-xs"}
:::

::::

::::{.btn-group}
:::{.button-hint title="Show hint" button-class="btn btn-xs"}
The company name starts with an 'M'...
:::
::::

:::{.button-answer title="Show Answer" button-class="btn btn-xs"}
Bill Gates and Paul Allen founded Microsoft on April 4, 1975.
:::
:::::
Important

We can place more than one button in the button group divider. Here, we have linked a {.button-answer} that, when clicked, expands to show the hint text.

8.1.5 Placing an MCQ in a custom callout

We have created a custom callout called callout-question which can be used to make MCQ stand out a bit more, with a consistent visual style.

Question

Bill Gates was the founder of:

✗Apple

✓Microsoft

✗Facebook

✗Google

The company name starts with an ‘M’…

Bill Gates and Paul Allen founded Microsoft on April 4, 1975.

::: { .callout-question }

:::::{.question}
Bill Gates was the founder of:

::::{.choices}

:::{.choice}
Apple
:::  

:::{.choice .correct-choice}
Microsoft
:::

:::{.choice}
Facebook  
:::

:::{.choice}
Google   
:::

:::{.button-clear title="Clear answer" button-class="btn btn-xs"}
:::

::::
:::::

::::{.btn-group}
:::{.button-hint title="Show hint" button-class="btn btn-xs"}
The company name starts with an 'M'...
:::

:::{.button-answer title="Show Answer" button-class="btn btn-xs"}
Bill Gates and Paul Allen founded Microsoft on April 4, 1975.
:::
::::

:::

8.1.6 Randomising question values

We can use R or Python to generate random values that can be used to compose questions that are different each time the page is rendered, by inserting a suitable R/Python code block and using the values in the question.

Caution

The values do not change when the page is reloaded by a reader. The values are calculated when the pages are rendered.

For values that change when the page is refreshed, or on demand, use an R Shiny or Shinylive solution, or a solution like Numbas.

Question

What is the sum of 7 and 13?

✗-6

✓20

✗6

✗91

You need to add the two numbers 7 and 13

7 + 13 = 20

::: { .callout-question }

:::::{.question}
What is the sum of `r x_val` and `r y_val`?

::::{.choices}

:::{.choice}
`r x_val - y_val`
:::  

:::{.choice .correct-choice}
`r x_val + y_val`
:::

:::{.choice}
`r y_val - x_val`
:::

:::{.choice}
`r y_val * x_val`
:::

:::{.button-clear title="Clear answer" button-class="btn btn-xs"}
:::

::::
:::::

::::{.btn-group}
:::{.button-hint title="Show hint" button-class="btn btn-xs"}
You need to add the two numbers `r x_val` and `r y_val`
:::

:::{.button-answer title="Show Answer" button-class="btn btn-xs"}
`r x_val` + `r y_val` = `r x_val + y_val`
:::
::::

:::
#| show: false
#| echo: false

x_val <- sample(1:10, 1)
y_val <- sample(11:20, 1)