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