Hello all and Thanks in advanced for all your help.
I have am working on a small program that needs to do several things. What the script needs to accomplish is the following.
1) Display an image of a cross for 500ms
2) Display 250ms of blank screen.
3) Display Image 1 through 5. Each displaying for 1 second with 250ms hold between pictures.
4) Display an image from the test folder while asking user "Is this an exact match for one of the shapes you just saw?"
5) After they answer the question it should repeat steps 1 through 4 with the next 5 set of images, then asking the same question.
6) This cycle should repeat 66 times (each cycle containing 5 images)
I am having problem with the following
1) Inserting the test image that displays with the forum (This image should change once with every cycle)
2) At the beginning of every cycle, I have an image that's not loading, I'm not sure what the program is looking for. Is this image possibly looking for the cross?
3) all the answers I would like to have submitted into a MySQL database and emailed to me. I don't know how to write this in javascript, I can do it in PHP but would prefer to keep everything in JavaScript if possible?
If you could let me know where I'm going wrong and what I'm doing wrong it would be much appreciated.
Here Is My Code

Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#theQuestion {
    position: relative;
    display: none;
}
</style>
</head>
<body>
<div>
    <img id="theImage" alt="the image" />
    <div id="theQuestion">
        <form id="theForm">
<script type="text/javascript">
var testImagePath = 1;
var testImageCycle = 1;
var testImageSuf = ".bmp";
var testImage = testImageCycle + testImageSuf;
document.images.slide.src=eval(testImage)
</script>
        <img src="version-1\part-1\test\.bmp"><br>
        Is this an exact match for one of the shapes you just saw?<br/>
        <label><input name="yesno" value="yes" type="radio" /> Yes</label>
        <label><input name="yesno" value="no"  type="radio" /> No</label>
        </form>
    </div>
</div>

<script type="text/javascript">
var IMAGEWAIT = 1000; // 1 seconds...adjust as you wish

// controls:
var curImageCycle = 0;
var curImage = 1;
var nextImage = new Image();
nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";

var image = document.getElementById("theImage");
var form  = document.getElementById("theForm")
var qdiv  = document.getElementById("theQuestion");

form.yesno[0].onclick = choice;
form.yesno[1].onclick = choice;

function showNextImage( force )
{
    // every 5 images, ask a question
    // but if force argument isf defined, do NOT do so
    if ( force == null && curImageCycle % 6 == 0 )
    {
        showForm(); // shows question, waits for answer
        return;
    }
    image.src = nextImage.src;  // get image that was prefetched
    image.style.display = "block"; //and show it

    curImageCycle++;
    // DO *ONE* ONLY OF THE NEXT TWO LINES!!
    if ( curImage > 120 ) curImage = 1; // cycle back to 1 after 100 ???
    if ( curImage > 120 ) return; // FINISHED (or could do location.href='anotherUrl.html'

    // wait the 5 seconds (or other period)
    setTimeout( pause, IMAGEWAIT );

    // pre-fetch the next image
    nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";
	if (curImageCycle > 5)
	{
		curImageCycle = 0; //Change Image value to one for next round of pictures.
		curImage++;
	}
}
function pause( )
{
    image.style.display = "none";
    setTimeout( showNextImage, 0 ); // The number of seconds before showing the next image.
}

function showForm( )
{
    form.reset(); // clear the yes/no buttons...
    qdiv.style.display = "block"; // ... display form
}

function choice( )
{
    // do something with user's answer???  what???

    // hide form, display next image
	//curImage++;
    qdiv.style.display = "none";
    showNextImage( true ); // force showNextImage to go on...not show form
}

// get things started:
showNextImage( true );
</script>
</body>
</html>