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

work on response section

b2
dev sp 2023-12-18 13:10:23 +00:00
parent bb6f9e4356
commit 147d07f50b
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/MCQQuestion.vue
View File

@ -11,7 +11,9 @@
<div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl"> <div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl">
<div class="flex flex-row place-content-between"> <div class="flex flex-row place-content-between">
<p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p> <p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
<div class="flex flex-row place-items-center gap-x-2"> <div class="flex flex-col place-items-center gap-x-2">
<p>Answered: {{ totalAnswered }}</p>
<p>Reviewed: {{ totalReview }}</p>
<!-- <p class="text-xl font-bold">00:00</p> --> <!-- <p class="text-xl font-bold">00:00</p> -->
<!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> --> <!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
</div> </div>
@ -52,6 +54,8 @@
<div class="flex flex-col border-t-2 border-yellow-500 shadow-lg rounded-lg p-2"> <div class="flex flex-col border-t-2 border-yellow-500 shadow-lg rounded-lg p-2">
<p class="text-center py-4 text-xl font-bold">Your Response</p> <p class="text-center py-4 text-xl font-bold">Your Response</p>
<div class="grid grid-cols-3 gap-2"> <div class="grid grid-cols-3 gap-2">
<!-- <p class="response-indicator" v-for="(question, index) in qsData" :key="index" :class="{'response' : totalAnswer[index] && totalAnswer[index].answer < 0, 'response-review' : totalAnswer[index] && totalAnswer[index].answer === 0}">{{ index + 1 }}</p> -->
<!-- <p class="response-indicator" v-for="(response, index) in qsData" :key="index" :class="{'response' : totalAnswer.answer <= 0}">{{ index + 1 }}</p> -->
<p class="bg-green-600 response-indicator shadow-md font-bold text-white text-xl" v-for="(response, index) in totalAnswer" :key="index " :class="{'response' : response.answer <= 0}"> {{ index + 1}}</p> <p class="bg-green-600 response-indicator shadow-md font-bold text-white text-xl" v-for="(response, index) in totalAnswer" :key="index " :class="{'response' : response.answer <= 0}"> {{ index + 1}}</p>
</div> </div>
</div> </div>
@ -74,8 +78,16 @@ export default {
qsActive:[], qsActive:[],
ansNo:0, ansNo:0,
selectedOptionIndex: null, // Add this property selectedOptionIndex: null, // Add this property
totalAnswered: 0,
totalReview: 0,
}; };
}, },
computed: {
combinedArray() {
// Combine the arrays into a single array
return [this.qsData, this.totalAnswer];
},
},
methods: { methods: {
resetRadioInputs() { resetRadioInputs() {
// this.selectedOptions = {}; // this.selectedOptions = {};
@ -83,6 +95,7 @@ export default {
}, },
saveAns() { saveAns() {
// if (this.saveAnswer !== null) { // if (this.saveAnswer !== null) {
this.totalAnswered++;
const selectedAnswer = { const selectedAnswer = {
questionId: this.qsData[this.qPoint].id, questionId: this.qsData[this.qPoint].id,
answer: this.saveAnswer, answer: this.saveAnswer,
@ -132,6 +145,7 @@ export default {
}, },
reviewLater(){ reviewLater(){
this.getNextQs(); this.getNextQs();
this.totalReview++;
const selectedAnswer = { const selectedAnswer = {
questionId: this.qsData[this.qPoint - 1].id, questionId: this.qsData[this.qPoint - 1].id,
answer: 0, answer: 0,
@ -174,6 +188,7 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
/* border: 2px solid black; */
border-radius: 50%; border-radius: 50%;
} }
.response{ .response{