Take the 2-minute tour ×

Okay. I am having a difficult time figuring this out. I have a game where there is a question and four images, answering the question requires clicking on the correct image.

There are lots of problems with the code ( i know ) I was just trying to break it down to get a few things working.

How do i get the program to better talk to it's self, for example, right now if i click on any image i'll get the reaction based on the image[2] = true; . But I can't seem to write an if statement that says if this image is clicked then do something. Any help or suggestions to get me over this hump would be great.

<div class="game">

    <div class="round round1">
        <div class="question"> If put in alphabetical order, which image would come third? </div>
        <div class="image image0"  > <img src="images/image1.gif"  /></div>
        <div class="image image1"  ><img src="images/image2.gif"    /> </div>
        <div class=" image image2"  > <img src="images/image3.gif"  /></div>
        <div class="image image3"  > <img src="images/image4.jpg"  /></div>
    var image = [false, false, false, false];
    var imageName = ["Car Image","Boat Imagege","Scooter Image","Snow Mobile Image"];

    $(".image0").click(function() {
        image[0] = true;    
        $(".question").replaceWith("The " + imageName[0] + " image is incorrect" );


    $(".image1").click(function() {
        image[1] = true;    
        $(".question").replaceWith("The " + imageName[1] + " image is incorrect" );

    $(".image2").mouseup(function() {
        image[2] = true;

        $(".question").replaceWith("Correct, the answer is <b>" + imageName[2] + "</b> image" );


    $(".image3").click(function() {
        image[3] = true;

        $(".question").replaceWith("The " + imageName[3] + " image is incorrect" );

share|improve this question
add comment

2 Answers

Your click functions already execute once the image is clicked. You can make the "correct" image execute whatever code you need it to (as well as update your array). Otherwise, you can write a for loop that checks image[] for true values.

share|improve this answer
something like this? $(".round1").click(function() { for (i=0;i<=3;i++){ $(".image"+i).click(function() { image[i] = true; }); if(image[i] == true){ $(".question").replaceWith(imageName[i] + "is correct" ); $('.image2').css({"background-color":"green"}); } } }); –  Splat ty Feb 29 '12 at 0:34
i don't know how to post code in these comment boxes. the ` and ' don't seem to do the trick..so sorry for the mess –  Splat ty Feb 29 '12 at 0:35
add comment

"But I can't seem to write an if statement that says if this image is clicked then do something."

You already have onclick events for your images, so what's the problem?

Try to include the jquery/javascript script tags on your page and surround your script with the $(function(){ });.

share|improve this answer
add comment

Your Answer


