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

264
public/assets/qs.json
View File

@ -2,208 +2,308 @@
{ {
"id" : 1, "id" : 1,
"qs" : "Inside which HTML element do we put the JavaScript?", "qs" : "Inside which HTML element do we put the JavaScript?",
"a": "<script>", "options" : [
"b":"<javascript>", "<script>",
"c":"<scripting>", "<javascript>",
"d":"<js>", "<scripting>",
"<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?",
"a": "The <head> section", "options" : [
"b":"The <body> section", "The <head> section",
"c":"Both the <head> section and the <body> section are correct", "The <body> section",
"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'?",
"a": "&ltscript href="xxx.js">", "options" : [
"b":"<script name="xxx.js">", "&ltscript href="xxx.js">",
"c":"<script src="xxx.js">", "<script name="xxx.js">",
"<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.",
"a": "True", "options" : [
"b":"False", "True",
"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?",
"a": "alertBox("Hello World");", "options" : [
"b":"msg("Hello World");", "alertBox("Hello World");",
"c":"alert("Hello World");", "msg("Hello World");",
"d":"msgBox("Hello World");", "alert("Hello World");",
"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?",
"a": "function myFunction()", "options" : [
"b":"function:myFunction()", "function myFunction()",
"c":"function = myFunction()", "function:myFunction()",
"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"?",
"a": "call function myFunction()", "options" : [
"b":"call myFunction()", "call function myFunction()",
"c":"myFunction()", "call myFunction()",
"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?",
"a": "if i = 5 then", "options" : [
"b":"if i == 5 then", "if i = 5 then",
"c":"if (i == 5)", "if i == 5 then",
"d":" if i = 5", "if (i == 5)",
" 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?",
"a": "Client-side JavaScript does not allow the reading or writing of files.", "options" : [
"b":"JavaScript can not be used for Networking applications because there is no such support available.", "Client-side JavaScript does not allow the reading or writing of files.",
"c":"JavaScript doesn't have any multithreading or multiprocess capabilities.", "JavaScript can not be used for Networking applications because there is no such support available.",
"d":"All of the above.", "JavaScript doesn't have any multithreading or multiprocess capabilities.",
"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?",
"a": "if (i <> 5)", "options" : [
"b":"if i <> 5", "if (i <> 5)",
"c":"if (i != 5)", "if i <> 5",
"d":"if i =! 5 then", "if (i != 5)",
"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?",
"a": "while i = 1 to 10", "options" : [
"b":"while (i &lt;= 10; i++)", "while i = 1 to 10",
"c":"while (i &lt;= 10)", "while (i &lt;= 10; i++)",
"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?",
"a": "for (i = 0; i &lt;= 5)", "options" : [
"b":"for (i = 0; i &lt;= 5; i++)", "for (i = 0; i &lt;= 5)",
"c":"for i = 1 to 5", "for (i = 0; i &lt;= 5; i++)",
"d":"for (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": "" "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?",
"a": "//This is a comment", "options" : [
"b":"&sbquo;This is a comment", "//This is a comment",
"c":"&lt;!--This is a comment--&gt;", "&sbquo;This is a comment",
"&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?",
"a": "/*This comment has more than one line*/", "options" : [
"b":"//This comment has more than one line//", "/*This comment has more than one line*/",
"c":"&lt;!--This comment has more than one line--&gt;", "//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": "" "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?",
"a": "var colors = (1:&quot;red&quot;, 2:&quot;green&quot;, 3:&quot;blue&quot;)", "options" : [
"b":"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;)",
"c":"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;]",
"d":"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": "" "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?",
"a": "rnd(7.25)", "options" : [
"b":"Math.round(7.25)", "rnd(7.25)",
"c":"Math.rnd(7.25)", "Math.round(7.25)",
"d":"round(7.25)", "Math.rnd(7.25)",
"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?",
"a": "Math.max(x, y)", "options" : [
"b":"Math.ceil(x, y)", "Math.max(x, y)",
"c":"top(x, y)", "Math.ceil(x, y)",
"d":"ceil(x, y)", "top(x, y)",
"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;?",
"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);", "options" : [
"b":"w2 = window.open(&quot;http://www.w3schools.com&quot;);", "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": "" "status": ""
}, },
{ {
"id" : 19, "id" : 19,
"qs" : "JavaScript is the same as Java.", "qs" : "JavaScript is the same as Java.",
"a": "true", "options" : [
"b":"false", "true",
"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?",
"a": "navigator.appName", "options" : [
"b":"browser.name", "navigator.appName",
"c":"client.navName", "browser.name",
"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?",
"a": "onchange", "options" : [
"b":"onclick", "onchange",
"c":"onmouseclick", "onclick",
"d":"onmouseover", "onmouseclick",
"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?",
"a": "var carName;", "options" : [
"b":"variable carName;", "var carName;",
"c":"v carName;", "variable carName;",
"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?",
"a": "*", "options" : [
"b":"-", "*",
"c":"=", "-",
"d":"x", "=",
"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)",
"a": "NaN", "options" : [
"b":"false", "NaN",
"c":"true", "false",
"true"
],
"answer":"true",
"score":0,
"status": "" "status": ""
}, },
{ {
"id" : 25, "id" : 25,
"qs" : "Is JavaScript case-sensitive?", "qs" : "Is JavaScript case-sensitive?",
"a": "No", "options" : [
"b":"Yes", "No",
"Yes"
],
"answer":"Yes",
"score":0,
"status": "" "status": ""
} }
] ]

54
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"> <div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
<p v-html="qsData[qPoint].qs"></p> <p v-html="qsData[qPoint].qs"></p>
<div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto"> <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"> <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">1. </span> <span class="font-bold">{{ index + 1 }} </span>&nbsp;
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />&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="qsData[qPoint].a" v-html="qsData[qPoint].a"></label> <label :for="item" v-html="item"></label>
</div> </div>
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<!-- <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">2. </span> <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; <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> <label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
@ -39,7 +40,7 @@
<span class="font-bold">4. </span> <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; <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> <label :for="qsData[qPoint].d" v-html="qsData[qPoint].d"></label>
</div> </div> -->
</div> </div>
<div class="flex flex-row place-content-between mt-4 text-sm md:text-base"> <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> <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="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> <button v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
</div> </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> </div>
<div v-else>No Data Found</div> <div v-else>No Data Found</div>
@ -55,6 +56,7 @@
</div> </div>
</div> </div>
</section> </section>
<!-- <p v-for="(item, index) in qsActive.options" > : {{ item }}</p> -->
</div> </div>
</template> </template>
@ -62,14 +64,15 @@
export default { export default {
data() { data() {
return { return {
selectedOptions: {}, // Use an array to store selected options for each question selectedOptions: {},
qsData: "", qsData: "",
noOfQs: 0, noOfQs: 0,
qPoint: 0, qPoint: 0,
countdown: 10, countdown: 10,
counting: false, counting: false,
qsStatus: 0, qsActive:[],
qsActive:[] selectedOptionIndex: '#7c4c23', // Add this property
}; };
}, },
methods: { methods: {
@ -78,37 +81,51 @@ export default {
const selectedAnswer = { const selectedAnswer = {
answer: this.selectedOptions[this.qPoint], answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id, questionId: this.qsData[this.qPoint].id,
status: 1, status: this.qsStatus,
}; };
console.log(this.selectedOptions); console.log(this.selectedOptions);
} }
}, },
resetRadioInputs() {
// this.selectedOptions = {};
this.selectedOptionIndex = null;
},
getNextQs() { getNextQs() {
this.qsActive=this.qsData[qPoint];
this.qPoint++; this.qPoint++;
this.qsActive=this.qsData[this.qPoint];
this.resetRadioInputs();
// console.log(this.qsActive);
}, },
getPrevQs() { getPrevQs() {
this.qPoint--; this.qPoint--;
this.qsActive=this.qsData[this.qPoint];
this.selectOption();
}, },
previewLater(){ previewLater(){
this.selectedOptionIndex = index;
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) { if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
const selectedAnswer = { const selectedAnswer = {
answer: this.selectedOptions[this.qPoint], answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id, 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() { mounted() {
fetch('/assets/qs.json') fetch('/assets/qs.json')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.qsData=data; this.qsData=data;
this.noOfQs = this.qsData.length; this.noOfQs = this.qsData.length;
console.log(this.noOfQs); this.qsActive=this.qsData[0];
// console.log(this.qsActive);
// console.log(this.noOfQs); // console.log(this.noOfQs);
}) })
.catch(error => { .catch(error => {
@ -126,3 +143,8 @@ export default {
}, },
}; };
</script> </script>
<style>
.selected-option {
background-color: #05b3a4;
}
</style>