Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap Part-3

Posted 6:31 pm by muni & filed under Ajax, JQUERY, MYSQL, PHP.

In this tutorial I made few changes in the Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap based on the request from users.

Note : You can refer my latest Quiz application
 
Responsive PHP Quiz Script

Before continuing this tutorial please refer my previous tutorials on this Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap.

1.  Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

2. Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap Part-2

Now user can able select number of questions to be showed on each pages.

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap – 3

Step 1:

$questions = getQuestions($category);
$rowcount = count($questions);
$number_question = $_POST['num_questions'];
$remainder = $rowcount/$number_question;

where

$number_question — set number of questions to be showed on each pages.

I am selecting quiz questions from particular category that the user had chosen, then finding number questions in the result of getQuestions() finally stored questions count in  $rowcount variable. Finally finding the remainder by dividing $rowcount  with $number_question (number of question to be showed on each page.)

Step 2:

<form class="form-horizontal" role="form" id='quizform' method="post" action="result.php">
    <?php
    $i = 0;
    $j = 1; $k = 1;
    foreach ($questions as $key => $result) {
        if ( $i == 0) echo "<div class='cont' id='question_splitter_$j'>";?>
        <div id='question<?php echo $k;?>' >
        <p class='questions' id="qname<?php echo $j;?>"> <?php echo $k?>.<?= $result['question_name'] ?></p>
        <hr>
        <div class="form-group">
            <input type="radio" value="1" id='radio1_<?= $result['id'] ?>' name='<?php echo $result['id'];?>'/>
            <label for='radio1_<?php echo $result['id'];?>'> <?= $result['answer1'] ?> </label>
        </div>
        <div class="form-group">
            <input type="radio" value="2" id='radio2_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
            <label for='radio2_<?php echo $result['id'];?>'> <?= $result['answer2'] ?> </label>
        </div>
        <div class="form-group">
            <input type="radio" value="3" id='radio3_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
            <label for='radio3_<?php echo $result['id'];?>'> <?= $result['answer3'] ?> </label>
        </div>
        <div class="form-group">
            <input type="radio" value="4" id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
            <label for='radio4_<?php echo $result['id'];?>'> <?= $result['answer4'] ?> </label>
        </div>
        <div class="form-group">
            <input type="radio" checked='checked' style='display:none' value="5" id='radio5_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
        </div>
        </div>
        <?php
            $i++; 
            if ( ( $remainder < 1 ) || ( $i == $number_question && $remainder == 1 ) ) {
            echo "<button id='".$j."' class='next btn btn-success' type='submit'>Finish</button>";
            echo "</div>";
            }  elseif ( $rowcount > $number_question  ) {
                if ( $j == 1 && $i == $number_question ) {
                    echo "<button id='".$j."' class='next btn btn-success' type='button'>Next</button>";
                    echo "</div>";
                    $i = 0;
                    $j++;           
                } elseif ( $k == $rowcount ) { 
                    echo " <button id='".$j."' class='previous btn btn-success' type='button'>Previous</button>
                                <button id='".$j."' class='next btn btn-success' type='submit'>Finish</button>";
                    echo "</div>";
                    $i = 0;
                    $j++;
                } elseif ( $j > 1 && $i == $number_question ) {
                    echo "<button id='".$j."' class='previous btn btn-success' type='button'>Previous</button>
                    <button id='".$j."' class='next btn btn-success' type='button' >Next</button>";
                    echo "</div>";
                    $i = 0;
                    $j++;
                }
                
            }
        $k++;
    } ?>	
</form>

For example if I am going to show two questions on each page, if user choose category that contains only one question then I need to show that one question with finish button to complete quiz.

If $remainder<1 that means number  questions less than number questions to be showed on each page, so I need to complete quiz with finish button.

if ( ( $remainder < 1 ) || ( $i == $number_question && $remainder == 1 ) ) {
	echo "<button id='".$j."' class='next btn btn-success' type='submit'>Finish</button>";
	echo "</div>";
 }

if number questions goes greater than number questions to be showed on each page then following logic will come into play.

elseif ( $rowcount > $number_question  ) {
  if ( $j == 1 && $i == $number_question ) {
    echo "<button id='".$j."' class='next btn btn-success' type='button'>Next</button>";
    echo "</div>";
    $i = 0;
    $j++;           
  } elseif ( $k == $rowcount ) { 
    echo " <button id='".$j."' class='previous btn btn-success' type='button'>Previous</button>
		<button id='".$j."' class='next btn btn-success' type='submit'>Finish</button>";
    echo "</div>";
    $i = 0;
    $j++;
  } elseif ( $j > 1 && $i == $number_question ) {
     echo "<button id='".$j."' class='previous btn btn-success' type='button'>Previous</button>
		 <button id='".$j."' class='next btn btn-success' type='button' >Next</button>";
     echo "</div>";
     $i = 0;
     $j++;
}

.