10 KiB
क्विज़ ऐप
ये क्विज़ डेटा साइंस पाठ्यक्रम के लिए प्री- और पोस्ट-लेक्चर क्विज़ हैं, जो https://aka.ms/webdev-beginners पर उपलब्ध है।
अनुवादित क्विज़ सेट जोड़ना
किसी क्विज़ का अनुवाद जोड़ने के लिए, assets/translations
फोल्डर में समान क्विज़ संरचनाएँ बनाएं। मूल क्विज़ assets/translations/en
में हैं। क्विज़ को कई समूहों में विभाजित किया गया है। सुनिश्चित करें कि सही क्विज़ सेक्शन के साथ नंबरिंग मेल खाती हो। इस पाठ्यक्रम में कुल 40 क्विज़ हैं, जिनकी गिनती 0 से शुरू होती है।
यहाँ अनुवाद फ़ाइल की संरचना दी गई है:
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
अनुवाद संपादित करने के बाद, en
में दिए गए नियमों का पालन करते हुए, अनुवाद फोल्डर में index.js
फ़ाइल को संपादित करें और सभी फाइलें इम्पोर्ट करें।
assets/translations
में index.js
फ़ाइल को संपादित करें और नई अनुवादित फाइलें इम्पोर्ट करें।
उदाहरण के लिए, यदि आपका अनुवाद JSON ex.json
में है, तो 'ex' को स्थानीयकरण कुंजी बनाएं और इसे नीचे दिखाए गए अनुसार इम्पोर्ट करें:
index.js
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
क्विज़ ऐप को लोकल रूप से चलाएं
आवश्यकताएँ
- एक GitHub खाता
- Node.js और Git
इंस्टॉल और सेटअप
-
इस टेम्पलेट से एक रिपॉजिटरी बनाएं।
-
अपनी नई रिपॉजिटरी को क्लोन करें और क्विज़-ऐप पर नेविगेट करें:
git clone https://github.com/your-github-organization/repo-name cd repo-name/quiz-app
-
npm पैकेज और डिपेंडेंसी इंस्टॉल करें:
npm install
ऐप बनाएं
-
समाधान बनाने के लिए, यह कमांड चलाएं:
npm run build
ऐप शुरू करें
-
समाधान चलाने के लिए, यह कमांड चलाएं:
npm run dev
[वैकल्पिक] लिंटिंग
-
कोड को लिंट करने के लिए, यह कमांड चलाएं:
npm run lint
क्विज़ ऐप को Azure पर डिप्लॉय करें
आवश्यकताएँ
-
एक Azure सब्सक्रिप्शन। यहाँ मुफ्त में साइन अप करें।
इस क्विज़ ऐप को डिप्लॉय करने की लागत: मुफ्त
ऊपर दिए गए लिंक के माध्यम से Azure पर साइन इन करने के बाद, एक सब्सक्रिप्शन और रिसोर्स ग्रुप चुनें, फिर:
-
स्टैटिक वेब ऐप विवरण: एक नाम प्रदान करें और होस्टिंग प्लान चुनें।
-
GitHub लॉगिन: अपना डिप्लॉयमेंट स्रोत GitHub के रूप में सेट करें, फिर लॉग इन करें और फॉर्म में आवश्यक फ़ील्ड भरें:
- Organization – अपना संगठन चुनें।
- Repository – Web Dev for Beginners पाठ्यक्रम रिपॉजिटरी चुनें।
- Branch - एक ब्रांच चुनें (main)।
-
बिल्ड प्रीसेट्स: Azure Static Web Apps आपके ऐप्लिकेशन में उपयोग किए गए फ्रेमवर्क का पता लगाने के लिए एक डिटेक्शन एल्गोरिदम का उपयोग करता है।
- App location - ./quiz-app
- Api location -
- Output location - dist
-
डिप्लॉयमेंट: 'Review + Create' पर क्लिक करें, फिर 'Create' पर क्लिक करें।
एक बार डिप्लॉय होने के बाद, आपकी रिपॉजिटरी की .github डायरेक्टरी में एक वर्कफ़्लो फ़ाइल बनाई जाएगी। यह वर्कफ़्लो फ़ाइल उन इवेंट्स के निर्देश देती है जो ऐप को Azure पर फिर से डिप्लॉय करेंगे, जैसे कि ब्रांच main पर push।
वर्कफ़्लो फ़ाइल का उदाहरण
यहाँ GitHub Actions वर्कफ़्लो फ़ाइल का एक उदाहरण दिया गया है: name: Azure Static Web Apps CI/CDon: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "quiz-app" # App source code path api_location: ""API source code path optional output_location: "dist" #Built app content directory - optional
-
पोस्ट-डिप्लॉयमेंट: डिप्लॉयमेंट पूरा होने के बाद, 'Go to Deployment' पर क्लिक करें और फिर 'View app in browser' पर क्लिक करें।
एक बार जब आपका GitHub Action (वर्कफ़्लो) सफलतापूर्वक निष्पादित हो जाए, तो लाइव पेज को रिफ्रेश करें और अपना ऐप्लिकेशन देखें।
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।