slideup function does not works with dynamic questions (static are ok)

Question

This is the script that checks the radio being clicked to compare with result and slide up:

<script>
$(document).ready(function(){
   $("input:radio").change(function(){
      checkResult(this);
   });  
});

function checkResult(el)
{
   //get the radio button value
   var clickedvalue=$(el).val() ;

   $this=$(el).parent("div.QA");
   var hiddenanswer=$this.find(".hidden_result").val();

   //call to next function to check result
   var report=checkAnswer(clickedvalue,hiddenanswer);
   if(report)
   {
      $this.find(".report").html("correct");
   }
   else{
      $this.find(".report").html("Incorrect");
   }

function checkAnswer(click,answer){
   if(click==answer){
      return true;
   }
   else{
      return false;
   }
}

   $this.delay(500).slideUp();

}

</script>

This is PHP to fetch questions and options from the database. I have used timestamp as name to make the name different for each questions (radio) .

<?php     
$dbconnect=mysqli_connect('localhost','root','','quiz')or die("Error Connecting to database"); $query="select * from question_answer ";
$result=mysqli_query($dbconnect,$query);
?>

<form method="get" action="">
<div id="container">

<?php       
while($rows=mysqli_fetch_array($result))
{
   echo '<div class="QA">';
   echo '<h1>'.$rows['question'].'</h1>'.'<br/>';
   echo '<input type="radio" class="check" name="'.$rows['radioname'].'" value="A">'.$rows['option1'].'</input>';
   echo '<input type="radio" class="check" name="'.$rows['radioname'].'" value="A">'.$rows['option2'].'</input>';
   echo '<input type="radio" class="check" name="'.$rows['radioname'].'" value="A">'.$rows['option3'].'</input>';
   echo '<input type="radio" class="check" name="'.$rows['radioname'].'" value="A">'.$rows['option4'].'</input>';
   echo '<br/>';
   echo '<div class="report"></div>';
   echo'</div>';
}  
?>

</div>
</form>

Answer 1

Now that I have indented your code properly, I can see that you are missing a closing } for your CheckResult function.

function checkResult(el)
{
   ...
   else{
      $this.find(".report").html("Incorrect");
   }
} // <- this is missing!

It's a good idea to indent your code because it makes it much easier to read and find bugs like this. I would also be consistent in how you place your opening and closing braces - pick a style and stick with it. I don't know if this is still the case, but JavaScript is more efficient when you place your opening braces at then end of a line like this:

function checkResult(el){
   //get the radio button value
   var clickedvalue = $(el).val();

   $this = $(el).parent("div.QA");
   var hiddenanswer = $this.find(".hidden_result").val();

   //call to next function to check result
   var report = checkAnswer(clickedvalue,hiddenanswer);
   if(report){
      $this.find(".report").html("correct");
   }else{
      $this.find(".report").html("Incorrect");
   }
}

Another tip, you can simplify your checkAnswer function by doing this:

function checkAnswer(click,answer){
    return (click==answer); // this will return true or false
}

But depending on what the values ranges for click and answer are, you will probably want to make this more robust and check for invalid values.

I would also encourage you to research the heredoc syntax in PHP - it's a great way to handle long strings, especially if they have both single and double quotes in them. Here's a S/O question about it.