जावास्क्रिप्ट में छात्र प्रगति रिपोर्ट बनाना

छात्र प्रगति रिपोर्ट को ऑनलाइन देखने की क्षमता माता-पिता और शिक्षकों दोनों के लिए कई लाभ प्रदान करती है। ऑनलाइन पहुंच माता-पिता और छात्रों को छात्र के शैक्षणिक प्रदर्शन के बारे में वास्तविक समय की जानकारी प्रदान करती है, जिससे उन्हें सूचित रहने और अपनी शिक्षा में लगे रहने की अनुमति मिलती है। वे आसानी से प्रगति को ट्रैक कर सकते हैं, उपस्थिति की निगरानी कर सकते हैं, ग्रेड देख सकते हैं और उन क्षेत्रों की पहचान कर सकते हैं जहां अतिरिक्त सहायता की आवश्यकता हो सकती है।

शिक्षकों के लिए, ऑनलाइन प्रगति रिपोर्ट रिपोर्टिंग प्रक्रिया को सुव्यवस्थित करती है, जिससे छात्र प्रदर्शन का व्यापक मूल्यांकन तैयार करना और साझा करना आसान हो जाता है। यह शिक्षकों को माता-पिता के साथ अधिक प्रभावी ढंग से संवाद करने, सहयोग को बढ़ावा देने और लक्षित हस्तक्षेप को सक्षम करने में सक्षम बनाता है। कुल मिलाकर, छात्र प्रगति रिपोर्ट तक ऑनलाइन पहुंच संचार को बढ़ाती है, जवाबदेही को बढ़ावा देती है और छात्र की सफलता के लिए एक सक्रिय दृष्टिकोण का समर्थन करती है।

शुक्र है, ActiveReportsJS शिक्षकों के लिए इन प्रगति रिपोर्टों को बनाना और अनुकूलित करना आसान बनाता है और उन्हें वेब अनुप्रयोगों में देखना आसान बनाता है। यह आलेख आपको दिखाएगा कि प्रगति रिपोर्ट बनाने के लिए ActiveReportsJS रिपोर्ट डिज़ाइनर का उपयोग कैसे करें और जावास्क्रिप्ट एप्लिकेशन में अपनी रिपोर्ट प्रदर्शित करने के लिए रिपोर्ट व्यूअर का उपयोग कैसे करें।

सामग्री अवलोकन

• डेटा को रिपोर्ट से जोड़ना

• प्रगति रिपोर्ट शीर्षलेख और पाद लेख बनाना

• छात्र सूचना प्रदर्शित करना

• जीपीए सारांश और शैक्षणिक प्रगति तालिका का निर्माण

• व्यवहार और मनोवृत्ति प्रगति सारणी का निर्माण

• उपस्थिति सारणी बनाना

• जावास्क्रिप्ट एप्लिकेशन में ActiveReportsJS जोड़ना

  
  

यदि आप लेख का अनुसरण करना चाहते हैं, तो आप पूरी रिपोर्ट और आवेदन यहां पा सकते हैं।

डेटा को रिपोर्ट से जोड़ना

इस आलेख के प्रयोजनों के लिए, हम ActiveReportsJS डाउनलोड में शामिल स्टैंडअलोन डिज़ाइनर का उपयोग करेंगे। डिज़ाइनर को स्थापित करने और लॉन्च करने के बाद, हम अपनी खाली रिपोर्ट देख पाएंगे। इससे पहले कि हम रिपोर्ट में नियंत्रण जोड़ना शुरू करें, हम यह सुनिश्चित करना चाहेंगे कि हम जिस डेटा का उपयोग करेंगे उसे रिपोर्ट से लिंक करें।

डिज़ाइनर के शीर्ष दाईं ओर, डेटा पैनल का चयन करें। यह हमारे डेटा स्रोतों , डेटा सेट और पैरामीटर्स के लिए डिस्प्ले लाएगा:

आरंभ करने के लिए, हमें एक डेटा स्रोत की आवश्यकता होगी। डेटा स्रोत विंडो लाने के लिए डेटा स्रोत अनुभाग में जोड़ें बटन पर क्लिक करें:

यहां से, हम रिपोर्ट को बता सकते हैं कि डेटा कहां देखना है। डेटा कहां से आ सकता है, इसके संबंध में हमारे पास दो विकल्प हैं: रिमोट JSON या एंबेडेड JSON । रिमोट JSON के लिए आवश्यक है कि आप एक API एंडपॉइंट को URL प्रदान करें, जबकि एंबेडेड JSON आपको सीधे रिपोर्ट में डेटा लोड करने के लिए JSON फ़ाइल का चयन करने की अनुमति देता है।

इस रिपोर्ट के लिए, हम कई JSON फ़ाइलों को लोड करने के लिए एंबेडेड JSON का उपयोग करेंगे; हमें छात्रों की जानकारी, अंक, व्यवहार और उपस्थिति के लिए फ़ाइलें मिली हैं, इसलिए हमें इनमें से प्रत्येक फ़ाइल के लिए एक डेटा स्रोत बनाने की आवश्यकता होगी।

पूरा होने पर, इसे इस तरह दिखना चाहिए:

अब जब हमने अपने चार डेटा स्रोत स्थापित कर लिए हैं, तो प्रत्येक के लिए एक डेटा सेट बनाने का समय आ गया है। किसी डेटा स्रोत के लिए डेटा सेट बनाने के लिए, बस उस डेटा स्रोत के बगल में प्लस आइकन पर क्लिक करें जिसे आप उपयोग करना चाहते हैं; यह डेटा सेट विंडो लाएगा:

चूँकि हम एम्बेडेड JSON का उपयोग कर रहे हैं, हमें केवल एक JSON पथ प्रदान करने की आवश्यकता है; यह रिपोर्ट को बताता है कि हम JSON से कौन सा डेटा पुनर्प्राप्त करना चाहते हैं। इस मामले में, हम सभी JSON को पुनः प्राप्त करना चाहते हैं, इसलिए हम पथ $.* का उपयोग करते हैं। यह रिपोर्ट को सभी उपलब्ध डेटा प्राप्त करने के लिए कहता है।

एक बार JSON पथ आने के बाद, यह पुष्टि करने के लिए मान्य करें बटन दबाएं कि आपका डेटा सेट अनुरोधित डेटा पुनर्प्राप्त कर सकता है।

यदि सब कुछ सही ढंग से काम करता है, तो डेटाबेस फ़ील्ड फ़ील्ड अब हमारे डेटा के मानों से भर जाना चाहिए:

एक बार जब हम प्रत्येक डेटा स्रोत के लिए डेटा सेट सेट कर लेते हैं, तो हमारा डेटा पैनल इस तरह दिखना चाहिए:

और बस! अब हमें अपनी रिपोर्ट से जुड़ा डेटा मिल गया है जिसे हम नियंत्रणों में संदर्भित कर सकते हैं। अगले अनुभाग में, हम शीर्ष लेख और पाद लेख से शुरुआत करते हुए रिपोर्ट के विभिन्न अनुभाग बनाना शुरू करेंगे।

प्रगति रिपोर्ट शीर्षलेख और पाद लेख बनाना

अब डेटा सेट हो जाने के बाद हम रिपोर्ट तत्व बनाना शुरू कर सकते हैं। आरंभ करने के लिए, हम अपनी रिपोर्ट के पृष्ठों के लिए एक शीर्षलेख और पादलेख बनाएंगे। टूलबार में, सेक्शन टैब चुनें और हेडर जोड़ें और फ़ुटर जोड़ें बटन पर क्लिक करें:

यह रिपोर्ट में शीर्ष लेख और पाद लेख अनुभाग जोड़ देगा. हम हेडर सेक्शन में कंट्रोल टूलबॉक्स से दो नियंत्रण जोड़ना चाहते हैं। टूलबॉक्स का विस्तार करने के लिए डिज़ाइनर के ऊपर बाईं ओर हैमबर्गर बटन पर क्लिक करें, और फिर एक टेक्स्टबॉक्स और एक छवि नियंत्रण को पेज हेडर में खींचें।

टेक्स्टबॉक्स के अंदर, हम इसका मान "छात्र प्रगति रिपोर्ट" पर सेट करेंगे।

फिर, हम छवि नियंत्रण के लिए रिपोर्ट में एक छवि एम्बेड करेंगे। छवि नियंत्रण का चयन करें, और फिर इसके गुणों के प्रकटन अनुभाग में छवि ड्रॉपडाउन का विस्तार करें। किसी छवि को एम्बेड करने के लिए, एंबेडेड बटन पर क्लिक करें और फिर फ़ाइल एक्सप्लोरर को खोलने के लिए **लोड...** पर क्लिक करें और उस छवि का चयन करें जिसे आप लोड करना चाहते हैं:

अब जब हमारी छवि लोड हो गई है और हमारा टेक्स्ट सेट हो गया है, तो हम प्रॉपर्टी पैनल के माध्यम से बस थोड़ा आकार बदलने और स्टाइल करने जा रहे हैं। पूरा होने पर, हमारा हेडर अनुभाग इस प्रकार दिखता है:

अब फ़ुटर बनाने का समय आ गया है। अपने पाद लेख में, हम 3 टेक्स्टबॉक्स शामिल करना चाहेंगे: दो संपर्क जानकारी के साथ और एक चालू वर्ष प्रदर्शित करने के लिए। संपर्क जानकारी वाले प्रत्येक बॉक्स के आगे, हम यह दर्शाने के लिए एक फ़ोन का आइकन भी शामिल करना चाहते हैं कि ये फ़ोन नंबर हैं।

तीन टेक्स्टबॉक्स नियंत्रण और दो छवि नियंत्रणों को पृष्ठ के पाद लेख क्षेत्र में खींचें। हम छवियों को सेट करने के लिए ऊपर बताए गए समान चरणों का पालन करेंगे।

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

इस तीसरे टेक्स्टबॉक्स के अंदर, यह मान रखें: © {वर्ष(अब())} ग्रेपसिटी, इंक. सर्वाधिकार सुरक्षित। आप स्ट्रिंग के अंदर देख सकते हैं कि हमने ब्रेसिज़ को शामिल किया है, और ब्रेसिज़ के अंदर, अभिव्यक्ति वर्ष(अब()) ; यह चालू वर्ष लौटाएगा, और रिपोर्ट इसे एक अभिव्यक्ति के रूप में मूल्यांकन करना जानती है क्योंकि हमने इसे ब्रेसिज़ के भीतर रखा है।

थोड़ी सी स्टाइलिंग करने के बाद, फ़ुटर इस तरह दिखना चाहिए:

हम यह देखने के लिए रिपोर्ट का पूर्वावलोकन कर सकते हैं कि हमने जो अभिव्यक्ति बनाई है उसका मूल्यांकन कैसे होता है:

अब जब हमने शीर्ष लेख और पाद लेख बना लिया है, तो वे प्रत्येक रिपोर्ट पृष्ठ पर प्रदर्शित होंगे। अगले अनुभाग में, हम छात्र के बारे में कुछ बुनियादी जानकारी प्रदर्शित करके अपने द्वारा लोड किया गया कुछ डेटा जोड़ देंगे।

छात्र सूचना प्रदर्शित करना

अब रिपोर्ट में लोड हो रहे कुछ डेटा को शामिल करना शुरू करने का समय आ गया है। सबसे पहले, टेक्स्टबॉक्स और कंटेनर नियंत्रण को रिपोर्ट बॉडी पर खींचें। दोनों का विस्तार करें ताकि वे पृष्ठ की अधिकांश चौड़ाई का विस्तार करें, और टेक्स्टबॉक्स नियंत्रण के अंदर, "छात्र सूचना" टेक्स्ट शामिल करें:

हम इस कंटेनर का उपयोग छात्र से जुड़ी सभी जानकारी रखने के लिए करेंगे।

अब, हम टेक्स्टबॉक्स को कंटेनर के अंदर रखेंगे; इनका उपयोग लेबल और डेटा सेट से जानकारी रखने दोनों के लिए किया जाएगा।

कंटेनर को निम्नलिखित से मेल खाने के लिए सेट करें:

अब, प्रत्येक खाली टेक्स्टबॉक्स के अंदर, हम उन अभिव्यक्तियों को शामिल करना चाहेंगे जो हमारे छात्र सूचना डेटा सेट से डेटा पुनर्प्राप्त करते हैं।

संबंधित टेक्स्टबॉक्स में निम्नलिखित टेक्स्ट शामिल करें:

पूरा होने पर, आपको रिपोर्ट का पूर्वावलोकन करने और निम्नलिखित देखने में सक्षम होना चाहिए:

जीपीए सारांश और शैक्षणिक प्रगति तालिका का निर्माण

इसके बाद, हम छात्र के ग्रेड से संबंधित जानकारी प्रदर्शित करेंगे।

सबसे पहले, हम GPA सारांश अनुभाग बनाएंगे; पिछले अनुभाग की तरह, टेक्स्टबॉक्स और कंटेनर नियंत्रण को रिपोर्ट पर खींचें। दोनों का विस्तार करें ताकि वे पृष्ठ की अधिकांश चौड़ाई का विस्तार करें, और टेक्स्टबॉक्स नियंत्रण के अंदर, "जीपीए सारांश" टेक्स्ट शामिल करें:

इस कंटेनर के अंदर, हम छात्र का समग्र GPA, साथ ही उनका प्रतिशत प्रदर्शित करना चाहते हैं।

चार टेक्स्टबॉक्स को कंटेनर में खींचें, उन्हें इस प्रकार सेट करें:

इसके बाद, हमें खाली टेक्स्टबॉक्स के अंदर कुछ और अभिव्यक्तियाँ सेट करने की आवश्यकता होगी:

समग्र GPA अभिव्यक्ति उस प्रतिशतक की गणना करेगी जिसमें वे आते हैं और फिर, उसके आधार पर, एक संबद्ध संख्यात्मक GPA मान प्रदान करेगा। प्रतिशत अभिव्यक्ति केवल प्रतिशत के आधार पर उनके ग्रेड की गणना करती है।

पूरा होने पर, आपको रिपोर्ट का पूर्वावलोकन करते समय निम्नलिखित देखने में सक्षम होना चाहिए:

अब जब हमने सारांश बना लिया है, तो विषय के आधार पर छात्र की प्रगति का विवरण दिखाने का समय आ गया है। GPA सारांश अनुभाग के नीचे, टेक्स्टबॉक्स और तालिका नियंत्रण को रिपोर्ट बॉडी पर खींचें। टेक्स्टबॉक्स के अंदर, "शैक्षणिक प्रगति" टेक्स्ट शामिल करें, जबकि तालिका के अंदर, निम्नलिखित कॉलम हेडर शामिल करें:

• विषय
• अध्यापक
• त्रैमासिक 1
• त्रैमासिक 2
• त्रैमासिक 3

पूरा होने पर, इसे कुछ इस तरह दिखना चाहिए:

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

शेष तालिका को इस प्रकार भरें:

थोड़ी अतिरिक्त स्टाइलिंग के बाद, टेबल नियंत्रण अब इस तरह दिखता है:

जब हम अपनी रिपोर्ट का पूर्वावलोकन करते हैं, तो तालिका इस प्रकार दिखनी चाहिए:

व्यवहार और मनोवृत्ति प्रगति सारणी जोड़ना

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

अब, इस नए अनुभाग के शीर्षलेख के नीचे, कंटेनर नियंत्रण के अंदर एक टेक्स्टबॉक्स नियंत्रण, एक कंटेनर नियंत्रण और तीन टेक्स्टबॉक्स नियंत्रण जोड़ें:

जैसा कि आप देख सकते हैं, हमने इन टेक्स्टबॉक्स को अपने टेक्स्ट से भर दिया है। टेबलिक्स नियंत्रण जोड़ने से पहले, हम एक और संशोधन करना चाहते हैं।

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

अब यदि हम रिपोर्ट का पूर्वावलोकन करें, तो हमें निम्नलिखित देखना चाहिए:

अब जब टैबलिक्स कंटेनर स्थापित हो गया है, तो व्यवहार और दृष्टिकोण प्रगति डेटा प्रदर्शित करने के लिए टैबलिक्स नियंत्रण जोड़ने का समय आ गया है। इस कंटेनर में टेबलिक्स नियंत्रण खींचें; आप डिज़ाइनर विंडो में टैब्लिक्स विज़ार्ड को पॉप अप देखेंगे:

टैबलिक्स विज़ार्ड टैबलिक्स (या पिवट टेबल जैसा कि इसे भी जाना जाता है) नियंत्रण बनाने के लिए एक अत्यंत शक्तिशाली उपकरण है, जो मानक तालिका की तुलना में अधिक गतिशील तरीकों से डेटा प्रदर्शित कर सकता है।

हम उस व्यवहार डेटा सेट से डेटा का उपयोग करने जा रहे हैं जिसे हमने लेख की शुरुआत में बनाया था। इस डेटा सेट का विस्तार करें, और फिर व्यवहार माप मान को विज़ार्ड के पंक्ति समूह अनुभाग में खींचें और छोड़ें, और T1 , T2 और T3 मानों को विज़ार्ड के मान अनुभाग में खींचें और छोड़ें। T1, T2 और T3 के कुल मानों को काउंट से None में बदलना सुनिश्चित करें।

समाप्त करने से पहले, विज़ार्ड में फ़िल्टर बटन पर क्लिक करें; हमें इस तालिका के लिए एक फ़िल्टर स्थापित करने की आवश्यकता है। यहां, नया फ़िल्टर जोड़ने के लिए Add बटन पर क्लिक करें। पहले बॉक्स को डेटासेट के प्रकार फ़ील्ड में सेट करें, और स्ट्रिंग "वर्क हैबिट" देखने के लिए फ़िल्टर सेट करें:

पूरा होने पर, आप ओके बटन दबा सकते हैं और देख सकते हैं कि इस बिंदु पर आपका टैबलिक्स कैसा दिखता है:

अब, उत्कृष्ट संतोषजनक और सुधार की आवश्यकता वाले टेक्स्टबॉक्स की तरह, हम टेक्स्ट मानों के बजाय आइकन प्रदर्शित करने के लिए T1, T2 और T3 कॉलम के लिए डेटा सेल को अपडेट करने जा रहे हैं। इनमें से प्रत्येक डेटा सेल के लिए, टेक्स्ट मान हटाएं और संबंधित टेक्स्टबॉक्स की छवि प्रॉपर्टी को अपडेट करें:

इससे ऐसा होगा कि टेबलिक्स नियंत्रण सेल मान के आधार पर सेल में सही ट्रैफिक लाइट आइकन रखेगा। कुछ स्टाइल अपडेट के बाद, हमारा पहला टैबलिक्स इस तरह दिखना चाहिए:

जब हम रिपोर्ट का पूर्वावलोकन करते हैं, तो टेबलिक्स को इस तरह दिखना चाहिए:

अब, हमें रवैया संबंधी जानकारी प्रदर्शित करने के लिए दूसरा टैबलिक्स नियंत्रण बनाने की आवश्यकता है। अच्छी बात यह है कि यह टेबलिक्स लगभग वैसा ही है जैसा हमने अभी बनाया है। हमारे द्वारा बनाए गए पहले टैबलिक्स को कॉपी और पेस्ट करें, और फिर इसे दूसरे टैबलिक्स के ठीक नीचे कंटेनर में रखें। फिर, पहले हेडर सेल को "कार्य आदतें" से "आचार संहिता का पालन" में अपडेट करें।

अंत में, दूसरा टैबलिक्स नियंत्रण चुनें और नियंत्रण के शीर्ष-दाईं ओर स्थित गियर आइकन पर क्लिक करें; यह टैब्लिक्स विज़ार्ड को फिर से खोल देगा। फ़िल्टर बटन पर क्लिक करें; हम उस फ़िल्टर को संशोधित करने जा रहे हैं जिसका हम वर्तमान में उपयोग कर रहे हैं।

फ़िल्टर टेक्स्ट मान को "कार्य आदतें" से "कक्षा आचरण" में अपडेट करें। अब, व्यवहार और मनोवृत्ति प्रगति अनुभाग इस तरह दिखना चाहिए:

जब हम रिपोर्ट का पूर्वावलोकन करते हैं, तो व्यवहार और दृष्टिकोण प्रगति अनुभाग इस प्रकार दिखना चाहिए:

उपस्थिति सारणी जोड़ना

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

टेबलिक्स विज़ार्ड के अंदर, हम उपस्थिति डेटा सेट का उपयोग करने जा रहे हैं; दिनों के मान को विज़ार्ड के पंक्ति समूह अनुभाग में खींचें, और T1 , T2 , और T3 मानों को विज़ार्ड के मान अनुभाग में खींचें।

साथ ही, T1 , T2 , और T3 के कुल मानों को Sum पर सेट करना सुनिश्चित करें:

अब, उपस्थिति अनुभाग इस प्रकार दिखना चाहिए:

और जब हम रिपोर्ट का पूर्वावलोकन करते हैं, तो उसे इस प्रकार दिखना चाहिए:

अब, रिपोर्ट पूरी होने पर, जब हम रिपोर्ट का पूर्वावलोकन करते हैं, तो पेज इस तरह दिखने चाहिए:

जावास्क्रिप्ट एप्लिकेशन में ActiveReportsJS जोड़ना

अब जब हमने अपनी छात्र प्रगति रिपोर्ट बना ली है, तो ActiveReportsJS रिपोर्ट व्यूअर को जावास्क्रिप्ट एप्लिकेशन में जोड़ने का समय आ गया है ताकि हम ब्राउज़र में रिपोर्ट देख सकें। Index.html नामक एक नई फ़ाइल बनाएं और इस फ़ाइल को अपनी पसंद की IDE में खोलें।

हम फ़ाइल में निम्नलिखित कोड जोड़ने जा रहे हैं:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>

अब जब HTML फ़ाइल सेट हो गई है, तो फ़ाइल में ActiveReportsJS जोड़ने का समय आ गया है। इसके लिए, हम आवश्यक फ़ाइलों को लोड करने के लिए सीडीएन का उपयोग करने जा रहे हैं।

<head> टैग के अंदर, निम्नलिखित कोड जोड़ें:

 <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

कोड की पहली दो पंक्तियाँ आवश्यक CSS फ़ाइलें लोड करती हैं: कोर CSS फ़ाइल और व्यूअर CSS फ़ाइल। फिर, हम कोर जावास्क्रिप्ट फ़ाइल और व्यूअर जावास्क्रिप्ट फ़ाइल लोड कर रहे हैं। अंत में, हम एक पीडीएफ, सारणीबद्ध डेटा और HTML जावास्क्रिप्ट फ़ाइल लोड कर रहे हैं; ये फ़ाइलें उपयोगकर्ताओं को संबंधित फ़ाइल प्रकारों में रिपोर्ट निर्यात करने की क्षमता देती हैं।

यदि आप उपयोगकर्ताओं को किसी विशिष्ट प्रारूप में रिपोर्ट निर्यात करने की अनुमति नहीं देना चाहते हैं, तो आपको बस संबंधित <script> टैग को बाहर करना होगा, और उपयोगकर्ता उस फ़ाइल प्रकार में निर्यात करने में असमर्थ होंगे।

आगे, हम पृष्ठ पर तत्वों में कुछ बुनियादी शैलियाँ जोड़ने जा रहे हैं। <head> टैग के अंदर, हमारे द्वारा अभी जोड़े गए स्क्रिप्ट टैग के नीचे, निम्नलिखित कोड जोड़ें:

 <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style>

यह बॉडी तत्व से मार्जिन हटा देगा, और व्यूअर-होस्ट की आईडी के साथ तत्व की चौड़ाई और ऊंचाई भी निर्धारित करेगा।

अब, <body> टैग के अंदर, निम्नलिखित तत्व जोड़ें:

 <div id="viewer-host"></div>

हमने इस div को viewer-host की आईडी दी है; इसका मतलब यह होगा कि इसे वे सीएसएस शैलियाँ प्राप्त होंगी जो हमने पहले सेट की थीं, लेकिन यह हमें जावास्क्रिप्ट रिपोर्ट व्यूअर को div से जोड़ने की भी अनुमति देगा।

अंत में, div के नीचे, निम्नलिखित कोड जोड़ें:

 <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script>

यह जावास्क्रिप्ट एक नया ActiveReportsJS व्यूअर बनाएगा, इसे आईडी व्यूअर-होस्ट वाले तत्व के साथ जोड़ देगा। फिर, हम व्यूअर की खुली विधि को कॉल करते हैं और अपनी रिपोर्ट का नाम पास करते हैं।

आखिरी चीज़ जो आपको सुनिश्चित करने की ज़रूरत है वह यह है कि आप रिपोर्ट को अपनी Index.html फ़ाइल के समान फ़ोल्डर में रखें; यदि आप ऐसा नहीं करते हैं, तो सुनिश्चित करें कि आप अपनी रिपोर्ट का सही स्थान इंगित करें।

एप्लिकेशन को चलाने के लिए केवल एक चीज बची है। आप एप्लिकेशन को चलाने के लिए किसी भी स्थिर वेब-सर्वर का उपयोग कर सकते हैं; चूँकि हम विज़ुअल स्टूडियो कोड का उपयोग करते हैं, हम एक स्थिर वेब-सर्वर को शीघ्रता से चालू करने के लिए लाइव सर्वर एक्सटेंशन का उपयोग करते हैं। जब आप अपने ब्राउज़र में एप्लिकेशन खोलते हैं, तो आपको निम्नलिखित देखना चाहिए:

निष्कर्ष

और इसमें बस इतना ही है! जैसा कि आप देख सकते हैं, ActiveReportsJS अनुकूलित प्रगति रिपोर्ट बनाना आसान बनाता है, जिससे शिक्षक और छात्र समान रूप से पूरे स्कूल वर्ष में छात्र की प्रगति को ट्रैक कर सकते हैं।

यदि आप इस आलेख में निर्मित रिपोर्ट और एप्लिकेशन डाउनलोड करना चाहते हैं, तो आप यहां रिपॉजिटरी पा सकते हैं।

हैप्पी कोडिंग!