A Simple Interactive Test Page

Steven Dutch, Natural and Applied Sciences,University of Wisconsin - Green Bay
First-time Visitors: Please visitSite Map and Disclaimer. Use "Back" to return here.

Overview

This page describes a fairly simple way to make multiple-choice test banks interactive without needing to create scripts or forms. This system can also be applied to true-false tests and even allows for questions with multiple right answers. It's an elaboration of a system by Mike Ritter of UW-Stevens Point.

"Fairly simple" is a relative term. There's still a lot of work here, but this system is a lot easier than learning JavaScript. And even if you write a script, you will still have to clean up your test bank files anyway.

This system isn't for complete Web novices, but it's not too hard. It makes use of frames. But you really need to get into HTML to make this work. HTML is not hard and it is so much easier to do so many things if you know it. 

The general method is this:

Create A Master Page

The Frames Wizard in Front Page will do this for you. The HTML code for my page looks like this:

<html>
<head>
<title>Test Master Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<frameset cols="304,*">
<frame name="TestBankIndex" scrolling="Auto" src="CourseList.htm" target="TestQuestions">
<frameset rows="73%,*">
<frame name="TestQuestions" scrolling="Auto" src="../QFrame.htm">
<frame name="Answers" src="../FeedbackFrm.htm" scrolling="auto">
</frameset>

<noframes>
<body>
<h1>This Page Uses Frames</h1>
<p>This message has appeared because you are using a browser that does not
support frames</p>
<p>You can still access the test questions in non-frame mode. However, if
you click a question to get feedback, the answer will appear on its own page.
You will have to use the "Back" option on your browser to return to the test
questions, and it could get quite time consuming.</p>
<p><a href="CourseList.HTM" target="top">Access Test Questions in Non-Frame Mode</a></p>
<p><a href="../index.htm" target="top">Return to Professor Dutch's Home Page</a></p>
</body>
</noframes>
</frameset>
</html>
Meta, etc
Just a small sample of the garbage Microsoft can add when it automatically generates HTML text. The HTML command for printing code as shown above is <pre>. So you'd think if you created a pair of HTML tags and inserted the code between them, it would appear as above. Wrong-o. I had a bear of a time making Front Page accept the code as formatted code and not try to read it as HTML. This was because Microsoft, being Microsoft, knows better than the user and simply insisted on adding its own HTML when I imported the code. This will be important later on.
Frameset
tells where the frame margins are set. You can modify these positions in normal page view by just grabbing and moving the frame margins. There's an option to prevent users from resizing the frames but it's not necessary here.
Scrolling
means the frame will have a scroll bar if necessary. You hardly ever need to mess with this.
Frame Name
Gives the name of the frame so you can direct things to it. These are given by default when you set up the frames, but you probably want to rename the frames more descriptively.
Src =
Source. When you first create the frames, they will be blank gray with two buttons. You can either choose a frame to load automatically into the frame, or create a new page (like I did - just simple pages telling the user what would go in each frame. 
Note! You must have a page in each frame when you start or subsequent pages won't load properly. Qframe.htm and FeedbackFrame.htm are just simple messages telling the user what will appear in each frame. If pages are not there, for some arcane reason, when you click a link, the browser will ignore the frames and just bring up the page. I have not seen this explicitly mentioned in any HTML references - I had to find out by trial and error.
Target =
The all important tag that makes frames work. This says that when a page is called, it doesn't just appear on screen but goes into the targeted frame.
Noframes
Here you can put a message for users whose browsers do not support frames. You can edit and view this message by clicking the No Frames tab at the bottom of your editor.

One other thing. Every time you click a link while editing a frames page, a whole new frame page opens up. Now Front Page does a pretty good job of tracking things, so if you edit one of the pages on view, you will be asked if you want to save it when you close out. You won't lose your changes. But, it can get awfully confusing trying to figure out where you are in the stack. Plus, after too many links, Front Page just won't open any more pages. If things are working fine and then new pages simply refuse to come up, close some of the open pages. 

Clean Up Your Test Bank

What to Avoid

Before we begin, copy this page. Then open Microsoft Word, create a new document, and go to Edit, Paste. The page should look pretty much the same. Now view the HTML source code. Compare it to the code here.

Never, ever use Paste in Microsoft Word to create or edit a Web page or you will get the most incredible collection of junk inserted into your HTML code! Every single line will have its own font declaration, alignment, color, ZIP code, astrological sign and favorite Star Trek episode.

The best way to use Microsoft Word to edit web pages is to edit the HTML code, then copy it and select Paste Special in Front Page. A menu will appear. Select Formatted Paragraphs and you will get paragraphs with <p> and </p> tags, minus all the other garbage.

How to Clean up Your Test Bank

How you do the following will depend on your situation, but you will need to clean up your test bank so that every question is a stand-alone paragraph (followed by a line return) and every answer is a stand alone paragraph. Delete all numbers and letters before the questions and answers.

What you want is text with only questions and answers. You will want to put identifiers at the beginning and end of each answer and at the beginning and end of each question. The identifiers all need to be different, since you will need to use them to locate beginnings and endings of lines. Pick identifiers that won't appear in normal text. Bear this strategy in mind as you read.

Delete all excess, leading and trailing spaces. Excess spaces are deleted by searching for two spaces and replacing with one; leading spaces by searching for a paragraph mark followed by a space and replacing with just a paragraph mark, and trailing spaces by searching for a space followed by a paragraph mark and replacing with just a paragraph mark. Also delete all tabs and indents.

But think strategy as you do this. If you have indents or tabs setting off the answers, that obviously identifies the start of an answer. So don't just search and replace with nothing, search for the tab or indent and replace with an identifier. Likewise, if you have numbers identifying questions and letters identifying answers, don't just eliminate them, replace them with identifiers. Expect to do a certain amount of hand cleanup in addition to search and replace.

If you can only locate the start of a question or answer, not really a problem. Say you have all questions marked at the beginning with #. The # is preceded by a paragraph mark, and that in turn is preceded by the end of an answer. Say the mark for the end of an answer is $. So in Word, you'd search for ^p# and replace it with $^p#. Don't worry about duplicate markers since they are easy to correct - search for two, replace with one.

When you're done, you'd like to have all your questions and answers beginning and ending with distinctive marks.  For example:

#The War of 1812 began in*
%1812$
%1941$
%1776$
%a bar in Mishicot$

Now, you will need to convert this to HTML code. Assuming you number questions and letter answers, it will look like this on a normal Web page.

<ol> (at the beginning of the questions)
<li>The War of 1812 began in</li>
<ol type = "a">
<li>1812</li>
<li>1941</li>
<li>1776</li>
<li>a bar in Mishicot</li>
</ol> .... </ol>(at the very end of the list of questions).

<ol> stands for Ordered List (numbers or letters). Default is numbers unless you specify type as shown by type="a." <li> stands for List Item. End tags are marked with the slash.

However, in the system we are building, things are more complicated. Your questions will look the same, but the answers will have to be a lot more complex. Each answer will have to link to a file that gives the student feedback. Also, this feedback file will have to be targeted to the feedback frame. The HTML code will look like this.

<ol> (at the beginning of the questions)
<li>The War of 1812 began in</li>
<ol type = "a">
<li><a href = "right.htm" target="FeedbackFrame">1812</a></li>
<li><a href = "wrong.htm" target="FeedbackFrame">1941</a></li>
<li><a href = "wrong.htm" target="FeedbackFrame">1776</a></li>
<li><a href = "wrong.htm" target="FeedbackFrame">a bar in Mishicot</a></li>
</ol> .... </ol>(at the very end of the list of questions).

Now you can see why you want different identifiers for beginnings and ends of questions and answers - the HTML tags are different for each. You'd do a search and replace as follows:

You may end up with some straggling errors at the start or end of your question list that will have to be cleaned up on a case by case basis. Once you have the HTML fairly presentable, put it into Front Page, via Notepad or Wordpad if need be, and do the final editing in Front Page.

By the way, you don't have to have numbers and letters. If you replace all the ol's with ul's and delete the type tags, your questions and answers will be bulleted lists but the links will still work just fine. Numbers and letters look more like a standard exam, though.

Create a Few Simple Feedback Pages

These are pages that pop up in the Feedback window to let the student know if the selected answer is right or wrong. These need be nothing more elaborate than pages saying Right or Wrong, although you can be a bit more creative.

A Little Hack-Proofing

Web-savvy students may notice that when they scroll over an answer link, the link URL appears on their browser. To prevent them from simply scrolling through and fishing for the right answer, there are a couple of things you can do:

Multiple files, of course, mean that the URL's for answers will be different. This is not hard to deal with in Word. Say your wrong answer link is to "wrong.htm" but you want to link to unrevealing filenames like pdq.htm, fgy.htm, and so on. Create a macro. Start recording, search for wrong.htm and replace with pdq.htm, search for wrong.htm and replace with fgy.htm, and so on. Close the macro recording session, then run the macro until all the links are changed. If your macro misses some the first time through, the macro will cycle through the file until all the target URL's have been replaced.

One Last Important Warning

Word likes to put in fancy beginning and ending quotation marks. These are not the same as the quotation marks recognized by HTML. If you have apparently correct HTML but your links just don't work, check the quotation marks. Search and replace with proper HTML quotation marks. Rather than go back into Word, just copy the bad mark, go to search and replace, paste it into the search window and put a normal quotation mark in the replace window. You will have to do this twice since beginning and ending quotation marks are different. 

Return to Computer Tips Index
Return to Professor Dutch's Home Page

Created 18 January 2002, Last Update 17 November 2011

Not an official UW Green Bay site