#ppsc-test-container {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}

#ppsc-test-container h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}

.category-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}

.tab {
padding: 10px 20px;
cursor: pointer;
background-color: #eee;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 5px;
border-radius: 5px 5px 0 0;
transition: all 0.3s;
}

.tab.active {
background-color: #3498db;
color: white;
font-weight: bold;
}

.category {
display: none;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.category.active {
display: block;
}

.question {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}

.question-text {
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}

.options {
margin-left: 15px;
}

.option {
margin-bottom: 8px;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}

.option:hover {
background-color: #f0f8ff;
}

.option.selected {
font-weight: bold;
}

.correct {
background-color: #d4edda;
color: #155724;
}

.incorrect {
background-color: #f8d7da;
color: #721c24;
}

.correct-answer {
background-color: #d4edda;
color: #155724;
padding: 5px 10px;
border-radius: 4px;
margin-top: 5px;
display: none;
}

.score-display {
text-align: center;
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border-radius: 5px;
font-weight: bold;
}

.controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #2980b9;
}

button:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}

.progress-bar {
width: 100%;
background-color: #e9ecef;
border-radius: 5px;
margin-bottom: 20px;
}

.progress {
height: 10px;
background-color: #3498db;
border-radius: 5px;
width: 0%;
transition: width 0.3s;
}

// Questions data
const questions = {
islamic: [
{
question: “What is the first month of the Islamic calendar?”,
options: [“Muharram”, “Ramadan”, “Shawwal”],
answer: 0
},
{
question: “How many times is the word ‘Muhammad’ mentioned in the Quran?”,
options: [“2 times”, “4 times”, “6 times”],
answer: 1
},
{
question: “Which Surah is called the ‘Heart of the Quran’?”,
options: [“Surah Al-Fatiha”, “Surah Yaseen”, “Surah Al-Baqarah”],
answer: 1
},
{
question: “How many pillars of Islam are there?”,
options: [“4”, “5”, “6”],
answer: 1
},
{
question: “Which Prophet is mentioned the most in the Quran?”,
options: [“Prophet Musa (AS)”, “Prophet Ibrahim (AS)”, “Prophet Muhammad (PBUH)”],
answer: 0
},
{
question: “What is the meaning of ‘Salah’?”,
options: [“Fasting”, “Prayer”, “Charity”],
answer: 1
},
{
question: “Which angel is responsible for delivering revelations to the Prophets?”,
options: [“Angel Jibreel (AS)”, “Angel Mikael (AS)”, “Angel Israfeel (AS)”],
answer: 0
},
{
question: “How many Surahs are there in the Quran?”,
options: [“114”, “124”, “104”],
answer: 0
},
{
question: “Which Surah is known as the ‘Mother of the Quran’?”,
options: [“Surah Al-Ikhlas”, “Surah Al-Fatiha”, “Surah Al-Baqarah”],
answer: 1
},
{
question: “What is the first revelation of the Quran?”,
options: [“Surah Al-Fatiha”, “Surah Al-Alaq (1-5)”, “Surah Al-Ikhlas”],
answer: 1
},
{
question: “Which companion of the Prophet (PBUH) was known as the ‘Sword of Allah’?”,
options: [“Abu Bakr (RA)”, “Umar (RA)”, “Khalid bin Waleed (RA)”],
answer: 2
},
{
question: “What is the term for the Islamic declaration of faith?”,
options: [“Salah”, “Shahada”, “Zakat”],
answer: 1
},
{
question: “Which city is known as the ‘City of the Prophet’?”,
options: [“Mecca”, “Medina”, “Jerusalem”],
answer: 1
},
{
question: “What is the night journey of the Prophet (PBUH) called?”,
options: [“Hijra”, “Mi’raj”, “Isra”],
answer: 2
},
{
question: “Which Surah begins without ‘Bismillah’?”,
options: [“Surah At-Tawbah”, “Surah Al-Fatiha”, “Surah Al-Ikhlas”],
answer: 0
},
{
question: “How many Rakat are there in the Fajr prayer?”,
options: [“2”, “4”, “3”],
answer: 0
},
{
question: “What is the name of the Islamic new year?”,
options: [“Hijri Year”, “Qamri Year”, “Shamsi Year”],
answer: 0
},
{
question: “Which Prophet is known as the ‘Father of Humanity’?”,
options: [“Prophet Adam (AS)”, “Prophet Nuh (AS)”, “Prophet Ibrahim (AS)”],
answer: 0
},
{
question: “What is the term for the Islamic pilgrimage?”,
options: [“Umrah”, “Hajj”, “Ziyarat”],
answer: 1
},
{
question: “Which Surah is recited in every Rakat of Salah?”,
options: [“Surah Al-Ikhlas”, “Surah Al-Fatiha”, “Surah Yaseen”],
answer: 1
},
{
question: “What is the term for the Islamic charity?”,
options: [“Sadaqah”, “Zakat”, “Both”],
answer: 2
},
{
question: “Which Prophet built the Kaaba?”,
options: [“Prophet Ibrahim (AS) and Prophet Ismail (AS)”, “Prophet Adam (AS)”, “Prophet Muhammad (PBUH)”],
answer: 0
},
{
question: “What is the name of the angel who will blow the trumpet on the Day of Judgment?”,
options: [“Angel Jibreel (AS)”, “Angel Israfeel (AS)”, “Angel Malik (AS)”],
answer: 1
},
{
question: “Which Surah is equal to one-third of the Quran?”,
options: [“Surah Al-Ikhlas”, “Surah Yaseen”, “Surah Al-Fatiha”],
answer: 0
},
{
question: “What is the term for the migration of the Prophet (PBUH) from Mecca to Medina?”,
options: [“Mi’raj”, “Hijra”, “Ghazwa”],
answer: 1
}
],
general: [
{
question: “What is the capital of Pakistan?”,
options: [“Lahore”, “Karachi”, “Islamabad”],
answer: 2
},
{
question: “Who is known as the ‘Father of the Nation’ in Pakistan?”,
options: [“Allama Iqbal”, “Muhammad Ali Jinnah”, “Liaquat Ali Khan”],
answer: 1
},
{
question: “Which mountain range is located in the north of Pakistan?”,
options: [“Himalayas”, “Karakoram”, “Both”],
answer: 2
},
{
question: “What is the currency of Pakistan?”,
options: [“Rupee”, “Taka”, “Dinar”],
answer: 0
},
{
question: “Which river is known as the lifeline of Pakistan?”,
options: [“Jhelum”, “Chenab”, “Indus”],
answer: 2
},
{
question: “When did Pakistan gain independence?”,
options: [“1947”, “1956”, “1940”],
answer: 0
},
{
question: “What is the national language of Pakistan?”,
options: [“Urdu”, “Punjabi”, “Sindhi”],
answer: 0
},
{
question: “Which is the largest province of Pakistan by area?”,
options: [“Punjab”, “Sindh”, “Balochistan”],
answer: 2
},
{
question: “Who wrote the national anthem of Pakistan?”,
options: [“Allama Iqbal”, “Hafeez Jalandhri”, “Faiz Ahmed Faiz”],
answer: 1
},
{
question: “Which of these is a UNESCO World Heritage Site in Pakistan?”,
options: [“Minar-e-Pakistan”, “Mohenjo-Daro”, “Faisal Mosque”],
answer: 1
},
{
question: “What is the national flower of Pakistan?”,
options: [“Rose”, “Jasmine”, “Tulip”],
answer: 1
},
{
question: “Which Pakistani scientist won the Nobel Prize in Physics?”,
options: [“Dr. Abdus Salam”, “Dr. Atta-ur-Rahman”, “Dr. Samar Mubarakmand”],
answer: 0
},
{
question: “What is the name of the border between Pakistan and India?”,
options: [“Durand Line”, “Wagah Border”, “Line of Control”],
answer: 1
},
{
question: “Which Pakistani city is known as the ‘City of Gardens’?”,
options: [“Islamabad”, “Lahore”, “Peshawar”],
answer: 1
},
{
question: “What is the national sport of Pakistan?”,
options: [“Cricket”, “Hockey”, “Football”],
answer: 1
},
{
question: “Which Pakistani mountain is the second highest in the world?”,
options: [“Nanga Parbat”, “K2”, “Tirich Mir”],
answer: 1
},
{
question: “Who was the first female Prime Minister of Pakistan?”,
options: [“Fatima Jinnah”, “Benazir Bhutto”, “Hina Rabbani Khar”],
answer: 1
},
{
question: “Which desert is located in Pakistan?”,
options: [“Thar Desert”, “Cholistan Desert”, “Both”],
answer: 2
},
{
question: “What is the name of Pakistan’s highest civil award?”,
options: [“Nishan-e-Haider”, “Hilal-e-Imtiaz”, “Nishan-e-Pakistan”],
answer: 2
},
{
question: “Which Pakistani city is known as the ‘Manchester of Pakistan’?”,
options: [“Faisalabad”, “Sialkot”, “Gujranwala”],
answer: 0
},
{
question: “When was the first constitution of Pakistan adopted?”,
options: [“1947”, “1956”, “1973”],
answer: 1
},
{
question: “Which of these is a Pakistani Nobel Prize winner?”,
options: [“Malala Yousafzai”, “Abdus Salam”, “Both”],
answer: 2
},
{
question: “What is the name of Pakistan’s parliament?”,
options: [“National Assembly”, “Majlis-e-Shoora”, “Both”],
answer: 2
},
{
question: “Which is the largest city of Pakistan by population?”,
options: [“Lahore”, “Karachi”, “Faisalabad”],
answer: 1
},
{
question: “What is the name of Pakistan’s intelligence agency?”,
options: [“ISI”, “IB”, “FIA”],
answer: 0
}
] };

// Variables to track state
let currentCategory = 0;
let currentQuestionIndex = 0;
let userAnswers = {
islamic: Array(questions.islamic.length).fill(null),
general: Array(questions.general.length).fill(null)
};
let score = {
islamic: 0,
general: 0,
total: 0
};
let testSubmitted = false;

// Initialize the test
function initTest() {
renderQuestions();
updateProgress();
updateNavigationButtons();
}

// Render questions for both categories
function renderQuestions() {
renderCategoryQuestions(‘islamic’);
renderCategoryQuestions(‘general’);
}

// Render questions for a specific category
function renderCategoryQuestions(category) {
const container = document.getElementById(`${category}-questions`);
container.innerHTML = ”;

questions[category].forEach((q, index) => {
const questionDiv = document.createElement(‘div’);
questionDiv.className = `question ${index === currentQuestionIndex && currentCategory === (category === ‘islamic’ ? 0 : 1) ? ‘active-question’ : ”}`;
questionDiv.id = `${category}-q-${index}`;

const questionText = document.createElement(‘div’);
questionText.className = ‘question-text’;
questionText.textContent = `${index + 1}. ${q.question}`;
questionDiv.appendChild(questionText);

const optionsDiv = document.createElement(‘div’);
optionsDiv.className = ‘options’;

q.options.forEach((option, optIndex) => {
const optionDiv = document.createElement(‘div’);
optionDiv.className = `option ${userAnswers[category][index] === optIndex ? ‘selected’ : ”}`;

if (testSubmitted) {
if (optIndex === q.answer) {
optionDiv.classList.add(‘correct’);
} else if (userAnswers[category][index] === optIndex && userAnswers[category][index] !== q.answer) {
optionDiv.classList.add(‘incorrect’);
}
}

optionDiv.textContent = option;
optionDiv.onclick = () => selectOption(category, index, optIndex);
optionsDiv.appendChild(optionDiv);
});

questionDiv.appendChild(optionsDiv);

if (testSubmitted && userAnswers[category][index] !== q.answer) {
const correctAnswerDiv = document.createElement(‘div’);
correctAnswerDiv.className = ‘correct-answer’;
correctAnswerDiv.textContent = `Correct answer: ${q.options[q.answer]}`;
correctAnswerDiv.style.display = ‘block’;
questionDiv.appendChild(correctAnswerDiv);
}

container.appendChild(questionDiv);
});
}

// Select an option
function selectOption(category, questionIndex, optionIndex) {
if (testSubmitted) return;

userAnswers[category][questionIndex] = optionIndex;
renderCategoryQuestions(category);

// If in the current category and question, update progress
if ((currentCategory === 0 && category === ‘islamic’ && currentQuestionIndex === questionIndex) ||
(currentCategory === 1 && category === ‘general’ && currentQuestionIndex === questionIndex)) {
updateProgress();
}
}

// Show a specific category
function showCategory(index) {
currentCategory = index;
currentQuestionIndex = 0;

document.querySelectorAll(‘.category’).forEach((cat, i) => {
cat.classList.toggle(‘active’, i === index);
});

document.querySelectorAll(‘.tab’).forEach((tab, i) => {
tab.classList.toggle(‘active’, i === index);
});

updateNavigationButtons();
updateProgress();
scrollToCurrentQuestion();
}

// Go to the next question
function nextQuestion() {
const currentCategoryQuestions = currentCategory === 0 ? questions.islamic : questions.general;

if (currentQuestionIndex 0) {
currentQuestionIndex–;
updateNavigationButtons();
scrollToCurrentQuestion();
} else if (currentCategory === 1) {
// Move to previous category
showCategory(0);
currentQuestionIndex = questions.islamic.length – 1;
}

updateProgress();
}

// Update navigation buttons state
function updateNavigationButtons() {
const prevBtn = document.getElementById(‘prev-btn’);
const nextBtn = document.getElementById(‘next-btn’);
const submitBtn = document.getElementById(‘submit-btn’);

const currentCategoryQuestions = currentCategory === 0 ? questions.islamic : questions.general;

prevBtn.disabled = currentQuestionIndex === 0 && currentCategory === 0;

if (currentCategory === 1 && currentQuestionIndex === currentCategoryQuestions.length – 1) {
nextBtn.style.display = ‘none’;
submitBtn.style.display = ‘block’;
} else {
nextBtn.style.display = ‘block’;
submitBtn.style.display = ‘none’;
}
}

// Scroll to current question
function scrollToCurrentQuestion() {
const category = currentCategory === 0 ? ‘islamic’ : ‘general’;
const questionId = `${category}-q-${currentQuestionIndex}`;
const questionElement = document.getElementById(questionId);

if (questionElement) {
questionElement.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });
}
}

// Update progress bar
function updateProgress() {
const progressBar = document.getElementById(‘progress’);
const currentCategoryQuestions = currentCategory === 0 ? questions.islamic : questions.general;

const answered = userAnswers[currentCategory === 0 ? ‘islamic’ : ‘general’].filter(a => a !== null).length;
const total = currentCategoryQuestions.length;

const percentage = Math.round((answered / total) * 100);
progressBar.style.width = `${percentage}%`;
}

// Submit the test
function submitTest() {
testSubmitted = true;

// Calculate scores
score.islamic = calculateScore(‘islamic’);
score.general = calculateScore(‘general’);
score.total = score.islamic + score.general;

// Display score
const scoreDisplay = document.getElementById(‘score-display’);
scoreDisplay.innerHTML = `

Test Results

Islamic Studies: ${score.islamic}/${questions.islamic.length}

General Knowledge: ${score.general}/${questions.general.length}

Total Score: ${score.total}/${questions.islamic.length + questions.general.length}

Percentage: ${Math.round((score.total / (questions.islamic.length + questions.general.length)) * 100)}%

`;

// Re-render questions to show correct/incorrect answers
renderQuestions();

// Disable navigation buttons
document.getElementById(‘prev-btn’).disabled = true;
document.getElementById(‘next-btn’).disabled = true;
document.getElementById(‘submit-btn’).disabled = true;
}

// Calculate score for a category
function calculateScore(category) {
let correct = 0;

questions[category].forEach((q, index) => {
if (userAnswers[category][index] === q.answer) {
correct++;
}
});

return correct;
}

// Initialize the test when the page loads
window.onload = initTest;