Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins

WordPress में मल्टीप्ल चॉइस क्विज़ को इंटेग्रट करना - बैकएंड बनाना

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Integrating Multiple Choice Quizzes in WordPress.
Integrating Multiple Choice Quizzes in WordPress: Creating the Front End

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

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

यह प्लगइन आपको बिज़नेस को बिल्ड करने के लिए क्विज़ नहीं बनवाएगा, बल्कि हमें वहां से शुरू करना होगा जहां हम जाना चाहते हैं। तो यह क्विज़ेज बनाने और इससे लाभ कमाए जाने के लिए एक अच्छी शुरुआत होगी।

तो चलो शुरू करते है।


प्लगइन की फंक्शनलिटी

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

तो चलिए अपनी प्लगइन की विस्तृत आवश्यकताओं और कंपोनेंट्स को देखें:

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

यह ट्यूटोरियल दो भाग की सीरीज के रूप में बनाया जा रहा है, जहां हम पहले भाग में प्लगइन का बैकएंड डेवेलोप करते हैं, इसके बाद दूसरे भाग में प्लगइन फ्रंटेंड।


प्लगइन बैकएंड की योजना बनाना

इस भाग में हम प्लगइन के बैकएंड को डेवेलप करने पर ध्यान केंद्रित करने जा रहे हैं जहां हम क्विज़ेज के लिए रिक्वायर्ड डेटा डेवेलप करते हैं।

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

अब हम निम्नलिखित सेक्शन में लिस्टेड बैकएंड को लागू करने के लिए आवश्यक कंपोनेंट्स की पहचान करने में समय ले सकते हैं।

  • जवाब के साथ बैकएंड में प्रश्न बनाने की जरूरत है। प्रश्नों को इम्प्लीमेंट करने के लिए एक कस्टम पोस्ट टाइप सबसे अच्छा समाधान होगा। तो हम wptuts_quiz नामक एक कस्टम पोस्ट टाइप का उपयोग करने जा रहे हैं।
  • प्रत्येक प्रश्न में कई उत्तरों और एक को सही उत्तर होना चाहिए। उत्तर पोस्ट फ़ील्ड कस्टम पोस्ट क्रिएशन स्क्रीन में मेटा बॉक्स के अंदर बनाए जाएंगे।
  • प्रश्नों को विभिन्न उप-विषयों की केटेगरी में बांटा जाएगा, इसलिए हमें wptuts_quiz पोस्ट टाइप के लिए quiz_categories नामक एक कस्टम टेक्सोनोमी की आवश्यकता है।
  • फिर हमें प्रश्न निर्माण प्रोसेस को वैलिडेट करने की आवश्यकता है। प्रश्न निर्माण में आवश्यक होने पर हम क्लाइंट साइड jQuery वेलिडेशन का उपयोग करेंगे।
  • अंत में हमें प्रति क्विज के प्रश्नों और क्विज की अवधि को स्टोर करने के लिए एक प्लगइन सेटिंग्स पेज की आवश्यकता है।

आवश्यक WordPress कंपोनेंट्स की पहचान करने के बाद, हम सीधे क्विज़ प्लगइन के बैकएंड को इम्प्लीमेंट करने में आगे बढ़ सकते हैं।


प्रश्न बनाना

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

1. प्रश्न कस्टम पोस्ट टाइप बनाना

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

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

हम एक फंक्शनल प्लगइन के बजाय एक ऑब्जेक्ट ओरिएंटेड प्लगइन बनायेंगे, इसलिए सभी आवश्यक एक्शन्स, शॉर्टकोड और इनिशियलाइज़  करना कन्स्ट्रक्टर के अंदर ही किया जाएगा। निम्नलिखित में wptuts_quiz पोस्ट टाइप को लागू करने के लिए कोड शामिल है।

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

इसके अलावा कोड में मेंशन किया गए सभी पैरामीटर उनकी डिफ़ॉल्ट वैल्यूज के साथ प्रारंभ किए गए हैं।

2. प्रश्न की केटेगरी बनाना

स्पेसिफिक सेक्शन में प्रश्नों को ग्रुप करने के लिए, हमें डिफ़ॉल्ट WordPress केटेगरी के समान कुछ चाहिए। इसलिए हम quiz_categories नामक एक कस्टम टेक्सोनोमी का उपयोग करेंगे। जैसा कि हमने पहले किया था, हमें init एक्शन पर कस्टम टेक्सोनोमी जनरेशन के फ़ंक्शन को कॉल करने की आवश्यकता है। तो हमारे प्लगइन क्लास के कन्स्ट्रक्टर को निम्नलिखित कोड के साथ अपडेट करने की आवश्यकता है।

फिर हम निम्नलिखित कोड में दिखाए गए wptuts_quiz पोस्ट टाइप पर wpq_create_taxonomies फ़ंक्शन को इम्प्लीमेंट कर सकते हैं।

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

3. प्रश्न उत्तर बनाना

इसके बाद, हमें प्रत्येक प्रश्न के लिए कई उत्तरों को बनाना होगा। इस प्लगइन में हर एक प्रश्नों की अधिकतम संख्या पांच तक सीमित होगी।

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

हमेशा की तरह हमें निम्नलिखित कोड के साथ कन्स्ट्रक्टर को अपडेट करने की आवश्यकता है:

उत्तर फ़ील्ड के साथ मेटा बॉक्स के इम्प्लीमेंटेशन के लिए निम्न कोड पर विचार करें।

4. कोड स्पष्टीकरण

  • प्रत्येक प्रश्न के उत्तर key _question_answers के साथ post_meta टेबल में JSON एन्कोडेड स्ट्रिंग में स्टोर किए जाएंगे। इसलिए हम मौजूदा वैल्यू प्राप्त करने के लिए get_post_meta फ़ंक्शन का उपयोग करके इस फ़ील्ड तक पहुंच सकते हैं।
  • फिर हमें उसी के समान मेथड का उपयोग करके प्रश्न का सही उत्तर मिलता है। सही उत्तर key _quaion_correct_answer के साथ post_meta टेबल में एक स्ट्रिंग के रूप में स्टोर किया जाएगा।
  • अंत में, हम HTML फॉर्म बनाते हैं, जिसमें ड्रॉपडाउन बॉक्स के रूप में सही उत्तर और पांच टेक्स्ट एरिया फ़ील्ड के संभावित उत्तर होते हैं।
  • get_post_meta फ़ंक्शन का उपयोग करके रिट्रीव सभी मौजूदा वैल्यू संबंधित फ़ील्ड को सौंपा जाएगा।

एक बार जब आप मेटा बॉक्स बनाते हैं, तो आपको निम्न स्क्रीन की तरह ही कुछ देखना चाहिए।

quiz1

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

लेकिन हमें इससे पहले कुछ वेलिडेशन की आवश्यकता है। तो चलिए वेलिडेशन में चले जाते हैं।


प्रश्न निर्माण को वैलिडेट करना

प्रश्न निर्माण प्रोसेस में इस स्टेज में हमारे पास जटिल वेलिडेशन नियम नहीं हैं। इसलिए हम सबमिशन से पहले क्लाइंट साइड jQuery वेलिडेशन का उपयोग करने जा रहे हैं।

यहां हमें हमारी प्लगइन के कन्स्ट्रक्टर में शामिल करने के लिए admin_enqueue_scripts एक्शन की आवश्यकता है।

तो शुरू करने से पहले निम्नलिखित कोड के साथ कन्स्ट्रक्टर को अपडेट करें।

वेलिडेशन के लिए आवश्यक स्क्रिप्ट फ़ाइलों को शामिल करने के लिए अब निम्न कोड देखें।

wp_register_script और wp_enqueue_script का उपयोग करके, हमारे पास वेलिडेशन प्लग-इन करने के लिए quiz.js नामक एक प्लगइन-स्पेसिफिक JS फ़ाइल है। वेलिडेशन jQuery लाइब्रेरी का उपयोग करके किया जाएगा और इसलिए हमने बिल्ट-इन jQuery लाइब्रेरी को हमारे प्लगइन-स्पेसिफिक जावास्क्रिप्ट के लिए डिपेंडेंसी के रूप में सेट किया है।

स्क्रिप्ट शामिल करने के बाद, निम्न कोड में दिखाए गए अनुसार quiz.js फ़ाइल में वास्तविक वेलिडेशन को लागू करें।

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

निम्नलिखित कोड में wpq_validate_quizes फ़ंक्शन का इम्प्लीमेंटेशन शामिल है।

कोड स्पष्टीकरण

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

निम्न इमेज कस्टम वेलिडेशन मैसेज के साथ पोस्ट क्रिएशन स्क्रीन दिखाती है।

wpquiz2

एक बार जब फॉर्म एरर के बिना सफलतापूर्वक वैलिडेट हो जाता है, तो हम प्रश्न की डिटेल्स को डेटाबेस में सेव करने के लिए आगे बढ़ सकते हैं।


प्रश्न की डिटेल्स को सेव करना

WordPress save_post नामक एक एक्शन प्रदान करता है, जिसे पोस्ट क्रिएशन के ठीक बाद एक्सेक्यूट किया जाता है। डेटाबेस में कस्टम फ़ील्ड डिटेल्स सेव करने के लिए हम save_post एक्शन पर कस्टम फ़ंक्शन को परिभाषित कर सकते हैं।

सामान्य रूप से save_post एक्शन कोड के साथ कन्स्ट्रक्टर को अपडेट करें।

wpq_save_quizes फ़ंक्शन का इम्प्लीमेंटेशन निम्न कोड में दिया गया है।

पोस्ट ID आटोमेटिक रूप से इस फ़ंक्शन पर पास हो जाती है। प्रारंभ में हम गैर वैल्यू और ऑटो सेव के लिए वेलिडेशन को एक्सेक्यूट करते हैं। सेव करने से पहले सबसे महत्वपूर्ण बात पोस्ट टाइप की वेलिडेशन है।

यदि आप पोस्ट टाइप की जांच को छोड़ देते हैं, तो यह कोड सामान्य पोस्ट सहित आपके WordPress इंस्टॉलेशन में सभी पोस्ट टाइप्स के लिए एक्सेक्यूट किया जाएगा, जिसके परिणामस्वरूप असंगत (inconsistent) डेटा हो सकता है।

आखिरकार हम update_post_meta फ़ंक्शन का उपयोग करके डेटाबेस में सेव किये जाने के लिए हमारे उत्तर फ़ील्ड की वैल्यू और सही उत्तर फ़ील्ड प्राप्त करते हैं। सभी कस्टम फ़ील्ड डिटेल्स post_meta टेबल में सेव की जायेगी।

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


क्विज सेटिंग्स पेज

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

तो चलिए क्विज की अवधि और क्विज के प्रश्नों की संख्या रखने के लिए एक सरल सेटिंग पेज को इम्प्लीमेंट करते हैं। हमें कन्स्ट्रक्टर में admin_menu एक्शन को इम्प्लीमेंट करने की आवश्यकता है।

एडमिन एरिया में सेटिंग्स पेज जोड़ने के लिए हम add_menu_page फ़ंक्शन का उपयोग कर सकते हैं। wpq_display_settings फ़ंक्शन का उपयोग सेटिंग पेज के डिस्प्ले एलिमेंट्स को इम्पेर्मेंट करने के लिए किया जाता है।

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

इस मेथड में आपको options.php फ़ाइल में फॉर्म एक्शन सेट करना होगा। फिर आपको 'update' की वैल्यू को शामिल करने के लिए एक्शन नामक एक छिपी हुई फ़ील्ड बनानी होगी। आखिर में हमें अपडेट करने के लिए दो टेक्स्ट फ़ील्ड्स के नाम रखने के लिए page_options नामक एक और छिपे हुए फ़ील्ड की आवश्यकता है।

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

सबमिट बटन क्लिक होने के बाद, फ़ॉर्म डिटेल्स आटोमेटिक रूप से बिना किसी कस्टम कोड के अपडेट हो जाएंगे।


आगे क्या होगा

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

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

आपके सुझावों की प्रतीक्षा करते हुए।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.