Почему не отображаются выбранные ответы? 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()
})

Вернуться на верх