b2
dev sp
parent
bb07b814e3
commit
cb3d9994df
|
|
@ -1,6 +1,6 @@
|
|||
[
|
||||
{
|
||||
"id" : 1,
|
||||
"id" : 17567,
|
||||
"qs" : "Inside which HTML element do we put the JavaScript?",
|
||||
"options" : [
|
||||
"<script>",
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 2,
|
||||
"id" : 4545,
|
||||
"qs" : "Where is the correct place to insert a JavaScript?",
|
||||
"options" : [
|
||||
"The <head> 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" : [
|
||||
"<script href="xxx.js">",
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 4,
|
||||
"id" : 867,
|
||||
"qs" : "The external JavaScript file must contain the <script> tag.",
|
||||
"options" : [
|
||||
"True",
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 5,
|
||||
"id" : 5544,
|
||||
"qs" : "How do you write "Hello World" in an alert box?",
|
||||
"options" : [
|
||||
"alertBox("Hello World");",
|
||||
|
|
@ -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 "myFunction"?",
|
||||
"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 "i" 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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsData[qPoint].id, status: 1 }" @change="selectOption(index)" />
|
||||
<input type="radio" :id="item" v-model="totalAnswer" :value="index + 1" @change="selectOption(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 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 }" />
|
||||
<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 }" />
|
||||
<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 }" />
|
||||
<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();
|
||||
// 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) {
|
||||
reviewLater(){
|
||||
this.getNextQs();
|
||||
const selectedAnswer = {
|
||||
answer: this.selectedOptions[this.qPoint],
|
||||
answer: 0,
|
||||
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) {
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue