by: oguzhansazakPosted on:

JavaScript ile Kelime Çalisma Programi

JavaScript ile Kelime Çalisma Programi

Açiklama:

Javascript ve html ile basit bir kelime çalisma programi yapabilir miyiz?..
Evet!
Yapabiliriz.

Dil sinavlarinin ardi arkasinin kesilmedigi ülkemizde, özellikle ingilizce kelime çalisan
kisiler, hazir kelimelerden çok kendi istedikleri kelimeleri çalismak istiyor.
Bu isi gören çok profesyonel uygulamalar webde mevcut. Bizimkisi ise dünyaya minik bir hediye olacak.
Birilerinin isine yaramasi dilegiyle..

Kullanim sekli:

Kelimeler su formata uygun girilmelidir:
[kelime]:[anlami]
[kelime]:[anlami]
…

Örnek:

call:çagirmak
page:sayfa
delete:silmek
perfect:mükemmel

Her kelimeden sonra bir alt satira geçilmelidir.

Kod kismi:

Uygulama girilen kelimeleri çerezlerde(cookie) tutar.
bu kod parçasinda javascript ve html ile ilgili asagidaki isleri yapan kodlar mevcuttur:

  •  cookie yazma ve okuma
  •  string parse islemleri
  •  dom tree modifikasyonu
  •  jquery ve javascript karisik kullanimi
  •  html
  •  css class
  •  click event
  •  array
  •  string split, slice, replace

Demo :

http://yazilimmutfagi.com/demo//kelime_calisma//kelime_calisma.html

Kaynak KOD:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />

<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script type="text/javascript">

function setCookie(name,value,days) {
if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = escape(name)+"="+escape(value)+expires+"; path=/";
}

function getCookie(name) {
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length));
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
</script>

<script type="text/javascript">


function removeTurkishChars(x){
        p2=x;
        while(p2.indexOf("ö")>0){
        p2 = p2.replace("ö","o");
        }
        
        while(p2.indexOf("ü")>0){
        p2 = p2.replace("ü","u");
        }
        
        while(p2.indexOf("i")>0){
        p2 = p2.replace("i","i");
        }
        
        while(p2.indexOf("g")>0){
        p2 = p2.replace("g","g");
        }
        
        while(p2.indexOf("ç")>0){
        p2 = p2.replace("ç","c");
        }
        
        while(p2.indexOf("s")>0){
        p2 = p2.replace("s","s");
        }
    return p2;
}


$(document).ready(function(){
    $("#btnKaydet").click(function(){
    var words = document.getElementById("taKelimeler").value;
    var lines = words.split("\n");
    if(words.length>2000){
        alert("girilen metin 2000 karakteri geçemez! Su an "+words.length + " karakter girilmis.");
        return;
    }
    
    
    words = "";
    for(var i=0;i<lines.length;i++){
        //var parts = lines[i].split(":");
        if(lines[i].indexOf(":")==0){
            alert("girilen kelimelerde hata var! Hatali kelime:"+lines[i]);
            return;            
        }
        var p1 = lines[i].slice(0,lines[i].indexOf(":"));
        var p2 = lines[i].slice(lines[i].indexOf(":")+1,lines[i].length);
        
        while(p2.indexOf(":")>0){
        p2 = p2.replace(":",";");
        }
        
        p1 = removeTurkishChars(p1);
        p2 = removeTurkishChars(p2);
        
        
        if(p1 ==undefined || p2 ==undefined){
            alert("girilen kelimelerde hata var! Hatali kelime:"+lines[i]);
            return;
        }
        words = words + p1 + ":" + p2 + "\n";
    }
    words = words.slice(0,words.length-1);
    if(lines.length<4){
        alert('en az 4 kelime girilmelidir!');
        return;
    }
    setCookie("kelimeCalisWords", words ,21);
        alert('kaydedildi!');
    });
});

function shuffleArray ( myArray ) {
  var i = myArray.length, j, tempi, tempj;
  if ( i == 0 ) return false;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     tempi = myArray[i];
     tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

$(document).ready(function(){
    $("#btnGoster").click(function(){
            var words= getCookie("kelimeCalisWords");
            var lines = words.split("\n");
            shuffleArray(lines);
            
            document.getElementById("divKelimeler").innerHTML = "";
            var ul = document.createElement("ul");
            ul.setAttribute("id","ticker");
            //ul.setAttribute("style","none");
            ul.style.listStyle="none";
            ul.style.margin="0px";
            ul.style.padding="0px";
            document.getElementById("divKelimeler").appendChild(ul);
                
            for(var j =0;j<lines.length;j++){
            
                var li = document.createElement("li");
                ul.appendChild(li);    
            
                var parts = lines[j].split(":");
                var btn = document.createElement("input");
                btn.setAttribute("value",parts[0]);
                btn.setAttribute("type","button");
                btn.setAttribute("class","widthInput");
                
                //btn.style.width ="240px";
                btn.style.backgroundColor ="orange";
                btn.setAttribute("onclick","alert('"+parts[1]+"');");        
                li.appendChild(btn);li.appendChild(document.createElement("br"));
                
                var r1=0;
                var r2=0;
                var r3=0;
                while(true){
                
                    r1 = Math.floor((Math.random()*10)+1) % lines.length;
                    r2 = Math.floor((Math.random()*10)+1) % lines.length;
                    r3 = Math.floor((Math.random()*10)+1) % lines.length;
                
                    if(r1!=r2 && r1!=r3 && r2!=r3){
                        if(r1 != j && r2 != j && r3 != j) break;
                    }
                }
                
                var rw1 = lines[r1].split(":")[1];
                var rw2 = lines[r2].split(":")[1];
                var rw3 = lines[r3].split(":")[1];
                var rw4 = parts[1];

                var rk1 = lines[r1].split(":")[0];
                var rk2 = lines[r2].split(":")[0];
                var rk3 = lines[r3].split(":")[0];
                var rk4 = parts[0];
                                
                var op1Text = document.createElement("input");
                op1Text.setAttribute("type","text");
                op1Text.setAttribute("value",rw1);
                op1Text.setAttribute("disabled",true);
                op1Text.setAttribute("id","op1Text"+j);
                
                var op1 = document.createElement("input");
                op1.setAttribute("type","radio");
                op1.setAttribute("name",parts[0]);
                op1.setAttribute("onclick","colorize('op1Text"+j+"','"+rw1+"','"+parts[1]+"');");        

                var op2Text = document.createElement("input");
                op2Text.setAttribute("type","text");
                op2Text.setAttribute("value",rw2);
                op2Text.setAttribute("disabled",true);
                op2Text.setAttribute("id","op2Text"+j);
                
                var op2 = document.createElement("input");
                op2.setAttribute("type","radio");
                op2.setAttribute("name",parts[0]);
                op2.setAttribute("onclick","colorize('op2Text"+j+"','"+rw2+"','"+parts[1]+"');");        

                var op3Text = document.createElement("input");
                op3Text.setAttribute("type","text");
                op3Text.setAttribute("value",rw3);
                op3Text.setAttribute("disabled",true);
                op3Text.setAttribute("id","op3Text"+j);
                
                var op3 = document.createElement("input");
                op3.setAttribute("type","radio");
                op3.setAttribute("name",parts[0]);
                op3.setAttribute("onclick","colorize('op3Text"+j+"','"+rw3+"','"+parts[1]+"');");        

                var op4Text = document.createElement("input");
                op4Text.setAttribute("type","text");
                op4Text.setAttribute("value",parts[1]);
                op4Text.setAttribute("disabled",true);
                op4Text.setAttribute("id","op4Text"+j);
                
                var op4 = document.createElement("input");
                op4.setAttribute("type","radio");
                op4.setAttribute("name",parts[0]);
                op4.setAttribute("onclick","colorize('op4Text"+j+"','"+rw4+"','"+parts[1]+"');");        
                
                var op1B = document.createElement("input");
                op1B.setAttribute("value",">");
                op1B.setAttribute("type","button");
                op1B.style.width ="20px";
                op1B.setAttribute("onclick","alert('"+rk1+"');");        
                
                var op2B = document.createElement("input");
                op2B.setAttribute("value",">");
                op2B.setAttribute("type","button");
                op2B.style.width ="20px";
                op2B.setAttribute("onclick","alert('"+rk2+"');");        

                var op3B = document.createElement("input");
                op3B.setAttribute("value",">");
                op3B.setAttribute("type","button");
                op3B.style.width ="20px";
                op3B.setAttribute("onclick","alert('"+rk3+"');");        

                var op4B = document.createElement("input");
                op4B.setAttribute("value",">");
                op4B.setAttribute("type","button");
                op4B.style.width ="20px";
                op4B.setAttribute("onclick","alert('"+rk4+"');");        
                
                var options = {1:op1,2:op2,3:op3,4:op4};
                var optionsText = {1:op1Text,2:op2Text,3:op3Text,4:op4Text};
                var optionsB = {1:op1B,2:op2B,3:op3B,4:op4B};
                
                
                for(var g=1;g<5;g++){
                    
                    var rx1 = Math.floor((Math.random()*10)+1) % 5;
                    if(rx1==0) rx1++;
                    var rx2 = rx1+1;
                    if(rx2==5) rx2=1;

                    if(rx1!=rx2){

                    var tmp1 = options[rx1];
                        var tmp2 = options[rx2];
                        options[rx1] = tmp2;
                        options[rx2] = tmp1;
                        
                        var tmp1t = optionsText[rx1];
                        var tmp2t = optionsText[rx2];
                        optionsText[rx1] = tmp2t;
                        optionsText[rx2] = tmp1t;
                        
                        var tmp1b = optionsB[rx1];
                        var tmp2b = optionsB[rx2];
                        optionsB[rx1] = tmp2b;
                        optionsB[rx2] = tmp1b;
                        
                        
                    }
                    
                }
                
                for(var g=1;g<5;g++){
                
                optionsText[g].style.backgroundColor ="white";
                    optionsText[g].style.color ="black";
                    optionsText[g].setAttribute("class","widthInput");
                    optionsB[g].style.backgroundColor ="blue";
                    optionsB[g].style.color ="white";
                    
                    li.appendChild(options[g]);
                    li.appendChild(optionsText[g]);
                    li.appendChild(optionsB[g]);
                    li.appendChild(document.createElement("br"));                   
                   
                }
                var btnSonraki = document.createElement("button");
                //btnSonraki.style.width ="240px";
                btnSonraki.innerHTML ="sonraki";
                btnSonraki.setAttribute("onclick","startTimer(0);");    
                btnSonraki.setAttribute("class","widthInput");
                
                li.appendChild(btnSonraki);
                
            }    

            startTimer(0);
    });
});

function colorize(item,str1,str2){
    if(str1==str2){
        document.getElementById(item).style.backgroundColor="green";
        
    }else{
        document.getElementById(item).style.backgroundColor="red";
    }     
    document.getElementById(item).style.color="white";        
}

$(document).ready(function(){
    $("#btnSonuclar").click(function(){
        var dogruSayisi =0;
        var yanlisSayisi =0;
        var hamleSayisi = 0;
        var inputs = document.getElementById("divKelimeler").getElementsByTagName("input");
        for(var j=0;j<inputs.length;j++){
            //alert(inputs[j].innerHTML);
            
            if(inputs[j].type=="text"){
                hamleSayisi++;
            }
            
            if(inputs[j].style.backgroundColor=="green"){
                dogruSayisi++;
            }
            if(inputs[j].style.backgroundColor=="red"){
                yanlisSayisi++;
            }
        }
        var skor = Math.floor( 100* ( (dogruSayisi*3-yanlisSayisi) / (hamleSayisi*3/4) ) );
        alert("SORU SAYISI: "+hamleSayisi/4 + "\nDOGRU YANIT:"+dogruSayisi+"\nYANLIS TIKLAMA:"
+yanlisSayisi+"\nSKOR:%"+skor);
        
    });
});

$(document).ready(function(){
        $("#btnKelimeGosterGizle").click(function(){
        
            var myEl = document.getElementById("divKelimeKaydet");
            var myEl2 = document.getElementById("btnKaydet");

            var myEl3 = document.getElementById("btnKelimeGosterGizle");
        
            var vis = document.getElementById("divKelimeKaydet").style.visibility;
        
            if(myEl.style.visibility == "hidden"){
                //show
                myEl.style.visibility = "visible";
                //myEl.style.float ="none";
                myEl2.style.visibility = "visible";
                myEl3.style.width= "120px";//+Math.floor(myEl3.style.width/2);
                
            }else{
                myEl.style.visibility = "hidden";
                //myEl.style.float ="center";                
                myEl2.style.visibility = "hidden";
                myEl3.style.width="240px";//+Math.floor(myEl3.style.width*2);

            }
        
    });
});

$(document).ready(function(){
      var words = getCookie('kelimeCalisWords');
      if(words == undefined){
      words = "call:çagirmak\nread:okumak\nselect:seçmek\nperfect:mükemmel\ncomment:açiklama\nignite:ateslemek";
      setCookie('kelimeCalisWords',words,21);
      }
  document.getElementById("taKelimeler").value = words;    
});


function startTimer(idx){
    $('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
    //$('#ticker li:first').slideUp();

    //var tickerList = document.getElementById("ticker");
    //var tickerListItems = document.getElementsByTagName("li");
    //var len = tickerListItems.length;
    //if(len-1==idx) {alert('sorular bitti.'); return;}
    
    //for(var i=0;i<len;i++){
    //    tickerListItems[i].style.visibility = "hidden";
    //}
    //tickerListItems[idx].style.visibility = "visible";
    
    //idx++;
    //setInterval(function(){ startTimer ((idx)) }, 2000);
}

function ilerlet(){
    
}


</script>

<style>
button
{
    background:purple;
    color:white;
    width:118px;
    margin:0px;
    padding:0px;
}
#ticker {
    height: 160px;
    overflow: hidden;
}
#ticker li {
    height: 160px;
}

.widthInput{
    width:500px;
}


</style>

</head>
<body>
<div>
    <button id="btnKelimeGosterGizle">Göster/Gizle</button>
    <button id="btnKaydet">Kelimeleri Kaydet</button>
</div>
<div id="divKelimeKaydet">
    <textarea rows="8" cols="40" id="taKelimeler" class="widthInput" ></textarea>
</div>
<div id="divKelimeGoster">
<button id="btnGoster">Kelimeleri Göster</button>
<button id="btnSonuclar">Sonuç Hesapla</button>


<div id="divKelimeler">

</div>

</div>
<div id="divSkor"></div>
</body>
</html>

One thought on “JavaScript ile Kelime Çalisma Programi”

  1. girilen bir cümlenin kac farkli sayida kelimelerden olustugunu yapan program

    örnegin,
    cumle giriniz:bu bir örnek 
    bu:1 // yani 1 tane bu kelimesi cumlede geciyor.
    bir:1
    örnek:1
    Cevapla

Guests için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir