Multiple choice quiz question Rmarkdown

html-multiple-choice.Rmd

---
output: 
  html_document:
    theme: cerulean
---

### Example html multiple choice question using Rmarkdown

<!-- Render this Rmarkdown doc to html to make an interactive html / js multiple choice question -->

Choose your favourite from the options below. Does it match mine?

<!-- Answer options go here -->
<div class="select">
  <label for="question">Select answer</label>
  <select id="question">
    <option></option>
    <option value="Cassowary">Cassowary</option>
    <option value="Bilby">Bilby</option>
    <option value="Quokka">Quokka</option>
  </select>
</div>

<!-- Check answer button -->
<div class="collapse" id="collapseExample">
  <div class="card card-body" id="answerFeedback">
    The answer selected was ...
  </div>
</div>

<!-- Code to update answer feedback -->
<script type="text/javascript">
const ANSWER = "Quokka";

const select = document.getElementById("question");
const feedback = document.getElementById("answerFeedback");

select.addEventListener('change', ev => {
  const value = ev.target.value;

  if (value === ANSWER) {
    feedback.innerHTML = "They're my favourite too!!"
    return;
  } else if (value) {
    feedback.innerHTML = "Not quite my favourite! Have another go." 
  } else {
    feedback.innerHTML = "Try selecting an answer"
  }
});
</script>