Spacefem's Tutorials: Guide To Troubleshooting JavaScript Quizzes

Programming can always be frustrating because it's full of tiny little details everywhere. If you script doesn't work, it's not because you're stupid. It's rather difficult, in fact, to just write up a script and have it work the first time... there are a million things that can go wrong, and chances are pretty good that several will.

So, here's a guide to finding those errors and making your quiz do wht you want it to do.

Part 1: The Visual Check

To start off, look at your quiz on the page. Is it laid out right? Is everything in order? Then look at your code. Here are some of the biggest things to check for: Do this carefully. Not only will it help you get to know your code for future use, but you're very likely to find the mistake, fix it, and move on with your life. If you feel like getting a soda, go get it, sit down and watch a T.V. show, then come back. Give yourself a fresh look.

But a lot of times, you still won't see the error. So now it's time to get out the tools.

Part 2: Debugging with Browsers

Browsers are incredibly powerful for troubleshooting and debugging... especially if that browser is anything other than Internet Explorer. They'll tell you where an issue happened in your script and why. Let's check out an example based on the Type Quiz tutorial. Here's what a section of my code looks like:
<script LANGUAGE="JavaScript">
<!--
function process()
{
var blue = 0;
var red = 0;
var violet = 0;
var black = 0;

var f = document.f;
var i = 0;

for (i = 0; i < F.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }
Now, you might be able to see an error with this code right off the bat, or you might now. But the fact is that it doesn't work. So let's get to some tools...

Using Firefox

Bring up Tools > Error Console and you'll see a lovely box on the side with all your problems. Skip the Netscape section and I'll tell you how to read all this.

Using Netscape

I open the page in netscape and this is what it looks like:

When I press the "Compute" button I get a message at the bottom. What is it saying?

Ah. Okay, so I find the location: box and do just what it says:

This causes a helpful box to pop up:

Reading Through Your Errors

The box above really says stuff like this:
JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 17:
f has no properties.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 62:
process is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 62:
process is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

JavaScript Error: file:/home/spacefem/spacefem2/tutorials/test.shtml, line 18:
F is not defined.

Whoh! That looks like a LOT of errors... but slow down and take a look at them. Most of them are at "line 18" and have something to do with "F". See, this isn't so hard is it? I go to my code, count the lines down (if you're using a good text editor it'll let you go to the line, but in notepad I think you just have to count yourself). In the box below line 18 is highlighted.
<script LANGUAGE="JavaScript">
<!--
function process()
{
var blue = 0;
var red = 0;
var violet = 0;
var black = 0;

var f = document.f;
var i = 0;

for (i = 0; i < F.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }
Upon examining the line, I can see that there's an "F.a.length" that should be an "f.a.lenth". Seem like a small mistake to you? Well it's enough that when I fix it, the quiz runs.

Many of the mistakes that Netscape will show you are based on other mistakes, so try to just fix one at a time then test it again and continue through the list. You'll be up and running in no time.

Errors cleared... it's just not working!

You've gone through this, don't see any errors, it should work fine. But it's not.

Here's a handy bit you can put in your code anywhere:
alert('break a');

This will send up a popup message, so you can tell that the script is at least being read at that line. If you put in an alertbox and nothing pops up, you'll know it's kicking out someplace. But anyway, sometimes the best way to find out what's broken is to eliminate all the places that aren't broken, then look extra closely at the things you can't verify as good. little peices.

Another set of eyes is always good too. Get up, walk away, come back in a half hour or so. And then join the spacefem.com forum and ask us for help.