b1
commit
0f771c2155
|
|
@ -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
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
# Welcome to [Astro](https://astro.build)
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
[](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 🚀 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).
|
||||||
|
|
@ -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()]
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 873 B |
|
|
@ -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>→</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>
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<main>
|
||||||
|
<!-- <div class="text-4xl font-bold">Footer Content</div> -->
|
||||||
|
</main>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="astro/client" />
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
import DescriptiveQuestion from "../components/DescriptiveQuestion.vue";
|
||||||
|
---
|
||||||
|
<Layout title="">
|
||||||
|
<DescriptiveQuestion client:visible />
|
||||||
|
</Layout>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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": "<script>",
|
||||||
|
"b":"<javascript>",
|
||||||
|
"c":"<scripting>",
|
||||||
|
"d":"<js>"}
|
||||||
|
],
|
||||||
|
"answer":"<script>",
|
||||||
|
"score":0,
|
||||||
|
"status": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id" : 2,
|
||||||
|
"question" : "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,
|
||||||
|
"question" : "What is the correct syntax for referring to an external script called 'xxx.js'?",
|
||||||
|
"options" : [
|
||||||
|
{"a": "<script href="xxx.js">",
|
||||||
|
"b":"<script name="xxx.js">",
|
||||||
|
"c":"<script src="xxx.js">"}
|
||||||
|
],
|
||||||
|
"answer":"<script src="xxx.js">",
|
||||||
|
"score":0,
|
||||||
|
"status": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id" : 4,
|
||||||
|
"question" : "The external JavaScript file must contain the <script> tag.",
|
||||||
|
"options" : [
|
||||||
|
{"a": "True",
|
||||||
|
"b":"False"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"answer":"False",
|
||||||
|
"score":0,
|
||||||
|
"status": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id" : 5,
|
||||||
|
"question" : "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,
|
||||||
|
"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 "myFunction"?",
|
||||||
|
"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 "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,
|
||||||
|
"question" : "How does a WHILE loop start?",
|
||||||
|
"options" : [
|
||||||
|
{"a": "while i = 1 to 10",
|
||||||
|
"b":"while (i <= 10; i++)",
|
||||||
|
"c":"while (i <= 10)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"answer":"while (i <= 10)",
|
||||||
|
"score":0,
|
||||||
|
"status": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id" : 12,
|
||||||
|
"question" : "How does a FOR loop start?",
|
||||||
|
"options" : [
|
||||||
|
{"a": "for (i = 0; i <= 5)",
|
||||||
|
"b":"for (i = 0; i <= 5; i++)",
|
||||||
|
"c":"for i = 1 to 5",
|
||||||
|
"d":"for (i <= 5; i++)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"answer":"for (i = 0; i <= 5; i++)",
|
||||||
|
"score":0,
|
||||||
|
"status": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id" : 13,
|
||||||
|
"question" : "How can you add a comment in a JavaScript?",
|
||||||
|
"options" : [
|
||||||
|
{"a": "//This is a comment",
|
||||||
|
"b":"‚This is a comment",
|
||||||
|
"c":"<!--This is a comment-->"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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":"<!--This comment has more than one line-->"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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:"red", 2:"green", 3:"blue")",
|
||||||
|
"b":"var colors = ["red", "green", "blue"]",
|
||||||
|
"c":"var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
|
||||||
|
"d":"var colors = "red", "green", "blue""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"answer":"var colors = ["red", "green", "blue"]",
|
||||||
|
"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 "w2"?",
|
||||||
|
"options" : [
|
||||||
|
{"a": "w2 = window.new("http://www.w3schools.com");",
|
||||||
|
"b":"w2 = window.open("http://www.w3schools.com");"
|
||||||
|
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"answer":"w2 = window.open("http://www.w3schools.com");",
|
||||||
|
"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’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 > 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] + "'> <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: " + 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> ' + quiz.JS[j].question + '</div>' +
|
||||||
|
'<div><b>Correct answer:</b> ' + quiz.JS[j].answer + '</div>' +
|
||||||
|
'<div class="last-row"><b>Score:</b> ' + res + '</div>';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.checkAnswer = function (option) {
|
||||||
|
var answer = quiz.JS[this.currentque].answer;
|
||||||
|
option = option.replace(/\</g, "<").replace(/\>/g, ">").replace(/"/g, """);
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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: [],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "preserve"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue