Status of questions in an online exam with php

Question

I am still a novice in developing web App. i have successfully designed an online exam web application in php. But i keep wondering, how can i make group of boxes that will help indicate to the user the questions he answered an those the user didnt. The boxes can also be uses to navigate through the series of questions on the web app A web app with eah question status

A simple example of my explanation is the circle part of the image above. I am so much intrested in how possible can i make the part of the interface possible and then how to make it work as a status of all questions. I use the follwing code for the status of the questions

     <?
$sql= "SELECT * FROM questions order by rand() LIMIT 20 ";
          $_SESSION['questions'] = array();
          $i=0;
          foreach ($db_con->query($sql) as $rows) {

    ++$i;
        $_SESSION['questions'][$i]=0;
    echo "<span  id='s". $i ."'>". $i ."</span> ";
    }?>
    <tr>    

<td coLspan=”2”>
<h3>Question <?php $qnum=$rows['quesNo'];  echo $i ?>: <label class="rchk" for="<?php echo $i ?>"> <?php echo $rows['ques']; ?> </label></h3>           </td>
</tr>
<?php                       
$sqla= "SELECT * FROM answers where quesNo='$qnum'order by rand()";
                    foreach ($db_con->query($sqla) as $rowsa) {
?>
<tr>
<td>
<input type="radio" name="<?php echo  $i ?>" id="<?php echo  $i ?>" class="rchk"  onclick='anstatus()' value="<?php  echo $rowsa['ans_id']; ?>"/> <?php  echo $rowsa['ans']; ?>
</td>
</tr>

The code above will generate spans for the numbers of questions available and for each question answered i want the tag for that question number to change the color to red. So i try the following Jquery code code

    function  anstatus(){
   // #qcount is an hidden tag to keep the numbers of questions
    var counter = $('#qcount').val();
    j=1;
    while (j<=counter){
        if( $("input[name='"+j+"']:checked")){
          // $(this).css("color", "red");
         $('#s'+j+'').css("color", "red");

     }else {
          $('#s'+j+'').css("color", "blue");
     }

     j++;
    }
    }

After trying while loop. I tried a for loop. but the problem am facing is that all the tags changes color when a question is answered instead of only the answered question. help me out please

Answer 1

My first thought is to use a $_SESSION array. When the user loads the quiz, set:

$_SESSION['questions'] = array(0,0,0,0,0);

Then when a user answers a question, set the corresponding element in the array to 1 (remembering that the first question is number 0, the 2nd question is number 1 etc). eg, if user answers question 3:

$_SESSION['questions'][2] = 1;

That way you can use loops and array functions to do whatever you want to do with the data.

Answer 2

I use the following method to solve

Firstly, I created the span tag with the following code

<?php 
$sql= "SELECT * FROM questions order by rand() LIMIT 20 ";
$_SESSION['questions'] = array();
$i=0;
foreach ($db_con->query($sql) as $rows) {               
++$i;
$_SESSION['questions'][$i]=0;
echo "<span class='border' id='s". $i ."' syle='color:white'>". $i ."</span> ";
}

I made the following code for my question list

<tr>    
<td coLspan=”2”>
<h3>
Question <?php $qnum=$rows['quesNo'];  echo $i ?>: 
<label class="rchk" for="<?php echo $i ?>"> 
<?php echo $rows['ques']; ?> 
</label>
</h3></td>
</tr>
<?php 
$sqla= "SELECT * FROM answers where quesNo='$qnum'order by rand()";
foreach ($db_con->query($sqla) as $rowsa) {
?>
<tr>
<td>
<input type="radio" name="<?php echo  $i ?>"  d="<?php echo  $i ?>"  id="<?php echo  $i ?>" class="rchk"   value="<?php  echo $rowsa['ans_id']; ?>"/> <?php  echo $rowsa['ans']; ?>
</td>
</tr>

Thirdly, I then added an external script and add it to the document using the html tag. the content of the script is as follows

$(function() { 
       $(".rchk").click(function(){
       var id = $(this).attr("d");   
       if( $("input[name='"+id+"']:checked")){ 
           $('#s'+id+'').css("color", "red");
              };
          });
      });