How to add this script to Hugo?

support
1

I would like to have a question with 4 options, one of which is correct. The users can select one of the four options and the correct option will be displayed. I do this through the below code. I would like to modularise this and ensure a simple way of displaying the correct and wrong options, so that the background process of indicating correct/wrong answers is automatic.

  1. How to make this code Hugo-compatible? That is, how to convert these to shortcodes/partials?
  2. How to customise the radio button? Currently it is dark when unselected and white when selected. How to change this within the confines of Hugo?
<div id='block-11' style='padding: 1px;'>
    <label for='option-11' style=' padding: 1px; font-size: 1rem;'>
      <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1); margin-right: 1px; vertical-align: middle; margin-top: -2px;' />
      Option A</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style='padding: 1px;'>
    <label for='option-12' style=' padding: 1px; font-size: 1rem;'>
      <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1); margin-right: 1px; vertical-align: middle; margin-top: -2px;' />
      Option B</label>
    <span id='result-12'></span>
  </div>
  <hr />

  <div id='block-13' style='padding: 1px;'>
    <label for='option-13' style=' padding: 1px; font-size: 1rem;'>
      <input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1); margin-right: 1px; vertical-align: middle; margin-top: -2px;' />
      Option C</label>
    <span id='result-13'></span>
  </div>
  <hr />

  <div id='block-14' style='padding: 1px;'>
    <label for='option-14' style=' padding: 1px; font-size: 1rem;'>
      <input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1); margin-right: 1px; vertical-align: middle; margin-top: -2px;' />
      Option D</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <button type='button' onclick='displayAnswer1()' style='width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;'>Submit</button>
</div>
<a id='showanswer1'></a>
<script>
  //    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 Correct 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)
    })
  }
</script>
2