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

next-prev

b1
Dev 1 2023-11-17 20:34:54 +05:30
parent 0f771c2155
commit fa43b54605
5 changed files with 573 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

333
public/assets/qs.json Normal file
View File

@ -0,0 +1,333 @@
[
{
"id" : 1,
"qs" : "Inside which HTML element do we put the JavaScript?",
"options" : [
{"a": "<script>",
"b":"<javascript>",
"c":"<scripting>",
"d":"<js>"}
],
"answer":"<script>",
"score":0,
"status": ""
},
{
"id" : 2,
"qs" : "Where is the correct place to insert a JavaScript?",
"options" : [
{"a": "The <head> section",
"b":"The <body> section",
"c":"Both the <head> section and the <body> section are correct"}
],
"answer":"Both the <head> section and the <body> section are correct",
"score":0,
"status": ""
},
{
"id" : 3,
"qs" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options" : [
{"a": "&ltscript href="xxx.js">",
"b":"<script name="xxx.js">",
"c":"<script src="xxx.js">"}
],
"answer":"<script src="xxx.js">",
"score":0,
"status": ""
},
{
"id" : 4,
"qs" : "The external JavaScript file must contain the <script> tag.",
"options" : [
{"a": "True",
"b":"False"
}
],
"answer":"False",
"score":0,
"status": ""
},
{
"id" : 5,
"qs" : "How do you write "Hello World" in an alert box?",
"options" : [
{"a": "alertBox("Hello World");",
"b":"msg("Hello World");",
"c":"alert("Hello World");",
"d":"msgBox("Hello World");"
}
],
"answer":"alert("Hello World");",
"score":0,
"status": ""
},
{
"id" : 6,
"qs" : "How do you create a function in JavaScript?",
"options" : [
{"a": "function myFunction()",
"b":"function:myFunction()",
"c":"function = myFunction()"
}
],
"answer":"function myFunction()",
"score":0,
"status": ""
},
{
"id" : 7,
"qs" : "How do you call a function named "myFunction"?",
"options" : [
{"a": "call function myFunction()",
"b":"call myFunction()",
"c":"myFunction()"
}
],
"answer":"myFunction()",
"score":0,
"status": ""
},
{
"id" : 8,
"qs" : "How to write an IF statement in JavaScript?",
"options" : [
{"a": "if i = 5 then",
"b":"if i == 5 then",
"c":"if (i == 5)",
"d":" if i = 5"
}
],
"answer":"if (i == 5)",
"score":0,
"status": ""
},
{
"id" : 9,
"qs" : "Which of the following is a disadvantage of using JavaScript?",
"options" : [
{"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."
}
],
"answer":"All of the above.",
"score":0,
"status": ""
},
{
"id" : 10,
"qs" : "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
"options" : [
{"a": "if (i <> 5)",
"b":"if i <> 5",
"c":"if (i != 5)",
"d":"if i =! 5 then"
}
],
"answer":"if (i != 5)",
"score":0,
"status": ""
},
{
"id" : 11,
"qs" : "How does a WHILE loop start?",
"options" : [
{"a": "while i = 1 to 10",
"b":"while (i &lt;= 10; i++)",
"c":"while (i &lt;= 10)"
}
],
"answer":"while (i &lt;= 10)",
"score":0,
"status": ""
},
{
"id" : 12,
"qs" : "How does a FOR loop start?",
"options" : [
{"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++)"
}
],
"answer":"for (i = 0; i &lt;= 5; i++)",
"score":0,
"status": ""
},
{
"id" : 13,
"qs" : "How can you add a comment in a JavaScript?",
"options" : [
{"a": "//This is a comment",
"b":"&sbquo;This is a comment",
"c":"&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" : [
{"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;"
}
],
"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" : [
{"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;"
}
],
"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" : [
{"a": "rnd(7.25)",
"b":"Math.round(7.25)",
"c":"Math.rnd(7.25)",
"d":"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" : [
{"a": "Math.max(x, y)",
"b":"Math.ceil(x, y)",
"c":"top(x, y)",
"d":"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" : [
{"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);",
"b":"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" : [
{"a": "true",
"b":"false"
}
],
"answer":"false",
"score":0,
"status": ""
},
{
"id" : 20,
"qs" : "How can you detect the client&rsquo;s browser name?",
"options" : [
{"a": "navigator.appName",
"b":"browser.name",
"c":"client.navName"
}
],
"answer":"navigator.appName",
"score":0,
"status": ""
},
{
"id" : 21,
"qs" : "Which event occurs when the user clicks on an HTML element?",
"options" : [
{"a": "onchange",
"b":"onclick",
"c":"onmouseclick",
"d":"onmouseover"
}
],
"answer":"onclick",
"score":0,
"status": ""
},
{
"id" : 22,
"qs" : "How do you declare a JavaScript variable?",
"options" : [
{"a": "var carName;",
"b":"variable carName;",
"c":"v carName;"
}
],
"answer":"var carName;",
"score":0,
"status": ""
},
{
"id" : 23,
"qs" : "Which operator is used to assign a value to a variable?",
"options" : [
{"a": "*",
"b":"-",
"c":"=",
"d":"x"
}
],
"answer":"=",
"score":0,
"status": ""
},
{
"id" : 24,
"qs" : "What will the following code return: Boolean(10 &gt; 9)",
"options" : [
{"a": "NaN",
"b":"false",
"c":"true"
}
],
"answer":"true",
"score":0,
"status": ""
},
{
"id" : 25,
"qs" : "Is JavaScript case-sensitive?",
"options" : [
{"a": "No",
"b":"Yes"
}
],
"answer":"Yes",
"score":0,
"status": ""
}
]

66
src/components/MCQAllData.vue Normal file
View File

@ -0,0 +1,66 @@
<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" v-for="item in qsData" :key="item.id">
<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-xl">
<div class="flex flex-row place-content-between">
<p class="text-xl font-bold">Question {{ item.id }}</p>
<div class="flex flex-row place-items-center gap-x-2">
<i id="spinclock" class="fa fa-clock-o" style="font-size:30px" />
<p class="text-xl font-bold" id="countdown">00:00</p>
</div>
</div>
<div>
<p class="mt-4 text-2xl">{{ item.qs }}</p>
<div class="flex flex-col gap-y-4 rounded-lg mt-4">
<!-- Loop through the options dynamically -->
<div v-for="(option, index) in item.options[0]" :key="index" class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">{{ index }}.</span>
<input v-model="selectedOptions[item.id]" type="radio" :name="'questionOption' + item.id" :id="'option' + item.id" :value="option + item.id">
<label :for="'option' + item.id " v-html="option"></label>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="flex flex-row place-content-between mt-4">
<button class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Previous</button>
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Save for Later</button>
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save & Next</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: {}, // Use an object to store selected options for each question
qsData: null,
};
},
methods: {
getQutValue() {
console.log(this.selectedOptions);
},
},
mounted() {
fetch('/assets/qs.json')
.then(response => response.json())
.then(data => {
this.qsData = data;
console.log(this.qsData);
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
};
</script>

81
src/components/MCQQuestion.vue Normal file
View File

@ -0,0 +1,81 @@
<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" >
<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-xl">
<div class="flex flex-row place-content-between">
<p class="text-xl font-bold">Question: {{ qPoint }} </p>
<div class="flex flex-row place-items-center gap-x-2">
<i id="spinclock" class="fa fa-clock-o" style="font-size:30px" />
<p class="text-xl font-bold" id="countdown">00:00</p>
</div>
</div>
<div>
<p class="mt-4 text-2xl" v-html="qsData.qs"></p>
<div v-if="noOfQs>0" class="flex flex-col gap-y-4 rounded-lg mt-4">
<span>total questions: {{ qPoint }} / {{ noOfQs }}</span>
<p>{{ qsData[qPoint].qs }}</p>
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer h-[300px] overflow-y-scroll">
<span class="font-bold">{{ qsData[qPoint] }}.</span>
<!-- <input v-model="qsData[0]" type="radio" :name="'questionOption' " :id="'option' " :value="option + option.id">
<label :for="'option' " v-html="qsData[0]"></label>
-->
</div>
<div class="flex flex-row place-content-between mt-4">
<button v-on:click="getPrevQs" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg" :disabled="qPoint <= 0">Previous Question</button>
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Review Later</button>
<button v-on:click="getQutValue" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save Answer </button>
<button :disabled="qPoint >= noOfQs - 1" v-on:click="getNextQs" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg"> Next Question</button>
</div>
</div>
<div v-else>No Data Found</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: {}, // Use an object to store selected options for each question
qsData: "",
noOfQs: 0,
qPoint:0
};
},
methods: {
getQutValue() {
console.log(this.selectedOptions);
},
getNextQs() {
this.qPoint++;
},
getPrevQs() {
this.qPoint--;
}
},
mounted() {
fetch('/assets/qs.json')
.then(response => response.json())
.then(data => {
this.qsData=data;
this.noOfQs = this.qsData.length;
console.log(this.noOfQs);
// console.log(this.noOfQs);
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
};
</script>

153
src/pages/exam4.astro
View File

@ -1,153 +0,0 @@
---
import Layout from "../layouts/Layout.astro";
const fetchData = await fetch('https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json');
const data = await fetchData.json();
const questionData = data.questions;
const optionsData = questionData[0].options;
// console.log(questionData[0].options)
---
<Layout title="">
<main>
<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">
<div class="flex flex-col justify-center place-items-center">
<!-- {data.map((plan: {}) =>
)} -->
<div class="border-t-2 rounded-2xl border-yellow-500 shadow-lg p-6 w-full max-w-xl">
<div class="flex flex-row place-content-between">
<p class="text-xl font-bold">Question 5</p>
<div class="flex flex-row place-items-center gap-x-2">
<i id="spinclock" class="fa fa-clock-o" style="font-size:30px" />
<p class="text-xl font-bold" id="countdown"></p>
</div>
</div>
<div>
<p class="mt-4 text-2xl">What is the capital of France?</p>
<div class="flex flex-col gap-y-4 rounded-lg mt-4">
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">1.</span>
<input class="" type="radio" name="questionOption" id="optionA" value="Berlin" />
<label for="optionA">Berlin</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 type="radio" name="questionOption" id="optionB" value="Paris" />
<label for="optionB"> Paris</label>
</div>
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">3.</span>
<input type="radio" name="questionOption" id="optionC" value="Madrid" />
<label for="optionC">Madrid</label>
</div>
<div class="border-2 border-indigo-300 rounded p-2.5 bg-indigo-50 cursor-pointer">
<span class="font-bold">4.</span>
<input type="radio" name="questionOption" id="optionD" value="Rome" />
<label for="optionD">Rome</label>
</div>
<div class="flex flex-row place-content-between mt-4">
<button class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Previous</button>
<button class="bg-[#7C4C23] float-right p-2.5 text-white font-bold rounded-lg">Save for Later</button>
<button onclick="getQutValue();" class="bg-green-700 float-right p-2.5 text-white font-bold rounded-lg">Save & Next</button>
</div>
</div>
</div>
</div>
<!-- <div id="apiDataContainer"></div> -->
</div>
</section>
</div>
</main>
</Layout>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script is:inline>
var radioButtons = document.querySelectorAll('input[name="questionOption"]');
// Add event listener to each radio button
radioButtons.forEach(function (radioButton) {
radioButton.addEventListener('change', function () {
// Check which radio button is selected
if (radioButton.checked) {
// Get the selected value
var selectedValue = radioButton.value;
console.log("Selected Value: " + selectedValue);
// Example: If the selected value is 75, do something
if (selectedValue === "75") {
// Your code here
}
}
});
});
function fetchData() {
// Replace 'https://api.example.com/data' with your actual API endpoint
fetch('https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json')
.then(response => response.json())
.then(data => {
let getData = data.questions
// Call a function to process the data
// console.log('Get Data Test', data.questions)
console.log(getData)
processApiData(getData);
})
.catch(error => console.error('Error fetching data:', error));
}
// Function to process the fetched data
function processApiData(data) {
// Get the container element where you want to display the data
var container = document.getElementById('apiDataContainer');
// Iterate over the data using forEach
data.forEach(function(item) {
// Create a new element for each item in the data
var listItem = document.createElement('div');
listItem.textContent = item.id + item.question + item.options; // Replace 'name' with the actual property you want to display
// Append the new element to the container
container.appendChild(listItem);
});
}
window.onload = fetchData()
// Set the target time to 10 seconds from now
const targetTime = new Date().getTime() + 10000; // 10 seconds in milliseconds
// Update the countdown every 1 second
const countdownInterval = setInterval(function() {
// Get the current date and time
const currentDate = new Date().getTime();
// Calculate the remaining time in milliseconds
const remainingTime = targetTime - currentDate;
// Calculate seconds
const seconds = Math.floor(remainingTime / 1000);
// Display the countdown
document.getElementById("countdown").innerHTML = `00:0${seconds}`;
if (remainingTime < 0) {
clearInterval(countdownInterval);
document.getElementById("countdown").innerHTML = "Time Over";
}
if (seconds < 5) {
document.getElementById("countdown").style.color = 'red';
}
if (seconds >= 0) {
const clockAnimate = document.getElementById('countdown');
clockAnimate.classList('animate-spin')
}
}, 10); // Update every 1 second animate-spin spinClock
</script>
<style>
.selectedInput{
border: 2px solid red;
background-color: #ff000040;
}
</style>

93
src/pages/mcq-question.astro Normal file
View File

@ -0,0 +1,93 @@
---
import Layout from "../layouts/Layout.astro";
import MCQQuestion from "../components/MCQQuestion.vue";
const fetchData = await fetch('https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json');
const data = await fetchData.json();
const questionData = data.questions;
const optionsData = questionData[0].options;
// console.log(questionData[0].options)
---
<Layout title="">
<MCQQuestion client:visible />
</Layout>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script is:inline>
var radioButtons = document.querySelectorAll('input[name="questionOption"]');
// Add event listener to each radio button
radioButtons.forEach(function (radioButton) {
radioButton.addEventListener('change', function () {
// Check which radio button is selected
if (radioButton.checked) {
// Get the selected value
var selectedValue = radioButton.value;
console.log("Selected Value: " + selectedValue);
// Example: If the selected value is 75, do something
if (selectedValue === "75") {
// Your code here
}
}
});
});
function fetchData() {
// Replace 'https://api.example.com/data' with your actual API endpoint
fetch('https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json')
.then(response => response.json())
.then(data => {
let getData = data.questions
// Call a function to process the data
// console.log('Get Data Test', data.questions)
console.log(getData)
processApiData(getData);
})
.catch(error => console.error('Error fetching data:', error));
}
// Function to process the fetched data
function processApiData(data) {
// Get the container element where you want to display the data
var container = document.getElementById('apiDataContainer');
// Iterate over the data using forEach
data.forEach(function(item) {
// Create a new element for each item in the data
var listItem = document.createElement('div');
listItem.textContent = item.id + item.question + item.options; // Replace 'name' with the actual property you want to display
// Append the new element to the container
container.appendChild(listItem);
});
}
window.onload = fetchData()
// Set the target time to 10 seconds from now
const targetTime = new Date().getTime() + 10000; // 10 seconds in milliseconds
// Update the countdown every 1 second
const countdownInterval = setInterval(function() {
// Get the current date and time
const currentDate = new Date().getTime();
// Calculate the remaining time in milliseconds
const remainingTime = targetTime - currentDate;
// Calculate seconds
const seconds = Math.floor(remainingTime / 1000);
// Display the countdown
document.getElementById("countdown").innerHTML = `00:0${seconds}`;
if (remainingTime < 0) {
clearInterval(countdownInterval);
document.getElementById("countdown").innerHTML = "Time Over";
}
if (seconds < 5) {
document.getElementById("countdown").style.color = 'red';
}
if (seconds >= 0) {
const clockAnimate = document.getElementById('countdown');
clockAnimate.classList('animate-spin')
}
}, 10); // Update every 1 second animate-spin spinClock
</script> -->