suvo
/
beanstalkedu-exam-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

u

b2
dev sp 2023-11-21 14:21:58 +00:00
parent bb07b814e3
commit cb3d9994df
6 changed files with 88 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.dd.swp Normal file
View File

0
dd Normal file
View File

22
public/assets/qs.json
View File

@ -1,6 +1,6 @@
[ [
{ {
"id" : 1, "id" : 17567,
"qs" : "Inside which HTML element do we put the JavaScript?", "qs" : "Inside which HTML element do we put the JavaScript?",
"options" : [ "options" : [
"<script>", "<script>",
@ -13,7 +13,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 2, "id" : 4545,
"qs" : "Where is the correct place to insert a JavaScript?", "qs" : "Where is the correct place to insert a JavaScript?",
"options" : [ "options" : [
"The <head> section", "The <head> section",
@ -25,7 +25,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 3, "id" : 223,
"qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?", "qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options" : [ "options" : [
"&ltscript href="xxx.js">", "&ltscript href="xxx.js">",
@ -37,7 +37,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 4, "id" : 867,
"qs" : "The external JavaScript file must contain the <script> tag.", "qs" : "The external JavaScript file must contain the <script> tag.",
"options" : [ "options" : [
"True", "True",
@ -48,7 +48,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 5, "id" : 5544,
"qs" : "How do you write "Hello World" in an alert box?", "qs" : "How do you write "Hello World" in an alert box?",
"options" : [ "options" : [
"alertBox("Hello World");", "alertBox("Hello World");",
@ -61,7 +61,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 6, "id" : 765,
"qs" : "How do you create a function in JavaScript?", "qs" : "How do you create a function in JavaScript?",
"options" : [ "options" : [
"function myFunction()", "function myFunction()",
@ -73,7 +73,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 7, "id" : 108,
"qs" : "How do you call a function named "myFunction"?", "qs" : "How do you call a function named "myFunction"?",
"options" : [ "options" : [
"call function myFunction()", "call function myFunction()",
@ -85,7 +85,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 8, "id" : 4328,
"qs" : "How to write an IF statement in JavaScript?", "qs" : "How to write an IF statement in JavaScript?",
"options" : [ "options" : [
"if i = 5 then", "if i = 5 then",
@ -98,7 +98,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 9, "id" : 989,
"qs" : "Which of the following is a disadvantage of using JavaScript?", "qs" : "Which of the following is a disadvantage of using JavaScript?",
"options" : [ "options" : [
"Client-side JavaScript does not allow the reading or writing of files.", "Client-side JavaScript does not allow the reading or writing of files.",
@ -111,7 +111,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 10, "id" : 1450,
"qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?", "qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
"options" : [ "options" : [
"if (i <> 5)", "if (i <> 5)",
@ -124,7 +124,7 @@
"status": "" "status": ""
}, },
{ {
"id" : 11, "id" : 211,
"qs" : "How does a WHILE loop start?", "qs" : "How does a WHILE loop start?",
"options" : [ "options" : [
"while i = 1 to 10", "while i = 1 to 10",

79
src/components/MCQQuestion.vue
View File

@ -18,37 +18,27 @@
</div> </div>
<div> <div>
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4"> <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> <p v-html="qsData[qPoint].qs"></p>
<div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto"> <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 }"> <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; <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> <label :for="item" v-html="item"></label>
</div> </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>
<div class="flex flex-row place-content-between mt-4 text-sm md:text-base"> <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> <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"> <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> <!-- <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 v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button> <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> </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> </div>
<div v-else>No Data Found</div> <div v-else>No Data Found</div>
@ -56,63 +46,64 @@
</div> </div>
</div> </div>
</section> </section>
<!-- <p v-for="(item, index) in qsActive.options" > : {{ item }}</p> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
selectedOptions: {}, totalAnswer: {},
allAnswer: [],
qsData: "", qsData: "",
noOfQs: 0, noOfQs: 0,
qPoint: 0, qPoint: 0,
qsStatus: 0,
countdown: 10, countdown: 10,
counting: false, counting: false,
qsActive:[], qsActive:[],
selectedOptionIndex: '#7c4c23', // Add this property ansNo:0,
selectedOptionIndex: null, // Add this property
}; };
}, },
methods: { methods: {
getQutValue() { saveAns() {
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) { // if (this.totalAnswer !== null) {
const selectedAnswer = { const selectedAnswer = {
answer: this.selectedOptions[this.qPoint], answer: this.totalAnswer,
questionId: this.qsData[this.qPoint].id, 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() { resetRadioInputs() {
// this.selectedOptions = {}; // this.selectedOptions = {};
this.selectedOptionIndex = null; this.totalAnswer = null;
}, },
getNextQs() { getNextQs() {
this.qPoint++; this.qPoint++;
this.qsActive=this.qsData[this.qPoint]; this.qsActive=this.qsData[this.qPoint];
this.resetRadioInputs(); this.resetRadioInputs();
// this.resetRadioInputs();
// console.log(this.qsActive); // console.log(this.qsActive);
}, },
getPrevQs() { getPrevQs() {
this.qPoint--; this.qPoint--;
this.qsActive=this.qsData[this.qPoint]; this.qsActive=this.qsData[this.qPoint];
this.selectOption(); this.selectOption();
}, },
previewLater(){ reviewLater(){
this.selectedOptionIndex = index; this.getNextQs();
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
const selectedAnswer = { const selectedAnswer = {
answer: this.selectedOptions[this.qPoint], answer: 0,
questionId: this.qsData[this.qPoint].id, questionId: this.qsData[this.qPoint].id,
status: this.qsStatus = 0, view: this.viewStatus = 1// Set status to 1 for "Save Answer"
}; };
console.log("status : 1", this.selectedOptions); this.allAnswer.push(selectedAnswer);
}
}, },
selectOption(index) { selectOption(index) {
this.selectedOptionIndex = index; this.selectedOptionIndex = index;
@ -144,7 +135,13 @@ export default {
}; };
</script> </script>
<style> <style>
.button-visibility{
/* display: none; */
opacity: 0.5;
cursor: not-allowed;
}
.selected-option { .selected-option {
background-color: #05b3a4; background-color: #05b3a4;
} }
</style> </style>

104
src/components/MainHeader.vue
View File

@ -1,107 +1,5 @@
<template> <template>
<header> <div></div>
<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>
</template> </template>
<style scoped> <style scoped>

34
src/components/Temp.vue Normal file
View File

@ -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>