diff --git a/public/assets/qs.json b/public/assets/qs.json index edace55..06f786e 100644 --- a/public/assets/qs.json +++ b/public/assets/qs.json @@ -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": "<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.", - "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 <= 10; i++)", - "c":"while (i <= 10)", - "status": "" - }, - { - "id" : 12, - "qs" : "How does a FOR loop start?", - "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?", - "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?", - "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?", - "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?", - "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 "w2"?", - "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.", - "a": "true", - "b":"false", - "status": "" - }, - { - "id" : 20, - "qs" : "How can you detect the client’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 > 9)", - "a": "NaN", - "b":"false", - "c":"true", - "status": "" - }, - { - "id" : 25, - "qs" : "Is JavaScript case-sensitive?", - "a": "No", - "b":"Yes", - "status": "" - } -] \ No newline at end of file + { + "id" : 1, + "qs" : "Inside which HTML element do we put the JavaScript?", + "options" : [ + "<script>", + "<javascript>", + "<scripting>", + "<js>" + ], + "answer":"<script>", + "score":0, + "status": "" + }, + { + "id" : 2, + "qs" : "Where is the correct place to insert a JavaScript?", + "options" : [ + "The <head> section", + "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": "" + }, + { + "id" : 3, + "qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?", + "options" : [ + "<script href="xxx.js">", + "<script name="xxx.js">", + "<script src="xxx.js">" + ], + "answer":"<script src="xxx.js">", + "score":0, + "status": "" + }, + { + "id" : 4, + "qs" : "The external JavaScript file must contain the <script> tag.", + "options" : [ + "True", + "False" + ], + "answer":"False", + "score":0, + "status": "" + }, + { + "id" : 5, + "qs" : "How do you write "Hello World" in an alert box?", + "options" : [ + "alertBox("Hello World");", + "msg("Hello World");", + "alert("Hello World");", + "msgBox("Hello World");" + ], + "answer":"alert("Hello World");", + "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 "myFunction"?", + "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 "i" 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 <= 10; i++)", + "while (i <= 10)" + ], + "answer":"while (i <= 10)", + "score":0, + "status": "" + }, + { + "id" : 12, + "qs" : "How does a FOR loop start?", + "options" : [ + "for (i = 0; i <= 5)", + "for (i = 0; i <= 5; i++)", + "for i = 1 to 5", + "for (i <= 5; i++)" + ], + "answer":"for (i = 0; i <= 5; i++)", + "score":0, + "status": "" + }, + { + "id" : 13, + "qs" : "How can you add a comment in a JavaScript?", + "options" : [ + "//This is a comment", + "‚This is a comment", + "<!--This is a comment-->" + ], + "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//", + "<!--This comment has more than one line-->" + ], + "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:"red", 2:"green", 3:"blue")", + "var colors = ["red", "green", "blue"]", + "var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")", + "var colors = "red", "green", "blue"" + ], + "answer":"var colors = ["red", "green", "blue"]", + "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 "w2"?", + "options" : [ + "w2 = window.new("http://www.w3schools.com");", + "w2 = window.open("http://www.w3schools.com");" + ], + "answer":"w2 = window.open("http://www.w3schools.com");", + "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’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 > 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": "" + } + ] \ No newline at end of file diff --git a/src/components/MCQQuestion.vue b/src/components/MCQQuestion.vue index ef71ba9..12fc413 100644 --- a/src/components/MCQQuestion.vue +++ b/src/components/MCQQuestion.vue @@ -20,12 +20,13 @@

-
- 1. -   - -
-
+
+ {{ index + 1 }}   +   + +
+ +
@@ -47,7 +48,7 @@
- +
No Data Found
@@ -55,6 +56,7 @@ + @@ -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); }, }; - \ No newline at end of file + + \ No newline at end of file