Question

I wrote the code below and it works great and does its purpose but i have 2 problems. 1. It allows more than 1 answer to be selected & 2. theres no error message when no answer is selected.

<div id="p1" class="SlidingPanelsContent">
  <div class="question"> 
       <div class="label"><span class="number"><?=$question_id++; ?>.</span>
     <? echo $question; ?>
    </div>

<div class="answer" onmouseover="javascript:changeBgColor(event, '#B900A5');" onmouseout="javascript:restoreBgColor(event);"  onclick="this.checked=true; "> 
<input tabindex="-1" type="radio" name="<?php echo rand(); ?>" value="<?=$ans1; ?>" ><? echo $ans1; ?></div>

    <div class="answer" onmouseover="javascript:changeBgColor(event, '#B900A5');" onmouseout="javascript:restoreBgColor(event);" onclick="this.checked=true;">
   <input tabindex="-1" type="radio" name="<?php echo rand(); ?>" value="<?=$ans2; ?>" ><?=$ans2; ?></div>

   <div class="answer" onmouseover="javascript:changeBgColor(event, '#B900A5');" onmouseout="javascript:restoreBgColor(event);" onclick="this.checked=true;">
   <input tabindex="-1" type="radio" name="<?php echo rand(); ?>" value="<?=$ans3; ?>" ><?=$ans3; ?></div>

   <div class="answer" onmouseover="javascript:changeBgColor(event, '#B900A5');" onmouseout="javascript:restoreBgColor(event);" onclick="this.checked=true;">
    <input tabindex="-1" type="radio" name="<?php echo rand(); ?>" value="<?=$ans4; ?>" ><?=$ans4; ?></div>

   </div>

   </div>

Answer 1

If you give the radio buttons the same name then only one can be checked as this is enforced by the browser. If you give them different names, like you are by using rand() to give them their names, then they all can be checked since they won’t be associated with each other.