Hi I am trying to develop an exam system.Here's my code.The code can be downloaded as html file by clicking on online_quiz.html attached with this thread.Also,pls refer to quiz.jpg to see a screenshot of the quiz page when loaded.I have 5 problems: 1. Kindly notice that when the quiz is loaded,it shows both the questions by default.I want only question 1 to be visible when the quiz loads..What happens presently is that ,both questions are visible even after I click on the link Q.1( referring to question 1).When I click on Q. 2,then only question 2 can be seen and then(after clicking on Q.2) if I click on Q.1,then only question 1 can be seen What I want is that when the page loads only question 1 is visible.Then when I click on Q.2 I can see only question 2 and when I click on Q.1, I can see question 1. I later plan on adding many questions,so it should be a general solution rather than a solution good only for 2 questions. 2.Also,what I want is that,if someone selects any of the answers of a particular question,it's link color should turn green to indicate to the user that he answered that question.So for,instance,if I select an answer to the first question,the link Q.1 should turn green. 3.How do I implement a timer for the quiz?I want the quiz to last 7 minutes exactly with a countdown timer shown to the user.As soon as the timer ends,his answers automatically get submitted to a php file and the php file displays his result on a new page. 4. I want the results to be displayed in a 3 column table.Each question will occupy a row.The first element of the row will be the question,the second question ,the chosen answer of the user and the third column the actual answer. When the results are displayed I want that color of the row of the questions whose answer the user has answered correctly be green and the color of the row of the questions whose answer he has answered wrongly be red.It will be a css table.Can anyone tell me how to define the colors of the row of a css table. 5.How do I display a vertical scrolling bar between column 2 and column 1? Any help would be greatly appreciated.However,kindly do not feel obliged to answer this question as I am sure that you guys have a lot up your sleeve as well Thanks Hemant <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <script type="text/javascript"> /* Global "swap" holder Use value, null, if no layer initially visible */ var currlayerId = "question1"; function toglayer(id) { if(currlayerId) setDisplay(currlayerId, "none"); if(id)setDisplay(id, "block"); currlayerId = id; } function setDisplay(id,value) { var elm = document.getElementById(id); elm.style.display = value; } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz</title> <meta name="description" content="How to create a simple two column CSS layout with full width header and footer."> <meta name="copyright" content="Copyright (c) 2004 Roger Johansson"> <meta name="author" content="Roger Johansson"> <style type="text/css" media="screen, print, projection"> body, html { margin:0; padding:0; color:#000; } #wrap { width:810px; margin:0 auto; } #header { padding:5px 10px; background:#ddd; } h1 { margin:0; } #nav { padding:5px 10px; background:#c99; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; } #sidebar { height:700px; float:left; width:140px; padding:10px; background:#9c9; } h2 { margin:0 0 1em; } #main { height:700px; float:right; width:630px; padding:10px; background:#99c; } #footer { clear:both; padding:5px 10px; background:#cc9; } #footer p { margin:0; } * html #footer { height:1px; } </style> </head> <body> <div id="wrap"> <form name="QuestionAnswers" action="30" method= "post"> <div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div> <div id="nav"> <ul> <li><a href="/">Option 1</a></li> <li><a href="/">Option 2</a></li> <li><a href="/">Option 3</a></li> <li><a href="/">Option 4</a></li> <li><a href="/">Option 5</a></li> </ul> <input type="submit" name="Submit_answers" value="End Test" > </div> <div id="sidebar"> <h2>Column 2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p> <ul> <li><a href="#" onclick="toglayer('question1');return false;">Q.1</a></li> <li><a href="#" onclick="toglayer('question2');return false;">Q.2</a></li> </ul> </div> <div id="main"> <h2>Column 1</h2> <div id="question1" class="text"> What's the capital of USA <br> <input type="radio" name="q1">London<br> <input type="radio" name="q1">New York City<br> <input type="radio" name="q1">Seattle<br> <input type="radio" name="q1">Washington DC<br> <input type="radio" name="q1">Chicago<br> <br> </div> <div id="question2" class="text"> What's the capital of France <br> <input type="radio" name="q2">Paris<br> <input type="radio" name="q2">London<br> <input type="radio" name="q2">Tokyo<br> <input type="radio" name="q2">New Delhi<br> <input type="radio" name="q2">Singapore<br> <br> </div> </div> <!-- End of main --> <div id="footer"> <p>Footer</p> </div> </form> </div> </body> </html>