9th Class Computer Science Online Subjective Exam

9th Class Computer Science Online Subjective Exam If you find any error or want to give suggestion for improvement,you may contact to me at +923146685547 (WhatsApp).اگر آپ کو کوئی خامی نظر آتی ہے یا آپ بہتری کے لیے کوئی تجویز دینا چاہتے ہیں تو آپ مجھ سے رابطہ کر سکتے ہیں۔My WhatsApp number is 923146685547. Education & CareerJoin my free WhatsApp chanel to get authentic news first.👇👇👇https://whatsapp.com/channel/0029VbBjge87j6gDtBXk3K2J 9th Computer Science Bilingual Portal 2026 :root { --primary: #2c3e50; /* Midnight Blue */ --secondary: #2980b9; /* Bright Blue */ --accent: #e74c3c; --bg: #ecf0f1; --border: #bdc3c7; --stamp-color: #2c3e50; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: 'Segoe UI', 'Noto Nastaliq Urdu', sans-serif; background: var(--bg); margin: 0; padding: 15px; color: #34495e; } .container { max-width: 950px; margin: 0 auto; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); } h1, h2 { text-align: center; color: var(--primary); margin-top: 0; } .ur-text { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; display: inline-block; } /* INPUTS */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .input-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--primary); font-size: 0.95em; } input, select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px; background: #fff; } /* SELECTION LISTS */ .topic-box { border: 1px solid var(--border); border-radius: 6px; max-height: 250px; overflow-y: auto; padding: 10px; background: #fafafa; margin-bottom: 15px; } .topic-item { display: flex; align-items: flex-start; padding: 8px; border-bottom: 1px solid #eee; } .topic-item input { margin-top: 5px; margin-right: 12px; transform: scale(1.3); flex-shrink: 0; } .topic-item label { width: 100%; font-size: 0.95em; line-height: 1.6; cursor: pointer; } /* BUTTONS */ .btn-main { background: var(--primary); color: #ffffff !important; border: none; padding: 16px; width: 100%; font-size: 1.1em; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } .btn-draw { background: var(--secondary); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 0.9em; margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; } .btn-clear { background: #c0392b; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8em; } /* MODE SELECTOR */ .mode-row { display: flex; gap: 10px; margin-bottom: 20px; } .mode-opt { flex: 1; padding: 15px 5px; border: 2px solid #ddd; background: #fff; text-align: center; cursor: pointer; border-radius: 8px; transition: 0.2s; font-size: 0.9em; } .mode-opt.active { border-color: var(--secondary); background: #d6eaf8; color: var(--secondary); font-weight: bold; } /* EXAM VIEW */ #exam-view, #result-view { display: none; } .sticky-timer { position: sticky; top: 0; background: var(--primary); color: white; padding: 10px 15px; z-index: 1000; border-radius: 0 0 10px 10px; display: flex; justify-content: space-between; align-items: center; margin: -25px -25px 20px -25px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .q-card { margin-bottom: 25px; border: 1px solid #eee; padding: 15px; border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.03); } .q-head { display: flex; justify-content: space-between; align-items: flex-start; font-weight: bold; margin-bottom: 10px; font-size: 1em; color: #333; } .q-limits { font-size: 0.85em; color: var(--accent); background: #fdf2e9; padding: 3px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px;} textarea { width: 100%; min-height: 100px; padding: 10px; border: 2px solid #ccc; border-radius: 6px; font-size: 16px; resize: vertical; font-family: 'Segoe UI', sans-serif; } textarea:focus { border-color: var(--secondary); outline: none; } textarea.urdu-mode { direction: rtl; font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; text-align: right; } /* DRAWING CANVAS */ .canvas-wrapper { display: none; margin-top: 10px; border: 2px dashed #bbb; background: #fff; position: relative; touch-action: none; } canvas { display: block; cursor: crosshair; width: 100%; } .canvas-toolbar { background: #eee; padding: 5px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } /* --- RESULT CARD --- */ .cert-frame { background: white; padding: 40px; border: 4px double #2c3e50; position: relative; color: black; font-family: 'Times New Roman', Times, serif; width: 100%; margin: 0 auto; } .header-section { text-align: center; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 20px; } .header-section h1 { margin: 0; font-size: 2.2em; text-transform: uppercase; letter-spacing: 1px; color: #000; } .profile-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 1.1em; font-family: Arial, sans-serif; } .profile-table td { padding: 8px 10px; border: 1px solid #999; vertical-align: middle; } .profile-table .label { font-weight: bold; background: #eaf2f8; width: 25%; color: #000; } .marks-sheet { width: 100%; border-collapse: collapse; margin-top: 15px; text-align: center; font-family: Arial, sans-serif; } .marks-sheet th { background: #2c3e50; color: white; padding: 10px; border: 1px solid #000; } .marks-sheet td { padding: 12px; border: 1px solid #000; font-size: 1.1em; } .footer-section { margin-top: 80px; display: flex; justify-content: space-between; align-items: flex-end; } .sig-block { text-align: center; width: 40%; border-top: 2px solid #000; padding-top: 10px; } .hand-sig { font-family: 'Brush Script MT', cursive; font-size: 2em; color: #2c3e50; position: absolute; bottom: 40px; left: 60px; transform: rotate(-5deg); } .stamp-box { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; border: 5px double var(--stamp-color); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--stamp-color); font-weight: bold; font-family: 'Courier New', monospace; opacity: 0.8; } .share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .btn-share { padding: 12px 20px; border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 14px; font-family: sans-serif; } .bg-pdf { background: #c0392b; } .bg-img { background: #34495e; } @media only screen and (max-width: 600px) { body { padding: 10px; } .container { padding: 15px; } .grid-2 { grid-template-columns: 1fr; gap: 10px; } .profile-table td { display: block; width: 100%; border: none; border-bottom: 1px solid #eee; } .profile-table .label { background: #eaf2f8; width: 100%; padding-top: 10px; } .cert-frame { padding: 15px; border-width: 2px; } .stamp-box { width: 100px; height: 100px; bottom: 80px; } .hand-sig { font-size: 1.5em; left: 20px; } } 💻 9th Computer Science (کمپیوٹر سائنس امتحان پورٹل) Student Name / طالب علم کا نام Father Name / والد کا نام School / Institute / سکول کا نام City / شہر Writing Language / لکھنے کی زبان English (انگریزی) Urdu (اردو) Hindi (हिंदी) Exam Mode Annual BoardPattern Custom PracticeManual Select Short Questions (Max 50) / مختصر سوالات Selected: 0/50 Long Questions (Max 50) / تفصیلی سوالات Selected: 0/50 START EXAM / شروع کریں 💻 CS Paper ⏱️ 00:00 SUBMIT PAPER / جمع کروائیں Majid Farooq Result Card SSC Part-I (9th Class) Computer Science | Annual 2026 Candidate Name Father Name Institute City Date Performance Report Subject Total Marks Obtained % Grade Computer Science (Subjective) OFFICIAL VERIFIED stijob.org.pk Developed By: Majid Farooq Exam Controller 📄 Download PDF 🖼️ Download Image 🔄 Restart /* --- COMPUTER SCIENCE DATABASE --- */ const DB = { short: [ {t: "Define Problem Solving. / مسئلہ حل کرنے کی تعریف کریں", k: ["steps", "solution", "method"]}, {t: "What is an Algorithm? / الگورتھم کیا ہے؟", k: ["step-by-step", "procedure", "logic"]}, {t: "Define Flowchart. / فلو چارٹ کی تعریف کریں", k: ["graphical", "representation", "symbols"]}, {t: "List Flowchart Symbols. / فلو چارٹ کی علامات لکھیں", k: ["start", "input", "processing", "decision"]}, {t: "What is Test Data? / ٹیسٹ ڈیٹا کیا ہے؟", k: ["check", "correctness", "algorithm"]}, {t: "Define Binary System. / بائنری سسٹم کی تعریف کریں", k: ["0 and 1", "base 2", "digital"]}, {t: "Convert (10) decimal to binary. / 10 کو بائنری میں تبدیل کریں", k: ["1010", "division by 2"]}, {t: "Define Hexadecimal System. / ہیکسا ڈیسیمل سسٹم", k: ["base 16", "0-9", "A-F"]}, {t: "What is Volatile Memory? / والٹائل میموری کیا ہے؟", k: ["temporary", "power off", "loss", "RAM"]}, {t: "Define Non-Volatile Memory. / نان والٹائل میموری", k: ["permanent", "ROM", "storage"]}, {t: "What is ASCII? / ASCII کیا ہے؟", k: ["code", "character", "standard"]}, {t: "Define Boolean Proposition. / بولین پروپوزیشن", k: ["sentence", "true", "false"]}, {t: "What is a Truth Table? / ٹروتھ ٹیبل کیا ہے؟", k: ["values", "logic", "combinations"]}, {t: "Define AND Operator. / اینڈ آپریٹر", k: ["dot", "both true"]}, {t: "Define OR Operator. / اور آپریٹر", k: ["plus", "one true"]}, {t: "Define NOT Operator. / ناٹ آپریٹر", k: ["inverter", "opposite"]}, {t: "What is a Computer Network? / کمپیوٹر نیٹ ورک کیا ہے؟", k: ["connection", "communication", "sharing"]}, {t: "Define Client and Server. / کلائنٹ اور سرور", k: ["request", "service", "resource"]}, {t: "What is LAN? / LAN کیا ہے؟", k: ["local area", "small", "building"]}, {t: "What is WAN? / WAN کیا ہے؟", k: ["wide area", "internet", "large"]}, {t: "Define Star Topology. / سٹار ٹوپولوجی", k: ["central", "hub", "switch"]}, {t: "Define Ring Topology. / رنگ ٹوپولوجی", k: ["loop", "token", "neighbor"]}, {t: "What is a Router? / راؤٹر کیا ہے؟", k: ["device", "traffic", "path"]}, {t: "Define IP Address. / آئی پی ایڈریس", k: ["unique", "identifier", "internet"]}, {t: "Difference between IPv4 and IPv6. / IPv4 اور IPv6 میں فرق", k: ["32 bit", "128 bit"]}, {t: "What is Data Privacy? / ڈیٹا پرائیویسی کیا ہے؟", k: ["protection", "unauthorized", "access"]}, {t: "Define Ethical Issues in Computing. / کمپیوٹنگ میں اخلاقی مسائل", k: ["privacy", "piracy", "theft"]}, {t: "What is Phishing? / فشنگ کیا ہے؟", k: ["fake", "email", "steal", "password"]}, {t: "What is DoS Attack? / سروس سے انکار کا حملہ", k: ["traffic", "unavailable", "server"]}, {t: "Define Copyright Law. / کاپی رائٹ قانون", k: ["legal", "right", "ownership"]}, {t: "What is Cryptography? / کرپٹوگرافی کیا ہے؟", k: ["secret", "writing", "encryption"]}, {t: "Define Encryption Key. / انکرپشن کی", k: ["lock", "unlock", "password"]}, {t: "What is Caesar Cipher? / سیزر سائفر", k: ["shift", "substitution", "method"]}, {t: "Define HTML. / HTML کی تعریف", k: ["hyper text", "markup", "web"]}, {t: "Structure of HTML Document. / HTML کی ساخت", k: ["head", "body", "tags"]}, {t: "What are Hyperlinks? / ہائپر لنکس کیا ہیں؟", k: ["connection", "webpages", "click"]}, {t: "Define Anchor Tag. / اینکر ٹیگ", k: ["href", "link", ""]}, {t: "What are Lists in HTML? / HTML میں لسٹ", k: ["ordered", "unordered", "ol", "ul"]}, {t: "How to insert Image in HTML? / تصویر کیسے لگائیں", k: ["img", "src", "alt"]}, {t: "What is a Web Browser? / ویب براؤزر کیا ہے؟", k: ["software", "view", "websites"]}, {t: "Define Routing. / روٹنگ کی تعریف", k: ["path", "data", "destination"]}, {t: "What is Softcopy? / سافٹ کاپی کیا ہے؟", k: ["digital", "screen", "file"]}, {t: "What is Hardcopy? / ہارڈ کاپی کیا ہے؟", k: ["printed", "paper", "physical"]}, {t: "Define Protocol. / پروٹوکول کی تعریف", k: ["rules", "communication", "standard"]}, {t: "What is FTP? / FTP کیا ہے؟", k: ["file transfer", "upload", "download"]}, {t: "Define HTTP. / HTTP کی تعریف", k: ["hyper text", "transfer", "web"]}, {t: "What is a Modem? / موڈیم کیا ہے؟", k: ["modulate", "demodulate", "analog", "digital"]}, {t: "Define Bus Topology. / بس ٹوپولوجی", k: ["single cable", "backbone", "terminator"]}, {t: "What is Piracy? / پائیریسی کیا ہے؟", k: ["illegal", "copy", "software"]}, {t: "Define Patent. / پیٹنٹ کی تعریف", k: ["exclusive", "right", "invention"]} ], long: [ {t: "Explain the Steps of Problem Solving. / مسئلہ حل کرنے کے مراحل بیان کریں", k: ["define", "analyze", "plan", "candidate", "select"]}, {t: "Describe Guidelines for Drawing Flowcharts. / فلو چارٹ بنانے کے اصول", k: ["symbols", "direction", "start", "end", "processing"]}, {t: "Differentiate between Algorithm and Flowchart. / الگورتھم اور فلو چارٹ میں فرق", k: ["text", "graphical", "easy", "debug"]}, {t: "Convert (ABC)16 to Binary and Decimal. / ہیکسا ڈیسیمل سے تبدیلی", k: ["steps", "calculation", "power"]}, {t: "Explain Data Storage Units in detail. / ڈیٹا سٹوریج یونٹس کی وضاحت", k: ["bit", "byte", "KB", "MB", "GB", "TB"]}, {t: "Prove Logic Laws using Truth Tables. / ٹروتھ ٹیبل سے قوانین ثابت کریں", k: ["commutative", "associative", "distributive", "identity"]}, {t: "Describe Logical Operators (AND, OR, NOT). / لاجیکل آپریٹرز کی وضاحت", k: ["symbols", "truth table", "expressions", "gates"]}, {t: "Explain the components of a Communication System. / کمیونیکیشن سسٹم کے اجزاء", k: ["sender", "receiver", "message", "protocol", "medium"]}, {t: "Describe Star and Ring Topologies with diagrams. / سٹار اور رنگ ٹوپولوجی", k: ["hub", "cable", "advantages", "disadvantages"]}, {t: "Explain the TCP/IP Model Layers. / TCP/IP ماڈل کی تہیں", k: ["application", "transport", "network", "link", "physical"]}, {t: "Explain Modes of Data Communication (Simplex, Half/Full Duplex). / ڈیٹا کمیونیکیشن کے طریقے", k: ["one way", "two way", "time", "example"]}, {t: "What is Routing? Explain the role of a Router. / روٹنگ اور راؤٹر کا کردار", k: ["path", "packet", "table", "best route"]}, {t: "Discuss Ethical Issues in Computing (Privacy, Piracy). / کمپیوٹنگ میں اخلاقی مسائل", k: ["confidentiality", "theft", "illegal", "software"]}, {t: "Explain Simple Encryption Method (Caesar Cipher). / سیزر سائفر کی وضاحت", k: ["substitution", "shift", "plaintext", "ciphertext"]}, {t: "Write a note on Cyber Crime and its types. / سائبر کرائم اور اس کی اقسام", k: ["hacking", "phishing", "fraud", "identity"]}, {t: "Describe the Basic Structure of an HTML Document. / HTML کی بنیادی ساخت", k: ["html", "head", "title", "body", "tags"]}, {t: "How to create Lists in HTML? Explain Ordered and Unordered lists. / HTML میں لسٹ بنانا", k: ["ol", "ul", "li", "attributes", "nesting"]}, {t: "Explain Text Formatting Tags in HTML. / ٹیکسٹ فارمیٹنگ ٹیگز", k: ["bold", "italic", "underline", "font", "size"]}, {t: "How to Create a Table in HTML? Explain attributes. / HTML میں ٹیبل بنانا", k: ["table", "tr", "td", "th", "border", "colspan"]}, {t: "Explain Hyperlinks and Anchor Tags with example. / ہائپر لنکس اور اینکر ٹیگ", k: ["href", "target", "link", "navigation"]}, {t: "Draw a Flowchart to find the sum of first 50 natural numbers. / پہلے 50 قدرتی اعداد کا مجموعہ", k: ["start", "loop", "sum", "increment", "decision"]}, {t: "Draw a Flowchart to determine if a number is Leap Year. / لیپ ایئر معلوم کرنے کا فلو چارٹ", k: ["input year", "divide by 4", "decision", "print"]}, {t: "Explain the types of Physical Transmission Media. / طبعی ٹرانسمیشن میڈیا", k: ["twisted pair", "coaxial", "fiber optic", "wire"]}, {t: "Compare LAN and WAN. / LAN اور WAN کا موازنہ", k: ["area", "speed", "cost", "ownership", "technology"]}, {t: "Write a note on Web Browsers and Search Engines. / ویب براؤزر اور سرچ انجن", k: ["chrome", "google", "access", "indexing"]}, {t: "Explain the importance of Data Encryption. / ڈیٹا انکرپشن کی اہمیت", k: ["security", "safe", "internet", "banking"]}, {t: "Explain Mesh Topology with diagram. / میش ٹوپولوجی", k: ["connection", "reliable", "expensive", "cable"]}, {t: "Describe the function of IP Addressing. / آئی پی ایڈریسنگ کا کام", k: ["address", "network", "host", "classes"]}, {t: "Explain Binary Addition and Subtraction with examples. / بائنری جمع اور تفریق", k: ["carry", "borrow", "rules", "1+1=10"]}, {t: "Convert 69610 to Hexadecimal and Binary. / کنورژن کریں", k: ["division", "remainders", "grouping"]}, {t: "Write a note on Antivirus and its working. / اینٹی وائرس پر نوٹ", k: ["scan", "detect", "remove", "update"]}, {t: "Explain the process of Phishing and how to avoid it. / فشنگ اور اس سے بچاؤ", k: ["fake link", "email", "verify", "password"]}, {t: "How to insert Images and Backgrounds in HTML? / تصویر اور بیک گراؤنڈ لگانا", k: ["img src", "body background", "color", "alt"]}, {t: "Explain Logical Errors vs Syntax Errors in programming. / لاجیکل اور سینٹیکس ایرر", k: ["grammar", "logic", "output", "crash"]}, {t: "Draw Flowchart to find the largest of three numbers. / تین نمبروں میں بڑا نمبر", k: ["compare", "decision", "print"]}, {t: "Explain the use of 'Head' and 'Title' tags. / ہیڈ اور ٹائٹل ٹیگ کا استعمال", k: ["meta", "tab name", "browser"]}, {t: "Describe Bus Topology with advantages and disadvantages. / بس ٹوپولوجی", k: ["backbone", "terminator", "failure", "easy"]}, {t: "Explain SMTP, POP3, and FTP protocols. / نیٹ ورک پروٹوکولز", k: ["email", "file", "sending", "receiving"]}, {t: "Write about the Evolution of Computers. / کمپیوٹر کا ارتقاء", k: ["generations", "vacuum tubes", "transistors", "IC"]}, {t: "Explain Input and Output Devices. / ان پٹ اور آؤٹ پٹ آلات", k: ["keyboard", "monitor", "mouse", "printer"]}, {t: "Describe the role of Operating System. / آپریٹنگ سسٹم کا کردار", k: ["resource", "interface", "manage", "windows"]}, {t: "Explain Identification and Verification in Security. / شناخت اور تصدیق", k: ["username", "password", "biometric", "access"]}, {t: "How to create a Form in HTML? / HTML میں فارم بنانا", k: ["input", "text", "submit", "button"]}, {t: "Explain different types of Keys in Encryption. / انکرپشن کیز کی اقسام", k: ["public", "private", "symmetric", "asymmetric"]}, {t: "Draw Flowchart for calculating Grade based on Marks. / نمبروں کی بنیاد پر گریڈ", k: ["conditions", "if-else", "range", "print"]}, {t: "Explain the concept of Cloud Computing. / کلاؤڈ کمپیوٹنگ", k: ["internet", "storage", "remote", "server"]}, {t: "Write a note on Patent and Trade Secrets. / پیٹنٹ اور تجارتی راز", k: ["protection", "law", "business", "idea"]}, {t: "Explain 5 Generation of Computers. / کمپیوٹر کی پانچ نسلیں", k: ["technology", "size", "speed", "example"]}, {t: "Describe method to create Hyperlinks within same page. / ایک ہی صفحے پر لنک", k: ["id", "hash", "jump", "navigation"]}, {t: "Explain the importance of Testing in Problem Solving. / ٹیسٹنگ کی اہمیت", k: ["errors", "validation", "verification", "reliability"]} ] }; let currentMode = 'board'; let examData = []; let timerInt; let secLeft = 0; let selectedLang = 'eng'; let activeCanvas = null; // --- SETUP --- window.onload = function() { populateList('short', DB.short); populateList('long', DB.long); }; function populateList(type, arr) { const div = document.getElementById('list-'+type); arr.forEach((item, i) => { div.innerHTML += ` ${item.t} `; }); } function chkLimit(type) { const boxes = document.querySelectorAll(`#list-${type} input:checked`); const count = boxes.length; document.getElementById(`cnt-${type}`).innerText = count; const all = document.querySelectorAll(`#list-${type} input:not(:checked)`); all.forEach(b => b.disabled = (count >= 50)); } function setMode(m) { currentMode = m; document.querySelectorAll('.mode-opt').forEach(b => b.classList.remove('active')); document.getElementById('btn-'+m).classList.add('active'); document.getElementById('custom-panel').style.display = (m==='custom')?'block':'none'; } function startExam() { const name = document.getElementById('s-name').value; const father = document.getElementById('s-father').value; const school = document.getElementById('s-school').value; selectedLang = document.getElementById('s-lang').value; if(!name || !father || !school) { alert("Please fill all details / تفصیلات پر کریں"); return; } examData = []; if(currentMode === 'board') { const shorts = getRandom(DB.short, 15, 2); const longs = getRandom(DB.long, 4, 8); // Board usually has 8 marks for long const q5a = {...longs[0], m:8, label:"Q5"}; const q5b = {...longs[1], m:8, label:"Q6"}; const q6a = {...longs[2], m:8, label:"Q7"}; const q6b = {...longs[3], m:8, label:"Q8"}; // Usually 3 longs, but let's keep 4 examData = [...shorts, q5a, q5b, q6a, q6b]; secLeft = 105 * 60; } else { const sIdx = Array.from(document.querySelectorAll('#list-short input:checked')).map(e=>e.value); const lIdx = Array.from(document.querySelectorAll('#list-long input:checked')).map(e=>e.value); if(sIdx.length===0 && lIdx.length===0) { alert("Select at least 1 topic!"); return; } const sList = sIdx.map(i => ({...DB.short[i], m:2})); const lList = lIdx.map(i => ({...DB.long[i], m:8, label:"Long Q"})); examData = [...sList, ...lList]; secLeft = (sList.length*3 + lList.length*12)*60; } renderExam(); document.getElementById('setup-view').style.display = 'none'; document.getElementById('exam-view').style.display = 'block'; window.scrollTo(0,0); timerInt = setInterval(() => { secLeft--; const m = Math.floor(secLeft/60).toString().padStart(2,'0'); const s = (secLeft%60).toString().padStart(2,'0'); document.getElementById('timer').innerText = `${m}:${s}`; if(secLeftq.m===2); const longs = examData.filter(q=>q.m>2); if(shorts.length) { area.innerHTML += `Short Questions (مختصر سوالات)`; shorts.forEach((q, i) => { area.innerHTML += createQCard(i, q, txtClass, ph, 2, 60); }); } if(longs.length) { area.innerHTML += `Long Questions (تفصیلی سوالات)`; longs.forEach((q, i) => { const idx = shorts.length + i; area.innerHTML += createQCard(idx, q, txtClass, ph, q.m, 350); }); } } function createQCard(idx, q, txtClass, ph, marks, limit) { return ` ${q.label||'Q'+(idx+1)}. ${q.t} (${marks} Marks | Max Words: ${limit}) ✏️ Draw Diagram/Flowchart Draw Flowcharts / Logic Gates / Tables Clear `; } function limitWords(field, max) { const val = field.value; const words = val.trim().split(/\s+/); if (words.length > max) { field.value = words.slice(0, max).join(" "); } } /* --- DRAWING LOGIC --- */ function toggleCanvas(id) { const wrapper = document.getElementById(`wrapper-${id}`); const canvas = document.getElementById(`can-${id}`); if (wrapper.style.display === 'block') { wrapper.style.display = 'none'; } else { wrapper.style.display = 'block'; canvas.width = wrapper.offsetWidth; initCanvas(canvas); } } function initCanvas(canvas) { const ctx = canvas.getContext('2d'); let painting = false; function startPosition(e) { painting = true; draw(e); } function finishedPosition() { painting = false; ctx.beginPath(); } function draw(e) { if (!painting) return; e.preventDefault(); const rect = canvas.getBoundingClientRect(); const x = (e.clientX || e.touches[0].clientX) - rect.left; const y = (e.clientY || e.touches[0].clientY) - rect.top; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.strokeStyle = '#2c3e50'; ctx.lineTo(x, y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x, y); } canvas.addEventListener('mousedown', startPosition); canvas.addEventListener('mouseup', finishedPosition); canvas.addEventListener('mousemove', draw); canvas.addEventListener('touchstart', startPosition); canvas.addEventListener('touchend', finishedPosition); canvas.addEventListener('touchmove', draw); } function clearCanvas(id) { const c = document.getElementById(`can-${id}`); const ctx = c.getContext('2d'); ctx.clearRect(0, 0, c.width, c.height); } /* --- RESULT LOGIC --- */ function finishExam() { clearInterval(timerInt); let obt = 0; let max = 0; examData.forEach((q, i) => { const ans = document.getElementById(`ans-${i}`).value.toLowerCase(); const keys = q.k; let hits = 0; keys.forEach(k => { if(ans.includes(k.toLowerCase())) hits++; }); let score = 0; let ratio = hits/keys.length; if(ratio > 0.6) score = q.m; else if(ratio > 0.3) score = q.m * 0.5; else if(ans.length > 5) score = 0.5; score = Math.floor(score*2)/2; obt += score; max += q.m; }); document.getElementById('r-name').innerText = document.getElementById('s-name').value; document.getElementById('r-father').innerText = document.getElementById('s-father').value; document.getElementById('r-school').innerText = document.getElementById('s-school').value; document.getElementById('r-city').innerText = document.getElementById('s-city').value; document.getElementById('r-date').innerText = new Date().toLocaleDateString(); document.getElementById('r-max').innerText = max; document.getElementById('r-obt').innerText = obt; const perc = max > 0 ? ((obt/max)*100).toFixed(1) : 0; document.getElementById('r-perc').innerText = perc + "%"; let grade = "F"; let status = "FAIL"; const pVal = max > 0 ? (obt/max)*100 : 0; if(pVal >= 80) grade = "A+"; else if(pVal >= 70) grade = "A"; else if(pVal >= 60) grade = "B"; else if(pVal >= 50) grade = "C"; else if(pVal >= 40) grade = "D"; if(pVal >= 40) status = "PASS"; document.getElementById('r-grade').innerText = grade; document.getElementById('r-status').innerHTML = status; document.getElementById('exam-view').style.display = 'none'; document.getElementById('result-view').style.display = 'block'; window.scrollTo(0,0); } function getRandom(arr, n, m) { return [...arr].sort(()=>0.5-Math.random()).slice(0,n).map(x=>({...x, m:m})); } function dlPDF() { const { jsPDF } = window.jspdf; const element = document.getElementById('cert-area'); const originalWidth = element.style.width; element.style.width = "794px"; html2canvas(element, { scale: 2, useCORS: true }).then(canvas => { element.style.width = originalWidth; const imgData = canvas.toDataURL('image/jpeg', 1.0); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = 210; const imgHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, imgHeight); pdf.save('Computer_Science_Result.pdf'); }); } function dlImg() { const element = document.getElementById('cert-area'); const originalWidth = element.style.width; element.style.width = "794px"; html2canvas(element, { scale: 2 }).then(c => { element.style.width = originalWidth; const a = document.createElement('a'); a.download = 'Result_Card.png'; a.href = c.toDataURL(); a.click(); }); }