66 lines
2.6 KiB
Vue
66 lines
2.6 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 px-4" v-for="item in qsData" :key="item.id">
|
|
<div class="flex flex-col justify-center place-items-center">
|
|
<div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-xl">
|
|
<div class="flex flex-row place-content-between">
|
|
<p class="text-xl font-bold">Question {{ item.id }}</p>
|
|
<div class="flex flex-row place-items-center gap-x-2">
|
|
<i id="spinclock" class="fa fa-clock-o" style="font-size:30px" />
|
|
<p class="text-xl font-bold" id="countdown">00:00</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="mt-4 text-2xl">{{ item.qs }}</p>
|
|
<div class="flex flex-col gap-y-4 rounded-lg mt-4">
|
|
<!-- Loop through the options dynamically -->
|
|
<div v-for="(option, index) in item.options[0]" :key="index" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
|
|
<span class="font-bold">{{ index }}.</span>
|
|
<input v-model="selectedOptions[item.id]" type="radio" :name="'questionOption' + item.id" :id="'option' + item.id" :value="option + item.id">
|
|
<label :for="'option' + item.id " v-html="option"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="flex flex-row place-content-between mt-4">
|
|
<button class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Previous</button>
|
|
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Save for Later</button>
|
|
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save & Next</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedOptions: {}, // Use an object to store selected options for each question
|
|
qsData: null,
|
|
};
|
|
},
|
|
methods: {
|
|
getQutValue() {
|
|
console.log(this.selectedOptions);
|
|
},
|
|
},
|
|
mounted() {
|
|
fetch('/assets/qs.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.qsData = data;
|
|
console.log(this.qsData);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
},
|
|
};
|
|
</script> |