Frames Quiz
Using CSS for visual style and Javascript for feedback
How this stuff works...
This quiz works by loading images which indicate both the correct and incorrect answer options. There is also an "invisible" image which is the same color/pattern as the page background. If you use a patterned background, it should be a VERY SUBTLE one like the one used here, since the image of it must be sized the same as the correct/incorrect images. The "blank" image used to hide the unselected answers when a user answers will be very noticeable if a background which is highly patterned is used.
When a user answers a question correctly, the image indicating a nasty smiley face will be replaced with the "blank" background .gif. When a user answers a question incorrectly, the happy smiley face will be blanked out with the background .gif.
When using this technique, I highly suggest using a solid color background. You must still make a "blank" .gif using the background color and place it somewhere on the page (I suggest at the end, where it's position won't shift anything around), but the blank .gif will then be completely invisible when it replaces on of the smiley faces.
As an alternative, you may replace the incorrect smiley face with some other image which clearly indicates an improper answer--just be sure to place that image on the page.
Each of the images used for the smiley faces and the blank image will be placed in "containers" (called variables and indicated in code by the word VAR) which have a specific "contents" (ie. file) . The "container" indicates in this example the question number and its nature--ie correct (cor) or incorrect (incor); the "contents" is the actual filename.gif or filename.jpg residing in the container (variable).
Example: var response1incor = new Image();
response1incor="smiley-nasty.gif";
Be SURE to put the ; at the end of each line or the code won't work. The "container" is response1incor, the "contents" in it (displayed on the page) is "smiley-nasty.gif".
When a link is clicked, the contents of a container is replaced by the contents of the "clear" container. The clear container holds the contents (filename) blank.gif (the .gif which is identical to your background appearance).
The containers are accessible by their name.
An example of the code is shown here:
Suppose we were coding the right and wrong answer links for question 1:
The link for the right response would be:
This says to "hide" (or make blank, by using the file blank.gif as the source) the nasty smiley (as indicated by "incor" (for incorrect)) portion of the container name. This container name could be whatever makes sense to YOU.
The link(s) for the wrong response(s) would be:
This says to "hide" (or make blank, by using the file blank.gif as the source) the happy smiley (as indicated by "cor" (for correct)) portion of the container name. This container name could be whatever makes sense to YOU.
So...what exactly does this string of text say?
The visual result of all this stuff:
with the blank background.gif, leaving the file "smiley-happy.gif" 
showing. with the blank background.gif, leaving the file "smiley-nasty.gif" showing.The page will load with all of the smiley faces. Depending on which answer is selected, one of the two images will disappear in front of each question being answered. If a happy face remains, you have answered the question correctly. If the nasty face remains, you have answered incorrectly. To reset the quiz, reload the page. To make sure you understand how to create feedback with this technique, the correct questions answers have been made bold. To reset the page for the next user, you must reload it.
NOTE: After answering every question, you will be returned to the beginning of the page and must scroll down to the next question.
There are 4 questions in this quiz. Good luck! You will receive feedback for each question as you answer it. This visual result is from using cascading style sheet tags, specifically those that modify paragraph background color and border style and border width.
Let's see HTML try this!!!
1. The command to create scroll bars in frames is SCROLLING=yes.
(By the way, if your questions are short and don't wrap to the next line(s), and your feedback image is taller than the height taken up by your question, you will see your answer text shifted around. The solution: make your question stems long enough to avoid the problem, or use very short (height attribute) feedback images.)
2. The command to create a visible division between frames is BORDER=1.
3. It is not necessary to name your frames when creating them for links because the browser will automatically send the link to the frame you want it to based on its position in the frameset.
4. When printing a framed page, you will only get a printout of the page containing whatever information is currently visible within the frames.
