import { useState, useEffect } from "react";
const questions = [
// ===== ENGLISH SECTION (10 MCQs) =====
{
id: 1, section: "English", topic: "Vocabulary - Synonyms",
question: "Choose the correct synonym of 'BENEVOLENT':",
options: ["A. Cruel", "B. Generous", "C. Selfish", "D. Arrogant"],
answer: "B. Generous", explanation: "Benevolent means kind and generous."
},
{
id: 2, section: "English", topic: "Vocabulary - Antonyms",
question: "What is the antonym of 'DILIGENT'?",
options: ["A. Hardworking", "B. Careful", "C. Lazy", "D. Honest"],
answer: "C. Lazy", explanation: "Diligent means hardworking; its opposite is lazy."
},
{
id: 3, section: "English", topic: "Parts of Speech",
question: "Identify the part of speech of the underlined word: 'She sings beautifully.'",
options: ["A. Adjective", "B. Noun", "C. Verb", "D. Adverb"],
answer: "D. Adverb", explanation: "'Beautifully' modifies the verb 'sings' — it is an adverb."
},
{
id: 4, section: "English", topic: "Punctuation",
question: "Which sentence has correct punctuation?",
options: ["A. Its a hot day.", "B. It's a hot day.", "C. Its' a hot day.", "D. It`s a hot day."],
answer: "B. It's a hot day.", explanation: "'It's' is the contraction of 'it is'. The apostrophe is placed between 't' and 's'."
},
{
id: 5, section: "English", topic: "Tenses",
question: "Select the correct sentence in Past Perfect Tense:",
options: [
"A. She was eating when I arrived.",
"B. She has eaten before I arrived.",
"C. She had eaten before I arrived.",
"D. She ate before I arrived."
],
answer: "C. She had eaten before I arrived.",
explanation: "Past perfect = had + past participle. It shows one past action before another."
},
{
id: 6, section: "English", topic: "Active/Passive Voice",
question: "Change to Passive Voice: 'The teacher explains the lesson.'",
options: [
"A. The lesson explained by the teacher.",
"B. The lesson is explained by the teacher.",
"C. The lesson was explained by the teacher.",
"D. The lesson has been explained by teacher."
],
answer: "B. The lesson is explained by the teacher.",
explanation: "Simple present passive = is/are + past participle."
},
{
id: 7, section: "English", topic: "Direct & Indirect Speech",
question: "Change to Indirect Speech: He said, 'I am happy.'",
options: [
"A. He said that he is happy.",
"B. He said that he was happy.",
"C. He told that he is happy.",
"D. He said that I was happy."
],
answer: "B. He said that he was happy.",
explanation: "In indirect speech, 'am' changes to 'was' (tense shift back)."
},
{
id: 8, section: "English", topic: "Use of Preposition",
question: "Fill in the blank: 'He is good _______ mathematics.'",
options: ["A. in", "B. at", "C. for", "D. with"],
answer: "B. at", explanation: "'Good at' is the correct prepositional phrase."
},
{
id: 9, section: "English", topic: "Reading Comprehension",
question: "A ship sailing away from shore disappears bottom-first because:",
options: [
"A. The ship is sinking",
"B. The earth is curved",
"C. The water hides the ship",
"D. The ship moves too fast"
],
answer: "B. The earth is curved",
explanation: "The curvature of the earth causes the bottom to disappear first — proving Earth is a globe."
},
{
id: 10, section: "English", topic: "Error Detection",
question: "Find the error: 'George has not completed the assignment yet and Maria hasn't neither.'",
options: ["A. George has not", "B. completed the assignment", "C. yet and Maria", "D. hasn't neither"],
answer: "D. hasn't neither",
explanation: "Double negative error. Correct form: 'Maria hasn't either.'"
},
// ===== GENERAL KNOWLEDGE SECTION (10 MCQs) =====
{
id: 11, section: "General Knowledge", topic: "Pakistan Studies",
question: "What is the highest peak of the Salt Range?",
options: ["A. Nanga Parbat", "B. Skaser", "C. Malka Parbat", "D. K-2"],
answer: "C. Malka Parbat", explanation: "Malka Parbat is the highest peak of the Salt Range in Pakistan."
},
{
id: 12, section: "General Knowledge", topic: "Pakistan Studies",
question: "The original name of K-2 is:",
options: ["A. Mount Everest", "B. Koh-i-Sufaid", "C. Godwin Austin", "D. Killing Mountain"],
answer: "C. Godwin Austin", explanation: "K-2 was originally named Godwin Austin after Col. H.H. Godwin-Austen."
},
{
id: 13, section: "General Knowledge", topic: "Pakistan Studies",
question: "Pakistan's national language is:",
options: ["A. Punjabi", "B. Sindhi", "C. Urdu", "D. English"],
answer: "C. Urdu", explanation: "Urdu is the national language of Pakistan as per the Constitution."
},
{
id: 14, section: "General Knowledge", topic: "Social Studies",
question: "The Indus River originates from:",
options: ["A. Himalayas", "B. Tibet (Mansarovar Lake)", "C. Karakoram", "D. Hindu Kush"],
answer: "B. Tibet (Mansarovar Lake)", explanation: "The Indus River originates near Lake Mansarovar in Tibet."
},
{
id: 15, section: "General Knowledge", topic: "Pakistan Studies",
question: "Who was the first Governor General of Pakistan?",
options: ["A. Liaquat Ali Khan", "B. Iskander Mirza", "C. Quaid-e-Azam", "D. Ayub Khan"],
answer: "C. Quaid-e-Azam", explanation: "Muhammad Ali Jinnah (Quaid-e-Azam) was the first Governor General of Pakistan."
},
{
id: 16, section: "General Knowledge", topic: "Social Studies",
question: "The largest province of Pakistan by area is:",
options: ["A. Punjab", "B. Sindh", "C. KPK", "D. Balochistan"],
answer: "D. Balochistan", explanation: "Balochistan covers about 44% of Pakistan's total area."
},
{
id: 17, section: "General Knowledge", topic: "Pakistan Studies",
question: "Pakistan's Constitution was enacted in which year?",
options: ["A. 1947", "B. 1956", "C. 1973", "D. 1985"],
answer: "C. 1973", explanation: "The current Constitution of Pakistan was adopted on 14th August 1973."
},
{
id: 18, section: "General Knowledge", topic: "Social Studies",
question: "The capital of Sindh province is:",
options: ["A. Hyderabad", "B. Sukkur", "C. Karachi", "D. Larkana"],
answer: "C. Karachi", explanation: "Karachi is the capital of Sindh and also the largest city of Pakistan."
},
{
id: 19, section: "General Knowledge", topic: "Pakistan Studies",
question: "Pakistan Resolution (Lahore Resolution) was passed in:",
options: ["A. 1940", "B. 1942", "C. 1945", "D. 1947"],
answer: "A. 1940", explanation: "The Pakistan Resolution was passed on 23rd March 1940 in Lahore."
},
{
id: 20, section: "General Knowledge", topic: "Social Studies",
question: "The 2 biggest rivers of Sindh are:",
options: ["A. Indus & Ravi", "B. Indus & Hub", "C. Chenab & Jhelum", "D. Indus & Kabul"],
answer: "B. Indus & Hub", explanation: "The Indus and Hub rivers are the major rivers flowing through Sindh."
},
// ===== TEACHING & LEARNING PEDAGOGIES (20 MCQs) =====
{
id: 21, section: "Pedagogy", topic: "Learning Styles - VARK",
question: "VARK model of learning styles stands for:",
options: [
"A. Visual, Auditory, Reading, Kinesthetic",
"B. Visual, Active, Reading, Kinesthetic",
"C. Verbal, Auditory, Reasoning, Knowledge",
"D. Visual, Auditory, Recall, Kinesthetic"
],
answer: "A. Visual, Auditory, Reading, Kinesthetic",
explanation: "VARK = Visual, Auditory, Read/Write, Kinesthetic — a model of learning preferences by Neil Fleming."
},
{
id: 22, section: "Pedagogy", topic: "Learning Styles - VARK",
question: "A student who learns best by touching and doing practical activities is called a _______ learner.",
options: ["A. Visual", "B. Auditory", "C. Reading", "D. Kinesthetic"],
answer: "D. Kinesthetic", explanation: "Kinesthetic learners prefer hands-on, practical, and physical activities."
},
{
id: 23, section: "Pedagogy", topic: "Cognitive/Physical/Social Differences",
question: "Which term refers to differences in students' ability to think, reason, and understand?",
options: ["A. Physical differences", "B. Cognitive differences", "C. Social differences", "D. Emotional differences"],
answer: "B. Cognitive differences", explanation: "Cognitive differences relate to mental abilities like thinking, memory, and reasoning."
},
{
id: 24, section: "Pedagogy", topic: "Lesson Planning - SLOs",
question: "SLO stands for:",
options: [
"A. Student Learning Outcomes",
"B. Standard Learning Objectives",
"C. School Learning Objectives",
"D. Specific Learning Options"
],
answer: "A. Student Learning Outcomes",
explanation: "SLOs are Student Learning Outcomes — what students should know or do after a lesson."
},
{
id: 25, section: "Pedagogy", topic: "Lesson Planning - SLOs",
question: "A good lesson plan should include which of the following?",
options: [
"A. Only topic and time",
"B. SLOs, teaching method, assessment, and materials",
"C. Only textbook exercises",
"D. Teacher's personal notes only"
],
answer: "B. SLOs, teaching method, assessment, and materials",
explanation: "A complete lesson plan includes objectives (SLOs), methods, resources, and evaluation."
},
{
id: 26, section: "Pedagogy", topic: "Teaching Skills",
question: "Which teaching skill involves keeping students focused and managing behavior?",
options: ["A. Questioning", "B. Explaining", "C. Classroom Management", "D. Reinforcement"],
answer: "C. Classroom Management", explanation: "Classroom management is the skill of maintaining discipline and engagement."
},
{
id: 27, section: "Pedagogy", topic: "Teaching Methodology",
question: "In 'Team Teaching', the responsibility of teaching is shared by:",
options: ["A. One teacher only", "B. Students only", "C. Two or more teachers", "D. The principal"],
answer: "C. Two or more teachers", explanation: "Team teaching involves two or more teachers jointly planning and delivering instruction."
},
{
id: 28, section: "Pedagogy", topic: "Teaching Methodology",
question: "Brainstorming is a teaching method that encourages students to:",
options: [
"A. Copy notes from the board",
"B. Freely generate ideas without criticism",
"C. Memorize definitions",
"D. Solve math problems"
],
answer: "B. Freely generate ideas without criticism",
explanation: "Brainstorming promotes creative thinking by allowing all ideas to be shared freely."
},
{
id: 29, section: "Pedagogy", topic: "Teaching Methodology",
question: "Case Study method is best used to:",
options: [
"A. Memorize formulas",
"B. Analyze real-life situations for deeper understanding",
"C. Conduct laboratory experiments",
"D. Practice handwriting"
],
answer: "B. Analyze real-life situations for deeper understanding",
explanation: "Case studies use real-world examples to develop critical thinking and problem-solving."
},
{
id: 30, section: "Pedagogy", topic: "Use of ICT",
question: "ICT in classroom stands for:",
options: [
"A. Instructional Content Technology",
"B. Information and Communication Technology",
"C. Interactive Classroom Teaching",
"D. Integrated Content and Training"
],
answer: "B. Information and Communication Technology",
explanation: "ICT = Information and Communication Technology, used to enhance teaching and learning."
},
{
id: 31, section: "Pedagogy", topic: "Use of ICT",
question: "Which of the following is an example of ICT integration in classroom?",
options: [
"A. Using only a chalkboard",
"B. Dictating notes to students",
"C. Using projector and educational software",
"D. Giving homework from textbook only"
],
answer: "C. Using projector and educational software",
explanation: "ICT integration includes use of multimedia tools, projectors, and digital resources."
},
{
id: 32, section: "Pedagogy", topic: "Assessment/Evaluation",
question: "Formative assessment is conducted:",
options: [
"A. Only at the end of the year",
"B. During the learning process",
"C. Before teaching begins",
"D. Only by the principal"
],
answer: "B. During the learning process",
explanation: "Formative assessment is ongoing — it monitors student progress during learning."
},
{
id: 33, section: "Pedagogy", topic: "Assessment/Evaluation",
question: "Summative assessment is used to:",
options: [
"A. Guide daily instruction",
"B. Evaluate learning at the end of a unit or term",
"C. Identify learning styles",
"D. Plan lesson activities"
],
answer: "B. Evaluate learning at the end of a unit or term",
explanation: "Summative assessment measures overall achievement at the end (e.g., final exam)."
},
{
id: 34, section: "Pedagogy", topic: "Assessment/Evaluation",
question: "Educational evaluation is a process by which a teacher can assess:",
options: [
"A. Teaching only",
"B. Students' performance only",
"C. Performance of both teacher and students",
"D. School administration"
],
answer: "C. Performance of both teacher and students",
explanation: "Educational evaluation assesses both teaching effectiveness and student learning."
},
{
id: 35, section: "Pedagogy", topic: "Reflective Practices/Feedback",
question: "Reflective practice means a teacher:",
options: [
"A. Memorizes lesson plans",
"B. Thinks critically about their own teaching to improve it",
"C. Follows instructions from the principal",
"D. Only uses traditional methods"
],
answer: "B. Thinks critically about their own teaching to improve it",
explanation: "Reflective practice = self-evaluation of teaching methods for continuous improvement."
},
{
id: 36, section: "Pedagogy", topic: "Reflective Practices/Feedback",
question: "Constructive feedback given to students should be:",
options: [
"A. Only negative to highlight mistakes",
"B. Vague and general",
"C. Specific, timely, and improvement-focused",
"D. Given only at the end of the year"
],
answer: "C. Specific, timely, and improvement-focused",
explanation: "Good feedback is specific, prompt, and helps students understand how to improve."
},
{
id: 37, section: "Pedagogy", topic: "Classroom Management",
question: "Effective classroom management helps in:",
options: [
"A. Reducing teaching hours",
"B. Creating a positive and productive learning environment",
"C. Replacing the curriculum",
"D. Making students fear the teacher"
],
answer: "B. Creating a positive and productive learning environment",
explanation: "Good classroom management promotes safety, engagement, and effective learning."
},
{
id: 38, section: "Pedagogy", topic: "STEAM/STREAM Pedagogy",
question: "STEAM education stands for:",
options: [
"A. Science, Technology, Engineering, Arts, Mathematics",
"B. Social, Technology, English, Arts, Math",
"C. Science, Teaching, Engineering, Assessment, Management",
"D. Science, Theory, Evaluation, Arts, Methods"
],
answer: "A. Science, Technology, Engineering, Arts, Mathematics",
explanation: "STEAM integrates Science, Technology, Engineering, Arts, and Mathematics for holistic learning."
},
{
id: 39, section: "Pedagogy", topic: "STEAM/STREAM Pedagogy",
question: "Project Based Learning (PBL) is a feature of which pedagogy?",
options: ["A. Rote Learning", "B. STEAM/STREAM", "C. Direct Instruction only", "D. Lecture Method"],
answer: "B. STEAM/STREAM", explanation: "PBL is central to STEAM/STREAM — students solve real problems through projects."
},
{
id: 40, section: "Pedagogy", topic: "Bloom's Taxonomy",
question: "The three domains of Bloom's Taxonomy are:",
options: [
"A. Cognitive, Affective, Psychomotor",
"B. Cognitive, Pedagogy, Psychomotor",
"C. Social, Affective, Cognitive",
"D. Physical, Mental, Emotional"
],
answer: "A. Cognitive, Affective, Psychomotor",
explanation: "Bloom's Taxonomy has 3 domains: Cognitive (thinking), Affective (feeling), Psychomotor (doing)."
}
];
const sectionColors = {
"English": { bg: "#1a3a5c", accent: "#4fc3f7", badge: "#0d47a1" },
"General Knowledge": { bg: "#1a3d2b", accent: "#69f0ae", badge: "#1b5e20" },
"Pedagogy": { bg: "#3d1a2b", accent: "#f48fb1", badge: "#880e4f" }
};
export default function JSTMockTest() {
const [current, setCurrent] = useState(0);
const [selected, setSelected] = useState(null);
const [submitted, setSubmitted] = useState(false);
const [answers, setAnswers] = useState({});
const [showResult, setShowResult] = useState(false);
const [showExplanation, setShowExplanation] = useState(false);
const [timeLeft, setTimeLeft] = useState(40 * 60);
const [started, setStarted] = useState(false);
useEffect(() => {
if (!started || showResult) return;
if (timeLeft <= 0) { setShowResult(true); return; }
const t = setTimeout(() => setTimeLeft(t => t - 1), 1000);
return () => clearTimeout(t);
}, [timeLeft, started, showResult]);
const q = questions[current];
const colors = sectionColors[q.section];
const formatTime = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
const handleSelect = (opt) => {
if (submitted) return;
setSelected(opt);
setShowExplanation(false);
};
const handleSubmit = () => {
if (!selected) return;
setSubmitted(true);
setAnswers(prev => ({ ...prev, [q.id]: selected }));
setShowExplanation(true);
};
const handleNext = () => {
if (current < questions.length - 1) {
setCurrent(c => c + 1);
setSelected(answers[questions[current + 1]?.id] || null);
setSubmitted(!!answers[questions[current + 1]?.id]);
setShowExplanation(false);
} else {
setShowResult(true);
}
};
const handlePrev = () => {
if (current > 0) {
setCurrent(c => c - 1);
const prevQ = questions[current - 1];
setSelected(answers[prevQ.id] || null);
setSubmitted(!!answers[prevQ.id]);
setShowExplanation(false);
}
};
const calcScore = () => {
let correct = 0;
questions.forEach(q => { if (answers[q.id] === q.answer) correct++; });
return correct;
};
const sectionScore = (sec) => {
const qs = questions.filter(q => q.section === sec);
const correct = qs.filter(q => answers[q.id] === q.answer).length;
return { correct, total: qs.length };
};
if (!started) {
return (
);
}
if (showResult) {
const score = calcScore();
const pct = Math.round((score / 40) * 100);
const eng = sectionScore("English");
const gk = sectionScore("General Knowledge");
const ped = sectionScore("Pedagogy");
const grade = pct >= 80 ? "Excellent! 🏆" : pct >= 60 ? "Good! 👍" : pct >= 40 ? "Average 📚" : "Keep Trying 💪";
return (
))}
);
}
const timerColor = timeLeft < 300 ? "#f44336" : timeLeft < 600 ? "#ff9800" : "#69f0ae";
const progress = ((current + 1) / questions.length) * 100;
return (
📚
JST Mock Test
STS — BPS-14 | Sindh Education Department
{[["🔤 English", "10 MCQs", "#4fc3f7"], ["🌍 Gen. Knowledge", "10 MCQs", "#69f0ae"], ["📖 Pedagogy", "20 MCQs", "#f48fb1"]].map(([label, count, color]) => (
))}
{label}
{count}
⏱ Time: 40 minutes |
📋 Total: 40 MCQs |
✅ No Negative Marking
Based on STS Official Syllabus — 11 April 2026
{pct >= 60 ? "🎉" : "📚"}
Test Completed!
= 60 ? "#69f0ae" : "#f48fb1", margin: "12px 0" }}>{score}/40
{grade} — {pct}%
Section-wise Performance
{[["🔤 English", eng, "#4fc3f7"], ["🌍 General Knowledge", gk, "#69f0ae"], ["📖 Pedagogy (Pedagogics)", ped, "#f48fb1"]].map(([label, s, color]) => (
{label}
{s.correct}/{s.total}
{/* Header */}
{/* Question Card */}
)}
{/* Buttons */}
{/* Question navigator */}
);
}
{q.section}
{q.topic}
⏱ {formatTime(timeLeft)}
Q {current + 1} of {questions.length}
{Object.keys(answers).length} answered
Q{current + 1}. {q.question}
{q.options.map((opt) => {
const isSelected = selected === opt;
const isCorrect = opt === q.answer;
let bg = "#0d1526";
let border = "#1e3050";
let color = "#b0bec5";
if (submitted) {
if (isCorrect) { bg = "#1b3a1b"; border = "#69f0ae"; color = "#69f0ae"; }
else if (isSelected && !isCorrect) { bg = "#3a1b1b"; border = "#f44336"; color = "#f44336"; }
} else if (isSelected) {
bg = "#1a2a4a"; border = colors.accent; color = "#fff";
}
return (
);
})}
{/* Explanation */}
{showExplanation && (
💡 Explanation:
{q.explanation}
{!submitted && (
)}
{questions.map((_, i) => {
const isAnswered = !!answers[questions[i].id];
const isCurrent = i === current;
return (
);
})}