ITDCFeD – Week #7 | Interactive Quiz App + Score Tracker + Results Dashboard

 ITDCFeD – Week #7 | Interactive Quiz App + Score Tracker + Results Dashboard

---

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) پروگرام کے ساتویں ہفتے میں خوش آمدید۔ اس Week #7 میں ایک professional Interactive Quiz App بنایا جائے گا جو ITDCFeD course کے frontend concepts test کرے گی۔

یہ quiz app 10 technical questions، real-time progress tracking، animated results dashboard اور grade-based feedback سمیت مکمل educational tool ہے جو آپ کے portfolio میں production-ready component بنے گا۔

---

2. اس لیکچر / پروجیکٹ کے اہداف

Week #7 کے اختتام تک آپ:

• Quiz Data Structure بنانا سیکھیں گے (questions array + correct index)

• Dynamic Question Loading (loadQuestion() + DOM generation)

• Option Selection Logic (single selection + visual feedback)

• Progress Tracking (progress bar + question counter)

• Results Dashboard (score calculation + grade cards + conic-gradient circle)

• State Management (currentQuestion, score, selectedAnswers arrays)

---

3. Live Demo اور Source Code (CodePen)

🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/MYeweqe

استعمال کا طریقہ:

• Quiz شروع کریں - پہلا سوال خود بخود load ہوگا

• Option select کریں (click پر green highlight) → "اگلا سوال" enable ہوگا

• Progress bar real-time update ہوگا (سوال 1/10 → 10/10)

• Quiz مکمل ہونے پر Results Dashboard + Grade Card دکھے گا

• Restart button سے دوبارہ quiz دیں

• Mobile پر responsive test کریں

---

4. پروجیکٹ کی ساخت – Step-by-Step وضاحت

4.1 HTML – Quiz Layout

text
- Progress Bar: #quizProgress + سوال counter
- Question Section: سوال text + options container + next button
- Results Section: Final score + animated circle + 4 grade cards + restart

4.2 CSS – Modern Quiz Design

text
✅ Conic-gradient Circle: score percentage visualization
✅ Progress Bar: Animated width transition
✅ Option States: hover → selected → correct/incorrect (3 colors)
✅ Glassmorphism Cards: backdrop-filter + rgba backgrounds
✅ Responsive: Mobile-friendly spacing + font sizes

4.3 JavaScript – Quiz Logic

text
1. quizData: 10 ITDCFeD frontend questions (CSS Grid, Flexbox, JS methods)
2. loadQuestion(): Dynamic DOM generation + event listeners
3. selectOption(): Single selection + visual feedback + nextBtn enable
4. nextQuestion(): Score calculation + question transition
5. showResults(): Percentage + grade card logic + animations
6. State: currentQuestion, score, selectedAnswers[] arrays

اہم JS Features:

• dataset.index سے correct answer tracking

• Visual feedback (correct/green, incorrect/red)

• classList.add/remove/toggle efficient DOM manipulation

• Grade system (90%+ excellent, 70%+ good وغیرہ)

---

5. Week #7 اسائنمنٹ / Homework

لازمی کام (سب کریں):

1. CodePen Fork کریں: https://codepen.io/mmshahid73/pen/MYeweqe

2. 5 نئے Questions add کریں quizData array میں (HTML/CSS/JS topics)

3. Visual Customization (2 changes):

   • Colors/gradients بدلیں

   • Option hover effects یا progress bar style

4. Quiz لے کر Screenshot لیں (آپ کا actual score)

5. Forum Share: CodePen لنک + screenshot + score Week #7 تھریڈ میں

Bonus Challenges:

• Timer add کریں (30 seconds per question)

• LocalStorage سے high score save کریں

• Difficulty levels (Easy/Medium/Hard quizzes)

• Category filter (CSS only, JS only questions)

---

6. Real-World Applications

یہ Quiz App production-ready ہے:
✅ E-learning Platforms (course assessments)
✅ Certification Exams (ITDCFeD final test)
✅ Job Portfolios (technical assessment demo)
✅ SaaS Products (onboarding quizzes)
✅ Educational Websites (practice tests)

Week #1-7 Portfolio: Personal → Form → To-Do → Pricing → Gallery → Dashboard → Quiz App = Complete Developer Skill Set!

---

7. اختتامی پیغام

Week #7 کا یہ interactive quiz app آپ کو complete frontend application development (data → UI → logic → results) سکھا دیتی ہے۔ ابھی fork کریں، اپنے 5 questions add کریں، quiz دیں، score share کریں اور ITDCFeD کا سب سے valuable portfolio piece مکمل کریں!