quiz.js

const url = window.location.href

const quizBox = document.getElementById('quiz-box');
$.ajax({
    type: 'GET',
    url: `${url}data`,
    success: function(response) {
        //console.log(response)
        let data = response.data;
        data.forEach(el => {
            for (const [question, answers] of Object.entries(el)) {
                quizBox.innerHTML += `
                <hr>
                <div class="mb-2">
                    <b> ${question}</b>
                </div>

                `
                answers.forEach(answer => {
                    quizBox.innerHTML += `
                        <div>
                            <input type="radio"
                                class="ans"
                                id="${question}-${answer}"
                                value="${answer}" name="${question}">
                                <label for="${question}-${answer}">${answer}
                                </label>
                            </input>

                    </div>
                `
                })
            }
        })
    },
    error: function(error) {
        console.log(error)
    }
})

const quizForm = document.getElementById('quiz-form');
const csrfToken = document.getElementsByName('csrfmiddlewaretoken')
const elements = [...document.getElementsByClassName('answers')];
const sendData = () => {
    const data = {};
    data['crsfmiddlewaretoken'] = csrfToken[0].value
    elements.forEach(el => {
        if (el.checked) {
            data[el.name] = el.value;
        } else {
            if (!data[el.name]) {
                data[el.name] = null;
            }
        }
    })

    $.ajax({
        type: 'POST',
        url: `${url}save/`,
        data: data,
        success: function(response) {
            console.log(response)
        },
        error: function(error) {
            console.log(error)
        }
    })
}
quizForm.addEventListener('submit', e => {
    e.preventDefault()
    sendData()
})