## चरण 1: आवश्यकताओं का संग्रह (प्रश्नावली आधारित, टाइपिंग की आवश्यकता नहीं)

उपयोगकर्ता सीखने की प्रोफाइल को askUserQuestion के दो दौरों के माध्यम से एकत्र किया जाता है।

### पहला चरण (मुख्य जानकारी)

askUserQuestion का उपयोग करके आप निम्नलिखित तीन आयामों में एक साथ प्रश्न पूछ सकते हैं:

1. **अधिगम उद्देश्यों के प्रकार**

- शीर्षक: "लक्ष्य"

विकल्प: परीक्षा की तैयारी / कौशल विकास / करियर परिवर्तन / रुचियों का अन्वेषण

2. **वर्तमान स्तर**

- शीर्षक: "क्षैतिज"

- विकल्प: शून्य अनुभव / शुरुआती (अवधारणाओं को समझते हैं) / कुछ अनुभव (सरल कार्यों को पूरा कर सकते हैं) / उन्नत (बाधाओं को दूर करने की आवश्यकता है)

3. **प्रतिदिन उपलब्ध समय**

- शीर्षक: "समय"

विकल्प: 30 मिनट से कम / 1-2 घंटे / 2-4 घंटे / 4 घंटे से अधिक

### दूसरा चरण (पूरक जानकारी)

askUserQuestion का उपयोग करके आप निम्नलिखित तीन आयामों में एक साथ प्रश्न पूछ सकते हैं:

1. **विशिष्ट शिक्षण दिशा-निर्देश** (उपयोगकर्ताओं को स्वतंत्र रूप से इनपुट करने की अनुमति देता है)

- उपयोगकर्ताओं को प्रश्न में रुचि के विशिष्ट क्षेत्रों को इनपुट करने के लिए मार्गदर्शन करें, जैसे: पायथन प्रोग्रामिंग, आईईएलटीएस 7, सीपीए परीक्षा, यूआई डिजाइन, आदि।

- शीर्षक: "दिशा"

- विकल्प: चुनने के लिए कई लोकप्रिय उदाहरण प्रदान करता है, साथ ही उपयोगकर्ताओं को कस्टम सामग्री दर्ज करने की अनुमति भी देता है।

2. **अनुमानित पूर्णता अवधि**

- शीर्षक: "अवधि"

विकल्प: 1 महीने का त्वरित विकास / 3 महीने की स्थिर प्रगति / 6 महीने का गहन विकास / 1 वर्ष से अधिक का दीर्घकालिक विकास

3. **सीखने की प्राथमिकताएँ** (एकाधिक विकल्प संभव हैं)

- शीर्षक: "वरीयताएँ"

- मल्टीसेलेक्ट: सही

विकल्प: वीडियो पाठ्यक्रम / पुस्तक पठन / व्यावहारिक परियोजनाएं / सामुदायिक संपर्क

डेटा संग्रह पूरा हो जाने के बाद, सभी जानकारी को एक संरचित "शिक्षार्थी प्रोफ़ाइल" में व्यवस्थित किया जाएगा, जिसका उपयोग बाद के चरणों में किया जाएगा।

## चरण 2: गहन संसाधन खोज और पथ नियोजन

### 2.1 संसाधन खोज

उपयोगकर्ता की सीखने की दिशा और प्राथमिकताओं के आधार पर, Google खोज का उपयोग करके 2-3 खोजें करें:

1. **इस क्षेत्र में सर्वश्रेष्ठ शिक्षण पद्धति की खोज करें**

- प्रश्न: "[सीखने की दिशा] सीखने का रोडमैप 2024-2025" या "[सीखने की दिशा] अनुशंसित सीखने का रोडमैप"

- निष्कर्षण: चरण विभाजन, मुख्य ज्ञान बिंदु, सीखने का क्रम

2. **विशिष्ट शिक्षण संसाधनों की खोज करें**

- उपयोगकर्ता की प्राथमिकताओं के आधार पर प्रासंगिक संसाधनों की खोज करें:

- वीडियो कोर्स: Coursera/Udemy/Bilibili पर लोकप्रिय कोर्स खोजें

- पुस्तकें: डौबन/अमेज़न की अनुशंसित पठन सूचियों में उच्च रेटिंग वाली पुस्तकों की खोज करें।

- व्यावहारिक परियोजनाएं: GitHub/practical tutorials पर खोजें

- क्वेरी: "[सीखने की दिशा] सर्वश्रेष्ठ [संसाधन प्रकार] शुरुआती/मध्यवर्ती/उन्नत"

3. **खोज मीलस्टोन मानक**

- प्रश्न: "[अधिगम क्षेत्र] कौशल मूल्यांकन चेकलिस्ट" या "[अधिगम क्षेत्र] योग्यता मूल्यांकन मानक"

- निष्कर्षण: प्रत्येक चरण में किस स्तर को प्राप्त किया जाना चाहिए?

### 2.2 पथ नियोजन

खोज परिणामों और उपयोगकर्ता प्रोफाइल के आधार पर, सीखने का मार्ग निर्धारित करें:

**चरण-आधारित सिद्धांत:**

उपयोगकर्ता की अपेक्षित सीखने की समयसीमा के आधार पर, सीखने की प्रक्रिया को 3-5 चरणों में विभाजित करें।

- प्रत्येक चरण में शामिल हैं: चरण का नाम, अनुमानित अवधि, मुख्य उद्देश्य, विशिष्ट संसाधन (3-5), और मील के पत्थर के चेकपॉइंट।

- संसाधन खोज के माध्यम से प्राप्त किए गए वास्तविक संसाधन होने चाहिए (नाम, प्लेटफ़ॉर्म और लिंक सहित)।

- उपलब्धियों को विशिष्ट क्षमताओं का सत्यापन योग्य विवरण होना चाहिए।

**समय आवंटन के सिद्धांत:**

- प्रतिदिन उपलब्ध समय के आधार पर प्रत्येक चरण के लिए कुल अध्ययन घंटों की गणना करें।

- सप्ताह के लिए सुझाए गए कार्यक्रम (कार्यदिवस बनाम सप्ताहांत) प्रदान करें।

- 10% अतिरिक्त समय आरक्षित रखें

**आउटपुट प्रारूप (आंतरिक डेटा संरचना, चरण 3 को भेजी गई):**

```

शिक्षार्थी प्रोफ़ाइल: {लक्ष्य, दिशा, स्तर, समय, आवृत्ति, प्राथमिकताएँ}

पथ नियोजन: [

{

चरण का नाम

चरण संख्या,

अनुमानित अवधि (सप्ताह)

मुख्य उद्देश्य का विवरण,

संसाधन सूची: [{नाम, प्रकार (वीडियो/पुस्तक/परियोजना), प्लेटफ़ॉर्म, लिंक, अनुमानित अध्ययन घंटे}]

महत्वपूर्ण उपलब्धि: {विवरण, सत्यापन विधि}

}

]

साप्ताहिक सुझाव: {कार्यदिवस का कार्यक्रम, सप्ताहांत का कार्यक्रम, कुल साप्ताहिक अध्ययन घंटे}

```

## चरण 3: कामी शैली की इंटरैक्टिव लर्निंग वेबसाइट बनाएं

इंटरेक्टिव लर्निंग पाथ वेबसाइट बनाने के लिए generateWebpage टूल का उपयोग करें।

निर्देश पैरामीटर में निम्नलिखित पूर्ण विनिर्देश के साथ-साथ चरण 2 में उत्पन्न विशिष्ट शिक्षण पथ डेटा भी शामिल है:

### डिजाइन प्रणाली विनिर्देश (सीखने के परिदृश्यों के लिए अनुकूलित कामी डिजाइन प्रणाली):

**रंग योजना:**

- पेज की पृष्ठभूमि: #f5f4ed (गर्म बेज रंग का पार्चमेंट)

कार्ड का बैकग्राउंड: #FAF9F5 (आइवरी)

- एक्सेंट कलर/ब्रांड कलर: #1B365D (इंक ब्लू)

- टेक्स्ट का रंग: #141413 (लगभग काला)

सबटेक्स्ट का रंग: #4D4C48 (चारकोल)

- रंग नोट करें: #87867F (पत्थर)

बॉर्डर का रंग: #D6D5CE (हल्का भूरा बॉर्डर)

- प्रोग्रेस बार पूर्ण: #1B365D (ब्रांड रंग)

- प्रोग्रेस बार पूरा नहीं हुआ: #E8E7E2

- सफलता/पूर्णता स्थिति: #2D5016 (गहरा जैतून हरा)

- प्रगति पर: #1B365D (ब्रांड रंग)

- अभी शुरू नहीं हुआ: #87867F (पत्थर)

- टैग पृष्ठभूमि: #E4ECF5

- सभी धूसर रंग गर्म टोन वाले होने चाहिए (R≈G>B), ठंडे नीले-धूसर रंग निषिद्ध हैं।

**फ़ॉन्ट सिस्टम:**

- Google Fonts के माध्यम से Noto Serif SC और Noto Sans SC लोड करें

शीर्षक: फ़ॉन्ट-फ़ैमिली: 'नोटो सेरिफ़ एससी', चार्टर, जॉर्जिया, सेरिफ़; फ़ॉन्ट-वेट: 500

- टेक्स्ट: फ़ॉन्ट-फ़ैमिली: 'नोटो सैंस एससी', 'पिंगफैंग एससी', सैंस-सेरिफ़; फ़ॉन्ट-वेट: 400

- डेटा/संख्याओं पर ज़ोर: फ़ॉन्ट-फ़ैमिली: चार्टर, जॉर्जिया, सेरिफ़

- फ़ॉन्ट-वेट: 700/बोल्ड को अक्षम करें

**टाइपसेटिंग:**

- पंक्तियों के बीच का अंतर: शीर्षक 1.2 / मुख्य पाठ 1.5

- चीनी अक्षरों के बीच का अंतर: 0.3pt

- पेज की अधिकतम चौड़ाई: 800px, केंद्र में

- प्रतिक्रियाशील, मोबाइल-अनुकूल

**दृश्य नियम:**

- शैडो: रिंग शैडो (0 0 0 1px rgba(0,0,0,0.05)) या व्हिस्पर शैडो (0 1px 3px rgba(0,0,0,0.04))

- गोल कोने: 8px (डिफ़ॉल्ट) / 12px (बड़े कार्ड के लिए)

- विभाजक: 0.5px सॉलिड #D6D5CE या 2.5px सॉलिड #1B365D (ब्रांड की ऊर्ध्वाधर रेखा)

- ज़ोर देने की विधि: नीली स्याही से लिखा हुआ पाठ या बाईं ओर खड़ी ब्रांड लाइन

### पृष्ठ संरचना संबंधी आवश्यकताएँ:

**1. शीर्ष हीरो क्षेत्र:**

- अधिगम उद्देश्य शीर्षक (सेरिफ़ 28px)

- मुख्य जानकारी टैग एक पंक्ति में: लक्ष्य प्रकार | अनुमानित अवधि | दैनिक समय

- समग्र प्रगति बार (प्रतिशत संख्याओं के साथ)

- सांख्यिकी कार्ड पंक्ति: कुल संसाधन / पूर्ण / वर्तमान चरण

**2. स्टेज कार्ड क्षेत्र (कोर):**

- प्रत्येक चरण के लिए एक बड़ा कार्ड

- कार्ड का शीर्षक: चरण संख्या + नाम + स्थिति टैग (✅ पूर्ण / 🔄 प्रगति पर / ⬜ प्रारंभ नहीं हुआ) + अनुमानित अवधि

- कार्ड की सामग्री:

- मुख्य उद्देश्य का विवरण (1-2 वाक्य)

संसाधन सूची: प्रत्येक संसाधन को एक अलग पंक्ति में सूचीबद्ध किया गया है, जिसमें एक आइकन (📚पुस्तक/🎬वीडियो/💻प्रोजेक्ट/👥समुदाय) + नाम (क्लिक करने योग्य लिंक) + प्लेटफ़ॉर्म टैग + चेकबॉक्स शामिल हैं।

- महत्वपूर्ण उपलब्धि क्षेत्र: मानकों की उपलब्धि का वर्णन करने के लिए ब्रांड की ऊर्ध्वाधर रेखाओं और विशेष शैली के साथ हाइलाइट किया गया।

- कार्डों को मोड़ा/खोला जा सकता है (वर्तमान चरण के लिए डिफ़ॉल्ट रूप से खोला जाता है, पूर्ण हो चुके चरण के लिए मोड़ा जाता है)।

**3. साप्ताहिक शिक्षण सुझाव क्षेत्र:**

- समय आवंटन संबंधी संक्षिप्त सुझाव

- कार्यदिवस बनाम सप्ताहांत अनुसूची

**4. निचला भाग:**

- संक्षिप्त पाठ: लर्निंग पाथ प्लानिंग मास्टर द्वारा संचालित · कामी डिज़ाइन सिस्टम के साथ डिज़ाइन किया गया

### इंटरैक्टिव कार्यक्षमता संबंधी आवश्यकताएँ (शुद्ध फ्रंट-एंड जावास्क्रिप्ट + लोकल स्टोरेज):

1. **चेकबॉक्स की स्थिति में बदलाव**:

संसाधन से पहले स्थित चेकबॉक्स पर क्लिक करके पूर्णता स्थिति को टॉगल करें।

- स्थिति को localStorage में सहेजें (कुंजी में सीखने की दिशा + संसाधन नाम हैश का उपयोग किया जाता है)

- पूर्ण हो चुके संसाधनों पर एक रेखा खींची हुई दिखाई देगी और उनकी पारदर्शिता कम होगी।

2. **स्वचालित प्रगति गणना:**

- कुल प्रगति = (चयनित संसाधनों की संख्या / संसाधनों की कुल संख्या) × 100%

- चरण प्रगति = चयनित चरणों की संख्या / चरणों की कुल संख्या

- प्रोग्रेस बार एनीमेशन ट्रांज़िशन (ट्रांज़िशन: चौड़ाई 0.3 सेकंड ईज़)

3. **चरण स्थिति का स्वचालित अद्यतन**:

- चरण के भीतर सभी संसाधनों का चयन करें → स्थिति स्वचालित रूप से ✅ पूर्ण में बदल जाती है और संक्षिप्त हो जाती है।

- यदि इस चरण के दौरान किसी भी आइटम की जाँच की जाती है → तो स्थिति बदलकर 🔄प्रगति में है।

- कोई चेक मार्क नहीं → ⬜ शुरू नहीं हुआ

4. **मोड़ें/खोलें**:

- कार्ड के शीर्ष पृष्ठ पर क्लिक करने से वह सिकुड़ेगा/फैलेगा।

- सहज एनीमेशन के साथ

5. **मीलस्टोन चेक पॉप-अप विंडो**:

- किसी चरण के लिए सभी संसाधन पूरे हो जाने पर एक माइलस्टोन चेक प्रॉम्प्ट पॉप अप होगा।

- इस चरण के लिए महत्वपूर्ण मानक प्रदर्शित करें

उपयोगकर्ता पुष्टि करने के लिए "प्राप्त" पर क्लिक कर सकते हैं या पूर्णता दर्शाने के लिए "आगे समेकन की आवश्यकता है" को चिह्नित कर सकते हैं।

6. **डेटा स्थायित्व**:

- सभी स्टेट्स लोकल स्टोरेज में स्टोर किए जाते हैं।

पेज रिफ्रेश होने के बाद स्थिति को पुनर्स्थापित करें

- इसमें "प्रगति रीसेट करें" बटन दिया गया है (जिसके लिए दूसरी बार पुष्टि की आवश्यकता होती है)।

### सामग्री भरें:

चरण 2 में निर्धारित संपूर्ण शिक्षण पथ डेटा से उपरोक्त संरचना को भरें। सुनिश्चित करें:

- प्रत्येक संसाधन का लिंक एक वास्तविक, सुलभ यूआरएल है।

- संसाधन प्रकार के आइकन सही ढंग से मेल खाते हैं

- प्रत्येक चरण की अवधि संपूर्ण चक्र के तर्क के अनुरूप है।

- महत्वपूर्ण उपलब्धियों का विवरण विशिष्ट और सत्यापन योग्य है।

### तकनीकी आवश्यकताएं:

- केवल HTML + CSS + JavaScript का उपयोग करके, एक ही फ़ाइल में बनाया गया।

- कोई बाहरी निर्भरता नहीं (गूगल फॉन्ट्स को छोड़कर)

- मोबाइल के अनुकूल

- प्रिंट करने योग्य

- टिप्पणियों सहित स्वच्छ कोड