I am trying to follow a tutorial to build a quiz app with Django, but have encountered some issues.
When I attempt to access the following url the page only displays the title of the exam and the “Save” button: http://127.0.0.1:8000/exams/2/
I have attached an image showing what I am seeing.
Inside django_project → Exams → urls.py I have the following:
urlpatterns = [
path('exams/', ExamListView.as_view(), name='main-view'),
path('exams/<pk>/', exam_view, name='exam-view'),
path('exams/<pk>/data/', exam_data_view, name='exam-data-view'),
path('exams/<pk>/save/', save_exam_view, name='save-view'),
]
Inside django_project → Exams → views.py I have the following:
def exam_view(request, pk):
exam = Exam.objects.get(pk=pk)
# Assign the exam value to 'object', and then pass it to the
# exam.html template.
return render(request, 'Exams/exam.html', {'obj': exam})
Inside django_project → Exams → templates → Exams → exam.html I have the following:
{% extends "base.html" %}
{% load static %}
{% block scripts %}
<script src="{% static 'Exams/exam.js' %}" defer></script>
{% endblock scripts %}
{% block title %}
{{ obj.exam_name }}
{% endblock title %}
{% block content %}
{{ obj.exam_name }}
<form id="exam-form" class="mt-3 mb-3">
{% csrf_token %}
<div id="exam-box"></div>
<button type="submit" class="btn btn-primary mt-3">Save</button>
</form>
{% endblock content %}
Inside django_project → Exams → static → Exams → exam.js I have the following:
const url = window.location.href
/* We are wrapping 'exam-box' that was defined inside exam.html as an
id, and we are assigning it to the 'examBox' element that is being
declared here.*/
const examBox = document.getElementById('exam-box')
$.ajax({
type: 'GET',
url: `${url}data`,
success: function(response)
{
console.log(response)
const data = response.data
/*Each element has a key and a value. The key represents
the question and the value represents the answer.
Here we are grabbing each individual element*/
data.forEach(el => {
for (const [exam_question, exam_answers] of Object.entries(el))
{
examBox.innerHTML += `
<hr>
<div class="mb-2">
<b>${exam_question}</b>
</div>
`
/*19:19 Part 3*/
exam_answers.forEach(answer=> {
examBox.innerHTML += `
<div>
<input type="radio" class="ans" id="${exam_question}-${answer}"
name="${exam_question} value="${answer}">
<label for="${exam_question}">${answer}</label>
</div>
`
})
}
});
},
error: function(error)
{
console.log(error)
}
})
/****************************/
const examForm = document.getElementById('exam-form')
const csrf = document.getElementsByName('csrfmiddlewaretoken')
const sendData = () => {
const elements = [...document.getElementsByClassName('ans')]
const data = {}
/*We have put our csrf middleware token into the data dictionary.*/
data['csrfmiddlewaretoken'] = csrf[0].value
elements.forEach(element=> {
if(element.checked)
{
data[element.name] = element.value
}else{
if(!data[element.name])
{
data[element.name] = null
}
}
})
$.ajax({
type: 'POST',
url: `${url}save/`,
data: data,
success: function(response){
console.log(response)
},
error: function(error){
console.log(error)
}
})
}
examForm.addEventListener('submit', event=>{
event.preventDefault()
sendData()
})
