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

c

b1
Dev 1 2023-11-17 15:15:36 +05:30
commit 0f771c2155
25 changed files with 19172 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.gitignore vendored Normal file
View File

@ -0,0 +1,20 @@
# build output
dist/
.output/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

4
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

50
README.md Normal file
View File

@ -0,0 +1,50 @@
# Welcome to [Astro](https://astro.build)
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```
/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :--------------------- | :------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
| `npm run astro --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

14
astro.config.mjs Normal file
View File

@ -0,0 +1,14 @@
import { defineConfig } from 'astro/config';
// https://astro.build/config
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
import vue from "@astrojs/vue";
// https://astro.build/config
// https://astro.build/config
export default defineConfig({
integrations: [tailwind(), vue()]
});

10674
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "@example/basics",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev --host --port 2008",
"start": "astro dev --host --port 2008",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/tailwind": "^2.1.3",
"@astrojs/vue": "^1.2.2",
"astro": "^1.7.2",
"astro-eslint-parser": "^0.14.0",
"eslint": "^8.44.0",
"flowbite": "^1.7.0",
"flowbite-typography": "^1.0.3",
"shiki": "^0.14.3",
"tailwind-scrollbar": "^3.0.4",
"tailwindcss": "^3.2.4",
"vite-plugin-pwa": "^0.16.4",
"vue": "^3.2.45",
"workbox-window": "^7.0.0"
}
}

13
public/favicon.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
<path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
<defs>
<linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#000"/>
<stop offset="1" stop-color="#000" stop-opacity="0"/>
</linearGradient>
</defs>
<style>
@media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 873 B

62
src/components/Card.astro Normal file
View File

@ -0,0 +1,62 @@
---
export interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 0.15rem;
background-color: white;
background-image: var(--accent-gradient);
background-size: 400%;
border-radius: 0.5rem;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: 1rem 1.3rem;
border-radius: 0.35rem;
color: #111;
background-color: white;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
color: #444;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent));
}
</style>

34
src/components/DescriptiveQuestion.vue Normal file
View File

@ -0,0 +1,34 @@
<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">
<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 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" ></i>
<p class="text-xl font-bold" id="countdown">00:00</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">
<textarea class="border-[2px] border-blue-300 rounded-md focus:outline-none focus:border-blue-400" name="" id="" cols="30" rows="10"></textarea>
<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>
</section>
</div>
</template>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

3
src/components/Footer.astro Normal file
View File

@ -0,0 +1,3 @@
<main>
<!-- <div class="text-4xl font-bold">Footer Content</div> -->
</main>

216
src/components/MainHeader.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<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>
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.nav-links a {
color: #7a4211;
}
.nav-links a:hover {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
z-index: 999;
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #3b82f6;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
z-index: 999;
background-color: rgb(247, 235, 173);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
margin-left: -30px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: rgb(250, 230, 133);
color: #ff0000;
}
.services:hover .dropdown {
display: block;
}
input[type=checkbox]{
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:#f0f9ff;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
</style>

1
src/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="astro/client" />

43
src/layouts/Layout.astro Normal file
View File

@ -0,0 +1,43 @@
---
import MainHeader from '../components/MainHeader.vue';
import Footer from '../components/Footer.astro';
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<MainHeader />
<slot />
<Footer/>
</body>
</html>
<style is:global>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap');
body{
font-family: 'Quicksand', sans-serif;
}
/* :root {
--accent: 124, 58, 237;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
}
html {
font-family: system-ui, sans-serif;
background-color: #F6F6F6;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
} */
</style>

7
src/pages/descriptive-question.astro Normal file
View File

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

134
src/pages/descriptive.astro Normal file
View File

@ -0,0 +1,134 @@
---
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">
<textarea class="border-[2px] border-blue-300 rounded-md focus:outline-none focus:border-blue-400" name="" id="" cols="30" rows="10"></textarea>
<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>

365
src/pages/exam.astro Normal file
View File

@ -0,0 +1,365 @@
<main>
<div>
<div class="quiz-app">
<div class="quiz-info">
<div class="category">Category: <span></span></div>
<div class="count">Questions Count: <span></span></div>
</div>
<div class="quiz-area"></div>
<div class="options-area"></div>
<button class="submit-button">Save</button>
<div class="bullets">
<div class="spans"></div>
<div class="countdown"></div>
</div>
<div class="results"></div>
</div>
</div>
</main>
<script is:inline>
// Query selectors
let quizInfo = document.querySelector(".quiz-info")
let countSpan = document.querySelector(".count span")
let bullets = document.querySelector(".bullets")
let categorySpan = document.querySelector(".category span")
let bulletsSpanContainer = document.querySelector(".bullets .spans")
let quizArea = document.querySelector(".quiz-area")
let optionsArea = document.querySelector(".options-area")
let submitButton = document.querySelector(".submit-button")
let countdownDiv = document.querySelector(".countdown")
let resultsDiv = document.querySelector(".results")
// Variables
let currentIndex = 0
let rigthAnswers = 0
let countdownInterval = 0
//Functions to get the questions from JSON File
function getQuestions() {
let myRequest = new XMLHttpRequest()
myRequest.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let questionsObject = JSON.parse(this.responseText)
let questionsCount = questionsObject.questions.length
createBullets(questionsCount)
categoryName(questionsObject.questions[currentIndex].category, questionsCount)
addQuestionData(questionsObject.questions[currentIndex], questionsCount)
countdown(600, questionsCount)
submitButton.onclick = () => {
let theRightAnswer = questionsObject.questions[currentIndex].right_answer
currentIndex++
checkAnswer(theRightAnswer, questionsCount)
quizArea.innerHTML = ""
optionsArea.innerHTML = ""
addQuestionData(questionsObject.questions[currentIndex], questionsCount)
handleBullets()
showResults(questionsCount)
}
}
};
myRequest.open("GET", "https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json", true)
myRequest.send()
}
getQuestions(); // To call getQuestions function
// Make circles to know which question you are now in the quiz
function createBullets(num) {
countSpan.innerHTML = num
for (let i = 0; i < num; i++) {
let theBullet = document.createElement("span");
if (i === 0) {
theBullet.className = "on"
}
bulletsSpanContainer.appendChild(theBullet)
}
}
// To add category name from JSON File
function categoryName(category) {
categorySpan.innerHTML = category
}
// Function addQuestionData to add questions and options into the web app
function addQuestionData(obj, count) {
if (currentIndex < count) {
let questionTitle = document.createElement("h2")
let questionText = document.createTextNode(obj.question)
questionTitle.appendChild(questionText)
quizArea.appendChild(questionTitle)
for (let i = 0; i < 4; i++) {
let mainDiv = document.createElement("div")
mainDiv.className = "option"
let radioInput = document.createElement("input")
radioInput.name = "options"
radioInput.type = "radio"
radioInput.id = `option_${i}`
radioInput.dataset.option = obj.options[i]
theLabel = document.createElement("label")
theLabel.htmlFor = `option_${i}`
theLabelText = document.createTextNode(obj.options[i])
theLabel.appendChild(theLabelText)
mainDiv.appendChild(radioInput)
mainDiv.appendChild(theLabel)
optionsArea.appendChild(mainDiv)
}
categoryName(obj.category) // Call categoryName Function
}
}
// To check the answers from the user
function checkAnswer(rAnswer, count) {
let options = document.getElementsByName("options")
let choosenAnswer;
for (let i = 0; i < options.length; i++) {
if (options[i].checked) {
choosenAnswer = options[i].dataset.option
}
}
if (rAnswer === choosenAnswer) {
rigthAnswers++;
}
}
// To color the circle to show you the number of the quiz question
function handleBullets() {
let bulletsSpans = document.querySelectorAll(".bullets .spans span")
let arrayOfSpans = Array.from(bulletsSpans)
arrayOfSpans.forEach((span, index) => {
if (currentIndex === index) {
span.className = "on"
}
})
}
/*
This function used after the quiz is finished
It Delete all quiz content and show the user result
*/
function showResults(count) {
let theResults;
if (currentIndex === count) {
quizArea.remove()
optionsArea.remove()
submitButton.remove()
bullets.remove()
quizInfo.remove()
if (rigthAnswers === count) {
theResults = `<span class="perfect">Perfect</span>, All answers are correct ${rigthAnswers} from ${count}`
}
else if (rigthAnswers < count && rigthAnswers > count / 2) {
theResults = `<span class="good">Good</span>, ${rigthAnswers} from ${count} are correct`
}
else if (rigthAnswers === count / 2) {
theResults = `<span class="fair">Fair</span>, Just half of answers are correct ${rigthAnswers} from ${count} is Right`
}
else {
theResults = `<span class="bad">Bad Result</span>, ${rigthAnswers} from ${count} are correct`
}
resultsDiv.innerHTML = theResults
}
}
function countdown(duration, count) {
if (currentIndex < count) {
let minutes, seconds
countdownInterval = setInterval(() => {
minutes = parseInt(duration / 60)
seconds = parseInt(duration % 60)
minutes = minutes < 10 ? `0${minutes}` : minutes
seconds = seconds < 10 ? `0${seconds}` : seconds
countdownDiv.style.fontWeight = 'bold'
if (duration < 60) {
countdownDiv.style.color = 'red';
}
countdownDiv.innerHTML = `${minutes}:${seconds}`
if (--duration < 0) {
clearInterval(countdownInterval)
// showResults(count)
for (let i = 0; i < count - currentIndex + i; i++) {
console.log(`Count: ${count}`)
console.log(`current Index: ${currentIndex}`)
submitButton.click();
}
}
}, 1000)
}
}
</script>
<style>
* {
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.quiz-app {
background-color: #fff;
border: 10px solid #f6f6f6;
margin: 20px auto;
width: 800px;
padding: 15px;
border-radius: 20px;
}
.quiz-app .quiz-info {
display: flex;
padding: 20px;
background-color: #f6f6f6;
border-radius: 20px;
}
.quiz-app .quiz-info .category {
flex: 1;
}
.quiz-app .quiz-info .count {
flex: 1;
text-align: right;
}
.quiz-app .quiz-area {
background-color: #fff;
padding: 20px;
margin-top: 15px;
margin-bottom: 10px;
border-radius: 20px;
}
.quiz-app .quiz-area h2 {
margin: 0;
}
.quiz-app .options-area {
background-color: #fff;
padding: 0 20px;
/* border-radius: 20px; */
}
.quiz-app .options-area .option {
background-color: #f6f6f6;
padding: 15px;
margin: 10px;
border-radius: 20px;
}
.quiz-app .options-area .option:hover {
background-color: #f0f0f0;
}
/* .quiz-app .options-area .option:not(:last-child) {
border-bottom: 1px solid #dfdfdf;
} */
.quiz-app .options-area .option input[type="Radio"]:checked+label {
color: #0055ff;
}
.quiz-app .options-area .option label {
cursor: pointer;
color: #444;
font-weight: bold;
margin-left: 5px;
position: relative;
top: -2px;
}
.quiz-app .submit-button {
background-color: #0055ff;
display: block;
width: 100%;
cursor: pointer;
padding: 15px;
border: none;
color: #fff;
font-weight: bold;
font-size: 18px;
border-radius: 20px;
margin: 20px auto;
}
.quiz-app .submit-button:hover {
background-color: #003d80;
}
.quiz-app .submit-button:focus {
outline: none;
}
.quiz-app .bullets {
background-color: #f6f6f6;
display: flex;
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
}
.quiz-app .bullets .spans {
flex: 1;
display: flex;
}
.quiz-app .bullets .spans span {
width: 20px;
height: 20px;
background-color: #fff;
margin-right: 10px;
border-radius: 50%;
}
.quiz-app .bullets .spans span.on {
background-color: #0055ff;
}
.quiz-app .results {
text-align: center;
font-size: 24px;
}
.quiz-app .results span {
font-weight: bold;
}
.quiz-app .results span.perfect {
color: #FFD700;
}
.quiz-app .results span.good {
color: #2ecc71;
}
.quiz-app .results span.fair {
color: #b3b0ad;
}
.quiz-app .results span.bad {
color: #c0392b;
}
</style>

217
src/pages/exam2.astro Normal file
View File

@ -0,0 +1,217 @@
<main>
<div>
<section class="container mx-auto px-4 max-w-4xl mt-16">
<h1 class="text-4xl font-bold text-center oy-2.5">Mock Test</h1>
<div class="border-4 border-blue-700 rounded-xl">
<div class="flex flex-col">
<div class="flex flex-row place-content-between">
<div class="category">Category: <span></span></div>
<div class="count">Questions Count: <span></span></div>
</div>
<div class="">
<div class="quiz-area"></div>
<div class="options-area"></div>
<button class="submit-button">Save</button>
</div>
</div>
</div>
</section>
</div>
</main>
<script is:inline>
let quizInfo = document.querySelector(".quiz-info")
let countSpan = document.querySelector(".count span")
let bullets = document.querySelector(".bullets")
let categorySpan = document.querySelector(".category span")
let bulletsSpanContainer = document.querySelector(".bullets .spans")
let quizArea = document.querySelector(".quiz-area")
let optionsArea = document.querySelector(".options-area")
let submitButton = document.querySelector(".submit-button")
let countdownDiv = document.querySelector(".countdown")
let resultsDiv = document.querySelector(".results")
// Variables
let currentIndex = 0
let rigthAnswers = 0
let countdownInterval = 0
//Functions to get the questions from JSON File
function getQuestions() {
let myRequest = new XMLHttpRequest()
myRequest.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let questionsObject = JSON.parse(this.responseText)
let questionsCount = questionsObject.questions.length
createBullets(questionsCount)
categoryName(questionsObject.questions[currentIndex].category, questionsCount)
addQuestionData(questionsObject.questions[currentIndex], questionsCount)
countdown(600, questionsCount)
submitButton.onclick = () => {
let theRightAnswer = questionsObject.questions[currentIndex].right_answer
currentIndex++
checkAnswer(theRightAnswer, questionsCount)
quizArea.innerHTML = ""
optionsArea.innerHTML = ""
addQuestionData(questionsObject.questions[currentIndex], questionsCount)
handleBullets()
showResults(questionsCount)
}
}
};
myRequest.open("GET", "https://mohamedkhalifa11.github.io/Qweb/webDevlopement_questions.json", true)
myRequest.send()
}
getQuestions(); // To call getQuestions function
// Make circles to know which question you are now in the quiz
function createBullets(num) {
countSpan.innerHTML = num
for (let i = 0; i < num; i++) {
let theBullet = document.createElement("span");
if (i === 0) {
theBullet.className = "on"
}
bulletsSpanContainer.appendChild(theBullet)
}
}
// To add category name from JSON File
function categoryName(category) {
categorySpan.innerHTML = category
}
// Function addQuestionData to add questions and options into the web app
function addQuestionData(obj, count) {
if (currentIndex < count) {
let questionTitle = document.createElement("h2")
let questionText = document.createTextNode(obj.question)
questionTitle.appendChild(questionText)
quizArea.appendChild(questionTitle)
for (let i = 0; i < 4; i++) {
let mainDiv = document.createElement("div")
mainDiv.className = "option"
let radioInput = document.createElement("input")
radioInput.name = "options"
radioInput.type = "radio"
radioInput.id = `option_${i}`
radioInput.dataset.option = obj.options[i]
theLabel = document.createElement("label")
theLabel.htmlFor = `option_${i}`
theLabelText = document.createTextNode(obj.options[i])
theLabel.appendChild(theLabelText)
mainDiv.appendChild(radioInput)
mainDiv.appendChild(theLabel)
optionsArea.appendChild(mainDiv)
}
categoryName(obj.category) // Call categoryName Function
}
}
// To check the answers from the user
function checkAnswer(rAnswer, count) {
let options = document.getElementsByName("options")
let choosenAnswer;
for (let i = 0; i < options.length; i++) {
if (options[i].checked) {
choosenAnswer = options[i].dataset.option
}
}
if (rAnswer === choosenAnswer) {
rigthAnswers++;
}
}
// To color the circle to show you the number of the quiz question
function handleBullets() {
let bulletsSpans = document.querySelectorAll(".bullets .spans span")
let arrayOfSpans = Array.from(bulletsSpans)
arrayOfSpans.forEach((span, index) => {
if (currentIndex === index) {
span.className = "on"
}
})
}
/*
This function used after the quiz is finished
It Delete all quiz content and show the user result
*/
function showResults(count) {
let theResults;
if (currentIndex === count) {
quizArea.remove()
optionsArea.remove()
submitButton.remove()
bullets.remove()
quizInfo.remove()
if (rigthAnswers === count) {
theResults = `<span class="perfect">Perfect</span>, All answers are correct ${rigthAnswers} from ${count}`
}
else if (rigthAnswers < count && rigthAnswers > count / 2) {
theResults = `<span class="good">Good</span>, ${rigthAnswers} from ${count} are correct`
}
else if (rigthAnswers === count / 2) {
theResults = `<span class="fair">Fair</span>, Just half of answers are correct ${rigthAnswers} from ${count} is Right`
}
else {
theResults = `<span class="bad">Bad Result</span>, ${rigthAnswers} from ${count} are correct`
}
resultsDiv.innerHTML = theResults
}
}
function countdown(duration, count) {
if (currentIndex < count) {
let minutes, seconds
countdownInterval = setInterval(() => {
minutes = parseInt(duration / 60)
seconds = parseInt(duration % 60)
minutes = minutes < 10 ? `0${minutes}` : minutes
seconds = seconds < 10 ? `0${seconds}` : seconds
countdownDiv.style.fontWeight = 'bold'
if (duration < 60) {
countdownDiv.style.color = 'red';
}
countdownDiv.innerHTML = `${minutes}:${seconds}`
if (--duration < 0) {
clearInterval(countdownInterval)
// showResults(count)
for (let i = 0; i < count - currentIndex + i; i++) {
console.log(`Count: ${count}`)
console.log(`current Index: ${currentIndex}`)
submitButton.click();
}
}
}, 1000)
}
}
</script>

487
src/pages/exam3.astro Normal file
View File

@ -0,0 +1,487 @@
<main>
<div class="container mx-auto px-4 max-w-xl">
<div class="flex flex-row place-content-between bg-blue-400">
<div class="">JS Quiz</div>
<div class="">Total Questions: <span id="tque"></span></div>
<div class="clearfix"></div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result" class="quiz-body">
<form name="quizForm" >
<fieldset class="form-group">
<h4 class="text-2xl font-bold"><span id="qid" class="">1.</span> <span id="question"></span></h4>
<div class="" id="question-options"></div>
</fieldset>
<div class="flex flex-row place-content-between">
<button name="previous" id="previous" class="bg-green-600 text-white font-bold p-3 rounded-lg">Previous</button>
<button name="next" id="next" class="bg-green-600 text-white font-bold p-3 rounded-lg">Save & Next</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script is:inline>
var quiz = {
"qs":
[
{
"id" : 1,
"question" : "Inside which HTML element do we put the JavaScript?",
"options" : [
{"a": "&lt;script&gt;",
"b":"&lt;javascript&gt;",
"c":"&lt;scripting&gt;",
"d":"&lt;js&gt;"}
],
"answer":"&lt;script&gt;",
"score":0,
"status": ""
},
{
"id" : 2,
"question" : "Where is the correct place to insert a JavaScript?",
"options" : [
{"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"}
],
"answer":"Both the &lt;head&gt; section and the &lt;body&gt; section are correct",
"score":0,
"status": ""
},
{
"id" : 3,
"question" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options" : [
{"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;"}
],
"answer":"&lt;script src=&quot;xxx.js&quot;&gt;",
"score":0,
"status": ""
},
{
"id" : 4,
"question" : "The external JavaScript file must contain the &lt;script&gt; tag.",
"options" : [
{"a": "True",
"b":"False"
}
],
"answer":"False",
"score":0,
"status": ""
},
{
"id" : 5,
"question" : "How do you write &quot;Hello World&quot; in an alert box?",
"options" : [
{"a": "alertBox(&quot;Hello World&quot;);",
"b":"msg(&quot;Hello World&quot;);",
"c":"alert(&quot;Hello World&quot;);",
"d":"msgBox(&quot;Hello World&quot;);",
}
],
"answer":"alert(&quot;Hello World&quot;);",
"score":0,
"status": ""
},
{
"id" : 6,
"question" : "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,
"question" : "How do you call a function named &quot;myFunction&quot;?",
"options" : [
{"a": "call function myFunction()",
"b":"call myFunction()",
"c":"myFunction()",
}
],
"answer":"myFunction()",
"score":0,
"status": ""
},
{
"id" : 8,
"question" : "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,
"question" : "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,
"question" : "How to write an IF statement for executing some code if &quot;i&quot; 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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "JavaScript is the same as Java.",
"options" : [
{"a": "true",
"b":"false"
}
],
"answer":"false",
"score":0,
"status": ""
},
{
"id" : 20,
"question" : "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,
"question" : "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,
"question" : "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,
"question" : "Which operator is used to assign a value to a variable?",
"options" : [
{"a": "*",
"b":"-",
"c":"=",
"d":"x"
}
],
"answer":"=",
"score":0,
"status": ""
},
{
"id" : 24,
"question" : "What will the following code return: Boolean(10 &gt; 9)",
"options" : [
{"a": "NaN",
"b":"false",
"c":"true"
}
],
"answer":"true",
"score":0,
"status": ""
},
{
"id" : 25,
"question" : "Is JavaScript case-sensitive?",
"options" : [
{"a": "No",
"b":"Yes"
}
],
"answer":"Yes",
"score":0,
"status": ""
}
]
};
function QuizApp() {
this.score = 0;
this.currentque = 0;
var totalque = quiz.JS.length;
this.displayQuiz = function (cque) {
this.currentque = cque;
if (this.currentque < totalque) {
document.getElementById("tque").innerHTML = totalque;
document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false;
document.getElementById("qid").innerHTML = quiz.JS[this.currentque].id + '.';
document.getElementById("question").innerHTML = quiz.JS[this.currentque].question;
document.getElementById("question-options").innerHTML = "";
for (var key in quiz.JS[this.currentque].options[0]) {
if (quiz.JS[this.currentque].options[0].hasOwnProperty(key)) {
document.getElementById("question-options").innerHTML +=
"<div class='form-check option-block border-2 bg-[#f0f8ff] border-[#84c5fe] flex flex-col mb-2 p-2.5 rounded-lg cursor-pointer'>" +
"<label class='form-check-label cursor-pointer'>" +
"<input type='radio' class='form-check-input' name='option' id='q" + key + "' value='" + quiz.JS[this.currentque].options[0][key] + "'>&nbsp;<span id='optionval'>" +
quiz.JS[this.currentque].options[0][key] +
"</span></label>";
}
// .option-block { padding:10px; background:aliceblue; border:1px solid #84c5fe; margin-bottom:10px; cursor:pointer; }
}
}
if (this.currentque <= 0) {
document.getElementById("previous").disabled = true;
}
if (this.currentque >= totalque) {
document.getElementById('next').disabled = true;
for (var i = 0; i < totalque; i++) {
this.score += quiz.JS[i].score;
}
return this.showResult(this.score);
}
};
this.showResult = function (scr) {
var resultDiv = document.getElementById("result");
resultDiv.classList.add('result');
resultDiv.innerHTML = "<h1 class='res-header'>Total Score: &nbsp;" + scr + '/' + totalque + "</h1>";
for (var j = 0; j < totalque; j++) {
var res;
if (quiz.JS[j].score == 0) {
res = '<span class="wrong">' + quiz.JS[j].score + '</span><i class="fa fa-remove c-wrong text-[#FF0000]"></i>';
} else {
res = '<span class="correct">' + quiz.JS[j].score + '</span><i class="fa fa-check c-correct text-[#008000]"></i>';
}
resultDiv.innerHTML +=
'<div class="result-question"><span>Q ' + quiz.JS[j].id + '</span> &nbsp;' + quiz.JS[j].question + '</div>' +
'<div><b>Correct answer:</b> &nbsp;' + quiz.JS[j].answer + '</div>' +
'<div class="last-row"><b>Score:</b> &nbsp;' + res + '</div>';
}
};
this.checkAnswer = function (option) {
var answer = quiz.JS[this.currentque].answer;
option = option.replace(/\</g, "&lt;").replace(/\>/g, "&gt;").replace(/"/g, "&quot;");
if (option == quiz.JS[this.currentque].answer) {
if (quiz.JS[this.currentque].score == "") {
quiz.JS[this.currentque].score = 1;
quiz.JS[this.currentque].status = "correct";
}
} else {
quiz.JS[this.currentque].status = "wrong";
}
};
this.changeQuestion = function (cque) {
this.currentque = this.currentque + cque;
this.displayQuiz(this.currentque);
};
}
var jsq = new QuizApp();
var selectedopt;
document.addEventListener('DOMContentLoaded', function () {
jsq.displayQuiz(0);
document.getElementById('question-options').addEventListener('change', function (e) {
var selectedRadio = document.querySelector('input[type=radio][name=option]:checked');
if (selectedRadio) {
selectedopt = selectedRadio.value;
}
});
document.getElementById('next').addEventListener('click', function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(1);
});
document.getElementById('previous').addEventListener('click', function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(-1);
});
});
</script>
<style>
.content { margin-top:54px; }
/* .header {padding: 15px 0px; position:fixed; top:0; z-index:9999;} */
.left-title { width:80px; color:#FFF; font-size:18px; float:left; }
.right-title { text-align:right; color:#000000; }
/* .quiz-body { margin-top:15px; padding-bottom:50px; } */
/* .option-block-container { margin-top:20px; max-width:420px; } */
/* .option-block { padding:10px; background:#f0f8ff; border:1px solid #84c5fe; margin-bottom:10px; cursor:pointer; } */
.result-question { font-weight:bold; }
.last-row { border-bottom:1px solid #ccc; padding-bottom:25px; margin-bottom:25px; }
.res-header { border-bottom:1px solid #ccc; margin-bottom:15px; padding-bottom:15px; }
</style>

153
src/pages/exam4.astro Normal file
View File

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

110
src/pages/exam5.astro Normal file
View File

@ -0,0 +1,110 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="">
<main>
<div>
<div id="quiz-container">
<div id="question-container" class="question"></div>
<div id="options-container" class="options"></div>
<button id="next-button">Next</button>
<div id="result"></div>
</div>
</div>
</main>
</Layout>
<script is:inline>
const quizData = [
{
question: "What is the capital of France?",
options: ["Berlin", "Paris", "Madrid", "Rome"],
correctAnswer: "Paris"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Mars", "Venus", "Jupiter"],
correctAnswer: "Mars"
},
// Add more questions as needed
];
let currentQuestionIndex = 0;
let score = 0;
const questionContainer = document.getElementById('question-container');
const optionsContainer = document.getElementById('options-container');
const nextButton = document.getElementById('next-button');
const resultContainer = document.getElementById('result');
function loadQuestion() {
const currentQuestion = quizData[currentQuestionIndex];
questionContainer.textContent = currentQuestion.question;
optionsContainer.innerHTML = '';
currentQuestion.options.forEach((option, index) => {
const button = document.createElement('button');
button.textContent = option;
button.classList.add('option');
button.addEventListener('click', () => checkAnswer(index));
optionsContainer.appendChild(button);
});
nextButton.disabled = true;
}
function checkAnswer(optionIndex) {
const currentQuestion = quizData[currentQuestionIndex];
if (currentQuestion.options[optionIndex] === currentQuestion.correctAnswer) {
score++;
}
nextButton.disabled = false;
}
function showResult() {
resultContainer.textContent = `Your score: ${score} out of ${quizData.length}`;
nextButton.disabled = true;
}
function nextQuestion() {
if (currentQuestionIndex < quizData.length - 1) {
currentQuestionIndex++;
loadQuestion();
} else {
showResult();
}
}
nextButton.addEventListener('click', nextQuestion);
// Initial load
loadQuestion();
</script>
<style>
body {
font-family: Arial, sans-serif;
}
#quiz-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.question {
font-size: 18px;
margin-bottom: 10px;
}
.options {
margin-top: 10px;
}
.option {
margin-bottom: 8px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>

210
src/pages/index.astro Normal file
View File

@ -0,0 +1,210 @@
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import MainHeader from '../components/MainHeader.vue';
import Footer from '../components/Footer.astro';
---
<Layout title="Welcome to Astro.">
<MainHeader />
<main>
<div>
<!-- <section class="container mx-auto px-4 mt-16 ">
<div class="flex flex-col border-2 rounded-xl">
<div class="p-4">
<div class="flex flex-col p-4 gap-y-4">
<p class="p-4"><span class="bg-green-700 text-white font-bold p-2 rounded-md">Question: 1.</span></p>
<p class="px-4 font-bold">Which is correct answer?</p>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option1" type="radio">
<label for="option1">Option: A</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option2" type="radio">
<label for="option2">Option: B</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: C</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: D</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row place-content-between my-4">
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Previous Question</button>
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Next Question</button>
</div>
</section> -->
<section class="container mx-auto px-4">
<div class="tab grid grid-cols-3 gap-2 h-full">
<button class="tablinks rounded-full border-2 py-3 px-4" onclick="questionSet(event, 'question1');" id="defaultOpen">1</button>
<button class="tablinks rounded-full border-2 py-3 px-4" onclick="questionSet(event, 'question2');">2</button>
<button class="tablinks rounded-full border-2 py-3 px-4" onclick="questionSet(event, 'question3');">3</button>
</div>
<div id="question1" class="tabcontent">
<div class="flex flex-col border-2 rounded-xl">
<div class="p-4">
<div class="flex flex-col p-4 gap-y-4">
<p class="p-4"><span class="bg-green-700 text-white font-bold p-2 rounded-md">Question: 1.</span></p>
<p class="px-4 font-bold">Which is correct answer?</p>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option1" type="radio">
<label for="option1">Option: A</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option2" type="radio">
<label for="option2">Option: B</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: C</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: D</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row place-content-between my-4">
<button onclick="questionSet(event, 'question1');" class="bg-green-700 p-3 text-white font-bold rounded-lg">Previous Question</button>
<button onclick="questionSet(event, 'question2');" class="bg-green-700 p-3 text-white font-bold rounded-lg">Next Question</button>
</div>
</div>
<div id="question2" class="tabcontent">
<div class="flex flex-col border-2 rounded-xl">
<div class="p-4">
<div class="flex flex-col p-4 gap-y-4">
<p class="p-4"><span class="bg-green-700 text-white font-bold p-2 rounded-md">Question: 2.</span></p>
<p class="px-4 font-bold">Which is correct answer?</p>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option1" type="radio">
<label for="option1">Option: A</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option2" type="radio">
<label for="option2">Option: B</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: C</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: D</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row place-content-between my-4">
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Previous Question</button>
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Next Question</button>
</div>
</div>
<div id="question3" class="tabcontent">
<div class="flex flex-col border-2 rounded-xl">
<div class="p-4">
<div class="flex flex-col p-4 gap-y-4">
<p class="p-4"><span class="bg-green-700 text-white font-bold p-2 rounded-md">Question: 3.</span></p>
<p class="px-4 font-bold">Which is correct answer?</p>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option1" type="radio">
<label for="option1">Option: A</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option2" type="radio">
<label for="option2">Option: B</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: C</label>
</div>
<div class="border-2 rounded-xl shadow-lg p-4">
<input name="option" id="option3" type="radio">
<label for="option3">Option: D</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row place-content-between my-4">
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Previous Question</button>
<button class="bg-green-700 p-3 text-white font-bold rounded-lg">Next Question</button>
</div>
</div>
</div>
</section>
</main>
<Footer />
</Layout>
<script is:inline>
function questionSet(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
/* background-color: #f1f1f1; */
width: 10%;
}
/* Style the buttons inside the tab */
/* .tab button {
display: flex;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
} */
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
/* padding: 0px 12px; */
/* border: 1px solid #ccc; */
width: 70%;
border-left: none;
/* height: 300px; */
}
</style>

8
tailwind.config.cjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}

6
tsconfig.json Normal file
View File

@ -0,0 +1,6 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"jsx": "preserve"
}
}

6302
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff