I'm so new that I don't know how to make a scoring system in JavaScript. All I need is; if the drag1 is dropped on div1, 1 score must add up. Here's my index.php, css, and js files

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>

CodePudding user response：

1. NEVER call anything in a form id or name=submit. Also do not call your function submit.
2. You do not have a form,so no need to use a submit button. Just have <button id="run" type="button">Run</button>.
3. Use eventListeners and delegation

Here is a full version for you to study I took the drag/drop from MDN

I have not added error handling when the same answer is dropped twice.

I guessed a point calculation

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>