www.webdeveloper.com
Results 1 to 2 of 2

Thread: word with clickable letters

  1. #1
    Join Date
    Oct 2013
    Posts
    1

    word with clickable letters

    Hi,

    I need to do the following:

    I have an array of words and a script that picks one word from an array of words at random and mixes up the letters. Then the user would have to guess the word by clicking on the letters of the mixed up word in the right order. How do I make the letters clickable, so that the user could click on any letter of the mixed up word and this letter would then be added to a solution string and removed from the mixed word string?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .words {
      width:400px;height:30px;border:solid red 1px;margin-Top:10px;
    }
    
    .words DIV {
      width:30px;height:30px;float:left;background-Color:#FFFFCC;font-Size:28px;text-Align:center;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    </body><input type="button" name="" value="Start" onmouseup="zxcWords.Start('words');" />
    <div id="words" class="words" >
    </div>
    <div id="solution" class="words" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcWords={
    
     init:function(o){
      var id=o.WordsID,s=document.getElementById(o.SolutionID),wa=o.WordArray,w=document.getElementById(id),z0=0;
      if (w&&s&&wa instanceof Array){
       for (;z0<wa.length;z0++){
        if (typeof(wa[z0])!='string'){
         wa.splice(z0--,1);
        }
       }
       o.wa=wa;
       o.w=w;
       o.s=s;
       this['zxc'+id]=o;
      }
     },
    
     Start:function(id){
      var o=this['zxc'+id];
      if(o&&o.wa[0]){
       var l=o.wa.sort(function(){return 0.5 - Math.random();})[0].split(''),ary=[],z0=0,z1=0;
       o.w.innerHTML='';
       o.s.innerHTML='';
       o.l=l;
       for (var z0=0;z0<l.length;z0++){
        d=document.createElement('DIV');
        ary[z0]=[d,l[z0]];
        d.innerHTML=l[z0];
        this.addevt(d,'mouseup','select',o,ary[z0]);
       }
       ary=ary.sort(function(){return 0.5 - Math.random();})
       for (;z1<ary.length;z1++){
        o.w.appendChild(ary[z1][0]);
       }
       o.n=0;
      }
     },
    
     select:function(o,a){
      if (a[1]==o.l[o.n]&&!a[2]){
       a[2]=true;
       o.s.appendChild(a[0]);
       o.n++;
      }
     },
    
     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;
     }
    
    
    }
    
    zxcWords.init({
     WordsID:'words',
     SolutionID:'solution',
     WordArray:[
      'words',
      'solution'
     ]
    });
    /*]]>*/
    </script>
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles