Categories: javascript, php, html, ajax

Js, PHP WITH AJAX: how to determine the letter grade of students using javascript with ajax?

1 answer

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.

Iā€™m confused because everytime I got the score the letter grades are not appearing

Here 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" onclick ="loadDoc()"> 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">         <img src="Logo.png" width = "150" height = "150">     </div>           <h3> Full name: Cathleen Joyce Imperial Almeda </h3>           <h3> Total items:20 <p id = "score" 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() {       var xhttp = new XMLHttpRequest();       xhttp.onreadystatechange = function() {         if (this.readyState == 4 && this.status == 200) {           document.getElementById("score").innerHTML =           this.responseText;         }       };       xhttp.open("post", "examExtension.php", true);       xhttp.send();     }     </script> 

And this for examExtension.php:

        <?php       $score = isset($_POST['score']) ? $_POST['score'] : '';       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";     }      ?> 

And lastly, this is for the counting of scores it is based on how many radio buttons the student correctly clicked.

         <script>document.getElementById("yes").addEventListener("click", function() {       let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;       document.getElementById("score").innerHTML = "Your Score: " + numberOfCorrectAnswers;       });       </script> 

Thanks in advance for the help!

All answers to this question, which has the identifier 61230967

The best answer:

You are getting a blank value because you are not sending anything to your PHP script. Your examExtension.php script expects a value called score. Without that value all the if statements are coming up false and thus nothing is ever returned to your request.

You can pass a value into the xhttp.send() function to send the score to your PHP file so it can read it and calculate a result for you.

const scoreElement = document.getElementById("score"); const yesButton = document.getElementById("yes");  yesButton.addEventListener("click", function() {   let numberOfCorrectAnswers = document.querySelectorAll("input[type=radio].correct:checked").length;    // Pass amount of correct answers to the loadDoc function.   loadDoc(numberOfCorrectAnswers);   console.log('Calculating grade'); });  // Use the 'numberOfCorrectAnswers' value as the 'score' variable in this function. function loadDoc(score) {   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');     }   };   xhttp.open("post", "examExtension.php", true);    // Send the score like this.   // This will look like 'score=18' and can be read by your PHP file.   xhttp.send('score=' + score); } 
<?php  // Check if the score is given. If it is, continue. Otherwise stop the script. if (!isset($_POST['score']) {   echo 'No score has been given';   exit; }  // Convert score value to a number. $score = intval($_POST['score']);  if ($score > 19 and $score < 21) {   echo "A+"; } else if ($score > 18 and $score < 20) {   echo "A"; } else if($score > 17 and $score < 19) {   echo "A-"; } else if ($score > 16 and $score < 18) {   echo "B+"; } else if ($score > 15 and $score < 17) {   echo "B"; } else if ($score > 14 and $score < 16) {   echo "B-"; } else if ($score > 13 and $score < 15) {   echo "C+"; } else if ($score > 12 and $score < 14) {   echo "C"; } else if ($score > 11 and $score < 13) {   echo "C-"; } else if ($score > 10 and $score < 12) {   echo "D+"; } else if($score  > 9 and $score < 11) {   echo "D"; }  exit;  ?> 

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data