added hindi and english language to the instrustion and inputform

package.json

@@ -21,6 +21,7 @@
     "lodash.clonedeep": "^4.5.0",
     "uuid": "^9.0.0",
     "vue": "^3.2.31",
+    "vue-i18n": "^9.14.0",
     "vue-router": "^4.0.12",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-click-away": "^1.2.4",

src/components/LocalePicker.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <select v-model="selectedLocale" @change="changeLocale">
+      <option value="en">English</option>
+      <option value="hi">हिन्दी</option>
+      <!-- Add more languages dynamically if needed -->
+    </select>
+    <p>{{ $t('Select Language') }}</p> <!-- Assuming you use vue-i18n for translations -->
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      selectedLocale: this.locale
+    };
+  },
+  computed: {
+    ...mapGetters(['locale'])
+  },
+  watch: {
+    // Watch Vuex store's locale and update the selectedLocale accordingly
+    locale(newLocale) {
+      this.selectedLocale = newLocale;
+    }
+  },
+  methods: {
+    ...mapActions(['setLocale']),
+    changeLocale() {
+      this.setLocale(this.selectedLocale);
+      // If using vue-i18n, update its locale here
+      this.$i18n.locale = this.selectedLocale;
+    }
+  }
+}
+</script>

src/locales/en.json

@@ -0,0 +1,58 @@
+{
+    "instructions": {
+      "header": "PLEASE READ THE FOLLOWING INSTRUCTIONS CAREFULLY",
+
+        "Instruction1": "Please fill the form correctly and submit to access the test.",
+        "Instruction2": "Please select your course and grade correctly to access the right test.",
+        "Instruction3": "Test Details:",
+        "Instruction4": "Class 11 JEE: 120 minutes, 75 questions (300 marks)",
+        "Instruction5": "Class 12 JEE: 180 minutes, 75 questions (300 marks)",
+        "Instruction6": "Class 11 NEET: 120 minutes, 180 questions (720 marks)",
+        "Instruction7": "Class 12 NEET: 180 minutes, 180 questions (720 marks)",
+        "Instruction8": "Scoring Pattern -- Correct Answer: +4, Wrong Answer: -1, Skipped: 0",
+        "Instruction9": "During the test, to confirm your answer please click SAVE & NEXT. Your response to a question will not be considered in case you fail to save your answer.",
+        "Instruction10": "Only press END TEST once you have completed and reviewed your answers. You will not be able to change your responses once you click on END TEST."
+
+    },
+    "formLabels": {
+      "name": "*Name",
+      "gender": "*Gender",
+      "month": "*Month",
+      "day": "*Day",
+      "year": "*Year",
+      "fatherName": "*Father's Name",
+      "motherName": "*Mother's Name",
+      "category": "*Category",
+      "physicallyHandicapped": "*Physically Handicapped",
+      "region": "*Region",
+      "state": "*State",
+      "city": "*City/Town",
+      "school": "*School Name",
+      "course": "*Course",
+      "stream": "*Stream",
+      "grade": "*Grade",
+      "email": "Email Address",
+      "phoneNumber": "*Phone Number",
+      "familyIncome": "*Family Income per Annum"
+    },
+    "formHints": {
+      "name": "Enter your full name. Example: Karn Mathur",
+      "gender": "Select your gender.",
+      "dob": "Select your Date of Birth.",
+      "fatherName": "Enter your father's full name.",
+      "motherName": "Enter your mother's full name.",
+      "category": "Select your category. Example: OBC",
+      "physicallyHandicapped": "Please select Yes if you are physically handicapped",
+      "region": "Please select your JNV's region. Example: Shillong",
+      "state": "Please select your JNV's state. Example: Sikkim",
+      "city": "Enter your city's name. Example: Hyderabad",
+      "school": "Please select your JNV's name. Example: JNV Bidar",
+      "course": "Please select your course: JEE or NEET",
+      "stream": "Please select your stream. Example: PCM (Physics, Chemistry, Math)",
+      "grade": "Select 12 if you are in 12th grade/class",
+      "email": "Enter a valid email address if you have one. Example: [email protected]",
+      "phoneNumber": "Please enter a valid mobile number. Example: 9848022335",
+      "familyIncome": "Please enter your family income per annum (year) in digits. Example: 100000"
+    }
+  }
+

src/locales/hi.json

@@ -0,0 +1,59 @@
+{
+    "instructions": {
+      "header": "कृपया निम्नलिखित निर्देशों को ध्यान से पढ़ें",
+
+        "Instruction1": "कृपया फॉर्म को सही ढंग से भरें और परीक्षण तक पहुंचने के लिए सबमिट करें।",
+        "Instruction2": "सही परीक्षण तक पहुँचने के लिए कृपया अपने पाठ्यक्रम और ग्रेड का सही चयन करें।",
+        "Instruction3": "परीक्षण विवरण:",
+        "Instruction4": "कक्षा 11 JEE: 120 मिनट, 75 प्रश्न (300 अंक)",
+        "Instruction5": "कक्षा 12 JEE: 180 मिनट, 75 प्रश्न (300 अंक)",
+        "Instruction6": "कक्षा 11 NEET: 120 मिनट, 180 प्रश्न (720 अंक)",
+        "Instruction7": "कक्षा 12 NEET: 180 मिनट, 180 प्रश्न (720 अंक)",
+        "Instruction8": "स्कोरिंग पैटर्न -- सही उत्तर: +4, गलत उत्तर: -1, छोड़ा हुआ: 0",
+        "Instruction9": "परीक्षण के दौरान, अपने उत्तर की पुष्टि करने के लिए कृपया SAVE & NEXT पर क्लिक करें। यदि आप अपना उत्तर सहेजने में विफल रहते हैं, तो आपके उत्तर पर विचार नहीं किया जाएगा।",
+        "Instruction10": "केवल END TEST पर क्लिक करें जब आपने अपने उत्तर पूरे कर लिए हों और उनकी समीक्षा कर ली हो। एक बार END TEST पर क्लिक करने के बाद आप अपने उत्तरों को बदल नहीं पाएंगे।"
+
+
+    },
+    "formLabels": {
+      "name": "*नाम",
+      "gender": "*लिंग",
+      "month": "*माह",
+      "day": "*दिन",
+      "year": "*वर्ष",
+      "fatherName": "*पिता का नाम",
+      "motherName": "*माता का नाम",
+      "category": "*श्रेणी",
+      "physicallyHandicapped": "*शारीरिक रूप से विकलांग",
+      "region": "*क्षेत्र",
+      "state": "*राज्य",
+      "city": "*शहर/कस्बा",
+      "school": "*स्कूल का नाम",
+      "course": "*कोर्स",
+      "stream": "*धारा",
+      "grade": "*ग्रेड",
+      "email": "ईमेल पता",
+      "phoneNumber": "*फोन नंबर",
+      "familyIncome": "*वार्षिक पारिवारिक आय"
+    },
+    "formHints": {
+      "name": "अपना पूरा नाम दर्ज करें। उदाहरण: कर्न माथुर",
+      "gender": "अपना लिंग चुनें।",
+      "dob": "अपनी जन्मतिथि चुनें।",
+      "fatherName": "अपने पिता का पूरा नाम दर्ज करें।",
+      "motherName": "अपनी माँ का पूरा नाम दर्ज करें।",
+      "category": "अपनी श्रेणी चुनें। उदाहरण: OBC",
+      "physicallyHandicapped": "यदि आप शारीरिक रूप से विकलांग हैं तो कृपया हाँ चुनें",
+      "region": "अपनी JNV के क्षेत्र का चयन करें। उदाहरण: शिलांग",
+      "state": "अपनी JNV के राज्य का चयन करें। उदाहरण: सिक्किम",
+      "city": "अपने शहर का नाम दर्ज करें। उदाहरण: हैदराबाद",
+      "school": "अपनी JNV के नाम का चयन करें। उदाहरण: JNV बिदर",
+      "course": "अपना कोर्स चुनें: JEE या NEET",
+      "stream": "अपनी धारा चुनें। उदाहरण: PCM (भौतिकी, रसायन, गणित)",
+      "grade": "यदि आप 12वीं कक्षा में हैं तो 12 चुनें",
+      "email": "यदि आपके पास एक मान्य ईमेल पता है तो दर्ज करें। उदाहरण: [email protected]",
+      "phoneNumber": "कृपया एक मान्य मोबाइल नंबर दर्ज करें। उदाहरण: 9848022335",
+      "familyIncome": "कृपया अपने वार्षिक पारिवारिक आय को अंकों में दर्ज करें। उदाहरण: 100000"
+    }
+  }
+

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import { createI18n } from 'vue-i18n';
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
@@ -10,6 +11,20 @@ import VueClickAway from "vue3-click-away";
 import "./index.css";
 import "vue-toastification/dist/index.css";
 
+import en from './locales/en.json';
+import hi from './locales/hi.json';
+
+// Create i18n instance
+const i18n = createI18n({
+  legacy: false,
+  locale: store.getters.locale || 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en,
+    hi
+  }
+});
+
 const app = createApp(App).use(store).use(router);
 
 const filterBeforeCreate = (
@@ -27,6 +42,8 @@ const filterBeforeCreate = (
   return toast;
 };
 
+app.use(store);
+app.use(i18n);
 app.use(Toast, { filterBeforeCreate });
 app.use(VueClickAway);
 app.use(plugin, defaultConfig);

src/store/index.ts

@@ -1,11 +1,12 @@
 import { createStore } from "vuex";
-import { QuestionBucketingMap } from "../types"
+import { QuestionBucketingMap } from "../types";
 
 export default createStore({
   state: {
     isSpinnerShown: false,
     questionBucketingMaps: [] as Array<QuestionBucketingMap>,
     bucketSize: 10,
+    locale: "en", // default locale
   },
   mutations: {
     showSpinner(state) {
@@ -17,13 +18,21 @@ export default createStore({
     setQuestionBucketMap(state, value: Array<QuestionBucketingMap>) {
       state.questionBucketingMaps = value;
     },
-    updateBucketFetchedStatus(state, details: {
-      qsetIndex: number,
-      bucketIndex: number,
-      fetchedStatus: boolean
-    }) {
-      state.questionBucketingMaps[details.qsetIndex][details.bucketIndex].isFetched = details.fetchedStatus
-    }
+    updateBucketFetchedStatus(
+      state,
+      details: {
+        qsetIndex: number;
+        bucketIndex: number;
+        fetchedStatus: boolean;
+      }
+    ) {
+      state.questionBucketingMaps[details.qsetIndex][
+        details.bucketIndex
+      ].isFetched = details.fetchedStatus;
+    },
+    setLocale(state, locale: string) {
+      state.locale = locale;
+    },
   },
   actions: {
     showSpinner({ commit }) {
@@ -33,14 +42,23 @@ export default createStore({
       commit("hideSpinner");
     },
     setQuestionBucketMap({ commit }, value: Array<QuestionBucketingMap>) {
-      commit("setQuestionBucketMap", value)
+      commit("setQuestionBucketMap", value);
     },
-    updateBucketFetchedStatus({ commit }, details: {
-      qsetIndex: number,
-      bucketIndex: number,
-      fetchedStatus: boolean
-    }) {
-      commit("updateBucketFetchedStatus", details)
+    updateBucketFetchedStatus(
+      { commit },
+      details: {
+        qsetIndex: number;
+        bucketIndex: number;
+        fetchedStatus: boolean;
+      }
+    ) {
+      commit("updateBucketFetchedStatus", details);
     },
+    setLocale({ commit }, locale: string) {
+      commit("setLocale", locale);
+    },
+  },
+  getters: {
+    locale: (state) => state.locale,
   },
 });