Learn Urdu Writing /* SCOPED CSS */ #urdu-widget-container { font-family: 'Noto Nastaliq Urdu', serif; max-width: 100%; margin: 20px 0; background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #e0e0e0; position: relative; z-index: 1; --u-royal-green: #0f4c3a; --u-royal-gold: #c5a059; --u-paper: #fdfbf7; } /* Header */ .u-header { background: var(--u-royal-green); color: white; padding: 15px; text-align: center; border-bottom: 4px solid var(--u-royal-gold); } .u-header h2 { margin: 0; font-size: 1.8em; color: var(--u-royal-gold); } .u-header p { margin: 0; font-family: 'Playfair Display', serif; font-size: 0.9em; opacity: 0.9; color: #fff; } /* Instruction Banner */ .u-instruction { background: #fff3cd; color: #856404; padding: 15px; text-align: center; font-size: 1.2em; border-bottom: 1px solid #ffeeba; direction: rtl; line-height: 1.6; } .u-instruction i { margin-left: 8px; color: var(--u-royal-green); } /* Toolbar */ .u-toolbar { padding: 10px; background: #f9f9f9; display: flex; justify-content: center; gap: 10px; border-bottom: 1px solid #eee; flex-wrap: wrap; } .u-tool-btn { background: white; border: 1px solid #ccc; color: #666; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; font-size: 16px; } .u-tool-btn.active { background: var(--u-royal-green); border-color: var(--u-royal-green); color: white; transform: scale(1.1); } .btn-mode { border-color: #8e44ad; color: #8e44ad; width: auto; padding: 0 15px; border-radius: 20px; font-weight: bold; } .btn-mode:hover { background: #8e44ad; color: white; } /* Canvas */ .u-canvas-frame { background: #e0e0e0; padding: 20px; display: flex; justify-content: center; position: relative; } .u-paper-shadow { background: var(--u-paper); box-shadow: 0 5px 15px rgba(0,0,0,0.15); width: 100%; max-width: 600px; border-radius: 2px; } #urdu-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; background: var(--u-paper); /* CLEAN BLANK BACKGROUND */ } /* Navigation */ .u-controls { padding: 15px; display: flex; justify-content: space-between; align-items: center; background: white; border-top: 1px solid #eee; } .u-nav-btn { background: white; border: 2px solid var(--u-royal-green); color: var(--u-royal-green); padding: 8px 20px; border-radius: 20px; font-weight: bold; cursor: pointer; font-family: 'Playfair Display', serif; } .u-badge { width: 50px; height: 50px; background: var(--u-royal-gold); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto; box-shadow: 0 4px 10px rgba(197, 160, 89, 0.4); } /* Quiz */ .u-quiz-area { background: #f8f9fa; padding: 15px; border-top: 1px solid #e9ecef; text-align: center; display: block; } .u-quiz-q { font-size: 1.2em; color: var(--u-royal-green); margin-bottom: 10px; font-weight: bold; } .u-quiz-opts { display: flex; gap: 10px; justify-content: center; } .u-q-btn { flex: 1; max-width: 200px; padding: 10px; border: 1px solid #ccc; background: white; border-radius: 5px; cursor: pointer; font-family: 'Noto Nastaliq Urdu', serif; font-size: 1em; transition: 0.3s; } .correct-ans { background-color: #27ae60 !important; color: white; border-color: #27ae60; } .wrong-ans { background-color: #e74c3c !important; color: white; border-color: #e74c3c; } اردو خوش خطی Premium Handwriting Academy Loading... Sentences Prev ا 1/38 Next Quiz Question? Option 1 Option 2 var urduWidget = (function() { // --- CONSTANTS --- const ROW_HEIGHT = 120; // Spacing logic remains for organization // --- DATA --- const lettersData = [ { c: "ا", i: "اوپر سے نیچے بالکل سیدھی لکیر کھینچیں۔", q: "الف کی شکل کیسی ہوتی ہے؟", o1: "سیدھی", o2: "گول", a: 1 }, { c: "ب", i: "کشتی جیسی شکل بنائیں اور نیچے ایک نقطہ لگائیں۔", q: "ب کا نقطہ کہاں ہوتا ہے؟", o1: "نیچے", o2: "اوپر", a: 1 }, { c: "پ", i: "کشتی بنائیں اور نیچے تین نقطے لگائیں۔", q: "پ کے کتنے نقطے ہوتے ہیں؟", o1: "ایک", o2: "تین", a: 2 }, { c: "ت", i: "کشتی بنائیں اور اوپر دو نقطے لگائیں۔", q: "ت کے نقطے کہاں ہوتے ہیں؟", o1: "اوپر", o2: "نیچے", a: 1 }, { c: "ٹ", i: "کشتی بنائیں اور اوپر چھوٹی 'ط' بنائیں۔", q: "ٹ پر کیا ہوتا ہے؟", o1: "نقطہ", o2: "چھوٹی ط", a: 2 }, { c: "ث", i: "کشتی بنائیں اور اوپر تین نقطے لگائیں۔", q: "ث کے کتنے نقطے ہیں؟", o1: "دو", o2: "تین", a: 2 }, { c: "ج", i: "سات (7) کی شکل اور پھر گول پیٹ، اندر ایک نقطہ۔", q: "ج کا نقطہ کہاں ہوتا ہے؟", o1: "پیٹ میں", o2: "باہر", a: 1 }, { c: "چ", i: "جیم جیسی شکل، پیٹ میں تین نقطے۔", q: "چ کے کتنے نقطے ہیں؟", o1: "تین", o2: "ایک", a: 1 }, { c: "ح", i: "جیم جیسی شکل لیکن کوئی نقطہ نہیں۔", q: "کیا ح کا نقطہ ہوتا ہے؟", o1: "ہاں", o2: "نہیں", a: 2 }, { c: "خ", i: "جیم جیسی شکل، سر کے اوپر ایک نقطہ۔", q: "خ کا نقطہ کہاں ہے؟", o1: "نیچے", o2: "اوپر", a: 2 }, { c: "د", i: "گولائی میں موڑیں، آدھے دائرے کی طرح۔", q: "دال کی کمر کیسی ہے؟", o1: "گول", o2: "سیدھی", a: 1 }, { c: "ڈ", i: "دال کے اوپر چھوٹی 'ط' بنائیں۔", q: "ڈال کی پہچان کیا ہے؟", o1: "نقطہ", o2: "ط", a: 2 }, { c: "ذ", i: "دال کے اوپر ایک نقطہ لگائیں۔", q: "ذال کے کتنے نقطے ہیں؟", o1: "ایک", o2: "دو", a: 1 }, { c: "ر", i: "اوپر سے نیچے ترچھی لکیر (سلائیڈ)۔", q: "رے کی شکل کیسی ہے؟", o1: "سلائیڈ", o2: "دائرہ", a: 1 }, { c: "ڑ", i: "رے بنائیں اور اوپر چھوٹی 'ط' لگائیں۔", q: "ڑے پر کیا ہوتا ہے؟", o1: "ط", o2: "نقطہ", a: 1 }, { c: "ز", i: "رے بنائیں اور اوپر ایک نقطہ لگائیں۔", q: "زے کا نقطہ کہاں ہے؟", o1: "اوپر", o2: "نیچے", a: 1 }, { c: "ژ", i: "رے بنائیں اور اوپر تین نقطے لگائیں۔", q: "ژے کے کتنے نقطے ہیں؟", o1: "تین", o2: "ایک", a: 1 }, { c: "س", i: "دو دندانے اور پھر گہرا دائرہ۔", q: "س کے دندانے ہوتے ہیں؟", o1: "ہاں", o2: "نہیں", a: 1 }, { c: "ش", i: "س کی طرح، اوپر تین نقطے۔", q: "شین اور سین میں فرق؟", o1: "نقطے", o2: "دائرہ", a: 1 }, { c: "ص", i: "بیج جیسی آنکھ اور گہرا دائرہ۔", q: "ص کا سر کیسا ہے؟", o1: "بیج جیسا", o2: "گول", a: 1 }, { c: "ض", i: "ص بنائیں اور اوپر ایک نقطہ لگائیں۔", q: "ض کا نقطہ کہاں ہے؟", o1: "سر پر", o2: "پیٹ میں", a: 1 }, { c: "ط", i: "الف کھینچیں اور نیچے بیج جوڑ دیں۔", q: "ط کے نقطے؟", o1: "ایک", o2: "کوئی نہیں", a: 2 }, { c: "ظ", i: "ط بنائیں اور اوپر ایک نقطہ لگائیں۔", q: "ظ کے کتنے نقطے ہیں؟", o1: "ایک", o2: "دو", a: 1 }, { c: "ع", i: "چھوٹا سر اور بڑا گول پیٹ۔", q: "ع کا سر کیسا ہے؟", o1: "کھلا", o2: "بند", a: 1 }, { c: "غ", i: "عین بنائیں اور اوپر ایک نقطہ لگائیں۔", q: "غین کا نقطہ کہاں ہے؟", o1: "اوپر", o2: "نیچے", a: 1 }, { c: "ف", i: "گول سر اور پھر کشتی والا جسم۔", q: "ف کا جسم کیسا ہے؟", o1: "بے جیسا", o2: "ن جیسا", a: 1 }, { c: "ق", i: "گول سر، گہرا دائرہ اور دو نقطے۔", q: "ق کے کتنے نقطے ہیں؟", o1: "دو", o2: "ایک", a: 1 }, { c: "ک", i: "لمبا الف، کشتی اور ایک کش۔", q: "کاف کی کتنی کش ہیں؟", o1: "ایک", o2: "دو", a: 1 }, { c: "گ", i: "کاف جیسا، لیکن دو کش لگائیں۔", q: "گاف کی کش؟", o1: "دو", o2: "ایک", a: 1 }, { c: "ل", i: "لمبا ڈنڈا اور گہرا دائرہ۔", q: "لام کی شکل کس جیسی ہے؟", o1: "چھڑی", o2: "کشتی", a: 1 }, { c: "م", i: "چھوٹی تکون اور سیدھی لکیر نیچے۔", q: "میم کا سر کیسا ہے؟", o1: "تکون", o2: "گول", a: 1 }, { c: "ن", i: "پیالہ بنائیں اور درمیان میں نقطہ۔", q: "ن کا نقطہ کہاں ہوتا ہے؟", o1: "درمیان", o2: "باہر", a: 1 }, { c: "و", i: "گول سر اور رے جیسی سلائیڈ۔", q: "واؤ کا نچلا حصہ کیسا ہے؟", o1: "رے جیسا", o2: "بے جیسا", a: 1 }, { c: "ہ", i: "چھوٹا سا گول ہک (Hook)۔", q: "یہ کونسی ہے ہے؟", o1: "گول ہے", o2: "دوچشمی", a: 1 }, { c: "ء", i: "عین کے سر جیسا چھوٹا نشان۔", q: "ہمزہ کی شکل؟", o1: "عین جیسی", o2: "میم جیسی", a: 1 }, { c: "ی", i: "ایس (S) جیسی شکل اور بڑا پیالہ۔", q: "چھوٹی ی کا دائرہ؟", o1: "بڑا", o2: "چھوٹا", a: 1 }, { c: "ے", i: "لمبی اور بڑی کشتی (وادی)۔", q: "بڑی ے کی شکل؟", o1: "لمبی", o2: "گول", a: 1 } ]; // 15 PARAGRAPHS - 5 LINES EACH const paragraphData = [ { lines: ["میرا نام علی ہے۔", "میں لاہور میں رہتا ہوں۔", "میری عمر دس سال ہے۔", "مجھے کرکٹ پسند ہے۔", "میں ڈاکٹر بننا چاہتا ہوں۔"], i: "تعارف: ان جملوں کو دہرائیں (Introduction)", badge: "1" }, { lines: ["ہمیشہ سچ بولو۔", "والدین کا ادب کرو۔", "جھوٹ بری عادت ہے۔", "دوسروں کی مدد کرو۔", "بڑوں کا احترام کرو۔"], i: "اخلاقیات: سچائی اور ادب (Moral Values)", badge: "2" }, { lines: ["علم بڑی دولت ہے۔", "محنت کامیابی کی کنجی ہے۔", "وقت کی قدر کرو۔", "صبر کا پھل میٹھا ہے۔", "اتفاق میں برکت ہے۔"], i: "اقوال زریں: علم اور محنت (Golden Words)", badge: "3" }, { lines: ["تندرستی ہزار نعمت ہے۔", "ورزش صحت کے لیے ضروری ہے۔", "صاف پانی پیو۔", "سبزیاں اور پھل کھاؤ۔", "صفائی نصف ایمان ہے۔"], i: "صحت: تندرستی اور ورزش (Health)", badge: "4" }, { lines: ["میرا وطن پاکستان ہے۔", "یہ بہت خوبصورت ملک ہے۔", "اس کا پرچم سبز ہے۔", "ہمیں اس سے محبت ہے۔", "خدا اس کی حفاظت کرے۔"], i: "حب الوطنی: میرا پاکستان (Patriotism)", badge: "5" }, { lines: ["صبح کی سیر مفید ہے۔", "پرندے چہچہاتے ہیں۔", "تازہ ہوا چلتی ہے۔", "سورج نکل رہا ہے۔", "ہر طرف ہریالی ہے۔"], i: "صبح کا منظر (Morning Scene)", badge: "6" }, { lines: ["بہار کا موسم پیارا ہے۔", "پھول کھلتے ہیں۔", "باغ خوبصورت لگتے ہیں۔", "خوشبو پھیلتی ہے۔", "موسم خوشگوار ہوتا ہے۔"], i: "موسم بہار (Spring Season)", badge: "7" }, { lines: ["میرا ایک دوست ہے۔", "وہ بہت مخلص ہے۔", "ہم ساتھ کھیلتے ہیں۔", "وہ پڑھائی میں اچھا ہے۔", "ہم ایک دوسرے کی مدد کرتے ہیں۔"], i: "دوستی (Friendship)", badge: "8" }, { lines: ["کتاب بہترین دوست ہے۔", "اس سے علم ملتا ہے۔", "مجھے کہانیاں پسند ہیں۔", "کتابوں کی حفاظت کرو۔", "مطالعہ اچھی عادت ہے۔"], i: "کتابیں (Books)", badge: "9" }, { lines: ["استاد روحانی باپ ہے۔", "ان کا حکم مانو۔", "وہ ہمیں علم دیتے ہیں۔", "استاد کا احترام کرو۔", "یہ کامیابی کا راستہ ہے۔"], i: "استاد کا احترام (Respect Teacher)", badge: "10" }, { lines: ["پانی زندگی ہے۔", "اسے ضائع نہ کرو۔", "صاف پانی پیو۔", "پودوں کو پانی دو۔", "پانی اللہ کی نعمت ہے۔"], i: "پانی کی اہمیت (Importance of Water)", badge: "11" }, { lines: ["درخت ہمیں آکسیجن دیتے ہیں۔", "یہ سایہ فراہم کرتے ہیں۔", "درخت ماحول صاف رکھتے ہیں۔", "نئے پودے لگاؤ۔", "ان کی دیکھ بھال کرو۔"], i: "درخت اور ماحول (Trees)", badge: "12" }, { lines: ["ماں کے قدموں تلے جنت ہے۔", "ماں بہت پیار کرتی ہے۔", "ان کی خدمت کرو۔", "ان کی دعا لو۔", "ماں کا کوئی نعم البدل نہیں۔"], i: "ماں کی شان (Mother)", badge: "13" }, { lines: ["وقت پر کام کرو۔", "قطار میں کھڑے ہو۔", "شور مت کرو۔", "اصولوں کی پابندی کرو۔", "نظم و ضبط کامیابی ہے۔"], i: "نظم و ضبط (Discipline)", badge: "14" }, { lines: ["کھیل صحت کے لیے اچھے ہیں۔", "مجھے کرکٹ پسند ہے۔", "ٹیم ورک سیکھو۔", "ہار جیت کھیل کا حصہ ہے۔", "کھیل سے جسم توانا رہتا ہے۔"], i: "کھیل (Sports)", badge: "15" } ]; let isParagraphMode = false; let idx = 0; let tool = 'pencil'; let isDrawing = false; const canvas = document.getElementById('urdu-canvas'); const ctx = canvas.getContext('2d'); const badge = document.getElementById('u-badge'); const instr = document.getElementById('u-instr-text'); const count = document.getElementById('u-count'); const quizArea = document.getElementById('u-quiz-area'); const qq = document.getElementById('u-quiz-q'); const qo1 = document.getElementById('q-opt1'); const qo2 = document.getElementById('q-opt2'); const modeBtn = document.getElementById('u-mode-btn'); function init() { document.fonts.ready.then(() => drawGrid()); updateUI(); } function speak(text) { if ('speechSynthesis' in window) { window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(text); u.lang = 'ur-PK'; u.rate = 0.9; window.speechSynthesis.speak(u); } } function toggleMode() { isParagraphMode = !isParagraphMode; idx = 0; if(isParagraphMode) { modeBtn.innerHTML = ' Switch to Letters'; quizArea.style.display = 'none'; } else { modeBtn.innerHTML = ' Switch to Paragraphs'; quizArea.style.display = 'block'; } updateUI(); } function updateUI() { const currentData = isParagraphMode ? paragraphData : lettersData; const item = currentData[idx]; if(isParagraphMode) { badge.innerText = item.badge; badge.style.fontSize = "20px"; } else { badge.innerText = item.c; badge.style.fontSize = "28px"; } instr.innerText = item.i; count.innerText = (idx + 1) + " / " + currentData.length; if(!isParagraphMode) { qq.innerText = item.q; qo1.innerText = item.o1; qo2.innerText = item.o2; resetQuizBtns(); } drawGrid(); } function resetQuizBtns() { qo1.className = 'u-q-btn'; qo2.className = 'u-q-btn'; } function checkQuiz(opt) { if(isParagraphMode) return; const item = lettersData[idx]; const btn = (opt === 1) ? qo1 : qo2; if(opt === item.a) { btn.classList.add('correct-ans'); } else { btn.classList.add('wrong-ans'); } } function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); if(isParagraphMode) { drawParagraphMode(); } else { drawLetterMode(); } } function drawLetterMode() { const letter = lettersData[idx].c; ctx.font = "60px 'Noto Nastaliq Urdu'"; ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; const rows = 5; const cols = 3; const rowH = 120; const colW = canvas.width / cols; for(let r=0; r x.classList.remove('active')); b.classList.add('active'); }, reset: function() { drawGrid(); }, check: function(o) { checkQuiz(o); } }; })(); urduWidget.init();
