Я настолько новичок, что не знаю, как сделать систему подсчета очков в JavaScript. Все что мне нужно это; если drag1 упал на div1, в сумме должен быть получен 1 балл. Вот мои файлы index.php, css и js
function submit() {
document.getElementById('handler').style.display = 'block'
const quest1 = document.getElementById('div1')
const ans1 = document.getElementById('drag1')
const totalScore = document.getElementById('score')
const score = 0
totalScore.textContent = score;
}<div id = "drop_area">
<div id = "div1 drop" ondrop = "drop(event);" ondragover = "allowDrop(event);" value = "10000 Years"></div>
<div id = "div2 drop" ondrop = "drop(event);" ondragover = "allowDrop(event);" value = "Evil Queen"></div>
<div id = "div3 drop" ondrop = "drop(event);" ondragover = "allowDrop(event);" value = "12"></div>
<div id = "div4 drop" ondrop = "drop(event);" ondragover = "allowDrop(event);" value = "Nana"></div>
<div id = "div5 drop" ondrop = "drop(event);" ondragover = "allowDrop(event);" value = "Maurice"></div>
</div>
<div id = "drag_options">
<div id = "wrapper">
<div id = "drag1 option" draggable = "true" ondragstart = "drag(event)">Evil Queen</div>
<div id = "drag2 option" draggable = "true" ondragstart = "drag(event)">Maurice</div>
<div id = "drag3 option" draggable = "true" ondragstart = "drag(event)">Nyla</div>
<div id = "drag4 option" draggable = "true" ondragstart = "drag(event)">Cruela Devil</div>
<div id = "drag5 option" draggable = "true" ondragstart = "drag(event)">4</div>
<div id = "drag6 option" draggable = "true" ondragstart = "drag(event)">Moris</div>
<div id = "drag7 option" draggable = "true" ondragstart = "drag(event)">10000 Years</div>
<div id = "drag8 option" draggable = "true" ondragstart = "drag(event)">1000 Years</div>
<div id = "drag9 option" draggable = "true" ondragstart = "drag(event)">12</div>
<div id = "drag10 option" draggable = "true" ondragstart = "drag(event)">Nana</div>
</div>
</div>
<div id = "submit_button">
<button type = "submit" id = "submit" onclick = "submit()">Submit</button>
</div>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


<button id = "run" type = "button">Run</button>.Вот полная версия для изучения Я взял перетаскивание из MDN
Я не добавил обработку ошибок, когда один и тот же ответ отбрасывается дважды.
Я угадал расчет точки
window.addEventListener("DOMContentLoaded", () => { // when page has loaded
const target = document.getElementById("drop_area");
const source = document.getElementById("drag_options");
const resetBut = document.getElementById("reset");
const runBut = document.getElementById("run");
const answerDiv = document.getElementById("answers");
let dragged = null;
source.addEventListener("dragstart", (event) => {
// store a ref. on the dragged elem
dragged = event.target;
});
target.addEventListener("dragover", (event) => {
// prevent default to allow drop
event.preventDefault();
});
target.addEventListener("drop", (event) => {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged element to the selected drop target
if (event.target.dataset.value) {
// dragged.parentNode.removeChild(dragged);
event.target.textContent = dragged.textContent;
}
});
const pointsPerCorrect = 5;
runBut.addEventListener("click", () => {
const correct = [...target.querySelectorAll("div")].filter(div => div.textContent === div.dataset.value); // run filter on the child divs
const numberOfCorrect = correct.length;
const answers = correct.map(div => div.textContent).join(", ");
answerDiv.innerHTML = `You had ${numberOfCorrect} answer${numberOfCorrect===1?"":"s"} correct.<br/> ${answers}`; // using template strings
});
resetBut.addEventListener("click", () => {
target.querySelectorAll("div").forEach((div,i) => div.textContent = (i+1));
});
});#drop_area {
background-color: green;
}
#drag_options {
background-color: red;
}
#drop_area div {
padding: 2px;
border: 1px solid black;
}
#drag_options div {
padding: 2px;
border: 1px solid black;
}<div id = "drop_area">
<div data-value = "10000 Years">1</div>
<div data-value = "Evil Queen">2</div>
<div data-value = "12">3</div>
<div data-value = "Nana">4</div>
<div data-value = "Maurice">5</div>
</div>
<hr/>
<div id = "drag_options">
<div draggable = "true">Evil Queen</div>
<div draggable = "true">Maurice</div>
<div draggable = "true">Nyla</div>
<div draggable = "true">Cruella de Vil</div>
<div draggable = "true">4</div>
<div draggable = "true">Moris</div>
<div draggable = "true">10000 Years</div>
<div draggable = "true">1000 Years</div>
<div draggable = "true">12</div>
<div draggable = "true">Nana</div>
</div>
<div id = "submit_button">
<button type = "button" id = "reset">Reset</button>
<button type = "button" id = "run">Submit</button>
</div>
<div id = "handler">
<div id = "score_board">
<div id = "wrap">
<h1>SCORE</h1>
<div id = "answers"></div>
</div>
</div>
</div>Я уже решил это, большое спасибо за то, что поделились своими знаниями!
От чего зависит оценка каждого правильно сопоставленного события перетаскивания?