HTML
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" />
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "20%";
document.getElementById("main").style.marginLeft = "20%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "20%";
}
</script>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="{% url 'home' %}" class="active">Home</a>
<a href = "{% url 'lessons:index' %}"class="active">Lessons</a>
<a href="{% url 'resources' %}"class="active">Resources</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:crosshair;display:inline-block" onclick="openNav()">☰</span>
<h1>Exercise</h1>
<form id = "exercise" action= " ">
{% for question in lesson.question_set.all %}
{% autoescape off %}{{ question.question_text }} {% endautoescape %}<BR>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
{% for choice in question.choice_set.all %}
{% if choice.answer %}
<input type="radio" name="question{{question.pk}}" value=1 />{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}<BR>
{% else %}
<input type="radio" name="question{{question.pk}}" value=0 />{% autoescape off %}{{ choice.choice_text }}{% endautoescape %}<BR>
{% endif %}
<!--<label for="{{question.pk}}choice{{ forloop.counter }}"></label><br />-->
{% endfor %}
<BR>
{% endfor %}<BR><BR>
<input type="submit" value="Submit"><BR><BR>
</form>
</div>
<center><p id="grade">Your grade is: </p></center>
<button class="accordion"></button>
<div class="panel">
{% for question in lesson.question_set.all %}
{% autoescape off %}{{question.answer}} {% endautoescape %}
{% endfor %}
<BR><BR>
<p align=center><a href="/../lessons/{{lesson.lesson_id}}" class="backbutton"><span><font-size=14px>Return to Lesson</font></span></a>
<a href="/../lessons/quiz/{{lesson.lesson_id}}" class="button"><span><font-size=14px>Quiz {{lesson.lesson_id}}</font></span></a><BR><BR>
</div>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Javascript functions
<script type='text/javascript'>
//start function
<script>
document.getElementById("exercise").onsubmit = function() {
var result=0;
{ % for question in lesson.question_set.all % }
result += parseInt(document.querySelector('input[name = "question{{question.pk}}"]:checked').value);
{ % endfor % }
document.getElementById("grade").innerHTML = result;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>
//end function
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
I am facing an issue with changing the content of the "Your grade is:" message using innerHTML. I have tried moving the p tag around and changing the values, but nothing seems to work. Any advice on how to resolve this problem would be greatly appreciated as I aim to display quiz results and highlight incorrect answers in the future.
Thank you!
Here is the revised script:
<script>
document.getElementById("submit").onclick = function() {
var result=0;
var count=0;
{% for question in lesson.question_set.all %}
result += parseInt(document.querySelector('input[name = "question{{question.pk}}"]:checked').value);
count++;
{% endfor %}
document.getElementById("grade").innerHTML = "You got a "+result+"/"+count+". If you would like to retake the quiz please resubmit!";
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>