Forum Discussion
rashihonrao
2 months agoCommunity Member
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-
2 months agoCommunity Member
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>
Related Content
- 4 months ago
- 2 years ago
- 3 months ago
- 3 months ago