AI के साथ क्विज़ ऐप कैसे बनाएं
यह गाइड एक व्यावहारिक उदाहरण के तौर पर Moremade का उपयोग करके AI के साथ क्विज़ ऐप बनाना दिखाती है। अंत तक आपके पास एक काम करने वाला क्विज़ ऐप या वेबसाइट प्रोटोटाइप होना चाहिए, जिसमें मुख्य स्क्रीन, स्कोरिंग और पब्लिश करने लायक वर्ज़न हो। एक सरल पहले वर्ज़न के लिए, आपके कंटेंट और पॉलिश की ज़रूरत के हिसाब से लगभग 30 से 90 मिनट लग सकते हैं।
पहले तय करें कि आपके क्विज़ ऐप को वास्तव में क्या चाहिए
प्रॉम्प्ट लिखने से पहले, उस सबसे छोटे वर्ज़न को तय करें जो बनाना सही लगे।
ज़्यादातर क्विज़ ऐप्स के लिए इसका मतलब है:
- एक होम स्क्रीन जो क्विज़ को समझाए
- उत्तर विकल्पों वाली एक प्रश्न स्क्रीन
- स्कोर और फ़ीडबैक वाली एक परिणाम स्क्रीन
- एक रीस्टार्ट बटन
फिर कुछ बुनियादी बातें तय करें:
- प्लैटफ़ॉर्म: React + Tailwind में वेबसाइट, या Expo के साथ React Native में मोबाइल ऐप
- प्रश्न का प्रकार: शुरुआत के लिए मल्टीपल चॉइस सबसे आसान है
- स्कोरिंग: हर सही उत्तर पर 1 पॉइंट, नेगेटिव मार्किंग, या वेटेड स्कोर
- कंटेंट सोर्स: पहले हार्डकोडेड सैंपल प्रश्न, या बाद में डेटाबेस में स्टोर किया हुआ
- यूज़र अकाउंट: केवल तब ज़रूरी जब आप सेव्ड प्रोग्रेस, हिस्ट्री, या यूज़र-विशिष्ट परिणाम चाहते हों
- पेमेंट्स: केवल तब ज़रूरी जब क्विज़, पैक्स, या प्रीमियम फीचर्स के लिए भुगतान लेना हो
वर्ज़न one को छोटा रखें। एक टाइम्ड एग्ज़ाम ऐप जिसमें अकाउंट, लीडरबोर्ड, पेमेंट्स, एनालिटिक्स, और AI-जनरेटेड प्रश्न हों, वास्तव में कई प्रोजेक्ट्स जैसा है। ऐसे क्विज़ से शुरू करें जिसे शुरू से अंत तक पूरा किया जा सके।
एक ऐसा पहला प्रॉम्प्ट लिखें जो पूरे फ़्लो को बताए
Moremade में आप ऐप को साधारण भाषा में बताते हैं और AI एजेंट सोर्स कोड लिख देता है। फिर आपको एक लाइव प्रीव्यू मिलता है और आप चैट के जरिए प्रोजेक्ट को बदलते रह सकते हैं।
आपका पहला प्रॉम्प्ट इन बातों को कवर करना चाहिए:
- प्लैटफ़ॉर्म
- स्क्रीन
- प्रश्न का फ़ॉर्मैट
- स्कोरिंग कैसे काम करती है
- विज़ुअल स्टाइल
- क्या सैंपल डेटा इस्तेमाल करना है
एक अच्छा पहला प्रॉम्प्ट इतना विशिष्ट होता है कि अनुमान लगाने की ज़रूरत न पड़े, लेकिन इतना भी नहीं कि आप बिल्ड करने से ज़्यादा प्रॉम्प्ट करने में समय लगा दें।
सामान्य ज्ञान की प्रैक्टिस के लिए Expo के साथ React Native में एक मोबाइल क्विज़ ऐप बनाएं। इसमें एक होम स्क्रीन, एक क्विज़ स्क्रीन, और एक परिणाम स्क्रीन शामिल करें। 10 मल्टीपल-चॉइस प्रश्न इस्तेमाल करें, हर प्रश्न के चार उत्तर हों, और एक समय में एक ही प्रश्न दिखाएं। हर सही उत्तर पर 1 पॉइंट जोड़कर स्कोर रखें। आख़िरी प्रश्न के बाद कुल स्कोर, सही उत्तर, और क्विज़ रीस्टार्ट करने का एक बटन दिखाएं। साधारण साफ़-सुथरी स्टाइलिंग, बड़े टैप टार्गेट्स, और ऐप में हार्डकोडेड सैंपल प्रश्न डेटा इस्तेमाल करें।
अगर आप वेबसाइट चाहते हैं, तो सीधे ऐसा कहें। Moremade वेबसाइट्स को React + Tailwind कोड के रूप में और मोबाइल ऐप्स को React Native (Expo) के रूप में जनरेट करता है।
प्रीव्यू का उपयोग करें, फिर फोकस्ड फ़ॉलो-अप प्रॉम्प्ट्स से सुधार करें
पहले बिल्ड के बाद, लाइव प्रीव्यू को दर्शक की तरह नहीं बल्कि टेस्ट करने वाले की तरह देखें। पूरे फ़्लो को टैप करके देखें। स्टाइलिंग पर समय लगाने से पहले जाँचें कि लॉजिक सही है या नहीं।
इन समस्याओं पर ध्यान दें:
- स्कोर सही अपडेट न होना
- सवालों के बीच उत्तर की स्थिति रीसेट न होना
- मोबाइल पर बटन बहुत छोटे होना
- प्रोग्रेस का कोई संकेत न होना
- परिणाम स्क्रीन का बहुत भरा-भरा होना
फिर छोटे, लक्ष्यित अनुरोध करें। तीन उपयोगी उदाहरण:
- "क्विज़ स्क्रीन के ऊपर एक प्रोग्रेस इंडिकेटर जोड़ें जो प्रश्न संख्या 10 में से दिखाए।"
- "यूज़र द्वारा उत्तर चुनने के बाद, चुने हुए विकल्प को हाइलाइट करें और Next पर टैप करने तक बाकी विकल्पों को डिसेबल कर दें।"
- "Results स्क्रीन को अपडेट करें ताकि हर प्रश्न, यूज़र का उत्तर, सही उत्तर, और वह सही था या नहीं, दिखे।"
यह आमतौर पर पूरे प्रॉम्प्ट को फिर से लिखने से तेज़ होता है। Moremade में एक विज़ुअल इंस्पेक्टर भी है, जिससे आप किसी एलिमेंट पर इशारा करके उसे बदल सकते हैं, और एक कोड व्यू भी है यदि आप जनरेटेड कोड को सीधे देखना या संपादित करना चाहते हैं।
अगर AI ज़्यादा बना दे, तो उसे सरल करें। ऐनिमेशन, कैटेगरीज़, या अकाउंट स्क्रीन जैसी अतिरिक्त चीज़ें हटाने को कहें जिन्हें आपने माँगा नहीं था।
डेटा या साइन-इन केवल तभी जोड़ें जब क्विज़ को इसकी ज़रूरत हो
एक बुनियादी क्विज़ ऐप को बैकएंड की ज़रूरत नहीं होती। पहले काम करने वाले वर्ज़न के लिए हार्डकोडेड सैंपल प्रश्न पर्याप्त हैं।
Supabase केवल तब जोड़ें जब आपको इन चीज़ों की ज़रूरत हो:
- प्रश्न सेट्स को डेटाबेस में स्टोर करना
- यूज़र साइन-इन
- स्कोर या क्विज़ हिस्ट्री सेव करना
- एसेट्स या फ़ाइलें अपलोड करना
Moremade में Supabase डेटाबेस, साइन-इन, और फ़ाइल स्टोरेज संभाल सकता है। एक व्यावहारिक अगला कदम हो सकता है:
- एक
quizzesटेबल बनाएं - क्विज़ से लिंक की हुई
questionsटेबल बनाएं - यूज़र से लिंक की हुई
resultsटेबल बनाएं
फिर बदलाव को साधारण भाषा में प्रॉम्प्ट करें, जैसे: "इस ऐप को Supabase से कनेक्ट करें। क्विज़ और प्रश्नों को डेटाबेस में स्टोर करें, ईमेल साइन-इन जोड़ें, और हर पूरे हुए स्कोर को results टेबल में सेव करें।"
Stripe केवल तभी जोड़ें जब प्रोडक्ट वास्तव में एक्सेस के लिए शुल्क लेता हो, जैसे प्रीमियम क्विज़ पैक्स या पेड सर्टिफ़िकेशन्स। Moremade में आपके द्वारा सेट किए गए प्राइस के साथ चेकआउट के लिए Stripe कनेक्टर शामिल है। अगर आपका ऐप फ्री है, तो भुगतान बाद के लिए टाल दें। शुरुआती वर्ज़न कम मूविंग पार्ट्स होने पर वेलिडेट करना आसान होता है।
पब्लिश करने से पहले ऐप को मोबाइल पर टेस्ट करें
भले ही आप वेबसाइट बना रहे हों, उसे फ़ोन-साइज़ स्क्रीन पर टेस्ट करें। क्विज़ प्रोडक्ट्स अक्सर मोबाइल पर इस्तेमाल होते हैं, और छोटी इंटरैक्शन समस्याएँ जल्दी सामने आ जाती हैं।
इन बातों की जाँच करें:
- टेक्स्ट बिना ज़ूम किए पढ़ा जा सके
- उत्तर बटन आसानी से टैप हो सकें
- अगला कदम साफ़ दिखे
- लंबे प्रश्न लेआउट को न बिगाड़ें
- परिणाम स्क्रीन कम और ज़्यादा स्कोर दोनों को साफ़ तरीके से संभाले
- क्विज़ रीस्टार्ट करने पर state पूरी तरह रीसेट हो
अजीब कंटेंट भी टेस्ट करें:
- बहुत छोटे प्रश्न
- बहुत लंबे उत्तर
- सारे उत्तर गलत
- सारे उत्तर सही
- अगर डेटाबेस इस्तेमाल कर रहे हैं तो खाली या गायब प्रश्न डेटा
अगर कुछ फेल हो, तो सटीक फ़िक्स माँगें। उदाहरण के लिए: "छोटी स्क्रीन पर, answer cards को full width करें और Next बटन को safe spacing के साथ नीचे की ओर pinned रखें।"
Version history यहाँ उपयोगी है। अगर कोई बदलाव ऐप को खराब कर दे, तो आप सब कुछ prompt से undo करने की कोशिश करने के बजाय वापस जा सकते हैं।
पहला वर्ज़न पब्लिश करें और ज़रूरत हो तो डोमेन कनेक्ट करें
जब core flow काम करने लगे, उसे पब्लिश करें। Moremade एक क्लिक में फ्री yourname.moremade.ai सबडोमेन पर पब्लिश कर सकता है। यह internal review, यूज़र टेस्टिंग, या प्रोटोटाइप शेयर करने के लिए पर्याप्त है।
अगर आप paid plan पर हैं, तो आप custom domain कनेक्ट कर सकते हैं। डोमेन्स Moremade के अंदर भी खरीदे जा सकते हैं।
पब्लिश करने से पहले एक छोटा release check करें:
- title और intro text क्विज़ टॉपिक से मेल खाते हों
- स्कोरिंग सही हो
- बटन और लिंक काम करें
- कोई placeholder copy न बची हो
- अगर शामिल हो तो sign-in या payment flow काम करे
आप किसी भी समय पूरा source code ZIP के रूप में export कर सकते हैं या उसे GitHub पर push कर सकते हैं। यह तब महत्वपूर्ण है जब आप बाद में प्लेटफ़ॉर्म के बाहर development जारी रखना चाहते हों, अपनी टीम के साथ code review करना चाहते हों, या प्रोजेक्ट किसी और डेवलपर को सौंपना चाहते हों।
पहले AI-बिल्ट क्विज़ ऐप में बचने योग्य आम गलतियाँ
कुछ पैटर्न अनावश्यक rework कराते हैं।
- बहुत ज़्यादा फीचर्स से शुरुआत करना। अकाउंट, subscriptions, या analytics जोड़ने से पहले एक क्विज़ फ़्लो काम करवा लें।
- अस्पष्ट प्रॉम्प्ट लिखना। "मुझे एक क्विज़ ऐप बनाओ" बहुत कुछ खुला छोड़ देता है। स्क्रीन, स्कोरिंग, और प्लैटफ़ॉर्म बताएं।
- एक साथ सब कुछ बदलना। छोटे फ़ॉलो-अप प्रॉम्प्ट्स को नियंत्रित और टेस्ट करना आसान होता है।
- बहुत जल्दी डेटाबेस जोड़ना। वर्ज़न one के लिए static sample questions अक्सर पर्याप्त होते हैं।
- मोबाइल लेआउट को नज़रअंदाज़ करना। क्विज़ इंटरफ़ेस interaction-heavy होते हैं और छोटी screens पर कमज़ोर UI जल्दी दिख जाता है।
- edge cases न जाँचना। quiz के end logic, restart behavior, और लंबे answer text अक्सर सबसे पहले टूटते हैं।
- प्रीव्यू को final मान लेना। पहली generation एक draft होती है। सुधार के कुछ दौर अपेक्षित हैं।
एक अच्छा नियम है कि एक complete लेकिन simple loop का लक्ष्य रखें: quiz शुरू करें, प्रश्नों के उत्तर दें, स्कोर देखें, restart करें, publish करें। जब यह काम करे, तभी persistence, sign-in, या paid access जोड़ें — और सिर्फ़ तब जब वास्तव में आवश्यकता हो।
यह प्रॉम्प्ट आज़माएँ
सामान्य ज्ञान की प्रैक्टिस के लिए Expo के साथ React Native में एक मोबाइल क्विज़ ऐप बनाएं। इसमें एक होम स्क्रीन, एक क्विज़ स्क्रीन, और एक परिणाम स्क्रीन शामिल करें। 10 मल्टीपल-चॉइस प्रश्न इस्तेमाल करें, हर प्रश्न के चार उत्तर हों, और एक समय में एक ही प्रश्न दिखाएं। हर सही उत्तर पर 1 पॉइंट जोड़कर स्कोर रखें। आख़िरी प्रश्न के बाद कुल स्कोर, सही उत्तर, और क्विज़ रीस्टार्ट करने का एक बटन दिखाएं। साधारण साफ़-सुथरी स्टाइलिंग, बड़े टैप टार्गेट्स, और ऐप में हार्डकोडेड सैंपल प्रश्न डेटा इस्तेमाल करें।
प्रश्न
Moremade में क्विज़ ऐप बनाने में कितना खर्च आता है?
$0 का एक free plan है जिसमें हर 30 दिनों में 10 Build Units, ZIP export, और moremade.ai सबडोमेन पर publishing शामिल है। Moremade के अनुसार एक पहली साइट build करने में लगभग 8 units और छोटा edit लगभग 1 unit लगता है। Paid plans $17/month billed yearly से शुरू होते हैं या 100 Build Units हर 30 दिनों के लिए $20 monthly, जिसमें custom domains, private project hosting, और version history शामिल हैं।
क्या मुझे कोडिंग जाननी होगी?
नहीं। आप क्विज़ ऐप को साधारण भाषा में describe कर सकते हैं, live preview देख सकते हैं, और chat के जरिए बदलाव कर सकते हैं। फिर भी, screens और behavior को साफ़ तौर पर बताना मदद करता है। यदि आप कुछ code जानते हैं, तो code view और source export से project को inspect और extend करना आसान हो जाता है।
क्या क्विज़ ऐप का कोड मेरा होगा?
आप किसी भी समय पूरा source code ZIP के रूप में export कर सकते हैं या उसे GitHub पर push कर सकते हैं। Websites React + Tailwind code के रूप में और mobile apps React Native with Expo के रूप में जनरेट होती हैं। इसका मतलब है कि आपको प्रोजेक्ट को सिर्फ़ Moremade के अंदर ही रखने के लिए मजबूर नहीं किया जाता।
क्या मैं बाद में sign-in, saved scores, या payments जोड़ सकता हूँ?
हाँ, अगर ऐप को उनकी ज़रूरत हो। Moremade में database, sign-in, और file storage के लिए Supabase तथा आपके द्वारा सेट किए गए prices के साथ checkout के लिए Stripe के built-in connectors हैं। समझदारी भरा तरीका यह है कि पहले basic quiz flow बनाएं, फिर core experience काम करने के बाद persistence या payments जोड़ें।
क्या यह prototype से आगे scale कर सकता है?
यह एक व्यावहारिक शुरुआत हो सकती है क्योंकि आप source code export करके अपने workflow में development जारी रख सकते हैं। बड़े product के लिए, teams आमतौर पर simple hardcoded quiz से structured backend, बेहतर content management, testing, और समय के साथ अधिक detailed monitoring की ओर बढ़ती हैं।