Sınıfımızın oturma düzenini çevrim içi oyun gibi yapmak - Seat Stealer

Arka plan

• Lise yıllarımda, zahmetli ve sıkıcı oturma düzeni belirleme işini eğlenceli hale getirmek istememle başlayan bir yan proje
• Öğrencilerin kendi cihazlarıyla doğrudan katılıp istedikleri koltuk için mücadele ettiği bir kurgu
• O zamanlar öğrenci listesi de hardcoded idi ve kod tamamen spagettiye dönmüştü, ama yine de oldukça düzgün bir çıktı ortaya çıkmıştı
• Sınıf öğretmenimden izin alıp ilk kez gösterdiğim günü unutamıyorum. Tepki çok büyüktü ve proje bir yıl boyunca kullanılmaya devam etti

Yeniden inşa

• Mezun olduktan sonra okuldan bana ulaşıldı. Programın mevcut sınıfa uygun olacak şekilde güncellenmesi isteniyordu.
• Ancak kod fazla karışıktı ve öğrenci listesi ile oturma düzeni hardcoded olduğu için, sürdürülebilir bir proje yapmak amacıyla yeniden inşa etmeye karar verdim
• Yapı
  • Backend: Tüm öğrenci verilerini istemci tarafında işlemek için backend yalnızca veriyi ileten bir tür "oyun sunucusu" rolünü üstleniyor.
    • Node.JS
    • Socket.IO
  • Frontend - admin: Tüm öğrenci verilerini yönetiyor ve oyunun akışını genel olarak kontrol ediyor. Bu ekranın TV'ye yansıtıldığı bir ortam varsayılarak tasarlandı.
    • SvelteKit
    • Socket.IO
  • Frontend - öğrenci: Backend üzerinden admin ile bağlanıp veri alışverişi yapıyor.
    • SvelteKit
    • Socket.IO
• Oturma düzeni ve öğrenci listesini kolayca düzenleyebilmek için kullanıcı dostu arayüze sahip bir editör eklendi.

Senaryo

1. Admin sayfasında "çevrim içi oturma düzeni" başlatılıp öğrenci veri dosyası yüklendiğinde yeni bir "oda" oluşturuluyor ve öğrencilerin bağlanabileceği bir QR kodu görünüyor.
2. Öğrenciler kendi cihazlarıyla QR kodunu tarayıp oyuna katılıyor. Admin sayfasında öğrencilerin bağlantı durumu izlenip yönetilebiliyor.
3. Admin sayfasında oyun başlatıldığında öğrenci sayfasında "koltuk seçimi" ekranı açılıyor. İstenen koltuk için oy verildiğinde bu admin sayfasına kaydediliyor.
4. Tüm öğrenciler oy vermeyi tamamladığında admin sayfasında sonuçlar gösteriliyor.
5. Aynı koltuğu seçen öğrenciler kendi aralarında sınıfta kısa bir oyun oynuyor
   • Taş kağıt makas, zar, mini oyunlar vb.; öğretmenin takdirine bağlı
6. Oyunu kazanan öğrenci ilgili koltuğu alıyor.
7. Tüm öğrencilere yer verilene kadar bu süreç tekrarlanıyor

Notlar

• Öğrenci verilerinin toplanmadığını veya kullanılmadığını şeffaf biçimde göstermek için projeyi açık kaynak yaptım.
• Okulda çalıştırılacağı varsayıldığı için, çeşitli istisna durumların tümüne yanıt verecek şekilde tasarlamak en zor kısımdı.
  • Bir öğrencinin oyun sırasında bağlantısı koparsa yeniden bağlanmayı dener; bu başarısız olursa tekrar giriş yaptığında kaldığı yerden devam edebilir.
  • Bir öğrenci devamsızsa, katılmasa bile oyun ilerleyebilir.
  • Bir öğrenci geç kalırsa, oyun sırasında bağlansa bile devam edebilir.
  • Başka bir öğrencinin kimliğini taklit etme durumunda, sistemden atılabilir.
• Farklı sınıflarda da kullanılabilmesi için anlaşılır bir kullanım kılavuzu hazırlayıp YouTube'a yükledim.
  • https://youtu.be/C4ezwIrIfjc
• Henüz tatil dönemi olduğu için projenin sonucunu göremedim; bu da hayatımda ilk kez bahar dönemini beklememe neden oldu.
• Çevrenizde öğretmen varsa lütfen paylaşın. Teşekkürler.

[seoulrain]

Chrome’da öğrenci adlarını eklesem de sayı artmıyor.

[2147483647]

Tüm isimleri yazmak zahmetli olabileceğinden, yalnızca numaralara dönüştürülebilse iyi olurdu.

[joon14]

Çok tatlı olmuş haha
Ufak tefek düzeltme noktaları göze çarpıyor ama bunu çevremdeki öğretmenlerle paylaşacağım

[geeksk553]

Eğlenceli bir fikir!