so I made a program about an exam and I need to determine the letter grades of students but first they have to answers some questions then base on what score the student gets the student will get a letter grade, someone recommended me to use AJAX because i need to do the process itself in the form without refreshing so I tried to make it but I ended up getting confused can someone help me please.
the problem is the result is always "no score has been given" but i tried it in the console there is no error and the result is the right result.
this are the codes:
<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">×</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>
this is for the 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>
and this for 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;
?>
and lastly this is for the counting of scores it is based on how many radio buttons the student correctly clicked.
<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>
In the xhttp.send()
you are forgetting to set the variable of the parameters. According to w3schools Ajax post requests you will have to post your data like this:
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);
}
That should work for you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.