Fast FAQ Session with ACP - Summary of FAQ Page Features
(Page 3 of 5 )
Here, I give you a summary of the design features of each of the pages of our project. I give you the user requirements and a summary of the technical features.
User Requirements
When the web page is loaded, you see the questions and no answer.
When you click a question, the answer appears just below the question that you have clicked.
When you click another question, the previous answer and its space goes away and the answer to the question you have just clicked appears below the new question you have clicked.
When the answer of a question is displayed, if you click the question, the answer and its space should go away.
When the mouse pointer goes over a question, it should be an arrowhead.
When the mouse pointer goes over the text of the answer, it should be an I-bar.
After a question has been clicked, its text color should change to indicate that the user has read the answer and the question.
Summary of Technical Features
We need some HTML structure (element) to hold each question and its answer. We want an answer to be indented to the right relative to its question. The element I have chosen that will automatically satisfy these two requirements is the DL (definition lists) element.
The DL element consists of the DT element and the DD element. The DT element is an inline element and the DD element is a block-level element. The question will be the content of the DT element and its answer will be the content of the DD element. So the answer will naturally be indented.
The initial and default value for the display property of the DD element will be set to "none." In this way it will not be displayed by default and it will not occupy space. When its question is clicked, JavaScript will change it to "block," so it will appear just below its question.
Each question will have a CSS hover selector such that, when the moue pointer goes over it, its text color will change and the mouse pointer will be an arrowhead. A similar CSS hover statement will be written such that, when the mouse pointer goes over the text of an answer, the mouse pointer will become an I-bar.
When a question is clicked, JavaScript changes its color permanently, to indicate that the user has seen the answer.
Next: The Code >>
More HTML Articles
More By Chrysanthus Forcha
