Akıllı Tahta İçin Dijital Çarkıfelek Yapımı (Sınıf İçi Soru-Cevap Uygulaması)
Akıllı Tahta İçin Dijital Çarkıfelek Yapımı (Sınıf İçi Soru-Cevap Uygulaması)
Sınıfta soru sorarken hep aynı parmaklar mı kalkıyor? Dersleri daha eğlenceli ve adil hale getirmeye ne dersiniz? Sadece basit not defteri komutlarıyla, akıllı tahtada çalıştırabileceğiniz tamamen size özel bir dijital şans çarkı (öğrenci seçici) yapıyoruz!
Sınıf yönetiminde oyunlaştırma (gamification), öğrencilerin derse olan odağını ve motivasyonunu canlı tutmanın en etkili yoludur. Özellikle soru-cevap etkinliklerinde veya tahtaya öğrenci kaldırırken bir “şans çarkı” kullanmak, sınıftaki heyecanı zirveye çıkarır. İnternetteki reklam dolu sitelerle uğraşmak yerine, kendi yerli ve reklamsız çarkıfelek uygulamanızı yapmaya hazır mısınız?
Bu rehberde, tek bir satır program indirmeden, bilgisayarınızdaki Not Defteri’ni kullanarak nasıl interaktif bir web uygulaması yapacağınızı adım adım anlatıyoruz.
Adım 1: Not Defterini Açın
Bilgisayarınızın arama çubuğuna Not Defteri (Notepad) yazın ve boş bir belge açın.
Adım 2: Aşağıdaki Kodları Yapıştırın
Aşağıdaki HTML, CSS ve JavaScript karması kod bloğunu tamamen kopyalayın ve açtığınız boş Not Defteri sayfasına yapıştırın:
<html lang=”tr”>
<head>
<meta charset=”UTF-8″>
<title>Bilişim Adası – Sınıf Çarkıfeleği</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #f0f2f5; padding: 20px; }
.container { max-width: 500px; margin: auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
h1 { color: #27ae60; }
textarea { width: 100%; height: 100px; margin-bottom: 15px; border-radius: 6px; border: 1px solid #ccc; padding: 10px; }
button { background: #27ae60; color: white; border: none; padding: 12px 25px; font-size: 18px; border-radius: 6px; cursor: pointer; width: 100%; }
button:hover { background: #219653; }
#sonuc { font-size: 28px; font-weight: bold; color: #e74c3c; margin-top: 25px; min-height: 40px; padding: 10px; border-radius: 6px; }
</style>
</head>
<body>
<div class=”container”>
<h1>🎯 Şanslı Öğrenci Seçici</h1>
<p>Öğrenci isimlerini her satıra bir tane gelecek şekilde yazın:</p>
<textarea id=”ogrenciler” placeholder=”Ahmet Mehmet Ayşe Fatma”></textarea>
<button onclick=”kuraCek()”>🎲 Çarkı Çevir (Seç)</button>
<div id=”sonuc”></div>
</div>
<script>
function kuraCek() {
var kutu = document.getElementById(“ogrenciler”).value.trim();
if(!kutu) { alert(“Lütfen önce isim ekleyin!”); return; }
var liste = kutu.split(“\n”);
var sonucDiv = document.getElementById(“sonuc”);
sonucDiv.innerHTML = “Dönüyor… 🔄”;
var sayac = 0;
var t = setInterval(function(){
var rastgele = liste[Math.floor(Math.random() * liste.length)];
sonucDiv.innerHTML = rastgele;
sayac++;
if(sayac > 15) {
clearInterval(t);
sonucDiv.innerHTML = “🎉 Şanslı Öğrenci: ” + rastgele;
}
}, 100);
}
</script>
</body>
</html>
Adım 3: Dosyayı Kaydedin ve Çalıştırın
Kodları yapıştırdıktan sonra can alıcı adıma geçiyoruz. Dosyanın bir web sayfası gibi çalışması için uzantısını değiştirmeliyiz:
- Sol üstteki Dosya > Farklı Kaydet seçeneğine tıklayın.
- Kayıt türünü “Tüm Dosyalar (*.*)” olarak değiştirin.
- Dosya adına carkifelek.html yazın ve masaüstünüze kaydedin.
Artık masaüstünüzde oluşan bu dosyaya çift tıkladığınızda, Google Chrome veya Edge üzerinde çalışan, sınıfa özel harika bir kura programına sahip olacaksınız! Sınıf listenizi kutuya yapıştırıp butona basmanız yeterli.
Bilişim Adası Tavsiyesi
Hazırladığınız bu .html uzantılı dosyayı flash belleğinize atarak internet bağlantısı olmayan köy okullarında veya akıllı tahtalarda dahi sorunsuz bir şekilde açıp kullanabilirsiniz. Teknolojik çözümleri en basit ve pratik haliyle üretmeye devam edeceğiz!
1
0
207
20
