without loop
parent
fa43b54605
commit
5076f6dd04
|
|
@ -2,332 +2,208 @@
|
|||
{
|
||||
"id" : 1,
|
||||
"qs" : "Inside which HTML element do we put the JavaScript?",
|
||||
"options" : [
|
||||
{"a": "<script>",
|
||||
"b":"<javascript>",
|
||||
"c":"<scripting>",
|
||||
"d":"<js>"}
|
||||
],
|
||||
"answer":"<script>",
|
||||
"score":0,
|
||||
"a": "<script>",
|
||||
"b":"<javascript>",
|
||||
"c":"<scripting>",
|
||||
"d":"<js>",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 2,
|
||||
"qs" : "Where is the correct place to insert a JavaScript?",
|
||||
"options" : [
|
||||
{"a": "The <head> section",
|
||||
"b":"The <body> section",
|
||||
"c":"Both the <head> section and the <body> section are correct"}
|
||||
],
|
||||
"answer":"Both the <head> section and the <body> section are correct",
|
||||
"score":0,
|
||||
"a": "The <head> section",
|
||||
"b":"The <body> section",
|
||||
"c":"Both the <head> section and the <body> section are correct",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 3,
|
||||
"qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
|
||||
"options" : [
|
||||
{"a": "<script href="xxx.js">",
|
||||
"b":"<script name="xxx.js">",
|
||||
"c":"<script src="xxx.js">"}
|
||||
],
|
||||
"answer":"<script src="xxx.js">",
|
||||
"score":0,
|
||||
"a": "<script href="xxx.js">",
|
||||
"b":"<script name="xxx.js">",
|
||||
"c":"<script src="xxx.js">",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 4,
|
||||
"qs" : "The external JavaScript file must contain the <script> tag.",
|
||||
"options" : [
|
||||
{"a": "True",
|
||||
"b":"False"
|
||||
}
|
||||
],
|
||||
"answer":"False",
|
||||
"score":0,
|
||||
"a": "True",
|
||||
"b":"False",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 5,
|
||||
"qs" : "How do you write "Hello World" in an alert box?",
|
||||
"options" : [
|
||||
{"a": "alertBox("Hello World");",
|
||||
"b":"msg("Hello World");",
|
||||
"c":"alert("Hello World");",
|
||||
"d":"msgBox("Hello World");"
|
||||
}
|
||||
],
|
||||
"answer":"alert("Hello World");",
|
||||
"score":0,
|
||||
"a": "alertBox("Hello World");",
|
||||
"b":"msg("Hello World");",
|
||||
"c":"alert("Hello World");",
|
||||
"d":"msgBox("Hello World");",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 6,
|
||||
"qs" : "How do you create a function in JavaScript?",
|
||||
"options" : [
|
||||
{"a": "function myFunction()",
|
||||
"b":"function:myFunction()",
|
||||
"c":"function = myFunction()"
|
||||
}
|
||||
],
|
||||
"answer":"function myFunction()",
|
||||
"score":0,
|
||||
"a": "function myFunction()",
|
||||
"b":"function:myFunction()",
|
||||
"c":"function = myFunction()",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 7,
|
||||
"qs" : "How do you call a function named "myFunction"?",
|
||||
"options" : [
|
||||
{"a": "call function myFunction()",
|
||||
"b":"call myFunction()",
|
||||
"c":"myFunction()"
|
||||
}
|
||||
],
|
||||
"answer":"myFunction()",
|
||||
"score":0,
|
||||
"a": "call function myFunction()",
|
||||
"b":"call myFunction()",
|
||||
"c":"myFunction()",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 8,
|
||||
"qs" : "How to write an IF statement in JavaScript?",
|
||||
"options" : [
|
||||
{"a": "if i = 5 then",
|
||||
"b":"if i == 5 then",
|
||||
"c":"if (i == 5)",
|
||||
"d":" if i = 5"
|
||||
}
|
||||
],
|
||||
"answer":"if (i == 5)",
|
||||
"score":0,
|
||||
"a": "if i = 5 then",
|
||||
"b":"if i == 5 then",
|
||||
"c":"if (i == 5)",
|
||||
"d":" if i = 5",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 9,
|
||||
"qs" : "Which of the following is a disadvantage of using JavaScript?",
|
||||
"options" : [
|
||||
{"a": "Client-side JavaScript does not allow the reading or writing of files.",
|
||||
"b":"JavaScript can not be used for Networking applications because there is no such support available.",
|
||||
"c":"JavaScript doesn't have any multithreading or multiprocess capabilities.",
|
||||
"d":"All of the above."
|
||||
}
|
||||
],
|
||||
"answer":"All of the above.",
|
||||
"score":0,
|
||||
"a": "Client-side JavaScript does not allow the reading or writing of files.",
|
||||
"b":"JavaScript can not be used for Networking applications because there is no such support available.",
|
||||
"c":"JavaScript doesn't have any multithreading or multiprocess capabilities.",
|
||||
"d":"All of the above.",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 10,
|
||||
"qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
|
||||
"options" : [
|
||||
{"a": "if (i <> 5)",
|
||||
"b":"if i <> 5",
|
||||
"c":"if (i != 5)",
|
||||
"d":"if i =! 5 then"
|
||||
}
|
||||
],
|
||||
"answer":"if (i != 5)",
|
||||
"score":0,
|
||||
"a": "if (i <> 5)",
|
||||
"b":"if i <> 5",
|
||||
"c":"if (i != 5)",
|
||||
"d":"if i =! 5 then",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 11,
|
||||
"qs" : "How does a WHILE loop start?",
|
||||
"options" : [
|
||||
{"a": "while i = 1 to 10",
|
||||
"b":"while (i <= 10; i++)",
|
||||
"c":"while (i <= 10)"
|
||||
}
|
||||
],
|
||||
"answer":"while (i <= 10)",
|
||||
"score":0,
|
||||
"a": "while i = 1 to 10",
|
||||
"b":"while (i <= 10; i++)",
|
||||
"c":"while (i <= 10)",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 12,
|
||||
"qs" : "How does a FOR loop start?",
|
||||
"options" : [
|
||||
{"a": "for (i = 0; i <= 5)",
|
||||
"b":"for (i = 0; i <= 5; i++)",
|
||||
"c":"for i = 1 to 5",
|
||||
"d":"for (i <= 5; i++)"
|
||||
}
|
||||
],
|
||||
"answer":"for (i = 0; i <= 5; i++)",
|
||||
"score":0,
|
||||
"a": "for (i = 0; i <= 5)",
|
||||
"b":"for (i = 0; i <= 5; i++)",
|
||||
"c":"for i = 1 to 5",
|
||||
"d":"for (i <= 5; i++)",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 13,
|
||||
"qs" : "How can you add a comment in a JavaScript?",
|
||||
"options" : [
|
||||
{"a": "//This is a comment",
|
||||
"b":"‚This is a comment",
|
||||
"c":"<!--This is a comment-->"
|
||||
}
|
||||
],
|
||||
"answer":"//This is a comment",
|
||||
"score":0,
|
||||
"a": "//This is a comment",
|
||||
"b":"‚This is a comment",
|
||||
"c":"<!--This is a comment-->",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 14,
|
||||
"qs" : "How to insert a comment that has more than one line?",
|
||||
"options" : [
|
||||
{"a": "/*This comment has more than one line*/",
|
||||
"b":"//This comment has more than one line//",
|
||||
"c":"<!--This comment has more than one line-->"
|
||||
}
|
||||
],
|
||||
"answer":"/*This comment has more than one line*/",
|
||||
"score":0,
|
||||
"a": "/*This comment has more than one line*/",
|
||||
"b":"//This comment has more than one line//",
|
||||
"c":"<!--This comment has more than one line-->",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 15,
|
||||
"qs" : "What is the correct way to write a JavaScript array?",
|
||||
"options" : [
|
||||
{"a": "var colors = (1:"red", 2:"green", 3:"blue")",
|
||||
"b":"var colors = ["red", "green", "blue"]",
|
||||
"c":"var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
|
||||
"d":"var colors = "red", "green", "blue""
|
||||
}
|
||||
],
|
||||
"answer":"var colors = ["red", "green", "blue"]",
|
||||
"score":0,
|
||||
"a": "var colors = (1:"red", 2:"green", 3:"blue")",
|
||||
"b":"var colors = ["red", "green", "blue"]",
|
||||
"c":"var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
|
||||
"d":"var colors = "red", "green", "blue"",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 16,
|
||||
"qs" : "How do you round the number 7.25, to the nearest integer?",
|
||||
"options" : [
|
||||
{"a": "rnd(7.25)",
|
||||
"b":"Math.round(7.25)",
|
||||
"c":"Math.rnd(7.25)",
|
||||
"d":"round(7.25)"
|
||||
}
|
||||
],
|
||||
"answer":"Math.round(7.25)",
|
||||
"score":0,
|
||||
"a": "rnd(7.25)",
|
||||
"b":"Math.round(7.25)",
|
||||
"c":"Math.rnd(7.25)",
|
||||
"d":"round(7.25)",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 17,
|
||||
"qs" : "How do you find the number with the highest value of x and y?",
|
||||
"options" : [
|
||||
{"a": "Math.max(x, y)",
|
||||
"b":"Math.ceil(x, y)",
|
||||
"c":"top(x, y)",
|
||||
"d":"ceil(x, y)"
|
||||
}
|
||||
],
|
||||
"answer":"Math.max(x, y)",
|
||||
"score":0,
|
||||
"a": "Math.max(x, y)",
|
||||
"b":"Math.ceil(x, y)",
|
||||
"c":"top(x, y)",
|
||||
"d":"ceil(x, y)",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 18,
|
||||
"qs" : "What is the correct JavaScript syntax for opening a new window called "w2"?",
|
||||
"options" : [
|
||||
{"a": "w2 = window.new("http://www.w3schools.com");",
|
||||
"b":"w2 = window.open("http://www.w3schools.com");"
|
||||
|
||||
}
|
||||
],
|
||||
"answer":"w2 = window.open("http://www.w3schools.com");",
|
||||
"score":0,
|
||||
"a": "w2 = window.new("http://www.w3schools.com");",
|
||||
"b":"w2 = window.open("http://www.w3schools.com");",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 19,
|
||||
"qs" : "JavaScript is the same as Java.",
|
||||
"options" : [
|
||||
{"a": "true",
|
||||
"b":"false"
|
||||
|
||||
}
|
||||
],
|
||||
"answer":"false",
|
||||
"score":0,
|
||||
"a": "true",
|
||||
"b":"false",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 20,
|
||||
"qs" : "How can you detect the client’s browser name?",
|
||||
"options" : [
|
||||
{"a": "navigator.appName",
|
||||
"b":"browser.name",
|
||||
"c":"client.navName"
|
||||
}
|
||||
],
|
||||
"answer":"navigator.appName",
|
||||
"score":0,
|
||||
"a": "navigator.appName",
|
||||
"b":"browser.name",
|
||||
"c":"client.navName",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 21,
|
||||
"qs" : "Which event occurs when the user clicks on an HTML element?",
|
||||
"options" : [
|
||||
{"a": "onchange",
|
||||
"b":"onclick",
|
||||
"c":"onmouseclick",
|
||||
"d":"onmouseover"
|
||||
}
|
||||
],
|
||||
"answer":"onclick",
|
||||
"score":0,
|
||||
"a": "onchange",
|
||||
"b":"onclick",
|
||||
"c":"onmouseclick",
|
||||
"d":"onmouseover",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 22,
|
||||
"qs" : "How do you declare a JavaScript variable?",
|
||||
"options" : [
|
||||
{"a": "var carName;",
|
||||
"b":"variable carName;",
|
||||
"c":"v carName;"
|
||||
}
|
||||
],
|
||||
"answer":"var carName;",
|
||||
"score":0,
|
||||
"a": "var carName;",
|
||||
"b":"variable carName;",
|
||||
"c":"v carName;",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 23,
|
||||
"qs" : "Which operator is used to assign a value to a variable?",
|
||||
"options" : [
|
||||
{"a": "*",
|
||||
"b":"-",
|
||||
"c":"=",
|
||||
"d":"x"
|
||||
}
|
||||
],
|
||||
"answer":"=",
|
||||
"score":0,
|
||||
"a": "*",
|
||||
"b":"-",
|
||||
"c":"=",
|
||||
"d":"x",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 24,
|
||||
"qs" : "What will the following code return: Boolean(10 > 9)",
|
||||
"options" : [
|
||||
{"a": "NaN",
|
||||
"b":"false",
|
||||
"c":"true"
|
||||
}
|
||||
],
|
||||
"answer":"true",
|
||||
"score":0,
|
||||
"a": "NaN",
|
||||
"b":"false",
|
||||
"c":"true",
|
||||
"status": ""
|
||||
},
|
||||
{
|
||||
"id" : 25,
|
||||
"qs" : "Is JavaScript case-sensitive?",
|
||||
"options" : [
|
||||
{"a": "No",
|
||||
"b":"Yes"
|
||||
}
|
||||
],
|
||||
"answer":"Yes",
|
||||
"score":0,
|
||||
"a": "No",
|
||||
"b":"Yes",
|
||||
"status": ""
|
||||
}
|
||||
]
|
||||
|
|
@ -6,33 +6,49 @@
|
|||
</div>
|
||||
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
|
||||
</section>
|
||||
<section class="container mx-auto px-4" >
|
||||
<section class="container mx-auto " >
|
||||
<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="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 }} </p>
|
||||
<p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </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>
|
||||
<p class="text-xl font-bold">00:00</p>
|
||||
<!-- <p class="text-xl font-bold">{{countdown}}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mt-4 text-2xl" v-html="qsData.qs"></p>
|
||||
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
|
||||
<span>total questions: {{ qPoint }} / {{ noOfQs }}</span>
|
||||
<p>{{ qsData[qPoint].qs }}</p>
|
||||
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer h-[300px] overflow-y-scroll">
|
||||
<span class="font-bold">{{ qsData[qPoint] }}.</span>
|
||||
<!-- <input v-model="qsData[0]" type="radio" :name="'questionOption' " :id="'option' " :value="option + option.id">
|
||||
<label :for="'option' " v-html="qsData[0]"></label>
|
||||
-->
|
||||
</div>
|
||||
<div class="flex flex-row place-content-between mt-4">
|
||||
<button v-on:click="getPrevQs" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" :disabled="qPoint <= 0">Previous Question</button>
|
||||
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
|
||||
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer </button>
|
||||
<button :disabled="qPoint >= noOfQs - 1" v-on:click="getNextQs" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg"> Next Question</button>
|
||||
</div>
|
||||
<p v-html="qsData[qPoint].qs"></p>
|
||||
<div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
|
||||
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
|
||||
<span class="font-bold">1. </span>
|
||||
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />
|
||||
<label :for="qsData[qPoint].a" v-html="qsData[qPoint].a"></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>
|
||||
</div>
|
||||
<button :disabled="qPoint >= noOfQs - 1" v-on:click="getNextQs" 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>
|
||||
</div>
|
||||
|
|
@ -44,38 +60,69 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedOptions: {}, // Use an object to store selected options for each question
|
||||
qsData: "",
|
||||
noOfQs: 0,
|
||||
qPoint:0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getQutValue() {
|
||||
console.log(this.selectedOptions);
|
||||
data() {
|
||||
return {
|
||||
selectedOptions: {}, // Use an array to store selected options for each question
|
||||
qsData: "",
|
||||
noOfQs: 0,
|
||||
qPoint: 0,
|
||||
countdown: 10,
|
||||
counting: false,
|
||||
qsStatus: 0,
|
||||
qsActive:[]
|
||||
};
|
||||
},
|
||||
getNextQs() {
|
||||
this.qPoint++;
|
||||
methods: {
|
||||
getQutValue() {
|
||||
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
|
||||
const selectedAnswer = {
|
||||
answer: this.selectedOptions[this.qPoint],
|
||||
questionId: this.qsData[this.qPoint].id,
|
||||
status: 1,
|
||||
};
|
||||
console.log(this.selectedOptions);
|
||||
}
|
||||
},
|
||||
getNextQs() {
|
||||
this.qsActive=this.qsData[qPoint];
|
||||
this.qPoint++;
|
||||
|
||||
},
|
||||
getPrevQs() {
|
||||
this.qPoint--;
|
||||
},
|
||||
previewLater(){
|
||||
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
|
||||
const selectedAnswer = {
|
||||
answer: this.selectedOptions[this.qPoint],
|
||||
questionId: this.qsData[this.qPoint].id,
|
||||
status: 0,
|
||||
};
|
||||
console.log(this.selectedOptions);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
fetch('/assets/qs.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.qsData=data;
|
||||
this.noOfQs = this.qsData.length;
|
||||
console.log(this.noOfQs);
|
||||
// console.log(this.noOfQs);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
let intervalId;
|
||||
// Start countdown on mounted
|
||||
intervalId = setInterval(() => {
|
||||
if (this.countdown > 0) {
|
||||
this.countdown--;
|
||||
} else {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
getPrevQs() {
|
||||
this.qPoint--;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
fetch('/assets/qs.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.qsData=data;
|
||||
this.noOfQs = this.qsData.length;
|
||||
console.log(this.noOfQs);
|
||||
|
||||
// console.log(this.noOfQs);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue