I've got a puzzle contest site that I'm trying to make improvements to. Right now, when a user inputs an answer the script checks if the answer is correct. If it's not it then displays a message below the answer box indicating that the answer is wrong. The problem is that, of course, it reloads the entire page. Since most people are using the browsers to cache images it seems seamless. However, 1) some of the images we use are quite big and 2) I'd like it to be seamless even if the user is choosing not to cache everything. I'm thinking that means I need AJAX. The problem is I'm not sure quite how to implement it (not to mention that Javascript is a weak point for me). To start, here's kinda what how my page is set up:

http://bastards.alexconnect.net/1part/easyz06.htm

Note that the above link doesn't use PHP at all. It's just an example of what things look like. Here's the code for the page I'm trying to improve:



Obviously, I'm using a template system as well. In fact, it's phpBB that I'm using. Anyway, as you can see, the user inputs the answer, the answercheck script is called (the answercheck portion is included in the same file that displays the page...we'll call it puzzle.php), and if the answer is wrong the script fills in all of the stage values (image, button, header, etc) as well as entering in a message indicating that the wrong answer was guessed. I would like the answercheck script to *only* have to update the wrong answer portion when a wrong answer is made. Of course when a correct answer is made it would update everything for the new stage.

I tried messing with AJAX to do this and it worked quite well for wrong answers. Unfortunately, when I put in a correct answer it would load up the new puzzle in <span class="wrong"> portion and I'd have a messed up lookign page with a puzzle within a puzzle. Is it possible to just update one area and only at certain times? I'm pretty confused at this point.