PHP Online Exam

Question

i am trying to build an Online Exam System. I want to fetch the questions from the data base and display them one by one. I mean, users click 'next' to see the next question. I want to use JQuery. Any ideas?

Here is my PHP Code

$getTests = $conn->prepare("SELECT * FROM grammar_test WHERE active = ? ORDER BY RAND() LIMIT 20");
$getTests->execute(array(1));
$rowTests = $getTests->fetch(\PDO::FETCH_ASSOC);`

The database has more than 20 Questions, but I want only 20 random questions.

Here is the HTML (Trancated to 2 fieldsets but they are actually 20)

<form action="" class="grammar-test-form " method="POST" accept-charset="utf-8">

<fieldset id="first">
    <?php if(!empty($rowTests['instructions'])){ echo '<h4>1. '.$rowTests['instructions'].'</h4>';}?>
    <?php if(!empty($rowTests['question'])){ echo '<h4>'.$rowTests['question'].'</h4>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_1'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_2'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_3'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_4'].'<br/>';}?>
    <hr/>
    <button class="next_btn btn btn-3d btn-green" name="next" type="button">Next &raquo;</button>
</fieldset>

<fieldset>
    <?php if(!empty($rowTests['instructions'])){ echo '<h4>2. '.$rowTests['instructions'].'</h4>';}?>
    <?php if(!empty($rowTests['question'])){ echo '<h4>'.$rowTests['question'].'</h4>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_1'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_2'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_3'].'<br/>';}?>
    <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_4'].'<br/>';}?>
    <hr/>
    <button class="pre_btn btn btn-3d btn-green" name="previous" type="button">Previous</button>
    <button class="next_btn btn btn-3d btn-green" name="next" type="button">Next &raquo;</button>
</fieldset>
</form>

Here is the JQuery to move from one fieldset to another

    $(document).ready(function() {
        $(".next_btn").click(function() { 

        $(this).parent().next().fadeIn('slow');
        $(this).parent().css({
        'display': 'none'
        });


        $('.active').next().addClass('active');
        });
        $(".pre_btn").click(function() { 
        $(this).parent().prev().fadeIn('slow');
        $(this).parent().css({
        'display': 'none'
        });


        $('.active:last').removeClass('active');
        });
    });

Everything works fine. The problem is one question is selected and repeated 20 times. I want to get 20 different questions. Any Idea? There is the idea of while loop, but I get problems with the first and the last fieldsets because for the first, it has only one button (Next), the next 18 have 2 buttons (Next and Previous), the last one has 2 buttons (Previous and Submit)

Answer 1

Your code is a bit mangled in the formatting I think. From what I can see though you only called the fetch once (only taking the first row of data). You will want to do a fetch in the loop to get the next question, and construct that to your html or what have you.

Example #2 here seems to show a good pattern. Do your fetch in the while: PDOStatement::fetch

The part I mean from that link:

while ($row = $stmt->fetch(PDO::FETCH_NUM, PDO::FETCH_ORI_NEXT)) {
  $data = $row[0] . "\t" . $row[1] . "\t" . $row[2] . "\n";
  print $data;
}

Added more example... This shows using a loop to get each row (question) and outputting the question. Use this instead of having 20 nearly identical copies of the same code.

<?php
while ($rowTests = $getTests->fetch(\PDO::FETCH_ASSOC)) {
?>
    <fieldset>
        <?php if(!empty($rowTests['instructions'])){ echo '<h4>1. '.$rowTests['instructions'].'</h4>';}?>
        <?php if(!empty($rowTests['question'])){ echo '<h4>'.$rowTests['question'].'</h4>';}?>
        <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_1'].'<br/>';}?>
        <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_2'].'<br/>';}?>
        <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_3'].'<br/>';}?>
        <?php if(!empty($rowTests['instructions'])){ echo '<input type="radio" name="'.$rowTests['question_id'].'"> '.$rowTests['choice_4'].'<br/>';}?>
        <hr/>
        <button class="next_btn btn btn-3d btn-green" name="next" type="button">Next &raquo;</button>
    </fieldset>
<?php
}//end of while loop
?>

I did not include any logic regarding the buttons for first, middle and last questions for clarity.

To deal with first and last question having different buttons, you should be able to conditionally know if a question is first or last (is it #1 or #20) and show or hide the appropriate buttons. You could do this with jQuery or not have PHP create the buttons. Again, your choice.