Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AQEEL KHOSO SERVICES - Grand Mock Test</title>
<style>
:root {
--primary-color: #1e3a8a;
--secondary-color: #3b82f6;
--bg-color: #f3f4f6;
--text-color: #1f2937;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--white: #ffffff;
--border-color: #e5e7eb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none; /* Disable text selection to prevent copying */
}
body {
background-color: var(--bg-color);
color: var(--text-color);
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header */
header {
background-color: var(--primary-color);
color: var(--white);
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.brand {
display: flex;
align-items: center;
gap: 15px;
}
.brand img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--white);
}
.brand h1 {
font-size: 1.2rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.timer {
font-size: 1.5rem;
font-weight: bold;
background: rgba(255, 255, 255, 0.2);
padding: 5px 15px;
border-radius: 5px;
}
/* Main Container */
.container {
display: flex;
flex: 1;
overflow: hidden;
}
/* Screens */
.screen {
display: none;
width: 100%;
height: 100%;
overflow-y: auto;
}
.screen.active {
display: flex;
}
/* Registration Screen */
#reg-screen {
justify-content: center;
align-items: center;
background: linear-gradient(135deg, var(--bg-color) 0%, #d1d5db 100%);
}
.reg-box {
background: var(--white);
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 100%;
max-width: 450px;
text-align: center;
}
.reg-box h2 {
color: var(--primary-color);
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 1rem;
user-select: auto;
}
button.btn-primary {
background-color: var(--secondary-color);
color: var(--white);
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s;
width: 100%;
font-weight: bold;
}
button.btn-primary:hover {
background-color: var(--primary-color);
}
/* Test Screen Layout */
#test-screen {
flex-direction: row;
}
.sidebar {
width: 300px;
background: var(--white);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.sidebar-header {
padding: 15px;
background: var(--bg-color);
border-bottom: 1px solid var(--border-color);
font-weight: bold;
text-align: center;
}
.palette {
padding: 15px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
overflow-y: auto;
flex: 1;
}
.palette-btn {
padding: 8px 0;
text-align: center;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--white);
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.palette-btn.answered {
background: var(--success-color);
color: var(--white);
border-color: var(--success-color);
}
.palette-btn.current {
border: 2px solid var(--primary-color);
transform: scale(1.1);
font-weight: bold;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
background: var(--white);
position: relative;
}
.progress-bar-container {
height: 5px;
background: var(--border-color);
width: 100%;
}
.progress-bar {
height: 100%;
background: var(--success-color);
width: 0%;
transition: width 0.3s ease;
}
.question-area {
padding: 40px;
flex: 1;
overflow-y: auto;
}
.question-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
border-bottom: 2px solid var(--bg-color);
padding-bottom: 10px;
}
.question-header h3 {
color: var(--primary-color);
}
.question-text {
font-size: 1.3rem;
margin-bottom: 30px;
line-height: 1.5;
}
.options {
display: flex;
flex-direction: column;
gap: 15px;
}
.option {
display: flex;
align-items: center;
padding: 15px 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
font-size: 1.1rem;
}
.option:hover {
background: var(--bg-color);
}
.option.selected {
background: #eff6ff;
border-color: var(--secondary-color);
}
.option input {
margin-right: 15px;
transform: scale(1.2);
pointer-events: none;
}
.controls {
padding: 20px 40px;
background: var(--bg-color);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
}
.controls button {
padding: 10px 25px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: opacity 0.2s;
}
.controls button:hover {
opacity: 0.8;
}
.btn-nav {
background: var(--primary-color);
color: var(--white);
}
.btn-submit {
background: var(--danger-color);
color: var(--white);
}
.btn-nav:disabled {
background: #9ca3af;
cursor: not-allowed;
}
/* Result Screen */
#result-screen {
justify-content: center;
align-items: center;
background: var(--bg-color);
flex-direction: column;
}
.result-card {
background: var(--white);
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
text-align: center;
width: 100%;
max-width: 600px;
margin-bottom: 20px;
}
.result-card h2 {
color: var(--primary-color);
margin-bottom: 10px;
font-size: 2rem;
}
.score-circle {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
font-weight: bold;
color: var(--white);
}
.score-pass { background: var(--success-color); }
.score-fail { background: var(--danger-color); }
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
text-align: left;
}
.stat-item {
background: var(--bg-color);
padding: 15px;
border-radius: 5px;
font-size: 1.1rem;
}
.message {
margin-top: 20px;
font-size: 1.2rem;
font-weight: bold;
}
.msg-pass { color: var(--success-color); }
.msg-fail { color: var(--danger-color); }
/* Review Screen */
#review-screen {
flex-direction: column;
background: var(--bg-color);
}
.review-header {
padding: 20px;
background: var(--white);
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
z-index: 5;
}
.review-list {
padding: 30px;
overflow-y: auto;
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.review-item {
background: var(--white);
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.review-q-text {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 15px;
}
.review-option {
padding: 10px 15px;
margin-bottom: 5px;
border-radius: 5px;
border: 1px solid var(--border-color);
}
.review-option.correct {
background: #d1fae5;
border-color: var(--success-color);
color: #065f46;
font-weight: bold;
}
.review-option.wrong {
background: #fee2e2;
border-color: var(--danger-color);
color: #991b1b;
}
/* Overlay */
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background: var(--white);
padding: 30px;
border-radius: 8px;
text-align: center;
max-width: 400px;
}
.modal h3 { margin-bottom: 15px; }
.modal-btns { display: flex; justify-content: space-around; margin-top: 20px; }
.modal-btns button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-cancel { background: var(--bg-color); color: var(--text-color); }
.btn-confirm { background: var(--primary-color); color: var(--white); }
@media (max-width: 768px) {
#test-screen { flex-direction: column; }
.sidebar { width: 100%; height: 200px; flex-direction: row; }
.sidebar-header { display: none; }
.palette { grid-template-columns: repeat(10, 1fr); }
}
</style>
</head>
<body>
<header>
<div class="brand">
<img src="1000646103.png" alt="Aqeel Khoso Services Logo" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NjYyIvPjwvc3ZnPg=='">
<h1>AQEEL KHOSO SERVICES</h1>
</div>
<div class="timer" id="top-timer" style="display: none;">90:00</div>
</header>
<div class="container">
<div id="reg-screen" class="screen active">
<div class="reg-box">
<h2>Candidate Registration</h2>
<div class="input-group">
<label>Full Name</label>
<input type="text" id="cand-name" placeholder="Enter your full name" required autocomplete="off">
</div>
<div class="input-group">
<label>City</label>
<input type="text" id="cand-city" placeholder="Enter your city" required autocomplete="off">
</div>
<button class="btn-primary" onclick="startTest()">Start Test</button>
</div>
</div>
<div id="test-screen" class="screen">
<div class="sidebar">
<div class="sidebar-header">Question Navigation</div>
<div class="palette" id="question-palette">
</div>
</div>
<div class="main-content">
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="question-area">
<div class="question-header">
<h3 id="q-number">Question 1 of 100</h3>
<span style="color: var(--primary-color); font-weight: bold;" id="q-category">Category</span>
</div>
<div class="question-text" id="q-text">Loading question...</div>
<div class="options" id="q-options">
</div>
</div>
<div class="controls">
<button class="btn-nav" id="btn-prev" onclick="prevQuestion()">← Previous</button>
<button class="btn-submit" onclick="showSubmitModal()">Submit Test</button>
<button class="btn-nav" id="btn-next" onclick="nextQuestion()">Next →</button>
</div>
</div>
</div>
<div id="result-screen" class="screen">
<div class="result-card">
<h2>Performance Dashboard</h2>
<h3 id="res-name" style="color: #6b7280; margin-bottom: 20px;">Name - City</h3>
<div class="score-circle" id="res-circle">
0/100
</div>
<div class="message" id="res-message"></div>
<div class="stats-grid">
<div class="stat-item">Total Questions: <strong>100</strong></div>
<div class="stat-item">Attempted: <strong id="res-attempted">0</strong></div>
<div class="stat-item" style="color: var(--success-color);">Correct Answers: <strong id="res-correct">0</strong></div>
<div class="stat-item" style="color: var(--danger-color);">Incorrect Answers: <strong id="res-incorrect">0</strong></div>
</div>
<br>
<button class="btn-primary" onclick="showReview()">Review Answers</button>
</div>
</div>
<div id="review-screen" class="screen">
<div class="review-header">
<h2>Detailed Answer Review</h2>
<p>Correct answers are highlighted in green, your incorrect selections in red.</p>
<br>
<button class="btn-primary" style="max-width: 200px;" onclick="location.reload()">Back to Home</button>
</div>
<div class="review-list" id="review-list">
</div>
</div>
</div>
<div class="overlay" id="submit-modal">
<div class="modal">
<h3>Submit Assessment?</h3>
<p>Are you sure you want to submit your test? You cannot change your answers after submission.</p>
<div class="modal-btns">
<button class="btn-cancel" onclick="closeSubmitModal()">Cancel</button>
<button class="btn-confirm" onclick="forceSubmit()">Yes, Submit</button>
</div>
</div>
</div>
<script>
// Security Settings
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('copy', event => event.preventDefault());
// Test Data (100 Questions strict to syllabus proportions)
const questions = [
// English (1-10)
{ c: "English", q: "Choose the correct synonym for 'Diligent':", o: ["Lazy", "Hardworking", "Careless", "Slow"], a: 1 },
{ c: "English", q: "Identify the part of speech for the word 'beautifully' in the sentence: 'She sang beautifully.'", o: ["Noun", "Adjective", "Adverb", "Verb"], a: 2 },
{ c: "English", q: "Which of the following sentences is correctly punctuated?", o: ["Its a beautiful day.", "It's a beautiful day.", "Its' a beautiful day.", "It is a beautiful, day."], a: 1 },
{ c: "English", q: "Read the sentence and find the implicit meaning: 'The sun dipped below the horizon, painting the sky in hues of orange.' What time of day is it?", o: ["Morning", "Noon", "Evening", "Midnight"], a: 2 },
{ c: "English", q: "Choose the correct tense: 'By next year, I ___ my graduation.'", o: ["will have completed", "will complete", "completed", "have completed"], a: 0 },
{ c: "English", q: "Change into Passive Voice: 'The teacher praised the student.'", o: ["The student was praised by the teacher.", "The student is praised by the teacher.", "The teacher was praising the student.", "The student has been praised."], a: 0 },
{ c: "English", q: "Change into Indirect Speech: He said, 'I am going to the market.'", o: ["He said that I am going to the market.", "He said that he was going to the market.", "He said he is going to the market.", "He told he was going to market."], a: 1 },
{ c: "English", q: "Choose the correct preposition: 'He is good ___ Mathematics.'", o: ["in", "at", "with", "on"], a: 1 },
{ c: "English", q: "What is the antonym of 'Abundant'?", o: ["Plentiful", "Scarce", "Heavy", "Rich"], a: 1 },
{ c: "English", q: "Identify the tense: 'They have been playing for two hours.'", o: ["Present Perfect", "Present Continuous", "Present Perfect Continuous", "Past Continuous"], a: 2 },
// General Knowledge (11-20)
{ c: "General Knowledge", q: "Which is the highest peak of the Karakoram range in Pakistan?", o: ["Nanga Parbat", "K2", "Broad Peak", "Tirich Mir"], a: 1 },
{ c: "General Knowledge", q: "The objective resolution was passed in which year?", o: ["1947", "1948", "1949", "1956"], a: 2 },
{ c: "General Knowledge", q: "What is the capital of Sindh province?", o: ["Hyderabad", "Sukkur", "Larkana", "Karachi"], a: 3 },
{ c: "General Knowledge", q: "Mohenjo-Daro is an archaeological site located in:", o: ["Punjab", "Balochistan", "Sindh", "KPK"], a: 2 },
{ c: "General Knowledge", q: "Who was the first GovLanding Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
1
Domains
20KB
Transfer Size
21KB
Content Size
57.0ms
Dom Content Loaded
216.0ms
First Paint
120.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...