191 lines
8.5 KiB
Vue
191 lines
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<section class="container-fluid bg-green-600 mb-16">
|
|
<div class="container mx-auto px-4 ">
|
|
<h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
|
|
</div>
|
|
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
|
|
</section>
|
|
<section class="container mx-auto " >
|
|
<div class="flex flex-col md:flex-row justify-center gap-4">
|
|
<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">
|
|
<p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
|
|
<div class="flex flex-row place-items-center gap-x-2">
|
|
<!-- <p class="text-xl font-bold">00:00</p> -->
|
|
<!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
|
|
</div>
|
|
</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 + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
|
|
<span class="font-bold">{{ index + 1 }} </span>
|
|
<input type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />
|
|
<!-- <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)" /> -->
|
|
<label :for="item" v-html="item"></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">
|
|
<!-- <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.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 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.saveAnswer <= 0 }" -->
|
|
<button :disabled="this.saveAnswer >= 1" :class="{ 'button-visibility': this.saveAnswer >= 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.saveAnswer >= 1 }" -->
|
|
</div>
|
|
<button :disabled="qPoint >= noOfQs + 2" @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>
|
|
<!-- v-if="qPoint == noOfQs-1" -->
|
|
<div v-if="qPoint == noOfQs-1" class="flex flex-col place-items-center">
|
|
<p>Now you can submit your answer</p>
|
|
<button @click="submitAnswer" class="bg-[#FF0000] p-2.5 text-white font-bold rounded-lg">Final Submit</button>
|
|
</div>
|
|
</div>
|
|
<div v-else>No Data Found</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<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>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
saveAnswer: 0,
|
|
totalAnswer: [],
|
|
qsData: "",
|
|
noOfQs: 0,
|
|
qPoint: 0,
|
|
qsStatus: 0,
|
|
countdown: 10,
|
|
counting: false,
|
|
qsActive:[],
|
|
ansNo:0,
|
|
selectedOptionIndex: null, // Add this property
|
|
};
|
|
},
|
|
methods: {
|
|
resetRadioInputs() {
|
|
// this.selectedOptions = {};
|
|
this.saveAnswer = null;
|
|
},
|
|
saveAns() {
|
|
// if (this.saveAnswer !== null) {
|
|
const selectedAnswer = {
|
|
questionId: this.qsData[this.qPoint].id,
|
|
answer: this.saveAnswer,
|
|
view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
|
|
};
|
|
this.totalAnswer.push(selectedAnswer);
|
|
console.log('array', this.totalAnswer);
|
|
// } else {
|
|
// // Show an alert or set a message indicating that no option is selected
|
|
// alert("Select an answer before saving.");
|
|
// }
|
|
this.resetRadioInputs();
|
|
if (this.totalAnswer.length <= 24) {
|
|
this.getNextQs();
|
|
}
|
|
},
|
|
submitAnswer(){
|
|
fetch(`https://api8.siliconpin.com/items/users_answers`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type' : 'application/json',
|
|
},
|
|
body: JSON.stringify({ answers: this.totalAnswer })
|
|
})
|
|
.then(response => {
|
|
if(response.ok){
|
|
console.log('Data Saved Succesfully')
|
|
} else{
|
|
console.log('Something Wrong')
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('an error occoured', error)
|
|
})
|
|
},
|
|
getNextQs() {
|
|
this.qPoint++;
|
|
this.qsActive=this.qsData[this.qPoint];
|
|
this.resetRadioInputs();
|
|
// this.resetRadioInputs();
|
|
// console.log(this.qsActive);
|
|
},
|
|
getPrevQs() {
|
|
this.qPoint--;
|
|
this.qsActive=this.qsData[this.qPoint];
|
|
this.selectOption();
|
|
},
|
|
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.totalAnswer.push(selectedAnswer);
|
|
console.log('array later', this.totalAnswer);
|
|
|
|
},
|
|
selectOption(index) {
|
|
this.selectedOptionIndex = index;
|
|
},
|
|
// submitExam(){
|
|
// if (this.qPoint == this.noOfQs) {
|
|
// aler
|
|
// }
|
|
// },
|
|
},
|
|
mounted() {
|
|
fetch('/assets/qs.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.qsData=data;
|
|
this.noOfQs = this.qsData.length;
|
|
this.qsActive=this.qsData[0];
|
|
// console.log(this.qsActive);
|
|
// console.log(this.noOfQs);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
// this.remainingTime();
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.response-indicator{
|
|
width: 45px;
|
|
height: 45px;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding-top: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
.response{
|
|
background-color: red;
|
|
}
|
|
.button-visibility{
|
|
/* display: none; */
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.selected-option {
|
|
background-color: #05b3a4;
|
|
}
|
|
|
|
</style> |