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>
</td>
<td>
</td>
<td>
Doğru Sayısı</td>
<td>
<label id="tdogru" runat="server"></label>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</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>