Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: match pictures

  1. #16
    New Coder
    Join Date
    Jul 2013
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    in the below code timer starts when we click any of the image but how to make timer start automatically with out the use of images


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <div>
    <br />
    <span id="count" ></span>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     Reset:function(id){
      var o=this[id],z0=0;
      if (o){
       clearTimeout(o.to);
       o.time[1]=null;
       for (;z0<o.imgs.length;z0++){
        o.imgs[z0].style.visibility='visible';
       }
       o.cnt=z0/2;
       o.lst=null;
      }
     },
    
     init:function(o){
      var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
      o.imgs=imgs;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.time=[typeof(o.Timer)=='function'?o.Timer:null];
      o.cnt=z0/2;
      this[id]=o;
     },
    
     match:function(o,img){
      if (o.time[0]&&!o.time[1]){
       o.time[1]=new Date();
       o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
      }
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        if (o.cnt==0){
         clearTimeout(o.to);
         o.time[1]=null;
         o.Complete();
        }
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count').innerHTML=30-sec;
      if (sec>29){
        alert('Time Out');
        zxcMatch.Reset('match-holder');
      }
     },
     Complete:function(){
    //  window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    /*]]>*/
    </script>
    </body>
    </html>

  2. #17
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 812px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    #timer {
      float: left;
    }
    #message {
      float: right;
      font-weight: bold;
      color: blue;
    }
    #message.error {
      color: red;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
        <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
        <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
        <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
        <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        <div  id="status">
          <div id="timer">Timer: <span id="count">30</span></div>
          <span id="message"></span>
        </div>
    </div>
    
    <script type="text/javascript">
    var zxcMatch = {
    
        Reset: function (id) {
            var o = this[id],
                z0 = 0;
            if (o) {
                clearInterval(o.to);
                o.time[1] = null;
                for (; z0 < o.imgs.length; z0++) {
                    o.imgs[z0].style.visibility = 'visible';
                }
                o.cnt = z0 / 2;
                o.lst = null;
                document.getElementById('message').innerHTML = '';
            }
        },
    
        init: function (o) {
            var id = o.ParentID,
                imgs = document.getElementById(id).getElementsByTagName('IMG'),
                z0 = 0;
            o.imgs = imgs;
            for (; z0 < imgs.length; z0++) {
                this.addevt(imgs[z0], 'mouseup', 'match', o, imgs[z0]);
            }
            o.time = [typeof (o.Timer) == 'function' ? o.Timer : null];
            o.cnt = z0 / 2;
            this[id] = o;
        },
    
        start: function (o) {
            o.time[1] = new Date();
            o.to = setInterval(function () {
                o.time[0](o, Math.floor((new Date() - o.time[1]) / 1000));
            }, 1000);
        },
    
        match: function (o, img) {
            var msg = document.getElementById('message');
            if (msg.innerHTML && msg.className.indexOf('error') != -1) {
                msg.innerHTML = '';
            }
    
            if (!o.lst) {
                o.lst = img;
            } else {
                if (o.lst.className == img.className && o.lst != img) {
                    img.style.visibility = o.lst.style.visibility = 'hidden';
                    o.cnt--;
                    if (o.cnt == 0) {
                        clearInterval(o.to);
                        o.time[1] = null;
                        o.Complete();
                    }
                } else {
                    this.showMessage('Try again!', true, true);
                }
                o.lst = null;
            }
        },
    
        addevt: function (o, t, f, p, p1) {
            var oop = this;
            o.addEventListener ? o.addEventListener(t, function (e) {
                return oop[f](p, p1);
            }, false) : o.attachEvent ? o.attachEvent('on' + t, function (e) {
                return oop[f](p, p1);
            }) : null;
        },
    
        showMessage: function(msg, isError, fla****) {
            var messageContainer = document.getElementById('message');
            messageContainer.className = (isError) ? 'error' : '';
            if (fla****) {
                messageContainer.innerHTML = msg;
                setTimeout(function() {
                    messageContainer.innerHTML = '';
                }, 2000);
            }
            else {
                messageContainer.innerHTML = msg;  
            }
        }
    
    }
    
    var options = {
        ParentID: 'match-holder',
        Timer: function (o, sec) {
            document.getElementById('count').innerHTML = 30 - sec;
            if (sec > 29) {            
                zxcMatch.Reset('match-holder');
                zxcMatch.showMessage('Time Out!', true, true);
            }
        },
        Complete: function () {
            zxcMatch.showMessage('Good Job!', false, false);
        }
    };
    zxcMatch.init(options);
    zxcMatch.start(options)
    
    </script>
    </body>
    </html>
    I also improved the messaging by replacing the alerts with inline messages at the bottom right of the images. Also moved the timer to bottom left of the images.

  3. #18
    New Coder
    Join Date
    Jul 2013
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    this code is not working. i just need the timer in my code to start automatically as the page loads.

    Quote Originally Posted by glenngv View Post
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 812px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    #timer {
      float: left;
    }
    #message {
      float: right;
      font-weight: bold;
      color: blue;
    }
    #message.error {
      color: red;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
        <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
        <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
        <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
        <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        <div  id="status">
          <div id="timer">Timer: <span id="count">30</span></div>
          <span id="message"></span>
        </div>
    </div>
    
    <script type="text/javascript">
    var zxcMatch = {
    
        Reset: function (id) {
            var o = this[id],
                z0 = 0;
            if (o) {
                clearInterval(o.to);
                o.time[1] = null;
                for (; z0 < o.imgs.length; z0++) {
                    o.imgs[z0].style.visibility = 'visible';
                }
                o.cnt = z0 / 2;
                o.lst = null;
                document.getElementById('message').innerHTML = '';
            }
        },
    
        init: function (o) {
            var id = o.ParentID,
                imgs = document.getElementById(id).getElementsByTagName('IMG'),
                z0 = 0;
            o.imgs = imgs;
            for (; z0 < imgs.length; z0++) {
                this.addevt(imgs[z0], 'mouseup', 'match', o, imgs[z0]);
            }
            o.time = [typeof (o.Timer) == 'function' ? o.Timer : null];
            o.cnt = z0 / 2;
            this[id] = o;
        },
    
        start: function (o) {
            o.time[1] = new Date();
            o.to = setInterval(function () {
                o.time[0](o, Math.floor((new Date() - o.time[1]) / 1000));
            }, 1000);
        },
    
        match: function (o, img) {
            var msg = document.getElementById('message');
            if (msg.innerHTML && msg.className.indexOf('error') != -1) {
                msg.innerHTML = '';
            }
    
            if (!o.lst) {
                o.lst = img;
            } else {
                if (o.lst.className == img.className && o.lst != img) {
                    img.style.visibility = o.lst.style.visibility = 'hidden';
                    o.cnt--;
                    if (o.cnt == 0) {
                        clearInterval(o.to);
                        o.time[1] = null;
                        o.Complete();
                    }
                } else {
                    this.showMessage('Try again!', true, true);
                }
                o.lst = null;
            }
        },
    
        addevt: function (o, t, f, p, p1) {
            var oop = this;
            o.addEventListener ? o.addEventListener(t, function (e) {
                return oop[f](p, p1);
            }, false) : o.attachEvent ? o.attachEvent('on' + t, function (e) {
                return oop[f](p, p1);
            }) : null;
        },
    
        showMessage: function(msg, isError, fla****) {
            var messageContainer = document.getElementById('message');
            messageContainer.className = (isError) ? 'error' : '';
            if (fla****) {
                messageContainer.innerHTML = msg;
                setTimeout(function() {
                    messageContainer.innerHTML = '';
                }, 2000);
            }
            else {
                messageContainer.innerHTML = msg;  
            }
        }
    
    }
    
    var options = {
        ParentID: 'match-holder',
        Timer: function (o, sec) {
            document.getElementById('count').innerHTML = 30 - sec;
            if (sec > 29) {            
                zxcMatch.Reset('match-holder');
                zxcMatch.showMessage('Time Out!', true, true);
            }
        },
        Complete: function () {
            zxcMatch.showMessage('Good Job!', false, false);
        }
    };
    zxcMatch.init(options);
    zxcMatch.start(options)
    
    </script>
    </body>
    </html>
    I also improved the messaging by replacing the alerts with inline messages at the bottom right of the images. Also moved the timer to bottom left of the images.

  4. #19
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 900px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
            <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
            <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
            <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
            <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        </div>
    <div>
    <br />
    <span id="count" ></span>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMatch={
    
     Reset:function(id){
      var o=this[id],z0=0;
      if (o){
       clearTimeout(o.to);
       o.time[1]=null;
       for (;z0<o.imgs.length;z0++){
        o.imgs[z0].style.visibility='visible';
       }
       o.cnt=z0/2;
       o.lst=null;
      }
     },
    
     StartTimer:function(id){
      var o=this[id];
      if (o&&o.time[0]&&!o.time[1]){
       o.time[1]=new Date();
       o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
      }
     },
    
     init:function(o){
      var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
      o.imgs=imgs;
      for (;z0<imgs.length;z0++){
       this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
      }
      o.id=id;
      o.time=[typeof(o.Timer)=='function'?o.Timer:null];
      o.cnt=z0/2;
      this[id]=o;
     },
    
     match:function(o,img){
      this.StartTimer(o.id);
      if (!o.lst){
       o.lst=img;
      }
      else {
       if (o.lst.className==img.className&&o.lst!=img){
        img.style.visibility=o.lst.style.visibility='hidden';
        o.cnt--;
        if (o.cnt==0){
         clearTimeout(o.to);
         o.time[1]=null;
         o.Complete();
        }
       }
       else {
        alert('try again');
       }
       o.lst=null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcMatch.init({
     ParentID:'match-holder',
     Timer:function(o,sec){
      document.getElementById('count').innerHTML=30-sec;
      if (sec>29){
        alert('Time Out');
        zxcMatch.Reset('match-holder');
      }
     },
     Complete:function(){
    //  window.top.location='http://www.vicsjavascripts.org.uk/';
     }
    });
    
    zxcMatch.StartTimer('match-holder');
    
    /*]]>*/
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #20
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by kadi View Post
    this code is not working. i just need the timer in my code to start automatically as the page loads.
    It didn't work because this forum mangled the code. It changed the flashIt var to fla**** because it found a bad word in flashIt.

    Change all instances (2) of fla**** to flashIt and it will work.

    Here's the code again and I made sure no mangling is done.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Image Match Game</title>
    
    
    <style type="text/css">
    
    body {
      background-color: #EEEEEE;
      margin: 0;
    }
    
    #match-holder {
        margin: 100px auto;
        width: 812px;
    }
    
    #match-holder IMG{
        width: 200px;height:200px;
    }
    #timer {
      float: left;
    }
    #message {
      float: right;
      font-weight: bold;
      color: blue;
    }
    #message.error {
      color: red;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="match-holder">
        <img class="birds" src="https://lh4.googleusercontent.com/-FmW-yW_iThc/UYHsbbbBK0I/AAAAAAABXGE/g_vGb4Gh7lE/w497-h373/97604-beautiful-birds-blue-bird.jpg" alt="" />
        <img class="cats" src="http://images.wisegeek.com/young-calico-cat.jpg" alt="" />
        <img class="cats" src="http://avivaromm.com/romm/wp-content/uploads/2013/07/0404_milk.jpg" alt="" />
        <img class="birds" src="http://www.communityjournal.net/wp-content/uploads/2012/05/seeds.jpg" alt="" />
        <div  id="status">
          <div id="timer">Timer: <span id="count">30</span></div>
          <span id="message"></span>
        </div>
    </div>
    
    <script type="text/javascript">
    var zxcMatch = {
    
        Reset: function (id) {
            var o = this[id],
                z0 = 0;
            if (o) {
                clearInterval(o.to);
                o.time[1] = null;
                for (; z0 < o.imgs.length; z0++) {
                    o.imgs[z0].style.visibility = 'visible';
                }
                o.cnt = z0 / 2;
                o.lst = null;
                document.getElementById('message').innerHTML = '';
            }
        },
    
        init: function (o) {
            var id = o.ParentID,
                imgs = document.getElementById(id).getElementsByTagName('IMG'),
                z0 = 0;
            o.imgs = imgs;
            for (; z0 < imgs.length; z0++) {
                this.addevt(imgs[z0], 'mouseup', 'match', o, imgs[z0]);
            }
            o.time = [typeof (o.Timer) == 'function' ? o.Timer : null];
            o.cnt = z0 / 2;
            this[id] = o;
        },
    
        start: function (o) {
            o.time[1] = new Date();
            o.to = setInterval(function () {
                o.time[0](o, Math.floor((new Date() - o.time[1]) / 1000));
            }, 1000);
        },
    
        match: function (o, img) {
            var msg = document.getElementById('message');
            if (msg.innerHTML && msg.className.indexOf('error') != -1) {
                msg.innerHTML = '';
            }
    
            if (!o.lst) {
                o.lst = img;
            } else {
                if (o.lst.className == img.className && o.lst != img) {
                    img.style.visibility = o.lst.style.visibility = 'hidden';
                    o.cnt--;
                    if (o.cnt == 0) {
                        clearInterval(o.to);
                        o.time[1] = null;
                        o.Complete();
                    }
                } else {
                    this.showMessage('Try again!', true, true);
                }
                o.lst = null;
            }
        },
    
        addevt: function (o, t, f, p, p1) {
            var oop = this;
            o.addEventListener ? o.addEventListener(t, function (e) {
                return oop[f](p, p1);
            }, false) : o.attachEvent ? o.attachEvent('on' + t, function (e) {
                return oop[f](p, p1);
            }) : null;
        },
    
        showMessage: function(msg, isError, flashIt) {
            var messageContainer = document.getElementById('message');
            messageContainer.className = (isError) ? 'error' : '';
            if (flashIt) {
                messageContainer.innerHTML = msg;
                setTimeout(function() {
                    messageContainer.innerHTML = '';
                }, 2000);
            }
            else {
                messageContainer.innerHTML = msg;  
            }
        }
    
    }
    
    var options = {
        ParentID: 'match-holder',
        Timer: function (o, sec) {
            document.getElementById('count').innerHTML = 30 - sec;
            if (sec > 29) {            
                zxcMatch.Reset('match-holder');
                zxcMatch.showMessage('Time Out!', true, true);
            }
        },
        Complete: function () {
            zxcMatch.showMessage('Good Job!', false, false);
        }
    };
    zxcMatch.init(options);
    zxcMatch.start(options);
    
    </script>
    </body>
    </html>
    And here it is in action:

    http://jsfiddle.net/PwBAS/


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •