एक अनुकूली नेक्स्ट-लेसन UI बनाएं
ऐसा कंटेंट जो खुद को ढाले
सबसे अच्छी सीख वही होती है जो हर छात्र की जरूरत के हिसाब से मिले। जिस छात्र ने क्विज़ में अच्छा किया, उसे चुनौती चाहिए; जो संघर्ष करता रहा, उसे दोबारा अभ्यास चाहिए। इस लेसन में आप एक अनुकूली 'अनुशंसित अगला लेसन' UI बनाएंगे जो प्रदर्शन के आधार पर रास्ता सुझाता है।
आप तीन लेबल वाले रिकमेंडेशन कार्ड बनाएंगे — हर प्रदर्शन स्तर के लिए एक: जिन छात्रों को और अभ्यास चाहिए उनके लिए रिव्यू पाथ, सही रफ़्तार से चल रहे छात्रों के लिए स्टेडी पाथ, और उच्च प्रदर्शन करने वालों के लिए स्ट्रेच पाथ। स्पष्ट लेबल और रंग संकेत सही विकल्प को एकदम साफ़ कर देते हैं।
यहीं पर AI से बना कंटेंट अपनी असली ताकत दिखाता है — कोई भी दो छात्र बिल्कुल एक जैसा अगला कदम नहीं देखते। चरणों का पालन करें और देखें कैसे आपका अनुकूली UI तैयार होता है।
निर्देश
पेज पर 'Recommended Next Lesson' शीर्षक और एक छोटी सबटाइटल लाइन जोड़ें जो बताए कि पाथ खुद को ढालता है।
संकेत: `<h1 class="text-3xl font-bold">Recommended Next Lesson</h1>` का उपयोग करें, उसके बाद एक `<p>` सबटाइटल लिखें।
इसे कहाँ लिखें?
<!-- Build your adaptive recommendation UI here -->इसे लाइन 11 पर लिखें — उस टिप्पणी के नीचे, पहले जोड़े गए कोड के बाद।
तीन रिकमेंडेशन कार्ड रखने के लिए एक रेस्पॉन्सिव ग्रिड कंटेनर बनाएं।
तीन rounded-xl कार्ड जोड़ें, हर एक में प्रदर्शन स्तर का लेबल span हो (जैसे 'Needs Review')।
हर कार्ड में एक कॉल-टू-एक्शन बटन दें ताकि छात्र उस पाथ को शुरू कर सके।
आपका कोड
इस स्टेप के लिए आप जो बनाना चाहते हैं उसे बताएं और मैं कोड लिख दूंगा — फिर इसे अपने एडिटर में डालने के लिए Apply पर क्लिक करें। यह स्टेप: पेज पर 'Recommended Next Lesson' शीर्षक और एक छोटी सबटाइटल लाइन जोड़ें जो बताए कि पाथ खुद को ढालता है।