हमारी कक्षा की सीट व्यवस्था को एक ऑनलाइन गेम की तरह बनाना - Seat Stealer

 (seat-admin.coupy.dev)
25 पॉइंट द्वारा coupy1024 2025-01-01 | 4 टिप्पणियां | WhatsApp पर शेयर करें

पृष्ठभूमि

  • हाई स्कूल के दिनों में, उबाऊ और झंझट भरी सीट व्यवस्था को मज़ेदार बनाकर देखने की इच्छा से शुरू किया गया एक साइड प्रोजेक्ट
  • ऐसा प्लान कि छात्र अपने-अपने डिवाइस से सीधे भाग लें और अपनी मनचाही सीट के लिए मुकाबला करें
  • उस समय छात्र सूची भी hardcoding की गई थी, और कोड पूरी तरह spaghetti बन चुका था, लेकिन फिर भी एक काफ़ी बढ़िया परिणाम निकला
  • क्लास टीचर से अनुमति लेकर पहली बार डेमो दिखाया था, वह दिन आज भी नहीं भूलता। प्रतिक्रिया बेहद शानदार थी, और यह प्रोजेक्ट पूरे साल इस्तेमाल हुआ

पुनर्निर्माण

  • ग्रेजुएशन के बाद स्कूल से संपर्क आया। अनुरोध था कि इस प्रोग्राम को मौजूदा क्लास के हिसाब से संशोधित किया जाए।
  • लेकिन कोड बहुत उलझा हुआ था, और छात्र सूची व सीट व्यवस्था hardcoding की गई थीं, इसलिए maintainable प्रोजेक्ट के लिए इसे फिर से बनाने का फैसला किया
  • संरचना
    • बैकएंड: सभी छात्र डेटा को क्लाइंट पर ही प्रोसेस करने के लिए, बैकएंड सिर्फ डेटा पहुँचाने वाले एक तरह के 'game server' की भूमिका निभाता है।
      • Node.JS
      • Socket.IO
    • फ्रंटएंड - एडमिन: सभी छात्र डेटा को मैनेज करता है और गेम की पूरी प्रगति को नियंत्रित करता है। यह स्क्रीन TV पर दिखाए जाने वाले माहौल को ध्यान में रखकर डिज़ाइन की गई है।
      • SvelteKit
      • Socket.IO
    • फ्रंटएंड - छात्र: बैकएंड के ज़रिए एडमिन से जुड़कर डेटा भेजते और प्राप्त करते हैं।
      • SvelteKit
      • Socket.IO
  • सीट व्यवस्था और छात्र सूची को आसानी से संशोधित किया जा सके, इसके लिए एक आसान UI वाला एडिटर जोड़ा गया।

परिदृश्य

  1. एडमिन पेज पर "ऑनलाइन सीट व्यवस्था" शुरू करके छात्र डेटा फ़ाइल अपलोड करने पर एक नया 'room' बनता है और छात्रों के जुड़ने के लिए QR code दिखाई देता है।
  2. छात्र अपने-अपने डिवाइस से QR code स्कैन करके गेम में जुड़ते हैं। एडमिन पेज पर छात्र कनेक्शन की स्थिति देखना और प्रबंधन करना संभव है।
  3. एडमिन पेज पर गेम शुरू करने पर छात्र पेज में 'सीट चयन' स्क्रीन दिखाई देती है। मनचाही सीट पर वोट करने पर उसका रिकॉर्ड एडमिन पेज पर दर्ज होता है।
  4. सभी छात्र वोट पूरा कर लें, तो एडमिन पेज पर परिणाम दिखाया जाता है।
  5. जिन छात्रों ने एक ही सीट चुनी हो, वे वहीं पर एक छोटा-सा गेम खेलते हैं
    • rock-paper-scissors, पासा, mini-game आदि, यह शिक्षक के विवेक पर निर्भर है
  6. गेम में जीतने वाला छात्र उस सीट पर कब्ज़ा करता है।
  7. यह प्रक्रिया तब तक दोहराई जाती है जब तक सभी छात्रों को सीटें आवंटित नहीं हो जातीं

अनुभव

  • छात्र डेटा न तो इकट्ठा किया जाता है और न ही उसका उपयोग किया जाता है, इसे पारदर्शी रूप से बताने के लिए प्रोजेक्ट को open source किया गया।
  • क्योंकि इसे स्कूल में चलाने को ध्यान में रखकर बनाया गया है, इसलिए हर तरह की exception स्थिति को संभालने लायक डिज़ाइन करना सबसे कठिन था।
    • अगर किसी छात्र का कनेक्शन गेम के बीच में टूट जाए, तो reconnect की कोशिश की जाती है, और अगर वह असफल हो जाए तो दोबारा लॉगिन करने पर वहीं से जारी रखना संभव है।
    • अगर कोई छात्र अनुपस्थित हो, तब भी उसके बिना गेम आगे बढ़ सकता है।
    • अगर कोई छात्र देर से आए, तो वह गेम के बीच में जुड़कर भी आगे भाग ले सकता है।
    • अगर कोई दूसरे छात्र की पहचान का दुरुपयोग करे, तो उसे तुरंत बाहर किया जा सकता है।
  • अलग-अलग कक्षाओं में भी इसका उपयोग हो सके, इसके लिए एक आसान user guide बनाकर YouTube पर प्रकाशित की गई।
  • अभी छुट्टियों का सीज़न होने की वजह से प्रोजेक्ट का परिणाम अभी तक नहीं देख पाया हूँ, इसलिए यह पहली बार था जब मैं उस वसंत सत्र का इंतज़ार करने लगा जिसका मैंने कभी इंतज़ार नहीं किया था।
  • अगर आपके आसपास कोई शिक्षक हों, तो कृपया इसे उनके साथ साझा करें। धन्यवाद।

संबंधित पढ़ाई

4 टिप्पणियां

 
seoulrain 2025-02-02

Chrome में छात्र का नाम जोड़ने पर भी काउंट नहीं बढ़ रहा है।
 
2147483647 2025-01-02

सभी नाम लिखना असुविधाजनक हो सकता है, इसलिए अगर इसे सिर्फ नंबरों से बदला जा सके तो अच्छा होगा
 
joon14 2025-01-02

काफ़ी क्यूट है haha
कुछ छोटे-छोटे सुधार के पॉइंट दिख रहे हैं, लेकिन मैं इसे आसपास के शिक्षकों के साथ शेयर करूँगा
 
geeksk553 2025-01-02

काफ़ी मज़ेदार आइडिया है!