{{ extends 'global/Page.html' }}
{{ block title }}Comprehension Test{{ endblock }}

{{ block content }}

<p style = "color: #3F83C8;">
    <b>You must answer the following questions correctly to continue: </b>
</p>
<p><b>Question 1:</b> If <b style = "color: blue"> YOU </b>  spend <b style = "color: blue"> 50 points (100 start - 50 spent)</b> and <b style = "color : #D32B2B"> SOMEONE ELSE </b> spends <b style = "color : #D32B2B "> 30 points (100 start - 30 spent) </b>, how many points do <b style = "color: blue"> YOU </b> finish with?
</p>
<p>
      {{ formfield 'question1_answer' }}
</p>
   
<hr>
<p><b>Question 2:</b> If <b style = "color: blue"> YOU</b> spend <b style = "color: blue"> 20 points (100 start - 20 spent)</b> and <b style = "color : #D32B2B "> SOMEONE ELSE </b>spends <b style = "color : #D32B2B "> 70 points (100 start - 70 spent)</b>, how many points do <b style = "color : #D32B2B "> THEY </b> finish with?
</p>
<p>
     {{ formfield 'question2_answer' }}
</p>
<hr>
<p><b>Question 3:</b> If <b style = "color: blue"> YOU </b> spend <b style = "color: blue"> 0 points (100 start - 0 spent)</b> and <b style = "color : #D32B2B "> SOMEONE ELSE </b> spends <b style = "color : #D32B2B "> 100 points (100 start - 100 spent) </b>, how many points do <b style = "color: blue"> YOU </b> finish with?
</p>
<p>
     {{ formfield 'question3_answer' }}
</p>
 
<div style ="text-align: center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>

<hr>
<div style> <img src="{% static "UCL/UCL.png" %}"width="950"/>  
</div>

{{ endblock }}

{{ block scripts }}
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Get a reference to the back button element
    var backButton = document.getElementById("back-button");

    // Add a click event listener to the back button
    backButton.addEventListener("click", function () {
        // Use the browser's history object to navigate back
        window.history.back();
    });
});

</script>
{{ endblock }}