Forum Discussion
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 HTML quiz. I have added the window.parent.postMessage({ type: 'complete'}, '*') code and also set the completion requirements toggle on.
The code is :
<!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() { 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>