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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://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
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
RadioButton Yardımıyla Resim Galerisi Oluşturan Web Sayfasını Javascript Kodlarıyla Tasarlama
2020 TYT Matematik Para Makinesiyle İlgili Sorunun Çözümünü Javascript Diliyle Kodlama
Bölme İşaretini Kullanmadan İki Sayıyı Bölen Programı Javascript Script Dilinde Yapınız
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
Mart 2024 Yerel Seçimlerini Baklava Grafikle Gösteren Core Mvc Jquery Web Uygulaması
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Bölme İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Yayınlanan Web Service Hizmetini Terminal Tabanlı Web Sayfasında Kullanma
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama1
Form Nesnesi İçinde Kullanılan Elemanların Dinamik Kullanılması
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
Video Açıkken Yeni Sekme Açıldığında ya da Tarayıcı Simge Durumuna Getirildiğinde Javascript Kodlarıyla Videoyu Durdurma İşlemi
Web Sayfasında Farenin Sağ Tuşunun Kullanımını Engelleme

Yorum Ekle
   
Kötü İyi