Hiding Answers with HTML
A web version of an old teaching trick
for study questions
1. What (er, where) is the answer to this question?
Congratulations! As you can see, the link's color has been set to the same as the wallpaper's, but the visited link color contrasts with it. So clicking on the seemingly blank space reveals the answer. Notice how the cursor changes shape, when it's positioned over an invisible link?
2. There's only one little trouble to this technique. What is it?
Because the answer is a link, it cannot have an invisible inline image, nor another link, within it.
3. So how do you let the answer prompt a visit to another page?
The real problem is how to allow for both a revealed answer and an optional sidebar or image. Any ideas?
4. So here's how to do an optional link inside an invisible answer (First, can you guess the answer?)
Just use a second invisible link aligned with the right margin.
You'll need an alerting symbol for the optional link, something like (for more, see =>).
5. Want to know how to create hidden answers yourself, on your own teaching pages?
The general answer to "How did they do that?" is, of course, to find your browser's pulldown for View | Document Source, but here's the short answer to hiding answers:
<body BGCOLOR="#FFFFFF" link="#FFFFFF" alink="#FF3300" vlink="#FF0000">
Be sure to create a new anchor tag for each question:
<a name="Q1"></a>This is the question. <a href="#Q1">Congratulations! You have found the answer.</a>
And here's how you create that hidden link on the right margin:
<a href="sidebar.html" TARGET="NEW"><IMG align=right border=0 width=20 height=40 alt="link text" SRC="null.gif"></a>
null.gifis a transparent pane that, by adjusting
WIDTH=, you can make any size. It simply occupies space, creating a big link. You can also use a string of non-breaking spaces.Copy that file to your own server's directory by right-clicking on the hidden pane above in Answer 4.
And, while you are at it, save this HTML document so that you can modify it with your text editor. Just pulldown File | Save As. You can then paste your own questions atop mine (just remember to change those answers, too!)
6. Ah, but how do you erase the answers and start afresh?
Find your browser's method for clearing the link history. In Netscape 4.0, pulldown Edit/Preferences/Navigator and then hit Clear History. In Microsoft IE4, use View/Internet Options and then hit Clear History. Then reload the page.
7. And, of course, some hidden answers take you elsewhere without warning! (Fear not, it's only the author's home page.)
For multiple-choice questions, there is an easier way:
<select><option>Click here for the answer<option>You can squeeze a sentence-long answer in, this way.</select>For many examples of webbed tests and such, see
Sorry, there is nothing hidden below this line. You really have reached THE END.