Forum Discussion

rashihonrao's avatar
rashihonrao
Community Member
2 months ago

HTML Quiz coding in RISE

Hi, I have pasted my HTML quiz code in my sample RISE course but when I add the 'complete block directly above' continue block, it doesnot work even when someone has given the wrong answer to the HTM...
AndrewBlemings-'s avatar
AndrewBlemings-
Community Member
2 months ago

I would think that where you're adding the postMessage function could be negatively impacting the code. Since you mentioned adding it after the code you've posted here, I think that is relevant to include.

I was able to get the block working in Rise by adding the function call to the top of the showFeedback function (bottom of this code block)

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="UTF-8" />
    <title>Early Warning Signs Scenario Quiz</title>
    <style>
      body { font-family: Arial, sans-serif; margin: 2em; } .scenario { margin-bottom: 2em; } .question { font-weight: bold; } .options label { display: block; margin-bottom: 0.5em; } .feedback { color: green; margin-top: 1em; display: none; } button { margin-top: 1em; }
    </style>
  </head>
  <body>
    <h1>Early Warning Signs Scenario Quiz</h1>
    <div class="scenario" id="scenario1">
      <div class="question">
        A client’s debtor days have increased from 60 to 120+ over the past
        year. The client says, “Don’t worry, we’ll collect soon.”<br />
        What should you do?
      </div>
      <form>
        <div class="options">
          <label
            ><input type="radio" name="q1" value="A" /> Accept the explanation
            and do nothing</label
          >
          <label
            ><input type="radio" name="q1" value="B" /> Ask for a detailed
            ageing report and discuss collection strategies</label
          >
          <label
            ><input type="radio" name="q1" value="C" /> Increase their credit
            limit</label
          >
          <label
            ><input type="radio" name="q1" value="D" /> Ignore it until next
            review</label
          >
        </div>
        <button type="button" onclick="showFeedback()">Submit</button>
        <div class="feedback" id="feedback1">
          <strong>Correct!</strong> The best action is to ask for a detailed
          ageing report and discuss collection strategies.
        </div>
        <div class="feedback" id="feedback1-wrong" style="color: red;">
          <strong>Not quite.</strong> The best action is to ask for a detailed
          ageing report and discuss collection strategies.
        </div>
      </form>
    </div>
    <!-- You can duplicate the .scenario block above for each additional scenario -->
    <script>
      function showFeedback() { window.parent.postMessage({ type: 'complete'}, '*'); var radios = document.getElementsByName('q1'); var selected = ''; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { selected = radios[i].value; } } document.getElementById('feedback1').style.display = 'none'; document.getElementById('feedback1-wrong').style.display = 'none'; if (selected === 'B') { document.getElementById('feedback1').style.display = 'block'; } else if (selected) { document.getElementById('feedback1-wrong').style.display = 'block'; } }
    </script>
  </body>
</html>