I started a weekly Tuesday Trivia on my coin collecting site, but it took me a while to find a good solution for displaying the questions and answers. I had the following requirements:

1. Easy to enter, since I have to do it every week.
2. Easy for the reader to get the answers, but not visible at first.
3. Works in all browsers and operating systems.
4. Can be indexed by search engine spiders.

I used a combination of CSS (style sheets) and Javascript to create a simple solution that meets all of the requirements above. I had to stretch on requirement one because the original solution wasn’t all that easy to type in every time. I created a Javascript form that generates the code so I just have to type the questions and answers and it creates the code for me. This makes entering the data as easy as possible, satisfying my first requirement.

You can see my solution in action on the site. I’ve tested it in Internet Explorer, Firefox and Opera and it worked in all of them.

If you’re interested in using my solution, there are two parts. First is the Javascript function which toggles the answer being visible or not. Second is creating the HTML to display the questions. Here is a basic demo of what it looks like. To add it to your site, follow the two steps below.

1. First, add this Javascript function to the head section of your web page.

function showhide(id)
{
    if (document.getElementById)
    {
        obj = document.getElementById(id);
        obj.style.display = (obj.style.display == "none") ? "" : "none";
    }
}

2. Second, use the generator I wrote to enter the questions and answers. To change the number of questions, modify the nQuest variable in the source code.

That’s all you have to do. If you have any questions, feel free to ask it in the comments.