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

ll

b2
Dev 1 2023-11-18 20:46:36 +05:30
parent 5076f6dd04
commit bb07b814e3
2 changed files with 348 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

516
public/assets/qs.json
View File

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

58
src/components/MCQQuestion.vue
View File

@ -20,12 +20,13 @@
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
<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 }" />&nbsp;
<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">
<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>&nbsp;
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsData[qPoint].id, status: 1 }" @change="selectOption(index)" />&nbsp;
<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 }" />&nbsp;
<label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
@ -39,7 +40,7 @@
<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>
<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>
@ -47,7 +48,7 @@
<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>
<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>
@ -55,6 +56,7 @@
</div>
</div>
</section>
<!-- <p v-for="(item, index) in qsActive.options" > : {{ item }}</p> -->
</div>
</template>
@ -62,14 +64,15 @@
export default {
data() {
return {
selectedOptions: {}, // Use an array to store selected options for each question
selectedOptions: {},
qsData: "",
noOfQs: 0,
qPoint: 0,
countdown: 10,
counting: false,
qsStatus: 0,
qsActive:[]
qsActive:[],
selectedOptionIndex: '#7c4c23', // Add this property
};
},
methods: {
@ -78,29 +81,42 @@ export default {
const selectedAnswer = {
answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id,
status: 1,
status: this.qsStatus,
};
console.log(this.selectedOptions);
}
},
resetRadioInputs() {
// this.selectedOptions = {};
this.selectedOptionIndex = null;
},
getNextQs() {
this.qsActive=this.qsData[qPoint];
this.qPoint++;
this.qsActive=this.qsData[this.qPoint];
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) {
const selectedAnswer = {
answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id,
status: 0,
status: this.qsStatus = 0,
};
console.log(this.selectedOptions);
console.log("status : 1", this.selectedOptions);
}
}
},
selectOption(index) {
this.selectedOptionIndex = index;
},
},
mounted() {
fetch('/assets/qs.json')
@ -108,7 +124,8 @@ export default {
.then(data => {
this.qsData=data;
this.noOfQs = this.qsData.length;
console.log(this.noOfQs);
this.qsActive=this.qsData[0];
// console.log(this.qsActive);
// console.log(this.noOfQs);
})
.catch(error => {
@ -125,4 +142,9 @@ export default {
}, 1000);
},
};
</script>
</script>
<style>
.selected-option {
background-color: #05b3a4;
}
</style>