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

without loop

b1
Dev 1 2023-11-18 18:40:28 +05:30
parent fa43b54605
commit 5076f6dd04
2 changed files with 180 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
public/assets/qs.json
View File

@ -2,332 +2,208 @@
{ {
"id" : 1, "id" : 1,
"qs" : "Inside which HTML element do we put the JavaScript?", "qs" : "Inside which HTML element do we put the JavaScript?",
"options" : [ "a": "<script>",
{"a": "<script>",
"b":"<javascript>", "b":"<javascript>",
"c":"<scripting>", "c":"<scripting>",
"d":"<js>"} "d":"<js>",
],
"answer":"<script>",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 2, "id" : 2,
"qs" : "Where is the correct place to insert a JavaScript?", "qs" : "Where is the correct place to insert a JavaScript?",
"options" : [ "a": "The <head> section",
{"a": "The <head> section",
"b":"The <body> section", "b":"The <body> section",
"c":"Both the <head> section and the <body> section are correct"} "c":"Both the <head> section and the <body> section are correct",
],
"answer":"Both the <head> section and the <body> section are correct",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 3, "id" : 3,
"qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?", "qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options" : [ "a": "&ltscript href="xxx.js">",
{"a": "&ltscript href="xxx.js">",
"b":"<script name="xxx.js">", "b":"<script name="xxx.js">",
"c":"<script src="xxx.js">"} "c":"<script src="xxx.js">",
],
"answer":"<script src="xxx.js">",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 4, "id" : 4,
"qs" : "The external JavaScript file must contain the <script> tag.", "qs" : "The external JavaScript file must contain the <script> tag.",
"options" : [ "a": "True",
{"a": "True", "b":"False",
"b":"False"
}
],
"answer":"False",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 5, "id" : 5,
"qs" : "How do you write "Hello World" in an alert box?", "qs" : "How do you write "Hello World" in an alert box?",
"options" : [ "a": "alertBox("Hello World");",
{"a": "alertBox("Hello World");",
"b":"msg("Hello World");", "b":"msg("Hello World");",
"c":"alert("Hello World");", "c":"alert("Hello World");",
"d":"msgBox("Hello World");" "d":"msgBox("Hello World");",
}
],
"answer":"alert("Hello World");",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 6, "id" : 6,
"qs" : "How do you create a function in JavaScript?", "qs" : "How do you create a function in JavaScript?",
"options" : [ "a": "function myFunction()",
{"a": "function myFunction()",
"b":"function:myFunction()", "b":"function:myFunction()",
"c":"function = myFunction()" "c":"function = myFunction()",
}
],
"answer":"function myFunction()",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 7, "id" : 7,
"qs" : "How do you call a function named "myFunction"?", "qs" : "How do you call a function named "myFunction"?",
"options" : [ "a": "call function myFunction()",
{"a": "call function myFunction()",
"b":"call myFunction()", "b":"call myFunction()",
"c":"myFunction()" "c":"myFunction()",
}
],
"answer":"myFunction()",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 8, "id" : 8,
"qs" : "How to write an IF statement in JavaScript?", "qs" : "How to write an IF statement in JavaScript?",
"options" : [ "a": "if i = 5 then",
{"a": "if i = 5 then",
"b":"if i == 5 then", "b":"if i == 5 then",
"c":"if (i == 5)", "c":"if (i == 5)",
"d":" if i = 5" "d":" if i = 5",
}
],
"answer":"if (i == 5)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 9, "id" : 9,
"qs" : "Which of the following is a disadvantage of using JavaScript?", "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.",
{"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.", "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.", "c":"JavaScript doesn't have any multithreading or multiprocess capabilities.",
"d":"All of the above." "d":"All of the above.",
}
],
"answer":"All of the above.",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 10, "id" : 10,
"qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?", "qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
"options" : [ "a": "if (i <> 5)",
{"a": "if (i <> 5)",
"b":"if i <> 5", "b":"if i <> 5",
"c":"if (i != 5)", "c":"if (i != 5)",
"d":"if i =! 5 then" "d":"if i =! 5 then",
}
],
"answer":"if (i != 5)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 11, "id" : 11,
"qs" : "How does a WHILE loop start?", "qs" : "How does a WHILE loop start?",
"options" : [ "a": "while i = 1 to 10",
{"a": "while i = 1 to 10",
"b":"while (i &lt;= 10; i++)", "b":"while (i &lt;= 10; i++)",
"c":"while (i &lt;= 10)" "c":"while (i &lt;= 10)",
}
],
"answer":"while (i &lt;= 10)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 12, "id" : 12,
"qs" : "How does a FOR loop start?", "qs" : "How does a FOR loop start?",
"options" : [ "a": "for (i = 0; i &lt;= 5)",
{"a": "for (i = 0; i &lt;= 5)",
"b":"for (i = 0; i &lt;= 5; i++)", "b":"for (i = 0; i &lt;= 5; i++)",
"c":"for i = 1 to 5", "c":"for i = 1 to 5",
"d":"for (i &lt;= 5; i++)" "d":"for (i &lt;= 5; i++)",
}
],
"answer":"for (i = 0; i &lt;= 5; i++)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 13, "id" : 13,
"qs" : "How can you add a comment in a JavaScript?", "qs" : "How can you add a comment in a JavaScript?",
"options" : [ "a": "//This is a comment",
{"a": "//This is a comment",
"b":"&sbquo;This is a comment", "b":"&sbquo;This is a comment",
"c":"&lt;!--This is a comment--&gt;" "c":"&lt;!--This is a comment--&gt;",
}
],
"answer":"//This is a comment",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 14, "id" : 14,
"qs" : "How to insert a comment that has more than one line?", "qs" : "How to insert a comment that has more than one line?",
"options" : [ "a": "/*This comment has more than one line*/",
{"a": "/*This comment has more than one line*/",
"b":"//This comment has more than one line//", "b":"//This comment has more than one line//",
"c":"&lt;!--This comment has more than one line--&gt;" "c":"&lt;!--This comment has more than one line--&gt;",
}
],
"answer":"/*This comment has more than one line*/",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 15, "id" : 15,
"qs" : "What is the correct way to write a JavaScript array?", "qs" : "What is the correct way to write a JavaScript array?",
"options" : [ "a": "var colors = (1:&quot;red&quot;, 2:&quot;green&quot;, 3:&quot;blue&quot;)",
{"a": "var colors = (1:&quot;red&quot;, 2:&quot;green&quot;, 3:&quot;blue&quot;)",
"b":"var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]", "b":"var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"c":"var colors = 1 = (&quot;red&quot;), 2 = (&quot;green&quot;), 3 = (&quot;blue&quot;)", "c":"var colors = 1 = (&quot;red&quot;), 2 = (&quot;green&quot;), 3 = (&quot;blue&quot;)",
"d":"var colors = &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;" "d":"var colors = &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;",
}
],
"answer":"var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 16, "id" : 16,
"qs" : "How do you round the number 7.25, to the nearest integer?", "qs" : "How do you round the number 7.25, to the nearest integer?",
"options" : [ "a": "rnd(7.25)",
{"a": "rnd(7.25)",
"b":"Math.round(7.25)", "b":"Math.round(7.25)",
"c":"Math.rnd(7.25)", "c":"Math.rnd(7.25)",
"d":"round(7.25)" "d":"round(7.25)",
}
],
"answer":"Math.round(7.25)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 17, "id" : 17,
"qs" : "How do you find the number with the highest value of x and y?", "qs" : "How do you find the number with the highest value of x and y?",
"options" : [ "a": "Math.max(x, y)",
{"a": "Math.max(x, y)",
"b":"Math.ceil(x, y)", "b":"Math.ceil(x, y)",
"c":"top(x, y)", "c":"top(x, y)",
"d":"ceil(x, y)" "d":"ceil(x, y)",
}
],
"answer":"Math.max(x, y)",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 18, "id" : 18,
"qs" : "What is the correct JavaScript syntax for opening a new window called &quot;w2&quot;?", "qs" : "What is the correct JavaScript syntax for opening a new window called &quot;w2&quot;?",
"options" : [ "a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);",
{"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);", "b":"w2 = window.open(&quot;http://www.w3schools.com&quot;);",
"b":"w2 = window.open(&quot;http://www.w3schools.com&quot;);"
}
],
"answer":"w2 = window.open(&quot;http://www.w3schools.com&quot;);",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 19, "id" : 19,
"qs" : "JavaScript is the same as Java.", "qs" : "JavaScript is the same as Java.",
"options" : [ "a": "true",
{"a": "true", "b":"false",
"b":"false"
}
],
"answer":"false",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 20, "id" : 20,
"qs" : "How can you detect the client&rsquo;s browser name?", "qs" : "How can you detect the client&rsquo;s browser name?",
"options" : [ "a": "navigator.appName",
{"a": "navigator.appName",
"b":"browser.name", "b":"browser.name",
"c":"client.navName" "c":"client.navName",
}
],
"answer":"navigator.appName",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 21, "id" : 21,
"qs" : "Which event occurs when the user clicks on an HTML element?", "qs" : "Which event occurs when the user clicks on an HTML element?",
"options" : [ "a": "onchange",
{"a": "onchange",
"b":"onclick", "b":"onclick",
"c":"onmouseclick", "c":"onmouseclick",
"d":"onmouseover" "d":"onmouseover",
}
],
"answer":"onclick",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 22, "id" : 22,
"qs" : "How do you declare a JavaScript variable?", "qs" : "How do you declare a JavaScript variable?",
"options" : [ "a": "var carName;",
{"a": "var carName;",
"b":"variable carName;", "b":"variable carName;",
"c":"v carName;" "c":"v carName;",
}
],
"answer":"var carName;",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 23, "id" : 23,
"qs" : "Which operator is used to assign a value to a variable?", "qs" : "Which operator is used to assign a value to a variable?",
"options" : [ "a": "*",
{"a": "*",
"b":"-", "b":"-",
"c":"=", "c":"=",
"d":"x" "d":"x",
}
],
"answer":"=",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 24, "id" : 24,
"qs" : "What will the following code return: Boolean(10 &gt; 9)", "qs" : "What will the following code return: Boolean(10 &gt; 9)",
"options" : [ "a": "NaN",
{"a": "NaN",
"b":"false", "b":"false",
"c":"true" "c":"true",
}
],
"answer":"true",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 25, "id" : 25,
"qs" : "Is JavaScript case-sensitive?", "qs" : "Is JavaScript case-sensitive?",
"options" : [ "a": "No",
{"a": "No", "b":"Yes",
"b":"Yes"
}
],
"answer":"Yes",
"score":0,
"status": "" "status": ""
} }
] ]

89
src/components/MCQQuestion.vue
View File

@ -6,32 +6,48 @@
</div> </div>
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> --> <!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
</section> </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="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"> <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"> <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">00:00</p>
<p class="text-xl font-bold" id="countdown">00:00</p> <!-- <p class="text-xl font-bold">{{countdown}}</p> -->
</div> </div>
</div> </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"> <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
<span>total questions: {{ qPoint }} / {{ noOfQs }}</span> <p v-html="qsData[qPoint].qs"></p>
<p>{{ 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 h-[300px] overflow-y-scroll"> <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">{{ qsData[qPoint] }}.</span> <span class="font-bold">1. </span>
<!-- <input v-model="qsData[0]" type="radio" :name="'questionOption' " :id="'option' " :value="option + option.id"> <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />&nbsp;
<label :for="'option' " v-html="qsData[0]"></label> <label :for="qsData[qPoint].a" v-html="qsData[qPoint].a"></label>
-->
</div> </div>
<div class="flex flex-row place-content-between mt-4"> <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<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> <span class="font-bold">2. </span>
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button> <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].b" :value="{ answer: qsData[qPoint].b, questionId: qsData[qPoint].id }" />&nbsp;
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer </button> <label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
<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>
<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 }" />&nbsp;
<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 }" />&nbsp;
<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> </div>
<div v-else>No Data Found</div> <div v-else>No Data Found</div>
@ -46,21 +62,44 @@
export default { export default {
data() { data() {
return { return {
selectedOptions: {}, // Use an object to store selected options for each question selectedOptions: {}, // Use an array to store selected options for each question
qsData: "", qsData: "",
noOfQs: 0, noOfQs: 0,
qPoint:0 qPoint: 0,
countdown: 10,
counting: false,
qsStatus: 0,
qsActive:[]
}; };
}, },
methods: { methods: {
getQutValue() { 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); console.log(this.selectedOptions);
}
}, },
getNextQs() { getNextQs() {
this.qsActive=this.qsData[qPoint];
this.qPoint++; this.qPoint++;
}, },
getPrevQs() { getPrevQs() {
this.qPoint--; 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() { mounted() {
@ -70,12 +109,20 @@ export default {
this.qsData=data; this.qsData=data;
this.noOfQs = this.qsData.length; this.noOfQs = this.qsData.length;
console.log(this.noOfQs); console.log(this.noOfQs);
// console.log(this.noOfQs); // console.log(this.noOfQs);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching data:', 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);
}, },
}; };
</script> </script>