Как определить буквенную оценку студентов, используя javascript и ajax?

Question

поэтому я составил программу об экзамене, и мне нужно определить буквенные оценки студентов, но сначала они должны ответить на некоторые вопросы, а затем на основе того, какой балл получает студент, студент получит буквенную оценку, кто-то порекомендовал мне использовать AJAX потому что мне нужно сделать сам процесс в форме без обновления, поэтому я попытался сделать это, но я запутался, может кто-то мне помочь, пожалуйста.

проблема в том, что результат всегда "нет баллов было дано "но я попробовал это в консоли нет ошибки, и результат - правильный результат.

это коды:

<div class = "form">
<button id = "submit" name = "submit"  value = "submit" > SUBMIT </button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <h3> Are you sure you want to submit? </h3>
    <button id = "yes" name = "yes" class = "yes" value = "submit"> YES </button>
    <button id = "no" name = "no" class = "no"> NO </button>
  </div>
</div>


<div id="myModalLast" class="modalLast">
  <div class="modal-contentLast">
   <a href = "personal.php"> <span class="close">&times;</span> </a>

<div class = "pic">

</div>  
    <h3> Full name: Cathleen Joyce Imperial Almeda </h3>  
    <h3> Total items:20 <p id = "scoress" name = "scorename"></p> </h3>  
   <h1> <br><p id = "scores" name = "realscores"></p>

   Rank:<p id = "rank"></p>
</h1> 

  </div>
</div>
</div>

это для ajax part:

  <script>
function loadDoc(scoress) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "examExtension.php", true);
 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      scoreElement.innerHTML = "Your Score: " + this.responseText;
      console.log('Grade calculation complete');
    }
  }


xhttp.send(scoress);
}
</script>

и это для examExtension. php

    <?php



// Check if the score is given. If it is, continue. Otherwise stop the script.
if (!isset($_POST['scoress'])) {
  echo 'No score has been given';
  exit;
}


// Convert score value to a number.
$score = intval($_POST['scoress']);

if ($score > 19 and $score < 21) {
  echo "A+";
} 
if ($score > 18 and $score < 20) {
  echo "A";
}
 if($score > 17 and $score < 19) {
  echo "A-";
}
if ($score > 16 and $score < 18) {
  echo "B+";
} 
if ($score > 15 and $score < 17) {
  echo "B";
} 
if ($score > 14 and $score < 16) {
  echo "B-";
} 
if ($score > 13 and $score < 15) {
  echo "C+";
} 
if ($score > 12 and $score < 14) {
  echo "C";
} 
if ($score > 11 and $score < 13) {
  echo "C-";
} 
if ($score > 10 and $score < 12) {
  echo "D+";
}
 if($score  > 9 and $score < 11) {
  echo "D";
}

exit;

?>

и, наконец, это для подсчета очков, это основано на том, сколько переключателей правильно нажал студент.

     <script>
const scoreElement = document.getElementById("scoress");
const yesButton = document.getElementById("yes");

yesButton.addEventListener("click", function() {
  let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;
console.log(numberOfCorrectAnswers);


  loadDoc(numberOfCorrectAnswers);
  console.log('Calculating grade');
});
</script>

Answer 1

В xhttp.send() вы забыли установить переменную параметров. В соответствии с w3schools Ajax почтовыми запросами вы должны будете опубликовать свои данные следующим образом:

function loadDoc(scoress) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            scoreElement.innerHTML = "Your Score: " + this.responseText;
            console.log('Grade calculation complete');
        }
    }


    let data = "scoress=" + scoress;
    xhttp.open("POST", "examExtension.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhttp.send(data);
}

Это должно работать для вас!