Почему не отображаются выбранные ответы? django
Я пытаюсь сделать приложение викторины, используя Django и js с использованием &.ajax jquery функции ,, все работает нормально, кроме выбранных ответов Я могу видеть результат и вопросы все, Почему так происходит, я создал вход для ответов, я могу просматривать их на странице. моя проблема в том, что в сообщении этот выбранный ответ
views.py
@csrf_exempt
def save_quiz_view(request, pk):
if request.is_ajax():
questions = []
data = request.POST
data_ = dict(data.lists())
# delet the csrf_token
data_.pop('csrfmiddlewaretoken')
for k in data_.keys():
print('key', k)
question = Question.objects.get(text=k)
questions.append(question)
print(questions)
user = request.user
quiz = Quiz.objects.get(pk=pk)
score = 0
# Get the ratio of user's answers
multiplier = 100 / quiz.number_of_questions
results = []
correct_answer = None
for answer in questions:
a_selected = request.POST.get(answer.text)
print("selected:", a_selected)
if a_selected != "":
question_answers = Answer.objects.filter(question=answer)
# loop through an answers of praticlar question
for a in question_answers:
if a_selected == a.text:
# question is correct
if a.correct:
score += 1
correct_answer = a.text
else:
# both cases display the correct answer
if a.correct:
correct_answer = a.text
results.append({
str(answer): {
'correct_answer': correct_answer,
'answered': a_selected
}
})
else:
results.append({str(answer): 'not answered'})
score_ = score * multiplier
Result.objects.create(quiz=quiz, user=user, score=score_)
if score_ >= quiz.required_score:
return JsonResponse({
'passed': True,
'score': score_,
'results': results,
'correct_answer': correct_answer
})
else:
return JsonResponse({
'passed': "False",
'score': score_,
'results': results,
'correct_answer': correct_answer
})
js файл
const quizBox = document.getElementById('quiz-box')
// let data
let url = window.location.href
$.ajax({
type: 'GET',
url: `${url}data`,
success: function(response){
const data = response.data
data.forEach(e => {
// question as a key and the answers as values
for (const [question, answers] of Object.entries(e)) {
// console.log(answers);
quizBox.innerHTML +=`
<hr>
<div class="mb-2">
<strong>${question}</strong>
</div>
`
answers.forEach(answer => {
quizBox.innerHTML += `
<div class="mb-1 answers">
<input type="radio" class="ans" id="${question}-${answer}" name="${question}" vlaue="${answer}">
<lable for="${question}">${answer}</label>
</div>
`
})
}
})
},
error: function(error){
console.log(error);
}
})
const quizForm = document.querySelector("#quiz-form")
const csrftoken = document.getElementsByName('csrfmiddlewaretoken');
const sendData = () => {
const elements = [...document.getElementsByClassName('ans')]
const data = {}
data['csrfmiddlewaretoken'] = csrftoken[0].value
elements.forEach(e => {
if (e.checked) {
// set in html name & value
data[e.name] = e.vlaue
} else {
// if there isn't any key wit element name
if (!data[e.name]) {
data[e.name] = null
}
}
})
$.ajax({
type: 'POST',
url: `${url}save/`,
// sign to the object above
data: data,
success: function(response) {
console.log(response);
},
error: function(error){
console.log(error);
}
})
}
quizForm.addEventListener('submit', e => {
e.preventDefault()
sendData()
})