Find the Hot Potatoes source folder, and copy the hp6.cs_ file into your custom source folder.

Open the hp6.cs_ file in your text editor. (Make sure you open the copy in your custom folder, not the original one!)

Search for this text:

.ReadingText

This is the beginning of the code which handles the appearance of the reading text div.

The code for this selector looks like this:

.ReadingText{
  text-align: left;
}

All it does right now is to make the text of the reading left-aligned.

Type a return character after the line text-align: left;. You're going to insert your code starting on the next line. Type a slash followed by an asterisk (a star). This marks the beginning of a comment. Then leave a space, and type your "handle", and a short explanation of what you're doing, like this:

/* MDH_Custom: added two lines to make reading text scroll independently. */

Don't forget the */ at the end, to close the comment. Now everything between /* and */ has been commented out, so the browser will ignore it, but we can easily find our code again when we need to, because we can search for the handle.

Now type a return, and the following three lines:

  overflow: auto;
  height: 15em;
/* MDH_Custom: end customized code.*/

We're telling the browser to fix the height of the reading text container to 15 "em" characters, and if the text is too long for that ("overflow"), to handle it automatically. This will cause the browser to add a scrollbar.

This is what you should see:

.ReadingText{
  text-align: left;
/* MDH_Custom: added two lines to make reading text scroll independently. */
  overflow: auto;
  height: 15em;
/* MDH_Custom: end customized code.*/
}

Save the file, then create an exercise in JQuiz with a long reading text, and view it in your browser. Here's an example.