Javascript

Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız

Yeni bir Yenilikçi Eğitim makalesinde sizlerle beraberiz.

İlkokulda öğrencilerin matematik dersinde gördükleri ve daha sonraki tüm eğitimlerinde kullandıkları toplama işlemi ile ilgili alıştırmaları program yardımı ile çocuklara sevdirebilirsiniz. Bu uygulamada öğrencinin rastgele seçilen sayıları toplama alıştırmaları yapılmaktadır. Sorulara verdiği cevaplar doğru ve yanlış olarak hesaplanmaktadır.

Şimdi uygulamamızı yapalım.

<!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">

  <head>

 

    <title>Toplama İşlemi Alıştırmaları</title>

    <style type="text/css">

        .style2

        {

            width: 500px;

            padding: 5px;

            margin: 5px;

            background-color: Silver;

        }

    </style>

 

    <script type="text/javascript">

    //<![CDATA[

 

 

        function sayiuret(x) {

            var a = document.getElementsByName("a");

            var b1;

            var b = document.getElementsByName("b");

            var b2;

 

            for (var i = 0; i < a.length; i++) {

 

                if (a[i].checked) {

 

                    b1 = parseInt(b[i].value);

 

                    break;

 

                }

 

            }

 

            for (var i = 0; i < b.length; i++) {

 

                if (b[i].checked) {

 

                    b2 = parseInt(b[i].value);

 

                    break;

 

                }

 

            }

 

                    var s1 = document.getElementById("tsayi1");

                    var s2 = document.getElementById("tsayi2");

                    var topla = document.getElementById("tsonuc");

                    var cevap = document.getElementById("tcevap");

                    var btn1 = document.getElementById("Button2");

                    var btn2 = document.getElementById("Button1");

                    var resim = document.getElementById("tresim");

                    var hata = document.getElementById("hata");

                    tcevap.value = "";

                    resim.src = "";

                    hata.innerHTML = "";

                    btn1.disabled = true;

                    btn2.disabled = false;

 

                    if (b1 == 1)

                        a = Math.floor(Math.random() * 9 + 0);

                    else if (b1 == 2)

                        a = Math.floor(Math.random() * 89 + 10);

                    else if (b1 == 3)

                        a = Math.floor(Math.random() * 899 + 100);

                    else if (b1 == 4)

                        a = Math.floor(Math.random() * 8999 + 1000);

 

                    if (b2 == 1)

                        b = Math.floor(Math.random() * 9 + 0);

                    else if (b2 == 2)

                        b = Math.floor(Math.random() * 89 + 10);

                    else if (b2 == 3)

                        b = Math.floor(Math.random() * 899 + 100);

                    else if (b2 == 4)

                        b = Math.floor(Math.random() * 8999 + 1000);

 

                    s1.innerHTML = a;

                    s2.innerHTML = b;

                    topla.innerHTML = a + b;

                    cevap.focus();

 

        }

 

        function kontrol() {

            var sayi1 = document.getElementById("tsayi1");

            var sayi2 = document.getElementById("tsayi2");

            var topla = document.getElementById("tsonuc");

            var cevap = document.getElementById("tcevap");

            var dogru = document.getElementById("tdogru");

            var yanlis = document.getElementById("tyanlis");

            var btn1 = document.getElementById("Button2");

            var btn2 = document.getElementById("Button1");

            var resim = document.getElementById("tresim");

            var hata = document.getElementById("hata");

 

            d = dogru.innerHTML;

            y = yanlis.innerHTML;

 

            if (sayi1.innerHTML == "" || sayi2.innerHTML == "") {

                hata.innerHTML = "Sayılar Seçilmedi";

                return;

            }

            if (cevap.value == "") {

                hata.innerHTML = "Dikkat! Cevap Vermediniz";

                return;

            }

 

            if (topla.innerHTML == cevap.value) {

                d++;

                resim.src = "image/gulenadam.jpg";

                hata.innerHTML = "Tebrikler! Bildiniz.";

            }

            else {

                y++;

                resim.src = "image/smilayadam.jpg";

                hata.innerHTML = "Üzgünüm! Bilemediniz.";

            }

 

            dogru.innerHTML = d;

            yanlis.innerHTML = y;

            btn1.disabled = false;

            btn2.disabled = true;

 

        }

    //]]>

    </script>

  </head>

  <body>

 

    <div class="tabContent" id="topla">

    <h2>Toplama İşlemi</h2>

        <table cellpadding="0" cellspacing="0" class="style2">

            <tr>

                <td width="100" align="center">

                    <label id="tsayi1" runat="server"></label>

                    </td>

                <td width="50" align="center">

                    +</td>

                <td width="100" align="center">

                    <label id="tsayi2" runat="server"></label>

                    </td>

                <td align="center" width="50">

                    <input id="Button1" type="button" value="=" onclick="kontrol()" /></td>

                <td colspan="2">

                    <input id="tsonuc" type="hidden" />

                    <input id="tcevap" type="text" /></td>

            </tr>

            <tr>

                <td colspan="2">

                    <input id="Button2" type="button" value="Sayı Üret" onclick="sayiuret(1)" /></td>

                <td>

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

                <td>

                    Doğru Sayısı</td>

                <td>

                    <label id="tdogru" runat="server"></label>

                    </td>

            </tr>

            <tr>

                <td>

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

                <td>

                    &nbsp;</td>

                <td width="125">

                    Yanlış Sayısı</td>

                <td>

                    <label id="tyanlis" runat="server"></label>

                    </td>

            </tr>

        </table>

 

    </div>

 

 

    <br />

      <table cellpadding="0" cellspacing="0" class="style1">

          <tr>

              <td rowspan="2" width="100">

                  <img alt="" src="image/hesapmakinesi.jpg" width="90" /></td>

              <td rowspan="3" valign="top" width="200">

                  Birinci Sayı<br />

                  <input id="Radio1" name="a" checked="checked" type="radio" value="1" />Tek Basamaklı<br />

                  <input id="Radio3" name="a" type="radio" value="2" />İki Basamaklı<br />

                  <input id="Radio4" name="a" type="radio" value="3" />Üç Basamaklı<br />

                  <input id="Radio5" name="a" type="radio" value="4" />Dört Basamaklı

                  </td>

              <td rowspan="3" valign="top" width="200">

                  İkinci Sayı<br />

                  <input id="Radio2" name="b" checked="checked" type="radio" value="1" />Tek Basamaklı<br />

                  <input id="Radio6" name="b" type="radio" value="2" />İki Basamaklı<br />

                  <input id="Radio7" name="b" type="radio" value="3" />Üç Basamaklı<br />

                  <input id="Radio8" name="b" type="radio" value="4" />Dört Basamaklı

                  </td>

              <td width="100">

                  <img id="tresim" runat="server" src="" alt="" width="90" /></td>

          </tr>

          <tr>

              <td rowspan="2" width="100">

                  <label id="hata" runat="server"></label>

                  </td>

          </tr>

      </table>

 

  </body>

</html>


İlgili Makaleler
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
İki Sayıyı Toplayan Programı Javascript Script Dilinde Kodlayınız
Web Sayfasının Arkaplan Rengini Değiştirme
Web Sayfalarına Yanıp Sönen Animasyonlu Tablo Ekleme
Form Nesnesi İçinde Kullanılan Elemanların Dinamik Kullanılması
Web Sayfasında JavaScript Kodlarıyla Tabloda Satıra Bilgi Girme
N adet ardışık tam kare sayıların toplamını bulan web sayfasını tasarlayınız
Girilen Beş Sayıdan En Büyüğünü Bulan Uygulamayı BootStrap Tema İle Tasarlayınız
Çarpım Sonucunun Karekökü Tam Alınanların Rengini Kahverengi Yapan Çarpım Tablosunu Hazırlama
Prompt Komutunu Kullanarak Tarayıcının Boyutunu Değiştirip Görüntüleyen Web Sayfasını Tasarlayınız
Belli Bir Süre Tarayıcı Ekranının Boyutunu Değiştiren Animasyon Uygulaması
Girilen Beş Sayının Ortalamasını Bulan Javascript Uygulaması
Web Sayfasında JavaScript Kodlarıyla Tabloya Satır ve Sütün Ekleme
Javascript Uygulamasında Xml Dosyasını Yeni Pencerede Gösterme

Yorum Ekle
   
Kötü İyi