Сохранение нескольких вопросов о тесте PHP и их ответов в базе данных через ajax без обновления страницы

Question

Мне нужна помощь по этому PHP-коду, который я получил от Stackru. Это онлайн-викторина. Это такой красивый код, и я смог изменить код, чтобы отправить результат теста в базу данных MySQL, и в то же время отображать результат, как он был изначально, это работало хорошо. Тем не менее, я хотел дополнительно изменить его так, чтобы он отправлял детали в базу данных, используя ajax или javascript, смешанный с PHP, без обновления страницы. Это стало очень трудным для меня, и я решил вернуться на этот форум, чтобы получить результаты.

Код был опубликован Джиллиан Ло Вонг, а позже отредактирован Ивером Саладага Аноосом.

Я буду признателен профессионалам в доме за вашу помощь. Вот оригинальный код:

<?php 
$QandA = array(
    1 => array(
        'Question' => '1. CSS stands for',
        'Options' => array(
            'A' => 'Computer Styled Sections',
            'B' => 'Cascading Style Sheets',
            'C' => 'Crazy Solid Shapes'
        ),
        'CorrectAnswer' => 'B'
    ),
    2 => array(
        'Question' => '2. What is the Capital of the Philippines',
        'Options' => array(
            'A' => 'Cebu City',
            'B' => 'Davao City',
            'C' => 'Manila City'
        ),
        'CorrectAnswer' => 'C'
    )
);

if(isset($_POST['answers'])){

// Get submitted answers.
$Answers = $_POST['answers'];

// Now this is fun, automated question checking/marking and displaying of your result! ;)
foreach($QandA as $QuestionNo => $ArrOfVals){
  // Echo the question
  echo $ArrOfVals['Question'].'<br />';

  if($Answers[$QuestionNo] != $ArrOfVals['CorrectAnswer']){

  echo 'Your Choice: <span style="color: red;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';  
  echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']].'</span>';
    }else{
    echo 'Your Choice: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
    echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span>';
    $counter++;
   }
    echo '<br /><hr>'; 
    if($counter==""){ 
       $counter='0';
       $results = "Your score: $counter/2"; 
      }else{ 
         $results = "Your score: $counter/2"; 
           }
      }                           
      echo $results;
}else{  
?>

<form action="" method="post" id="quiz">
  <?php foreach ($QandA as $QuestionNo => $ArrOfVals){ ?>
  <h3><?php echo $ArrOfVals['Question']; ?></h3>
  <?php 
        foreach ($ArrOfVals['Options'] as $Letter => $option){ 
                $questionID = 'question-'.$QuestionNo.'-answers-'.$Letter;
    ?>
  <div>
    <input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $questionID; ?>" value="<?php echo $Letter; ?>" />
    <label for="<?php echo $questionID; ?>"><?php echo $Letter; ?>) <?php echo $option; ?> </label>
  </div>
  <?php } ?>
  <?php } ?>
  <input type="submit" value="Submit Quiz" />
</form>
<?php } ?>

Вот тот, который я изменил, чтобы отправить детали в базу данных:

    <?php 
$QandA = array(
    1 => array(
        'Question' => '1. CSS stands for',
        'Options' => array(
            'A' => 'Computer Styled Sections',
            'B' => 'Cascading Style Sheets',
            'C' => 'Crazy Solid Shapes'
        ),
        'CorrectAnswer' => 'B'
    ),
    2 => array(
        'Question' => '2. What is the Color of your first Car',
        'Options' => array(
            'A' => 'Red',
            'B' => 'Ble',
            'C' => 'Green'
        ),
        'CorrectAnswer' => 'C'
    ),
    3 => array(
        'Question' => '3. What is the Capital of the Philippines',
        'Options' => array(
            'A' => 'Cebu City',
            'B' => 'Davao City',
            'C' => 'Manila City'
        ),
        'CorrectAnswer' => 'C'
    )
);

if(isset($_POST['answers'])){

$servername = "localhost";
$username = "root";
$password = "nis";
$dbname = "cbt";

// establish connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Get submitted answers.
$Answers = $_POST['answers'];

// Now this is fun, automated question checking/marking and displaying of your result! ;)
foreach($QandA as $QuestionNo => $ArrOfVals){

$qst =  $ArrOfVals['Question'];

  // Echo the question
  echo $ArrOfVals['Question'].'<br />';

  if($Answers[$QuestionNo] != $ArrOfVals['CorrectAnswer']){

  //arrange variables for storage in database
  $you  =  $ArrOfVals['Options'][$Answers[$QuestionNo]]; 
  $us   =  $ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']];

  //insert into database
    $sql = "INSERT INTO results (qstno, question, youranswr, correctanswr) VALUES ('', '$qst', '$you', '$us')";
    $conn->query($sql);
    $insert = TRUE;

  //print out answers
  echo 'Your Choice: <span style="color: red;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
  echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$ArrOfVals['CorrectAnswer']].'</span>';
    }else{

    //arrange variables for storage in database
    $you    =  $ArrOfVals['Options'][$Answers[$QuestionNo]]; 
    $us     =  $ArrOfVals['Options'][$Answers[$QuestionNo]];

    //insert into database
    $sql = "INSERT INTO results (qstno, question, youranswr, correctanswr) VALUES ('', '$qst', '$you', '$us')";
    $conn->query($sql);
    $insert = TRUE;

    //print out answers
    echo 'Your Choice: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span><br>';
    echo 'Correct answer: <span style="color: green;">'.$ArrOfVals['Options'][$Answers[$QuestionNo]].'</span>';
    $counter++;
   }
    echo '<br /><hr>'; 
    if($counter==""){ 
       $counter='0';
       $results = "Your score: $counter/3"; 
      }else{ 
         $results = "Your score: $counter/3"; 
           }
      }                           
      echo ($insert === TRUE) ? "Your result was Successfully Saved!" : "Error Saving recods!";
      echo "<br />";
      echo $results;
      $insert = FALSE;
}else{  
?>

<form action="" method="post" id="quiz">
  <?php foreach ($QandA as $QuestionNo => $ArrOfVals){ ?>
  <h3><?php echo $ArrOfVals['Question']; ?></h3>
  <?php 
        foreach ($ArrOfVals['Options'] as $Letter => $option){ 
                $questionID = 'question-'.$QuestionNo.'-answers-'.$Letter;
    ?>
  <div>
    <input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $questionID; ?>" value="<?php echo $Letter; ?>" />
    <label for="<?php echo $questionID; ?>"><?php echo $Letter; ?>) <?php echo $option; ?> </label>
  </div>
  <?php } ?>
  <?php } ?>
  <input type="submit" value="Submit Quiz" />
</form>
<?php } ?>