?
Solved

Match Image

Posted on 2004-12-01
7
Medium Priority
?
700 Views
Last Modified: 2012-08-14
Repost.

I have six images and arrange by two rows and three columns like below

********* * ****************                                                                  
*                 *               *              *                                      
*    Image1  *   Image2  * Image3  *                                                        
*                 *               *              *                                      
********** ******* *********                                                                    
*                 *               *              *                                            
*  Image4    * Image5   * Image6   *                                                              
*                 *               *              *                                      
***************************  

How do we write in JavaScript

Step 1.  Set maximum click for each image is one time only.
           If user click Image1 and image4 then both image1 and image4 disappear
           If not then display message you got this wrong
           
          If user click Image2 and image5 then both image2 and image5 disappear
           If not then display message you got this wrong

           If user click Image3 and image6 then both image3 and image6 disappear
           If not then display message you got this wrong

Step 2.  Show all image if all image matched
              Then display popup dialog or message saying good job!
               
                If one of them is wrong then display you missed 1
                 If two of them is wrong then display you missed 2
                  If three of them is wrong them display you missed all.

Thanks  
0
Comment
Question by:QUANPROFILES
  • 4
  • 2
7 Comments
 
LVL 11

Expert Comment

by:SweatCoder
ID: 12717590
i don't have time to write out all the code for you, but i know these principles will work:

- declare global js variables outside the scope of any function
- use these vars to hold "number times clicked"
- 1 var for each image
- use <SPAN> or <DIV> to show/hide images. use STYLE="display:none" for hiding, etc. can be done via js as well.
0
 
LVL 18

Accepted Solution

by:
arantius earned 1200 total points
ID: 12717994
QUANPROFILES,
Try the online version at: http://www.arantius.com/ee/Q_21226314.html

<html>
<head>
<script type="text/javascript">
var lastClicked="", tries=0, missed=0;
function doClick(i) {
    if (i.clicked) return;
    if (i.id==lastClicked) return;
    switch (i.id) {
    case "i1": if ("i4"==lastClicked) { good(1, 4); lastClicked=""; return; } break;
    case "i2": if ("i5"==lastClicked) { good(2, 5); lastClicked=""; return; } break;
    case "i3": if ("i6"==lastClicked) { good(3, 6); lastClicked=""; return; } break;
    case "i4": if ("i1"==lastClicked) { good(4, 1); lastClicked=""; return; } break;
    case "i5": if ("i2"==lastClicked) { good(5, 2); lastClicked=""; return; } break;
    case "i6": if ("i3"==lastClicked) { good(6, 3); lastClicked=""; return; } break;
    }
    if (""!=lastClicked) {
        tries++; missed++;
        alert("Wrong choice!");
        i.clicked=true;
        i.src="cloud-dis.png";
        document.getElementById(lastClicked).clicked=true;
        document.getElementById(lastClicked).src="cloud-dis.png";
        lastClicked="";
        if (3==tries) finished();
        return;
    }
    lastClicked=i.id;
}
function good(el1, el2) {
    tries++;
    alert("Good!");
    document.getElementById("i"+el1).style.visibility="hidden";
    document.getElementById("i"+el2).style.visibility="hidden";
    if (3==tries) finished();
}
function finished() {
    for (var i=1; i<7; i++) {
        document.getElementById("i"+i).style.visibility="visible";
    }
    if (0==missed) {
        alert("Good job you got them all right!");
    } else {
        alert("Good effort, but you only got "+(tries-missed)+" of "+tries+" right.");
    }
}
</script>
<style type="text/css">
td { text-align: center; }
</style>
</head>
<body>

<table>
    <tr>
        <td><img src="cloud1.png" id="i1" onclick="javascript:doClick(this);"><br />1</td>
        <td><img src="cloud2.png" id="i2" onclick="javascript:doClick(this);"><br />2</td>
        <td><img src="cloud3.png" id="i3" onclick="javascript:doClick(this);"><br />3</td>
    </tr>
    <tr>
        <td><img src="cloud1.png" id="i4" onclick="javascript:doClick(this);"><br />4</td>
        <td><img src="cloud2.png" id="i5" onclick="javascript:doClick(this);"><br />5</td>
        <td><img src="cloud3.png" id="i6" onclick="javascript:doClick(this);"><br />6</td>
    </tr>
</table>

</body>
</html>
0
 

Author Comment

by:QUANPROFILES
ID: 12718201
wow amazingl thanks alot.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:QUANPROFILES
ID: 12722176
Hi arantius can you please rewrite this script, it just a little different.
I have six images and arrange by two rows and three columns like below

********* * ****************                                                                  
*                 *               *              *                                      
*    Image1  *   Image2  * Image3  *                                                        
*                 *               *              *                                      
********** ******* *********                                                                    
*                 *               *              *                                            
*  Image4    * Image5   * Image6   *                                                              
*                 *               *              *                                      
***************************  

How do we write in JavaScript

Step 1.  Set maximum click for each image is one time only.
           If user click Image1 and image4 then both image1 and image4 disappear
           If not then display message you got this wrong
           
          If user click Image2 and image5 then both image2 and image5 disappear
           If not then display message you got this wrong

           If user click Image3 and image6 then both image3 and image6 disappear
           If not then display message you got this wrong

Step 2.  Don't show the old image (keep them disappear)
              If user got them all the display saying good job
           
              If they missed more than three then display the message "you should study more" and popup a new window to studymore.html

Thanks  
0
 
LVL 18

Expert Comment

by:arantius
ID: 12722425
How can they get more than three wrong?  They can only click on an image one time, so they can only make 3 tries at a pair.
To keep the images take out the first 3 lines in the finished function.
0
 

Author Comment

by:QUANPROFILES
ID: 12730055
Oops, not they can click only one time

they may click more then one time for each image as long as they don't miss over three.
If miss three then finish.

to view a full problem please click below
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21227564.html
0
 

Author Comment

by:QUANPROFILES
ID: 12730412
THANKS GUYS, WE SOLVED THE PROBLEM.
AGAIN
THANKS
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question