Compare commits
7 Commits
| Author | SHA1 | Date |
|---|---|---|
dev sp
|
147d07f50b | |
|
dev sp
|
bb6f9e4356 | |
|
dev sp
|
16c8e5e936 | |
|
dev sp
|
c7fb298e4f | |
|
dev sp
|
6be7ee6f29 | |
|
dev sp
|
cb3d9994df | |
 Dev 1
|
bb07b814e3 |
|
|
@ -4,8 +4,8 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev --host --port 2008",
|
"dev": "astro dev --host --port 2020",
|
||||||
"start": "astro dev --host --port 2008",
|
"start": "astro dev --host --port 2020",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
|
|
|
||||||
|
|
@ -1,209 +1,309 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id" : 1,
|
"id" : 17567,
|
||||||
"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" : 4545,
|
||||||
"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": "<script 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" : 223,
|
||||||
"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",
|
"<script 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" : 867,
|
||||||
"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" : 5544,
|
||||||
"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" : 765,
|
||||||
"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" : 108,
|
||||||
{
|
"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" : 4328,
|
||||||
"a": "while i = 1 to 10",
|
"qs" : "How to write an IF statement in JavaScript?",
|
||||||
"b":"while (i <= 10; i++)",
|
"options" : [
|
||||||
"c":"while (i <= 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 <= 5)",
|
"score":0,
|
||||||
"b":"for (i = 0; i <= 5; i++)",
|
"status": ""
|
||||||
"c":"for i = 1 to 5",
|
},
|
||||||
"d":"for (i <= 5; i++)",
|
{
|
||||||
"status": ""
|
"id" : 989,
|
||||||
},
|
"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":"‚This is a comment",
|
"All of the above."
|
||||||
"c":"<!--This is a comment-->",
|
],
|
||||||
"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" : 1450,
|
||||||
"b":"//This comment has more than one line//",
|
"qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
|
||||||
"c":"<!--This comment has more than one line-->",
|
"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:"red", 2:"green", 3:"blue")",
|
"answer":"if (i != 5)",
|
||||||
"b":"var colors = ["red", "green", "blue"]",
|
"score":0,
|
||||||
"c":"var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
|
"status": ""
|
||||||
"d":"var colors = "red", "green", "blue"",
|
},
|
||||||
"status": ""
|
{
|
||||||
},
|
"id" : 211,
|
||||||
{
|
"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 <= 10; i++)",
|
||||||
"b":"Math.round(7.25)",
|
"while (i <= 10)"
|
||||||
"c":"Math.rnd(7.25)",
|
],
|
||||||
"d":"round(7.25)",
|
"answer":"while (i <= 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 <= 5)",
|
||||||
"d":"ceil(x, y)",
|
"for (i = 0; i <= 5; i++)",
|
||||||
"status": ""
|
"for i = 1 to 5",
|
||||||
},
|
"for (i <= 5; i++)"
|
||||||
{
|
],
|
||||||
"id" : 18,
|
"answer":"for (i = 0; i <= 5; i++)",
|
||||||
"qs" : "What is the correct JavaScript syntax for opening a new window called "w2"?",
|
"score":0,
|
||||||
"a": "w2 = window.new("http://www.w3schools.com");",
|
"status": ""
|
||||||
"b":"w2 = window.open("http://www.w3schools.com");",
|
},
|
||||||
"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",
|
"‚This is a comment",
|
||||||
"b":"false",
|
"<!--This is a comment-->"
|
||||||
"status": ""
|
],
|
||||||
},
|
"answer":"//This is a comment",
|
||||||
{
|
"score":0,
|
||||||
"id" : 20,
|
"status": ""
|
||||||
"qs" : "How can you detect the client’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,
|
"<!--This comment has more than one line-->"
|
||||||
"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:"red", 2:"green", 3:"blue")",
|
||||||
"a": "var carName;",
|
"var colors = ["red", "green", "blue"]",
|
||||||
"b":"variable carName;",
|
"var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
|
||||||
"c":"v carName;",
|
"var colors = "red", "green", "blue""
|
||||||
"status": ""
|
],
|
||||||
},
|
"answer":"var colors = ["red", "green", "blue"]",
|
||||||
{
|
"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 > 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 "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": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="container-fluid bg-green-600 mb-16">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
|
||||||
|
</div>
|
||||||
|
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto px-4 max-w-2xl">
|
||||||
|
<form @submit="submitForm" class="flex-flex-col">
|
||||||
|
<div @change="" >
|
||||||
|
<select v-model="identifier" name="" id="" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5 w-full">
|
||||||
|
<option v-for="idData in idfrData" :value="idData.identifier_name + idData.identifier_number">{{ idData.identifier_name }} {{ idData.identifier_number }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label for="question">Add Question:<span class="text-[#ff0000] text-xl">*</span></label>
|
||||||
|
<input v-model="question" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="question" name="question" type="text" placeholder="Question" required />
|
||||||
|
<div v-for="(field, index) in optionsField" :key="index" class="flex flex-col">
|
||||||
|
<label :for="'Question' + (index + 1)">Options: {{ index + 1 }}<span class="text-[#ff0000] text-xl">*</span></label>
|
||||||
|
<div class="flex flex-row place-items-center gap-2">
|
||||||
|
<input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5 w-full" placeholder="Add Option" v-model="options[index]" :id="'Question' + (index + 1)" :name="'Question' + (index + 1)" type="text" required />
|
||||||
|
<span class="text-[#FF0000] text-2xl cursor-pointer" @click="deleteField()">✖</span>
|
||||||
|
<input v-model="ansNoDa[index]" :value="options" :name="options" type="checkbox" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="bg-green-500 text-white font-bold rounded-lg float-right p-1.5 mt-2 cursor-pointer" @click="addField()">Add More</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label for="answer">Correct Answer:<span class="text-[#ff0000] text-xl">*</span></label>
|
||||||
|
<input v-model="correctAnswer" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="answer" name="answer" type="text" placeholder="Correct Answer" required />
|
||||||
|
<label class="mt-2" for="answerNumber">Select Answer Number:<span class="text-[#ff0000] text-xl">*</span></label>
|
||||||
|
<select v-model="answerNumber" name="answerNumber" id="answerNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" required>
|
||||||
|
<option value="0" selected>-Select-</option>
|
||||||
|
<option v-for="(field, index) in optionsField" :key="index" :value="index + 1" class="">{{ index +1 }}</option>
|
||||||
|
</select>
|
||||||
|
<input class="bg-green-500 text-white font-bold rounded-lg float-right p-2 mt-2 cursor-pointer mt-6" type="submit" value="Save">
|
||||||
|
</div>
|
||||||
|
<p>Answer {{ ansNoDa }}</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: [''],
|
||||||
|
optionsField: 2,
|
||||||
|
question: '',
|
||||||
|
correctAnswer: '',
|
||||||
|
answerNumber: 0,
|
||||||
|
ansNoDa: [],
|
||||||
|
identifier: "",
|
||||||
|
identifierNumber: "",
|
||||||
|
idfrData: ""
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
indentifierValue(){
|
||||||
|
console.log(this.identifier.target.value)
|
||||||
|
},
|
||||||
|
addField() {
|
||||||
|
this.optionsField++;
|
||||||
|
this.options.push('');
|
||||||
|
},
|
||||||
|
deleteField() {
|
||||||
|
if (this.optionsField > 1) {
|
||||||
|
this.optionsField--;
|
||||||
|
this.options.pop();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
submitForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const formData = new FormData();
|
||||||
|
// const idntyName = this.identifier;
|
||||||
|
const questionObject = {
|
||||||
|
identifier: this.identifier + '-' + this.identifierNumber,
|
||||||
|
id: Math.floor(Math.random() * 100000),
|
||||||
|
qs: this.question,
|
||||||
|
options: this.options,
|
||||||
|
answer: this.correctAnswer,
|
||||||
|
annswer_number: this.answerNumber,
|
||||||
|
};
|
||||||
|
formData.append('questions', JSON.stringify(questionObject));
|
||||||
|
// Make the fetch request
|
||||||
|
fetch('https://api8.siliconpin.com/items/exam_portal', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json', // Set the content type to JSON
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ questions: [questionObject] }), // Send an array of questions
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
// Handle success response
|
||||||
|
console.log('Success:', data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// Handle error
|
||||||
|
console.error('Error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
fetch('https://api8.siliconpin.com/items/question_identifier')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
this.idfrData = data.data;
|
||||||
|
console.log(this.idfrData)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Something Wrong", error)
|
||||||
|
})
|
||||||
|
// console.log(this.ansNoDa)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -7,100 +7,162 @@
|
||||||
<!-- <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 " >
|
<section class="container mx-auto " >
|
||||||
<div class="flex flex-col justify-center place-items-center">
|
<div class="flex flex-col md:flex-row justify-center gap-4">
|
||||||
<div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-2xl">
|
<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 + 1 }} / {{ noOfQs }} </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-col place-items-center gap-x-2">
|
||||||
<p class="text-xl font-bold">00:00</p>
|
<p>Answered: {{ totalAnswered }}</p>
|
||||||
<!-- <p class="text-xl font-bold">{{countdown}}</p> -->
|
<p>Reviewed: {{ totalReview }}</p>
|
||||||
|
<!-- <p class="text-xl font-bold">00:00</p> -->
|
||||||
|
<!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<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>Question ID: {{ qsActive.id }}</span>
|
||||||
<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 + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
|
||||||
<span class="font-bold">1. </span>
|
<span class="font-bold">{{ index + 1 }} </span>
|
||||||
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />
|
<input type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />
|
||||||
<label :for="qsData[qPoint].a" v-html="qsData[qPoint].a"></label>
|
<!-- <p v-else>Select kor age</p> -->
|
||||||
</div>
|
<!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" /> -->
|
||||||
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
|
<label :for="item" v-html="item"></label>
|
||||||
<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 }" />
|
|
||||||
<label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
|
|
||||||
</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 }" />
|
|
||||||
<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 }" />
|
|
||||||
<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>
|
||||||
<div class="flex flex-col md:flex-row gap-2 md:gap-4">
|
<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>
|
<!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
|
||||||
<button v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
|
<button :disabled="this.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 0 }" @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
|
||||||
|
<!-- :class="{ 'button-visibility': this.saveAnswer <= 0 }" -->
|
||||||
|
<button v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
|
||||||
|
<!-- :class="{ 'button-visibility': this.saveAnswer >= 1 }" -->
|
||||||
</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 + 2" @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>
|
||||||
|
<!-- v-if="qPoint == noOfQs-1" -->
|
||||||
|
<div v-if="qPoint == noOfQs-1" class="flex flex-col place-items-center">
|
||||||
|
<p>Now you can submit your answer</p>
|
||||||
|
<button @click="submitAnswer" class="bg-[#FF0000] p-2.5 text-white font-bold rounded-lg">Final Submit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>No Data Found</div>
|
<div v-else>No Data Found</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-col border-t-2 border-yellow-500 shadow-lg rounded-lg p-2">
|
||||||
|
<p class="text-center py-4 text-xl font-bold">Your Response</p>
|
||||||
|
<div class="grid grid-cols-3 gap-2">
|
||||||
|
<!-- <p class="response-indicator" v-for="(question, index) in qsData" :key="index" :class="{'response' : totalAnswer[index] && totalAnswer[index].answer < 0, 'response-review' : totalAnswer[index] && totalAnswer[index].answer === 0}">{{ index + 1 }}</p> -->
|
||||||
|
<!-- <p class="response-indicator" v-for="(response, index) in qsData" :key="index" :class="{'response' : totalAnswer.answer <= 0}">{{ index + 1 }}</p> -->
|
||||||
|
<p class="bg-green-600 response-indicator shadow-md font-bold text-white text-xl" v-for="(response, index) in totalAnswer" :key="index " :class="{'response' : response.answer <= 0}"> {{ index + 1}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedOptions: {}, // Use an array to store selected options for each question
|
saveAnswer: 0,
|
||||||
|
totalAnswer: [],
|
||||||
qsData: "",
|
qsData: "",
|
||||||
noOfQs: 0,
|
noOfQs: 0,
|
||||||
qPoint: 0,
|
qPoint: 0,
|
||||||
|
qsStatus: 0,
|
||||||
countdown: 10,
|
countdown: 10,
|
||||||
counting: false,
|
counting: false,
|
||||||
qsStatus: 0,
|
qsActive:[],
|
||||||
qsActive:[]
|
ansNo:0,
|
||||||
|
selectedOptionIndex: null, // Add this property
|
||||||
|
totalAnswered: 0,
|
||||||
|
totalReview: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
combinedArray() {
|
||||||
|
// Combine the arrays into a single array
|
||||||
|
return [this.qsData, this.totalAnswer];
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getQutValue() {
|
resetRadioInputs() {
|
||||||
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
|
// this.selectedOptions = {};
|
||||||
|
this.saveAnswer = null;
|
||||||
|
},
|
||||||
|
saveAns() {
|
||||||
|
// if (this.saveAnswer !== null) {
|
||||||
|
this.totalAnswered++;
|
||||||
const selectedAnswer = {
|
const selectedAnswer = {
|
||||||
answer: this.selectedOptions[this.qPoint],
|
|
||||||
questionId: this.qsData[this.qPoint].id,
|
questionId: this.qsData[this.qPoint].id,
|
||||||
status: 1,
|
answer: this.saveAnswer,
|
||||||
|
view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
|
||||||
};
|
};
|
||||||
console.log(this.selectedOptions);
|
this.totalAnswer.push(selectedAnswer);
|
||||||
|
console.log('Save Ansr', this.totalAnswer);
|
||||||
|
// } else {
|
||||||
|
// // Show an alert or set a message indicating that no option is selected
|
||||||
|
// alert("Select an answer before saving.");
|
||||||
|
// }
|
||||||
|
this.resetRadioInputs();
|
||||||
|
if (this.totalAnswer.length <= 24) {
|
||||||
|
this.getNextQs();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getNextQs() {
|
submitAnswer(){
|
||||||
this.qsActive=this.qsData[qPoint];
|
fetch(`https://api8.siliconpin.com/items/users_answers`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ answers: this.totalAnswer })
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if(response.ok){
|
||||||
|
console.log('Data Saved Succesfully')
|
||||||
|
} else{
|
||||||
|
console.log('Something Wrong')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('an error occoured', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getNextQs() {
|
||||||
this.qPoint++;
|
this.qPoint++;
|
||||||
|
this.qsActive=this.qsData[this.qPoint];
|
||||||
|
this.resetRadioInputs();
|
||||||
|
// this.resetRadioInputs();
|
||||||
|
// console.log(this.qsActive);
|
||||||
},
|
},
|
||||||
getPrevQs() {
|
getPrevQs() {
|
||||||
this.qPoint--;
|
this.qPoint--;
|
||||||
|
this.qsActive=this.qsData[this.qPoint];
|
||||||
|
this.selectOption();
|
||||||
},
|
},
|
||||||
previewLater(){
|
reviewLater(){
|
||||||
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
|
this.getNextQs();
|
||||||
const selectedAnswer = {
|
this.totalReview++;
|
||||||
answer: this.selectedOptions[this.qPoint],
|
const selectedAnswer = {
|
||||||
questionId: this.qsData[this.qPoint].id,
|
questionId: this.qsData[this.qPoint - 1].id,
|
||||||
status: 0,
|
answer: 0,
|
||||||
};
|
view: this.viewStatus = 1// Set status to 1 for "Save Answer"
|
||||||
console.log(this.selectedOptions);
|
};
|
||||||
}
|
this.totalAnswer.push(selectedAnswer);
|
||||||
}
|
console.log('Review later', this.totalAnswer);
|
||||||
|
|
||||||
|
},
|
||||||
|
selectOption(index) {
|
||||||
|
this.selectedOptionIndex = index;
|
||||||
|
},
|
||||||
|
// submitExam(){
|
||||||
|
// if (this.qPoint == this.noOfQs) {
|
||||||
|
// aler
|
||||||
|
// }
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
fetch('/assets/qs.json')
|
fetch('/assets/qs.json')
|
||||||
|
|
@ -108,21 +170,37 @@ 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 => {
|
||||||
console.error('Error fetching data:', error);
|
console.error('Error fetching data:', error);
|
||||||
});
|
});
|
||||||
let intervalId;
|
// this.remainingTime();
|
||||||
// Start countdown on mounted
|
|
||||||
intervalId = setInterval(() => {
|
|
||||||
if (this.countdown > 0) {
|
|
||||||
this.countdown--;
|
|
||||||
} else {
|
|
||||||
clearInterval(intervalId);
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.response-indicator{
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
/* border: 2px solid black; */
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.response{
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
.button-visibility{
|
||||||
|
/* display: none; */
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.selected-option {
|
||||||
|
background-color: #05b3a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,107 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<header>
|
<div></div>
|
||||||
<nav class="bg-gray-800">
|
|
||||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
|
||||||
<div class="relative flex h-16 items-center justify-between">
|
|
||||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
|
||||||
<!-- Mobile menu button-->
|
|
||||||
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
|
||||||
<span class="sr-only">Open main menu</span>
|
|
||||||
<!--
|
|
||||||
Icon when menu is closed.
|
|
||||||
|
|
||||||
Heroicon name: outline/bars-3
|
|
||||||
|
|
||||||
Menu open: "hidden", Menu closed: "block"
|
|
||||||
-->
|
|
||||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
||||||
</svg>
|
|
||||||
<!--
|
|
||||||
Icon when menu is open.
|
|
||||||
|
|
||||||
Heroicon name: outline/x-mark
|
|
||||||
|
|
||||||
Menu open: "block", Menu closed: "hidden"
|
|
||||||
-->
|
|
||||||
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
|
||||||
<div class="flex flex-shrink-0 items-center">
|
|
||||||
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
|
||||||
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
|
||||||
</div>
|
|
||||||
<div class="hidden sm:ml-6 sm:block">
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
|
||||||
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
|
||||||
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
|
|
||||||
<span class="sr-only">View notifications</span>
|
|
||||||
<!-- Heroicon name: outline/bell -->
|
|
||||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Profile dropdown -->
|
|
||||||
<div class="relative ml-3">
|
|
||||||
<div>
|
|
||||||
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
|
||||||
<span class="sr-only">Open user menu</span>
|
|
||||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Dropdown menu, show/hide based on menu state.
|
|
||||||
|
|
||||||
Entering: "transition ease-out duration-100"
|
|
||||||
From: "transform opacity-0 scale-95"
|
|
||||||
To: "transform opacity-100 scale-100"
|
|
||||||
Leaving: "transition ease-in duration-75"
|
|
||||||
From: "transform opacity-100 scale-100"
|
|
||||||
To: "transform opacity-0 scale-95"
|
|
||||||
-->
|
|
||||||
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
|
||||||
<!-- Active: "bg-gray-100", Not Active: "" -->
|
|
||||||
<!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile menu, show/hide based on menu state. -->
|
|
||||||
<div class="sm:hidden" id="mobile-menu">
|
|
||||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
|
||||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
|
||||||
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
|
||||||
|
|
||||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="container-fluid bg-green-600 mb-16">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto px-4 max-w-2xl">
|
||||||
|
<div class="shadow-lg rounded-xl p-6">
|
||||||
|
<p class="text-center">Add Question Identifier</p>
|
||||||
|
<form @submit.prevent="saveIdentifier()" name="identifierForm">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label for="identifierName" class="mt-4 ">Identifier Name:</label>
|
||||||
|
<input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
|
||||||
|
<label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
|
||||||
|
<input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number" />
|
||||||
|
<div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto px-4 mt-6 md:mt-16">
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<table class="border-2">
|
||||||
|
<tr>
|
||||||
|
<th class="border-2">Sl No.</th>
|
||||||
|
<th class="border-2">Identifier</th>
|
||||||
|
<th class="border-2">Number</th>
|
||||||
|
<th class="border-2">Action</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="(items, index) in idfrData" :key="index">
|
||||||
|
<td class="border-2">{{ index + 1 }}</td>
|
||||||
|
<td class="border-2">{{ items.identifier_name }}</td>
|
||||||
|
<td class="border-2">{{ items.identifier_number }}</td>
|
||||||
|
<td class="border-2 flex flex-row gap-x-2">
|
||||||
|
<a href="">Edit</a>
|
||||||
|
<a href="">Delete</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
identifierName: "",
|
||||||
|
identifierNumber: "",
|
||||||
|
idfrData: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
saveIdentifier() {
|
||||||
|
fetch('https://api8.siliconpin.com/items/question_identifier', {
|
||||||
|
method: 'POST',
|
||||||
|
headers:{
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
status: 'published',
|
||||||
|
identifier_name: this.identifierName,
|
||||||
|
identifier_number: this.identifierNumber,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if(response.ok){
|
||||||
|
return response.json();
|
||||||
|
console.log(response)
|
||||||
|
}
|
||||||
|
return Promise.reject(response)
|
||||||
|
})
|
||||||
|
.then(json => {
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch((response) => {
|
||||||
|
console.log(response.status, response.statusText);
|
||||||
|
response.json().then((json) => {
|
||||||
|
console.log(json.errors[0].message);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
fetch('https://api8.siliconpin.com/items/question_identifier')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
this.idfrData = data.data;
|
||||||
|
console.log(this.idfrData)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Something Wrong", error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="container-fluid bg-green-600 mb-16">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto px-4 max-w-2xl">
|
||||||
|
<div class="shadow-lg rounded-xl p-6">
|
||||||
|
<p class="text-center">Add Question Identifier</p>
|
||||||
|
<form @submit="saveIdentifier" name="identifierForm">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label for="identifierName" class="mt-4 ">Identifier Name:</label>
|
||||||
|
<input v-model="identifierName" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
|
||||||
|
<label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
|
||||||
|
<input v-model="identifierNumber" class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number" />
|
||||||
|
<div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto px-4 mt-6 md:mt-16">
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<table class="border-2">
|
||||||
|
<tr>
|
||||||
|
<th class="border-2">Sl No.</th>
|
||||||
|
<th class="border-2">Identifier</th>
|
||||||
|
<th class="border-2">Number</th>
|
||||||
|
<th class="border-2">Action</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="(items, index) in idfrData" :key="index">
|
||||||
|
<td class="border-2">{{ index + 1 }}</td>
|
||||||
|
<td class="border-2">{{ items.identifier_name }}</td>
|
||||||
|
<td class="border-2">{{ items.identifier_number }}</td>
|
||||||
|
<td class="border-2 flex flex-row gap-x-2">
|
||||||
|
<a href="">Edit</a>
|
||||||
|
<a href="">Delete</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
identifierName: null,
|
||||||
|
identifierNumber: null,
|
||||||
|
idfrData: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
saveIdentifier(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('Identifier Name:', this.identifierName);
|
||||||
|
console.log('Identifier Number:', this.identifierNumber);
|
||||||
|
let formData = new FormData();
|
||||||
|
formData.append('status', 'published');
|
||||||
|
formData.append('identifier_name', this.identifierName);
|
||||||
|
formData.append('identifier_number', this.identifierNumber);
|
||||||
|
fetch('https://api8.siliconpin.com/items/question_identifier', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData,
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
console.log('Response:', data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
fetch('https://api8.siliconpin.com/items/question_identifier')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
this.idfrData = data.data;
|
||||||
|
console.log(this.idfrData)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Something Wrong", error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<section class="container-fluid bg-green-600 mb-16">
|
||||||
|
<div class="container mx-auto px-4 ">
|
||||||
|
<h1 class="text-4xl font-bold text-white py-1.5">Beanstalkedu <br> Exam Portal</h1>
|
||||||
|
</div>
|
||||||
|
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
|
||||||
|
</section>
|
||||||
|
<section class="container mx-auto " >
|
||||||
|
<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-2xl">
|
||||||
|
<div class="flex flex-row place-content-between">
|
||||||
|
<p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
|
||||||
|
<div class="flex flex-row place-items-center gap-x-2">
|
||||||
|
<p class="text-base font-bold">Time Remaining: {{ timer }} seconds</p>
|
||||||
|
<!-- <p class="text-xl font-bold">00:00</p> -->
|
||||||
|
<!-- <p class="text-xl font-bold" @click="remainingTime()">Start {{countdown}}</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
|
||||||
|
<span>Question ID: {{ qsActive.id }}</span>
|
||||||
|
<p v-html="qsData[qPoint].qs"></p>
|
||||||
|
<div class="flex flex-col gap-y-4 h-[250px] overflow-y-auto">
|
||||||
|
<div v-for="(item, index) in qsActive.options" :key="index + 1" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer" @change="selectOption(index)" :class="{ 'selected-option': selectedOptionIndex === index }">
|
||||||
|
<span class="font-bold">{{ index + 1 }} </span>
|
||||||
|
<input type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />
|
||||||
|
<!-- <p v-else>Select kor age</p> -->
|
||||||
|
<!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" /> -->
|
||||||
|
<label :for="item" v-html="item"></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">
|
||||||
|
<!-- <input @click="saveAns();" type="submit" id="testdis" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" value="Save Answer" /> -->
|
||||||
|
<button :disabled="this.saveAnswer <= 0" :class="{ 'button-visibility': this.saveAnswer <= 0 }" @click="saveAns();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
|
||||||
|
<!-- :class="{ 'button-visibility': this.saveAnswer <= 0 }" -->
|
||||||
|
<button :disabled="this.saveAnswer >= 1" :class="{ 'button-visibility': this.saveAnswer >= 1 }" v-on:click="reviewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
|
||||||
|
<!-- :class="{ 'button-visibility': this.saveAnswer >= 1 }" -->
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
saveAnswer: {},
|
||||||
|
totalAnswer: [],
|
||||||
|
qsData: "",
|
||||||
|
noOfQs: 0,
|
||||||
|
qPoint: 0,
|
||||||
|
qsStatus: 0,
|
||||||
|
countdown: 10,
|
||||||
|
counting: false,
|
||||||
|
qsActive:[],
|
||||||
|
ansNo:0,
|
||||||
|
selectedOptionIndex: null, // Add this property
|
||||||
|
timer: 10,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startTimer() {
|
||||||
|
let intervalId = setInterval(() => {
|
||||||
|
if (this.timer > 0) {
|
||||||
|
this.timer--;
|
||||||
|
} else {
|
||||||
|
// Time has expired, perform your action here
|
||||||
|
this.handleTimeExpired();
|
||||||
|
|
||||||
|
// Stop the interval
|
||||||
|
clearInterval(intervalId);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
handleTimeExpired() {
|
||||||
|
console.log("Time expired for question", this.qsActive.id);
|
||||||
|
// this.getNextQs();
|
||||||
|
},
|
||||||
|
saveAns() {
|
||||||
|
// if (this.saveAnswer !== null) {
|
||||||
|
const selectedAnswer = {
|
||||||
|
answer: this.saveAnswer,
|
||||||
|
questionId: this.qsData[this.qPoint].id,
|
||||||
|
view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
|
||||||
|
};
|
||||||
|
this.totalAnswer.push(selectedAnswer);
|
||||||
|
console.log('array', this.totalAnswer);
|
||||||
|
// } else {
|
||||||
|
// // Show an alert or set a message indicating that no option is selected
|
||||||
|
// alert("Select an answer before saving.");
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
resetRadioInputs() {
|
||||||
|
// this.selectedOptions = {};
|
||||||
|
this.saveAnswer = null;
|
||||||
|
},
|
||||||
|
getNextQs() {
|
||||||
|
this.timer = 10;
|
||||||
|
this.startTimer();
|
||||||
|
this.qPoint++;
|
||||||
|
this.qsActive=this.qsData[this.qPoint];
|
||||||
|
this.resetRadioInputs();
|
||||||
|
// this.resetRadioInputs();
|
||||||
|
// console.log(this.qsActive);
|
||||||
|
},
|
||||||
|
getPrevQs() {
|
||||||
|
this.qPoint--;
|
||||||
|
this.qsActive=this.qsData[this.qPoint];
|
||||||
|
this.selectOption();
|
||||||
|
},
|
||||||
|
reviewLater(){
|
||||||
|
this.getNextQs();
|
||||||
|
const selectedAnswer = {
|
||||||
|
answer: 0,
|
||||||
|
questionId: this.qsData[this.qPoint].id,
|
||||||
|
view: this.viewStatus = 1// Set status to 1 for "Save Answer"
|
||||||
|
};
|
||||||
|
this.totalAnswer.push(selectedAnswer);
|
||||||
|
console.log('array later', this.totalAnswer);
|
||||||
|
|
||||||
|
},
|
||||||
|
selectOption(index) {
|
||||||
|
this.selectedOptionIndex = index;
|
||||||
|
},
|
||||||
|
remainingTime(){
|
||||||
|
let intervalId;
|
||||||
|
// Start countdown on mounted
|
||||||
|
intervalId = setInterval(() => {
|
||||||
|
if (this.countdown > 0) {
|
||||||
|
this.countdown--;
|
||||||
|
} else {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
fetch('/assets/qs.json')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
this.qsData=data;
|
||||||
|
this.noOfQs = this.qsData.length;
|
||||||
|
this.qsActive=this.qsData[0];
|
||||||
|
// console.log(this.qsActive);
|
||||||
|
// console.log(this.noOfQs);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
});
|
||||||
|
this.startTimer();
|
||||||
|
// this.remainingTime();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.button-visibility{
|
||||||
|
/* display: none; */
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.selected-option {
|
||||||
|
background-color: #05b3a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import AddQuestion from "../components/AddQuestion.vue";
|
||||||
|
---
|
||||||
|
<Layout title="Add New Question">
|
||||||
|
<AddQuestion client:visible />
|
||||||
|
</Layout>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import QuestionIdentifier from "../components/QuestionIdentifier.vue";
|
||||||
|
---
|
||||||
|
<Layout title="">
|
||||||
|
<QuestionIdentifier client:visible />
|
||||||
|
<!-- <main>
|
||||||
|
<div>
|
||||||
|
<section class="container mx-auto px-4 max-w-2xl mt-20">
|
||||||
|
<form id="identifierForm">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<label for="identifierName" class="mt-4 ">Identifier Name:</label>
|
||||||
|
<input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierName" name="identifierName" type="text" placeholder="Identifier Name" required />
|
||||||
|
<label for="identifierNumber" class="mt-4 ">Identifier Number:</label>
|
||||||
|
<input class="border-2 rounded-lg focus:outline-none focus:border-2 focus:border-green-500 p-1.5" id="identifierNumber" name="identifierNumber" type="text" min="1" placeholder="Identifier Number" />
|
||||||
|
<div><input value="Add" type="submit" class="mt-4 rounded-lg bg-green-500 py-1.5 text-white font-bold px-6 float-right" /></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main> -->
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
// document.addEventListener('DOMContentLoaded', function(){
|
||||||
|
// const identifierForm = document.getElementById('identifierForm');
|
||||||
|
// const identifierName = document.getElementById('identifierName');
|
||||||
|
// const identifierNumber = document.getElementById('identifierNumber');
|
||||||
|
|
||||||
|
// identifierForm.addEventListener('submit', async function(event){
|
||||||
|
// event.preventDefault();
|
||||||
|
// const formData = {
|
||||||
|
// status: 'published',
|
||||||
|
// identifier_name: identifierName.value,
|
||||||
|
// identifier_number: identifierNumber.value,
|
||||||
|
// };
|
||||||
|
// console.log('Form Data', formData)
|
||||||
|
// const URL = 'https://api8.siliconpin.com/items/question_identifier'
|
||||||
|
// try{
|
||||||
|
// const response = await fetch(URL, {
|
||||||
|
// method: 'POST',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type' : 'application/json'
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify(formData)
|
||||||
|
// });
|
||||||
|
// if(response.ok){
|
||||||
|
// console.log('Data Saved Succefully')
|
||||||
|
// } else{
|
||||||
|
// console.error('Data not Saved')
|
||||||
|
// }
|
||||||
|
// } catch(error){
|
||||||
|
// console.error('Error occoured', error)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
<!-- https://api8.siliconpin.com/items/question_identifier -->
|
||||||
Loading…
Reference in New Issue