From cb3d9994df8c474680a7fb1fcc8e0a51995db063 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Tue, 21 Nov 2023 14:21:58 +0000
Subject: [PATCH] u

---
 .dd.swp                        |   0
 dd                             |   0
 public/assets/qs.json          |  22 +++----
 src/components/MCQQuestion.vue |  87 +++++++++++++--------------
 src/components/MainHeader.vue  | 104 +--------------------------------
 src/components/Temp.vue        |  34 +++++++++++
 6 files changed, 88 insertions(+), 159 deletions(-)
 create mode 100644 .dd.swp
 create mode 100644 dd
 create mode 100644 src/components/Temp.vue

diff --git a/.dd.swp b/.dd.swp
new file mode 100644
index 0000000..e69de29
diff --git a/dd b/dd
new file mode 100644
index 0000000..e69de29
diff --git a/public/assets/qs.json b/public/assets/qs.json
index 06f786e..791548f 100644
--- a/public/assets/qs.json
+++ b/public/assets/qs.json
@@ -1,6 +1,6 @@
 [
 			{
-				"id" : 1,
+				"id" : 17567,
 				"qs" : "Inside which HTML element do we put the JavaScript?",
 				"options" : [
 					"&lt;script&gt;", 
@@ -13,7 +13,7 @@
 				"status": ""
 			},
 			{
-				"id" : 2,
+				"id" : 4545,
 				"qs" : "Where is the correct place to insert a JavaScript?",
 				"options" : [
 					"The &lt;head&gt; section", 
@@ -25,7 +25,7 @@
 				"status": ""
 			},
 			{
-				"id" : 3,
+				"id" : 223,
 				"qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
 				"options" : [
 					"&ltscript href=&quot;xxx.js&quot;>", 
@@ -37,7 +37,7 @@
 				"status": ""
 			},
 			{
-				"id" : 4,
+				"id" : 867,
 				"qs" : "The external JavaScript file must contain the &lt;script&gt; tag.",
 				"options" : [
 					 "True", 
@@ -48,7 +48,7 @@
 				"status": ""
 			},
 			{
-				"id" : 5,
+				"id" : 5544,
 				"qs" : "How do you write &quot;Hello World&quot; in an alert box?",
 				"options" : [
 					"alertBox(&quot;Hello World&quot;);", 
@@ -61,7 +61,7 @@
 				"status": ""
 			},
 			{
-				"id" : 6,
+				"id" : 765,
 				"qs" : "How do you create a function in JavaScript?",
 				"options" : [
 					"function myFunction()", 
@@ -73,7 +73,7 @@
 				"status": ""
 			},
 			{
-				"id" : 7,
+				"id" : 108,
 				"qs" : "How do you call a function named &quot;myFunction&quot;?",
 				"options" : [
 					"call function myFunction()", 
@@ -85,7 +85,7 @@
 				"status": ""
 			},
 			{
-				"id" : 8,
+				"id" : 4328,
 				"qs" : "How to write an IF statement in JavaScript?",
 				"options" : [
 					"if i = 5 then", 
@@ -98,7 +98,7 @@
 				"status": ""
 			},
 			{
-				"id" : 9,
+				"id" : 989,
 				"qs" : "Which of the following is a disadvantage of using JavaScript?",
 				"options" : [
 					"Client-side JavaScript does not allow the reading or writing of files.", 
@@ -111,7 +111,7 @@
 				"status": ""
 			},
 			{
-				"id" : 10,
+				"id" : 1450,
 				"qs" : "How to write an IF statement for executing some code if &quot;i&quot; is NOT equal to 5?",
 				"options" : [
 					"if (i <> 5)", 
@@ -124,7 +124,7 @@
 				"status": ""
 			},
 			{
-				"id" : 11,
+				"id" : 211,
 				"qs" : "How does a WHILE loop start?",
 				"options" : [
 					"while i = 1 to 10", 
diff --git a/src/components/MCQQuestion.vue b/src/components/MCQQuestion.vue
index 12fc413..e6c9f48 100644
--- a/src/components/MCQQuestion.vue
+++ b/src/components/MCQQuestion.vue
@@ -18,37 +18,27 @@
                 </div>
                 <div>
                     <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
+                        <span>Question ID: {{ qsActive.id }}</span>
                     <p v-html="qsData[qPoint].qs"></p>
                     <div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
                         <div v-for="(item, index) in qsActive.options" :key="index" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" :class="{ 'selected-option': selectedOptionIndex === index }">
                             <span class="font-bold">{{ index + 1 }} </span>&nbsp;
-                            <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsData[qPoint].id, status: 1 }" @change="selectOption(index)" />&nbsp;
+                            <input  type="radio" :id="item" v-model="totalAnswer" :value="index + 1" @change="selectOption(index)"/>&nbsp;
+                            <!-- <p v-else>Select kor age</p> -->
+                            <!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" />&nbsp; -->
                             <label :for="item" v-html="item"></label>
                         </div>
-
-                        <!-- <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
-                            <span class="font-bold">2. </span>
-                            <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].b" :value="{ answer: qsData[qPoint].b, questionId: qsData[qPoint].id }" />&nbsp;
-                            <label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
-                        </div> 
-                        <div v-if="qsData[qPoint].c" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
-                            <span class="font-bold">3. </span>
-                            <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].c" :value="{ answer: qsData[qPoint].c, questionId: qsData[qPoint].id }" />&nbsp;
-                            <label :for="qsData[qPoint].c" v-html="qsData[qPoint].c"></label>
-                        </div> 
-                        <div v-if="qsData[qPoint].d" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
-                            <span class="font-bold">4. </span>
-                            <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].d" :value="{ answer: qsData[qPoint].d, questionId: qsData[qPoint].id }" />&nbsp;
-                            <label :for="qsData[qPoint].d" v-html="qsData[qPoint].d"></label>
-                        </div> -->
                     </div> 
                     <div class="flex flex-row place-content-between mt-4 text-sm md:text-base">
                         <button v-on:click="getPrevQs" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75" :disabled="qPoint <= 0">Previous Question</button>
                         <div class="flex flex-col md:flex-row gap-2 md:gap-4">
-                            <button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
-                            <button v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
+                            <!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
+                            <button :disabled="this.totalAnswer <= 0" :class="{ 'button-visibility': this.totalAnswer <= 0 }"  @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
+                            <!-- :class="{ 'button-visibility': this.totalAnswer <= 0 }" -->
+                            <button :disabled="this.totalAnswer >= 1" :class="{ 'button-visibility': this.totalAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
+                            <!-- :class="{ 'button-visibility': this.totalAnswer >= 1 }" -->
                         </div>
-                        <button :disabled="qPoint >= noOfQs - 1" @click="getNextQs(); selectOption(index)" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
+                        <button :disabled="qPoint >= noOfQs - 1" @click="getNextQs(); selectOption(index);" class="bg-green-700 float-right p-1 sm:p-2.5 text-white font-bold rounded-lg active:bg-green-700/75"> Next  Question</button>
                     </div>
                     </div>
                     <div v-else>No Data Found</div>
@@ -56,63 +46,64 @@
                 </div>
             </div>
         </section>
-        <!-- <p v-for="(item, index) in qsActive.options" >  : {{ item }}</p> -->
     </div>
 </template>
-
 <script>
 export default {
     data() {
         return {
-            selectedOptions: {},
+            totalAnswer: {},
+            allAnswer: [],
             qsData: "",
             noOfQs: 0,
             qPoint: 0,
+            qsStatus: 0,
             countdown: 10,
             counting: false,
             qsActive:[],
-            selectedOptionIndex: '#7c4c23', // Add this property
-
+            ansNo:0,
+            selectedOptionIndex: null, // Add this property
         };
     },
     methods: {
-        getQutValue() {
-            if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
+        saveAns() {
+            // if (this.totalAnswer !== null) {
                 const selectedAnswer = {
-                    answer: this.selectedOptions[this.qPoint],
+                    answer: this.totalAnswer,
                     questionId: this.qsData[this.qPoint].id,
-                    status: this.qsStatus,
+                    view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
                 };
-                console.log(this.selectedOptions);
-            }
+                this.allAnswer.push(selectedAnswer);
+                console.log('array', this.allAnswer);
+            // } else {
+            //     // Show an alert or set a message indicating that no option is selected
+            //     alert("Select an answer before saving.");
+            // }
         },
         resetRadioInputs() {
             // this.selectedOptions = {};
-            this.selectedOptionIndex = null;
+            this.totalAnswer = null;
         },
         getNextQs() {
             this.qPoint++;
             this.qsActive=this.qsData[this.qPoint];
             this.resetRadioInputs();
-            // console.log(this.qsActive);
-
-            
+            // this.resetRadioInputs();
+            // console.log(this.qsActive);            
         },
         getPrevQs() {
             this.qPoint--;
             this.qsActive=this.qsData[this.qPoint];
             this.selectOption();
         },
-        previewLater(){
-            this.selectedOptionIndex = index;
-            if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
-                const selectedAnswer = {
-                    answer: this.selectedOptions[this.qPoint],
-                    questionId: this.qsData[this.qPoint].id,
-                    status: this.qsStatus = 0,
-                };
-                console.log("status : 1", this.selectedOptions);
-            }
+        reviewLater(){
+            this.getNextQs();
+            const selectedAnswer = {
+                answer: 0,
+                questionId: this.qsData[this.qPoint].id,
+                view: this.viewStatus = 1// Set status to 1 for "Save Answer"
+            };
+                this.allAnswer.push(selectedAnswer);
         },
         selectOption(index) {
             this.selectedOptionIndex = index;
@@ -144,7 +135,13 @@ export default {
 };
 </script>
 <style>
+.button-visibility{
+    /* display: none; */
+    opacity: 0.5;
+    cursor: not-allowed;
+}
     .selected-option {
         background-color: #05b3a4;
     }
+
 </style>
\ No newline at end of file
diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
index df7fc67..79bc761 100644
--- a/src/components/MainHeader.vue
+++ b/src/components/MainHeader.vue
@@ -1,107 +1,5 @@
 <template>
-    <header>
-        <nav class="bg-gray-800">
-  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-    <div class="relative flex h-16 items-center justify-between">
-      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-        <!-- Mobile menu button-->
-        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
-          <span class="sr-only">Open main menu</span>
-          <!--
-            Icon when menu is closed.
-
-            Heroicon name: outline/bars-3
-
-            Menu open: "hidden", Menu closed: "block"
-          -->
-          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <!--
-            Icon when menu is open.
-
-            Heroicon name: outline/x-mark
-
-            Menu open: "block", Menu closed: "hidden"
-          -->
-          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-        <div class="flex flex-shrink-0 items-center">
-          <img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
-          <img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
-        </div>
-        <div class="hidden sm:ml-6 sm:block">
-          <div class="flex space-x-4">
-            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
-
-            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
-          </div>
-        </div>
-      </div>
-      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-        <button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
-          <span class="sr-only">View notifications</span>
-          <!-- Heroicon name: outline/bell -->
-          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
-          </svg>
-        </button>
-
-        <!-- Profile dropdown -->
-        <div class="relative ml-3">
-          <div>
-            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <span class="sr-only">Open user menu</span>
-              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-            </button>
-          </div>
-
-          <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-100"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
-          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-            <!-- Active: "bg-gray-100", Not Active: "" -->
-            <!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a> -->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="sm:hidden" id="mobile-menu">
-    <div class="space-y-1 px-2 pt-2 pb-3">
-      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
-
-      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
-    </div>
-  </div>
-</nav>
-
-    </header>
+    <div></div>
   </template>
   
   <style scoped>
diff --git a/src/components/Temp.vue b/src/components/Temp.vue
new file mode 100644
index 0000000..96b3d04
--- /dev/null
+++ b/src/components/Temp.vue
@@ -0,0 +1,34 @@
+<script>
+export default {
+  // ... (other options)
+
+  data() {
+    return {
+      // ... (other data properties)
+      totalAnswer: [], // Change this to an array
+      allAnswer: [],
+    };
+  },
+
+  methods: {
+    saveAns() {
+      const selectedAnswer = {
+        answer: this.totalAnswer,
+        questionId: this.qsData[this.qPoint].id,
+        status: (this.qsStatus = 1), // Set status to 1 for "Save Answer"
+      };
+
+      // Push the selected answer into the allAnswer array
+      this.allAnswer.push(this.selectedAnswer);
+
+      console.log("selected options", selectedAnswer);
+      console.log("question ID:" + this.qsActive.id);
+      console.log("ans no: " + this.ansNo);
+    },
+
+    // ... (other methods)
+  },
+};
+
+
+</script>
\ No newline at end of file