suvo
/
beanstalkedu-exam-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: suvo:b2
Branches Tags
suvo:b2
suvo:b1
..
compare: suvo:b1
Branches Tags
suvo:b2
suvo:b1

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

12 changed files with 374 additions and 999 deletions
Show Stats Expand all files Collapse all files

0
.dd.swp
View File

0
dd
View File

4
package.json
View File

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

516
public/assets/qs.json
View File

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

125
src/components/AddQuestion.vue
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>

200
src/components/MCQQuestion.vue
View File

@ -7,162 +7,100 @@
<!-- <p v-for="items in dataa" :key="items.id">{{items.qs}}</p> -->
</section>
<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="flex flex-row place-content-between">
<p class="text-xl font-bold">Question: {{ qPoint + 1 }} / {{ noOfQs }} </p>
<div class="flex flex-col place-items-center gap-x-2">
<p>Answered: {{ totalAnswered }}</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 class="flex flex-row place-items-center gap-x-2">
<p class="text-xl font-bold">00:00</p>
<!-- <p class="text-xl font-bold">{{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>
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
<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 class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">1. </span>
<input v-model="selectedOptions[qPoint]" type="radio" name="questionOption" :id="qsData[qPoint].a" :value="{ answer: qsData[qPoint].a, questionId: qsData[qPoint].id }" />&nbsp;
<label :for="qsData[qPoint].a" v-html="qsData[qPoint].a"></label>
</div>
<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 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 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 }" -->
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer</button>
<button v-on:click="previewLater" class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
</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>
</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>
<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>
</div>
<div v-else>No Data Found</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>
</section>
</div>
</template>
<script>
export default {
data() {
return {
saveAnswer: 0,
totalAnswer: [],
selectedOptions: {}, // Use an array to store selected options for each question
qsData: "",
noOfQs: 0,
qPoint: 0,
qsStatus: 0,
countdown: 10,
counting: false,
qsActive:[],
ansNo:0,
selectedOptionIndex: null, // Add this property
totalAnswered: 0,
totalReview: 0,
qsStatus: 0,
qsActive:[]
};
},
computed: {
combinedArray() {
// Combine the arrays into a single array
return [this.qsData, this.totalAnswer];
},
},
methods: {
resetRadioInputs() {
// this.selectedOptions = {};
this.saveAnswer = null;
},
saveAns() {
// if (this.saveAnswer !== null) {
this.totalAnswered++;
getQutValue() {
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
const selectedAnswer = {
answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id,
answer: this.saveAnswer,
view: this.viewStatus = 1, // Set status to 1 for "Save Answer"
status: 1,
};
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();
console.log(this.selectedOptions);
}
},
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.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();
this.totalReview++;
const selectedAnswer = {
questionId: this.qsData[this.qPoint - 1].id,
answer: 0,
view: this.viewStatus = 1// Set status to 1 for "Save Answer"
};
this.totalAnswer.push(selectedAnswer);
console.log('Review later', this.totalAnswer);
},
selectOption(index) {
this.selectedOptionIndex = index;
},
// submitExam(){
// if (this.qPoint == this.noOfQs) {
// aler
// }
// },
previewLater(){
if (this.qPoint >= 0 && this.qPoint < this.noOfQs) {
const selectedAnswer = {
answer: this.selectedOptions[this.qPoint],
questionId: this.qsData[this.qPoint].id,
status: 0,
};
console.log(this.selectedOptions);
}
}
},
mounted() {
fetch('/assets/qs.json')
@ -170,37 +108,21 @@ export default {
.then(data => {
this.qsData=data;
this.noOfQs = this.qsData.length;
this.qsActive=this.qsData[0];
// console.log(this.qsActive);
console.log(this.noOfQs);
// console.log(this.noOfQs);
})
.catch(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>
<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>
</script>

104
src/components/MainHeader.vue
View File

@ -1,5 +1,107 @@
<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>
<style scoped>

98
src/components/QuestionIdentifier.vue
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>

88
src/components/Temp.vue
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>

174
src/components/Time.vue
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>

7
src/pages/add-question.astro
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>

57
src/pages/identifier.astro
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 -->