PHP/JS Quiz - Need Some Guidance

[Chavista]

I want to add some quiz pages to my website. I found a pretty good JavaScript quiz tutorial, but it’s very hard to modify, as I don’t know JS very well.Then I found a pretty nice PHP quiz at http://css-tricks.com/examples/Quiz/ (I’m much more comfortable working with PHP, though my skills are intermediate at best.)

My goal is to use that as a starting point, then improve it with any tools I can find - probably including jQuery/Bootstrap.

I thought harnessing it to a database would make it more flexible, so I did that. I also modified it so that when you click the form submit button, it stays on the same page. (I envision a one-page quiz. A user simply selects some answers, clicks a button, and the display changes, styled to indicate all the correct and incorrect answers, along with the user’s score.)

Now I’m trying to figure out what the next step is. I don’t know enough about competing technologies (including PHP) to understand exactly where I’m going or how to get there.

So I’m just fishing for suggestions on what direction I should go. My biggest question regards the use of a form. Is there a way to do this without using a form? One problem I need to fix is a “Confirm Form Resubmission” message when I refresh the page. Also, I can toggle styles using a button (a jQuery function), but users apparently can’t submit answers without an insert fuction - which does some weird things with my jQuery styles. So I’m trying to figure out whether I should use a button or insert function and how to make it do two things - submit answers and toggle styles.

Anyway, I don’t know if I should work on these problems or simply scrap the form altogether - and I’m not sure if I can do this without a form in the first place.

If anyone can see the big picture better than I can, I’d appreciate any guidance. I posted my script below.

<form action="" method="post" id="quiz">
 $stmt = $pdo->prepare("SELECT Q.QID, Q.URL, Q.Value, Q.Question, Q.Answer, Q.Correct
   FROM 1_quiz Q
   ORDER BY Q.N
");
 $stmt->execute(array(
     'MyURL'=>$MyURL
 ));

// CategoryID = Question
$Q1 = null;
while ($row = $stmt->fetch()) {
 $QID = $row['QID'];
 $URL = $row['URL'];
 // $QID = $row['QID'];
 // $Post = $row['Post'];
 $Value = $row['Value'];
 $Question = $row['Question'];
 $Answer = $row['Answer'];
 $Correct = $row['Correct'];
 $Correct = str_replace('1', 'correct', $Correct);
 $Correct = str_replace('2', 'wrong', $Correct);

// $Q2 = '  <form action="grade.php" method="post" id="quiz">
$Q2 = 'SECTION<div style="margin-top: 10px;">'.$Question.'</div>';

  if ($row["Question"] != $Q1) {
    $Q1 = $row["Question"];
    echo "{$Q2}\n";
  }

  echo '<div class="Answer '.$Correct.'"><input type="radio" name="'.$QID.'" id="quiz" value="'.$Value.'" /> '.$Answer.'</div>' . "\n";
}

<script>
$(document).ready(function(){
  $("button#quiz").click(function(){
    $(".Answer").toggleClass("Submit");
 });
 });
 </script>
    <input type="submit" value="Submit Quiz" id="quiz" style="">
  </form>
  <button type="submit" value="Submit Quiz" id="quiz" style="">Button</button>

            $answer1 = $_POST['1'];
            $answer2 = $_POST['2'];
            $answer3 = $_POST['3'];
        
            $totalCorrect = 0;
            
            if ($answer1 == "A") { $totalCorrect++; }
            if ($answer2 == "C") { $totalCorrect++; }
            if ($answer3 == "C") { $totalCorrect++; }

            echo "<div id='results'>$totalCorrect / 3 correct</div>";