Как переместить элемент
Есть некий тест, после прохождения необходимо вывести результаты на то место,где были вопросы
js
const url = window.location.href
// console.log(url)
const quizBox = document.getElementById('quiz-box')
$.ajax({
type: 'GET',
url: `${url}/data`,
success: function (response) {
// console.log(response)
const data = response.data
data.forEach(el => {
for (const [question, answers] of Object.entries(el)) {
// console.log(question)
// console.log(answers)
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}" name="${question}" value="${answer}">
<label for="${question}">${answer}</label>
</div>
`;
});
console.log('test');
}
});
},
error: function (error) {
console.log(error)
},
})
const quizForm = document.getElementById('quiz-form')
const sendData = () => {
const csrf = document.querySelector('[name=csrfmiddlewaretoken]')
const elements = [...document.querySelectorAll('.ans')]
const data = {}
data['csrfmiddlewaretoken'] = csrf.value
console.log(elements)
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)
// console.log(data)
const results = response.results
console.log(results)
quizForm.classList.add('invisible')
// const newDiv = document.createElement("div");
// para.innerHTML = someHere;
results.forEach(res => {
const resDiv = document.createElement("div")
for (const [question, resp] of Object.entries(res)) {
// console.log(question)
// console.log(resp)
// console.log('******')
resDiv.innerHTML += question
const cls = ['container', 'p-3', 'text-light', 'h5']
resDiv.classList.add(...cls)
if (resp == 'not answered') {
resDiv.innerHTML += ' - not answered'
resDiv.classList.add('bg-danger')
}
else {
const answer = resp['answered']
const correct = resp['correct_answer']
if (answer == correct) {
resDiv.classList.add('bg-success')
resDiv.innerHTML += `answered: ${answer}`
} else {
resDiv.classList.add('bg-danger')
resDiv.innerHTML += ` | correct answer: ${correct}`
resDiv.innerHTML += ` | your answered: ${answer}`
}
}
}
const body = document.getElementsByTagName('body')[0]
body.append(resDiv)
// document.getElementById("BODY").appendChild(resDiv);
})
},
error: function (error) {
console.log(error)
}
})
}
quizForm.addEventListener('submit', e => {
e.preventDefault()
sendData()
})
html
{% block content %}
<!-- Название теста -->
<h2>{{obj.name}}</h2>
<form id="quiz-form" class="mt-3 mb-3">
{% csrf_token %}
<div id="quiz-box"></div>
<button type="submit" class="btn btn-primary mt-3">Сохранить</button>
</form>
{% endblock content %}

