सीधे कंटेंट पर जाएँ

एक गेमिफाइड लेसन कार्ड बनाएं

शुरुआती~12 मिनट0/4 चरण

अपने कंटेंट को गेम बनाएं

जब सीखना किसी खेल जैसा लगता है, तो छात्र ध्यान देते हैं। पॉइंट्स, प्रगति और एक स्पष्ट चुनौती एक साधारण लेसन को कुछ ऐसा बना देती है जिसे पूरा करना ज़रूरी लगे। इस लेसन में आप AI को अपना साथी बनाकर एक गेमिफाइड लेसन कार्ड बनाएंगे।

आप तीन हिस्से जोड़ेंगे जो हर बेहतरीन गेम UI में होते हैं: एक पॉइंट्स बैज जो मेहनत को पुरस्कृत करता है, एक प्रोग्रेस बार जो दिखाता है कि छात्र कितना आगे आया है, और एक चैलेंज कार्ड जो उन्हें एक लक्ष्य देता है। लेसन के अंत में आपके पास एक ऐसा कॉम्पोनेंट होगा जिसे आप किसी भी लेसन में इस्तेमाल कर सकते हैं।

याद से परफेक्ट कोड लिखने की चिंता न करें। हर स्टेप को फॉलो करें, हिंट्स की मदद लें, और लाइव प्रीव्यू से पुष्टि करें कि आप सही रास्ते पर हैं।

निर्देश

1

लेसन कार्ड कंटेनर बनाएं: एक div जिसमें rounded-xl कोने, पैडिंग और गहरा gray-800 बैकग्राउंड हो।

संकेत: इस्तेमाल करें: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`

इसे कहाँ लिखें?

<!-- Build your gamified lesson card here -->

इसे लाइन 11 पर लिखें — उस टिप्पणी के नीचे, पहले जोड़े गए कोड के बाद।

2

एक पॉइंट्स बैज जोड़ें — एक span जिसमें चमकीला पीला बैकग्राउंड हो और छात्र का स्कोर दिखे।

3

एक प्रोग्रेस बार जोड़ें: एक ग्रे ट्रैक div जिसके अंदर एक निश्चित चौड़ाई वाला हरा फिल div हो।

4

एक चैलेंज कार्ड जोड़ें जिसमें हेडिंग टेक्स्ट "Today's Challenge" हो और छात्र के लिए एक छोटा लक्ष्य हो।

आपका कोड

html
13 लाइनें
1
2
3
4
5
6
7
8
9
10
11
12
13

Live Preview

Live Preview