Compare commits

..

No commits in common. "b2" and "b1" have entirely different histories.
b2 ... b1

12 changed files with 374 additions and 999 deletions

View File

0
dd
View File

View File

@ -4,8 +4,8 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev --host --port 2020", "dev": "astro dev --host --port 2008",
"start": "astro dev --host --port 2020", "start": "astro dev --host --port 2008",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro"

View File

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

View File

@ -1,125 +0,0 @@
<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()">&#10006;</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>

View File

@ -7,162 +7,100 @@
<!-- <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 md:flex-row justify-center gap-4"> <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="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-col place-items-center gap-x-2"> <div class="flex flex-row place-items-center gap-x-2">
<p>Answered: {{ totalAnswered }}</p> <p class="text-xl font-bold">00:00</p>
<p>Reviewed: {{ totalReview }}</p> <!-- <p class="text-xl font-bold">{{countdown}}</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 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 }"> <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">{{ index + 1 }} </span>&nbsp; <span class="font-bold">1. </span>
<input type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />&nbsp; <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />&nbsp;
<!-- <p v-else>Select kor age</p> --> <label :for="qsData[qPoint].a" v-html="qsData[qPoint].a"></label>
<!-- <input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="item" :value="{ answer: item, questionId: qsActive.id, status: qsStatus }" @change="selectOption(index)" />&nbsp; --> </div>
<label :for="item" v-html="item"></label> <div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">2. </span>
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].b" :value="{ answer: qsData[qPoint].b, questionId: qsData[qPoint].id }" />&nbsp;
<label :for="qsData[qPoint].b" v-html="qsData[qPoint].b"></label>
</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 }" />&nbsp;
<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 }" />&nbsp;
<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">
<!-- <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="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</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> <button v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</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 + 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> <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>
</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 {
saveAnswer: 0, selectedOptions: {}, // Use an array to store selected options for each question
totalAnswer: [],
qsData: "", qsData: "",
noOfQs: 0, noOfQs: 0,
qPoint: 0, qPoint: 0,
qsStatus: 0,
countdown: 10, countdown: 10,
counting: false, counting: false,
qsActive:[], qsStatus: 0,
ansNo:0, qsActive:[]
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: {
resetRadioInputs() { getQutValue() {
// this.selectedOptions = {}; if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
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,
answer: this.saveAnswer, status: 1,
view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
}; };
this.totalAnswer.push(selectedAnswer); console.log(this.selectedOptions);
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();
} }
}, },
submitAnswer(){
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() { getNextQs() {
this.qsActive=this.qsData[qPoint];
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();
}, },
reviewLater(){ previewLater(){
this.getNextQs(); if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
this.totalReview++; const selectedAnswer = {
const selectedAnswer = { answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint - 1].id, questionId: this.qsData[this.qPoint].id,
answer: 0, status: 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')
@ -170,37 +108,21 @@ export default {
.then(data => { .then(data => {
this.qsData=data; this.qsData=data;
this.noOfQs = this.qsData.length; this.noOfQs = this.qsData.length;
this.qsActive=this.qsData[0]; console.log(this.noOfQs);
// 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);
}); });
// this.remainingTime(); let intervalId;
// 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>

View File

@ -1,5 +1,107 @@
<template> <template>
<div></div> <header>
<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>

View File

@ -1,98 +0,0 @@
<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>

View File

@ -1,88 +0,0 @@
<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>

View File

@ -1,174 +0,0 @@
<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>&nbsp;
<input type="radio" :id="item" v-model="saveAnswer" :value="index + 1" :class="{ 'selected-option': selectedOptionIndex === index }" />&nbsp;
<!-- <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)" />&nbsp; -->
<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>

View File

@ -1,7 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
import AddQuestion from "../components/AddQuestion.vue";
---
<Layout title="Add New Question">
<AddQuestion client:visible />
</Layout>

View File

@ -1,57 +0,0 @@
---
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 -->