← Previous 73 of 86 Next →

المفغول به

📦 النحو الواضح
✨ The Prompt Phrase 
المفعول به ~اسم منصوب وقع عليه فعل~ الفاعل

💻 Code Preview

📦 All-in-One Code 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>المفعول به - دليل تفاعلي</title>
  <style>
    :root {
      --bg: #0b1020;
      --bg2: #121a33;
      --panel: rgba(255,255,255,0.08);
      --panel-2: rgba(255,255,255,0.05);
      --text: #eef4ff;
      --muted: #b8c4e0;
      --purple: #8b5cf6;
      --blue: #38bdf8;
      --green: #34d399;
      --pink: #f472b6;
      --yellow: #facc15;
      --red: #fb7185;
      --border: rgba(255,255,255,0.14);
      --shadow: 0 20px 50px rgba(0,0,0,0.35);
      --radius: 24px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Tahoma", "Segoe UI", sans-serif;
      color: var(--text);
      min-height: 100vh;
      line-height: 1.9;
      padding: 24px;
      background:
        radial-gradient(circle at top left, rgba(139,92,246,0.24), transparent 30%),
        radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 28%),
        linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      max-width: 1220px;
      margin: 0 auto;
    }

    .theme-toggle,
    .copy-toggle,
    .tab-radio,
    .quiz input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .theme-toggle:checked ~ .page {
      --bg: #edf4ff;
      --bg2: #dde8fb;
      --panel: rgba(255,255,255,0.88);
      --panel-2: rgba(255,255,255,0.76);
      --text: #12213e;
      --muted: #4f6689;
      --border: rgba(18,33,62,0.12);
      --shadow: 0 18px 40px rgba(62,81,124,0.16);
    }

    .theme-toggle:checked ~ .page .nav {
      background: rgba(255,255,255,0.84);
    }

    .theme-toggle:checked ~ .page .code-box,
    .theme-toggle:checked ~ .page .hero-code,
    .theme-toggle:checked ~ .page .tooltip::after {
      background: #eef4ff;
      color: #12213e;
    }

    .nav {
      position: sticky;
      top: 16px;
      z-index: 20;
      margin-bottom: 24px;
      padding: 12px 16px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(11,16,32,0.74);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
    }

    .nav a {
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      transition: 0.22s ease;
      font-size: 0.95rem;
    }

    .nav a:hover,
    .nav a:focus {
      background: rgba(255,255,255,0.08);
      color: var(--text);
      outline: none;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 42px 28px;
      border-radius: 32px;
      background: linear-gradient(145deg, rgba(139,92,246,0.18), rgba(56,189,248,0.12));
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      margin-bottom: 24px;
      animation: fadeUp 0.8s ease;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(24px);
      opacity: 0.45;
      pointer-events: none;
    }

    .hero::before {
      width: 220px;
      height: 220px;
      background: rgba(139,92,246,0.28);
      top: -70px;
      left: -50px;
    }

    .hero::after {
      width: 180px;
      height: 180px;
      background: rgba(52,211,153,0.18);
      right: -40px;
      bottom: -50px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.09);
      color: var(--muted);
      font-size: 0.92rem;
    }

    h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      line-height: 1.2;
      margin-bottom: 14px;
    }

    .gradient-text {
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 850px;
      margin-bottom: 20px;
    }

    .hero-code,
    .code-box {
      background: rgba(5,10,24,0.82);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 18px;
      overflow-x: auto;
    }

    .hero-code {
      margin-bottom: 18px;
      font-size: 1.2rem;
      font-weight: 700;
      color: #dbeafe;
      text-align: center;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .btn,
    .copy-label,
    .theme-label,
    .tab-label,
    .option {
      transition: 0.22s ease;
    }

    .btn,
    .copy-label,
    .theme-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--border);
      font-weight: 700;
      cursor: pointer;
    }

    .btn {
      background: linear-gradient(135deg, var(--purple), var(--blue));
      color: white;
    }

    .btn:hover,
    .copy-label:hover,
    .theme-label:hover {
      transform: translateY(-2px);
    }

    .copy-label,
    .theme-label {
      background: rgba(255,255,255,0.08);
      color: var(--text);
    }

    .copy-text-done,
    .theme-text-alt {
      display: none;
    }

    .copy-toggle:checked + .copy-label .copy-text-default,
    .theme-toggle:checked + .page .theme-label .theme-text-default {
      display: none;
    }

    .copy-toggle:checked + .copy-label .copy-text-done,
    .theme-toggle:checked + .page .theme-label .theme-text-alt {
      display: inline;
    }

    .copy-toggle:checked + .copy-label {
      background: linear-gradient(135deg, var(--green), #10b981);
      color: #052515;
    }

    .progress-card {
      margin-top: 18px;
      display: grid;
      gap: 10px;
      max-width: 600px;
    }

    .progress-bar {
      width: 100%;
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border);
    }

    .progress-bar span {
      display: block;
      width: 80%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
      animation: loadBar 1.5s ease;
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .badge {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.92rem;
    }

    .layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 24px;
    }

    .stack {
      display: grid;
      gap: 24px;
    }

    .card {
      padding: 24px;
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid var(--border);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      animation: fadeUp 0.8s ease;
    }

    .card h2 {
      font-size: 1.45rem;
      margin-bottom: 10px;
    }

    .card h3 {
      font-size: 1.08rem;
      margin-bottom: 8px;
    }

    .muted {
      color: var(--muted);
    }

    .story,
    .list li,
    .step,
    .annotated div,
    .quiz-question,
    .mini-card {
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .story {
      padding: 18px;
      border-radius: 18px;
      margin-top: 16px;
      background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(52,211,153,0.08));
    }

    .list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .list li {
      list-style: none;
      padding: 14px 16px;
      border-radius: 16px;
    }

    .tooltip {
      position: relative;
      color: #c4b5fd;
      border-bottom: 1px dashed rgba(255,255,255,0.45);
      cursor: help;
    }

    .tooltip::after {
      content: attr(data-tip);
      position: absolute;
      right: 50%;
      transform: translateX(50%);
      bottom: 140%;
      width: 220px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #08101f;
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      font-size: 0.86rem;
      line-height: 1.6;
      opacity: 0;
      pointer-events: none;
    }

    .tooltip:hover::after,
    .tooltip:focus::after {
      opacity: 1;
    }

    details {
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 14px 16px;
    }

    details + details {
      margin-top: 12px;
    }

    summary {
      cursor: pointer;
      list-style: none;
      font-weight: 700;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "＋";
      float: left;
      color: var(--blue);
    }

    details[open] summary::after {
      content: "－";
    }

    .step-grid,
    .annotated {
      display: grid;
      gap: 14px;
      margin-top: 16px;
    }

    .step {
      display: grid;
      grid-template-columns: 1fr 48px;
      gap: 14px;
      padding: 14px;
      border-radius: 18px;
    }

    .step-number {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--purple), var(--blue));
    }

    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    .tab-label {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      color: var(--muted);
      cursor: pointer;
      font-weight: 600;
    }

    .tab-label:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text);
    }

    .tab-panel {
      display: none;
      padding: 18px;
      border-radius: 18px;
      background: var(--panel-2);
      border: 1px solid rgba(255,255,255,0.08);
    }

    #tab1:checked ~ .tabs .label1,
    #tab2:checked ~ .tabs .label2,
    #tab3:checked ~ .tabs .label3 {
      background: linear-gradient(135deg, var(--purple), var(--blue));
      color: white;
    }

    #tab1:checked ~ .panels .panel1,
    #tab2:checked ~ .panels .panel2,
    #tab3:checked ~ .panels .panel3 {
      display: block;
    }

    .token-main { color: #93c5fd; font-weight: 700; }
    .token-note { color: #86efac; }
    .token-rule { color: #f9a8d4; }

    .mistake {
      border-right: 4px solid var(--red);
    }

    .tip {
      border-right: 4px solid var(--green);
    }

    .quiz-question {
      padding: 18px;
      border-radius: 18px;
      margin-bottom: 16px;
    }

    .option {
      display: block;
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
    }

    .option:hover {
      background: rgba(255,255,255,0.08);
    }

    .feedback {
      display: none;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      font-weight: 700;
    }

    .correct {
      background: rgba(52,211,153,0.16);
      border: 1px solid rgba(52,211,153,0.35);
      color: #bbf7d0;
    }

    .wrong {
      background: rgba(251,113,133,0.14);
      border: 1px solid rgba(251,113,133,0.35);
      color: #fecdd3;
    }

    #q1b:checked ~ .f1b,
    #q2a:checked ~ .f2a,
    #q3c:checked ~ .f3c {
      display: block;
      position: relative;
    }

    #q1b:checked ~ .f1b::after,
    #q2a:checked ~ .f2a::after,
    #q3c:checked ~ .f3c::after {
      content: "🎉 ✨ 🎊";
      display: block;
      margin-top: 8px;
      animation: pop 0.45s ease;
    }

    #q1a:checked ~ .f1a,
    #q1c:checked ~ .f1c,
    #q2b:checked ~ .f2b,
    #q2c:checked ~ .f2c,
    #q3a:checked ~ .f3a,
    #q3b:checked ~ .f3b {
      display: block;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 16px;
    }

    .mini-card {
      padding: 16px;
      border-radius: 18px;
    }

    .footer {
      text-align: center;
      color: var(--muted);
      padding: 30px 10px 10px;
      font-size: 0.95rem;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes loadBar {
      from { width: 0; }
      to { width: 80%; }
    }

    @keyframes pop {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 920px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .summary-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 32px 20px;
      }

      .step {
        grid-template-columns: 1fr;
      }

      .step-number {
        order: -1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }
  </style>
</head>
<body>
  <input class="theme-toggle" id="themeToggle" type="checkbox">

  <div class="page">
    <nav class="nav" aria-label="أقسام الدرس">
      <a href="#what">ما هو؟</a>
      <a href="#why">لماذا نستخدمه؟</a>
      <a href="#how">كيف يعمل؟</a>
      <a href="#demo">أمثلة</a>
      <a href="#breakdown">تفكيك العبارة</a>
      <a href="#mistakes">أخطاء شائعة</a>
      <a href="#tips">نصائح</a>
      <a href="#quiz">اختبار</a>
      <a href="#summary">الخلاصة</a>
    </nav>

    <header class="hero">
      <div class="eyebrow">📚 نحو عربي • 🎮 تعلم ممتع • ✨ للمبتدئين</div>
      <h1>تعلّم <span class="gradient-text">المفعول به</span> بسهولة</h1>
      <p>
        سنتعرّف هنا على قاعدة نحوية مهمة جدًا:
        <span class="tooltip" tabindex="0" data-tip="المفعول به هو الاسم الذي يقع عليه فعل الفاعل، ويكون منصوبًا في الغالب.">المفعول به</span>
        هو <strong>اسم منصوب وقع عليه فعل الفاعل</strong>.
        ببساطة: الفاعل هو الذي قام بالفعل، أمّا المفعول به فهو الشيء أو الشخص الذي وقع عليه هذا الفعل. 🌟
      </p>

      <div class="hero-code" aria-label="القاعدة النحوية">المفعول به اسم منصوب وقع عليه فعل الفاعل</div>

      <div class="hero-actions">
        <a class="btn" href="#quiz">🚀 ابدأ الرحلة</a>

        <div>
          <input class="copy-toggle" id="copyHero" type="checkbox">
          <label class="copy-label" for="copyHero" aria-label="زر نسخ شكلي">
            <span class="copy-text-default">📋 نسخ القاعدة</span>
            <span class="copy-text-done">✅ تم تجهيز النص</span>
          </label>
        </div>

        <div>
          <label class="theme-label" for="themeToggle" aria-label="تبديل النمط">
            <span class="theme-text-default">🌙 داكن / ☀️ فاتح</span>
            <span class="theme-text-alt">☀️ النمط الفاتح مفعّل</span>
          </label>
        </div>
      </div>

      <div class="progress-card">
        <div class="muted">مؤشر التقدم: أنت تقترب من إتقان الفرق بين الفاعل والمفعول به.</div>
        <div class="progress-bar" aria-label="مؤشر التقدم"><span></span></div>
        <div class="badges">
          <div class="badge">🧠 مهارة: تمييز المفعول به</div>
          <div class="badge">⭐ المستوى: مبتدئ</div>
          <div class="badge">🏅 الهدف: فهم الجملة الفعلية بدقة</div>
        </div>
      </div>
    </header>

    <div class="layout">
      <main class="stack">
        <section class="card" id="what">
          <h2>🤔 ما هو المفعول به؟</h2>
          <p class="muted">
            المفعول به هو الاسم الذي يقع عليه فعل الفاعل، ويكون منصوبًا في الجملة.
          </p>
          <div class="story">
            <strong>قصة صغيرة:</strong> تخيّل أن الفاعل هو اللاعب ⚽، والفعل هو الحركة، والمفعول به هو الكرة التي تلقّت هذه الحركة.
            فإذا قلنا: <strong>ركلَ اللاعبُ الكرةَ</strong>، فاللاعبُ هو الذي فعل، والكرةَ هي التي وقع عليها الفعل، لذلك فهي المفعول به.
          </div>
          <ul class="list">
            <li>📌 المفعول به <strong>اسم</strong>.</li>
            <li>📌 يكون <strong>منصوبًا</strong>.</li>
            <li>📌 يقع عليه <strong>فعل الفاعل</strong>.</li>
            <li>📌 يساعدنا على فهم من تأثر بالفعل في الجملة.</li>
          </ul>
        </section>

        <section class="card" id="why">
          <h2>🌟 لماذا نتعلّم هذه القاعدة؟</h2>
          <p class="muted">
            لأن المفعول به جزء أساسي من الجملة الفعلية، وفهمه يجعل الإعراب والمعنى أوضح وأسهل.
          </p>
          <ul class="list">
            <li>📖 يساعدك على فهم معنى الجملة بدقة.</li>
            <li>✍️ يحسن قدرتك على الإعراب الصحيح.</li>
            <li>🎯 يجعلك تفرّق بين الفاعل والمفعول به بسهولة.</li>
            <li>🧭 يفيدك في القراءة والكتابة والتعبير السليم.</li>
          </ul>
        </section>

        <section class="card" id="how">
          <h2>🧩 كيف نحدد المفعول به؟</h2>
          <p class="muted">اتبع هذه الخطوات البسيطة للعثور على المفعول به داخل الجملة:</p>
          <div class="step-grid">
            <div class="step">
              <div>
                <h3>ابحث عن الفعل</h3>
                <p class="muted">ابدأ أولًا بتحديد الفعل الموجود في الجملة.</p>
              </div>
              <div class="step-number">1</div>
            </div>
            <div class="step">
              <div>
                <h3>اعرف الفاعل</h3>
                <p class="muted">حدّد من الذي قام بالفعل، لأننا بعد ذلك سنبحث عمّا وقع عليه هذا الفعل.</p>
              </div>
              <div class="step-number">2</div>
            </div>
            <div class="step">
              <div>
                <h3>اسأل: ماذا؟ أو مَن؟</h3>
                <p class="muted">بعد معرفة الفاعل والفعل، اسأل: ماذا فعل؟ أو مَن وقع عليه الفعل؟</p>
              </div>
              <div class="step-number">3</div>
            </div>
            <div class="step">
              <div>
                <h3>ابحث عن الاسم المنصوب</h3>
                <p class="muted">الاسم الذي وقعت عليه نتيجة الفعل، ويكون منصوبًا، هو المفعول به.</p>
              </div>
              <div class="step-number">4</div>
            </div>
          </div>
        </section>

        <section class="card" id="demo">
          <h2>🎮 أمثلة حيّة</h2>

          <input class="tab-radio" type="radio" name="tabs" id="tab1" checked>
          <input class="tab-radio" type="radio" name="tabs" id="tab2">
          <input class="tab-radio" type="radio" name="tabs" id="tab3">

          <div class="tabs" role="tablist" aria-label="تبويبات الأمثلة">
            <label class="tab-label label1" for="tab1">📘 مثال 1</label>
            <label class="tab-label label2" for="tab2">📝 مثال 2</label>
            <label class="tab-label label3" for="tab3">🌸 مثال 3</label>
          </div>

          <div class="panels">
            <div class="tab-panel panel1">
              <p><strong>الجملة:</strong> كتبَ الطالبُ الدرسَ.</p>
              <div class="code-box">الفعل: كتبَ
الفاعل: الطالبُ
المفعول به: الدرسَ</div>
              <p class="muted">الدرسَ هو الشيء الذي وقع عليه فعل الكتابة، لذلك هو المفعول به.</p>
            </div>

            <div class="tab-panel panel2">
              <p><strong>الجملة:</strong> قرأَ الطفلُ القصةَ.</p>
              <div class="code-box">الفعل: قرأَ
الفاعل: الطفلُ
المفعول به: القصةَ</div>
              <p class="muted">القصةَ هي التي وقع عليها فعل القراءة.</p>
            </div>

            <div class="tab-panel panel3">
              <p><strong>الجملة:</strong> سقى الفلّاحُ الزرعَ.</p>
              <div class="code-box">الفعل: سقى
الفاعل: الفلّاحُ
المفعول به: الزرعَ</div>
              <p class="muted">الزرعَ هو الذي وقع عليه فعل السقي، لذلك نعربه مفعولًا به.</p>
            </div>
          </div>
        </section>

        <section class="card" id="breakdown">
          <h2>🧪 تفكيك العبارة</h2>
          <div class="code-box" aria-label="تفكيك القاعدة">
            <span class="token-main">المفعول به</span> <span class="token-note">اسم منصوب</span> <span class="token-rule">وقع عليه فعل الفاعل</span>
          </div>

          <div class="annotated">
            <div><strong>المفعول به</strong> → الاسم الذي تأثر بالفعل.</div>
            <div><strong>اسم</strong> → ليس فعلًا ولا حرفًا.</div>
            <div><strong>منصوب</strong> → تظهر عليه علامة النصب أو ما ينوب عنها.</div>
            <div><strong>وقع عليه فعل الفاعل</strong> → أي أن الفاعل قام بالفعل، والمفعول به تلقّى أثر هذا الفعل.</div>
          </div>
        </section>

        <section class="card" id="mistakes">
          <h2>🚫 أخطاء شائعة</h2>
          <details open>
            <summary>الخلط بين الفاعل والمفعول به</summary>
            <div class="annotated">
              <div class="mistake">الفاعل هو الذي قام بالفعل، أما المفعول به فهو الذي وقع عليه الفعل. لا تخلط بينهما.</div>
            </div>
          </details>
          <details>
            <summary>نسيان أن المفعول به منصوب</summary>
            <div class="annotated">
              <div class="mistake">من أهم علامات المفعول به أنه منصوب، فلا يُعرب مرفوعًا إذا كان مفعولًا به.</div>
            </div>
          </details>
          <details>
            <summary>اعتبار كل اسم بعد الفعل مفعولًا به</summary>
            <div class="annotated">
              <div class="mistake">ليس كل اسم بعد الفعل مفعولًا به؛ فقد يكون فاعلًا أو ظرفًا أو غير ذلك. افهم معنى الجملة أولًا.</div>
            </div>
          </details>
        </section>

        <section class="card" id="tips">
          <h2>💡 نصائح ذهبية</h2>
          <div class="annotated">
            <div class="tip">🎯 ابدأ أولًا بتحديد الفعل، ثم الفاعل، وبعدها سيكون المفعول به أوضح.</div>
            <div class="tip">❓ استخدم سؤال <strong>ماذا؟</strong> أو <strong>مَن؟</strong> بعد الفعل لتصل إلى المفعول به.</div>
            <div class="tip">📘 أكثر من التدريب على الجمل البسيطة قبل الانتقال إلى الجمل الطويلة.</div>
            <div class="tip">🧠 راقب علامة النصب؛ فهي مفتاح مهم في اكتشاف المفعول به.</div>
          </div>
        </section>

        <section class="card quiz" id="quiz">
          <h2>🏆 اختبار سريع</h2>
          <p class="muted">اختر الإجابة الصحيحة، واستمتع باحتفال صغير عند النجاح! 🎉</p>

          <div class="quiz-question">
            <h3>1) في جملة: <strong>أكلَ الولدُ التفاحةَ</strong>، ما المفعول به؟</h3>
            <input type="radio" name="q1" id="q1a">
            <label class="option" for="q1a">الولدُ</label>

            <input type="radio" name="q1" id="q1b">
            <label class="option" for="q1b">التفاحةَ</label>

            <input type="radio" name="q1" id="q1c">
            <label class="option" for="q1c">أكلَ</label>

            <div class="feedback wrong f1a">الولدُ هو الفاعل، لأنه قام بالفعل.</div>
            <div class="feedback correct f1b">أحسنت! التفاحةَ وقع عليها فعل الأكل، فهي المفعول به.</div>
            <div class="feedback wrong f1c">هذا فعل، وليس اسمًا.</div>
          </div>

          <div class="quiz-question">
            <h3>2) ما علامة إعراب المفعول به الأصلية؟</h3>
            <input type="radio" name="q2" id="q2a">
            <label class="option" for="q2a">النصب</label>

            <input type="radio" name="q2" id="q2b">
            <label class="option" for="q2b">الرفع</label>

            <input type="radio" name="q2" id="q2c">
            <label class="option" for="q2c">الجر</label>

            <div class="feedback correct f2a">صحيح! المفعول به منصوب.</div>
            <div class="feedback wrong f2b">الرفع خاص غالبًا بالفاعل أو المبتدأ ونحوهما.</div>
            <div class="feedback wrong f2c">الجر ليس العلامة الأصلية للمفعول به.</div>
          </div>

          <div class="quiz-question">
            <h3>3) أي عبارة تصف المفعول به بدقة؟</h3>
            <input type="radio" name="q3" id="q3a">
            <label class="option" for="q3a">اسم مرفوع قام بالفعل</label>

            <input type="radio" name="q3" id="q3b">
            <label class="option" for="q3b">فعل يدل على حدث</label>

            <input type="radio" name="q3" id="q3c">
            <label class="option" for="q3c">اسم منصوب وقع عليه فعل الفاعل</label>

            <div class="feedback wrong f3a">هذا يصف الفاعل لا المفعول به.</div>
            <div class="feedback wrong f3b">هذا تعريف للفعل لا للمفعول به.</div>
            <div class="feedback correct f3c">رائع جدًا! هذا هو التعريف الصحيح.</div>
          </div>
        </section>
      </main>

      <aside class="stack">
        <section class="card">
          <h2>🪄 مهمة النحوي الصغير</h2>
          <p class="muted">
            تخيّل أنك محقق في عالم الجمل 🔍:
            لديك فعل، ثم فاعل، وتبحث الآن عن الشيء الذي تلقّى أثر الفعل.
            عندما تعثر عليه وتجد أنه اسم منصوب، فأنت أمام المفعول به!
          </p>
        </section>

        <section class="card">
          <h2>🧭 دليل سريع</h2>
          <details open>
            <summary>ما الفرق بين الفاعل والمفعول به؟</summary>
            <p class="muted" style="margin-top:12px;">الفاعل هو من قام بالفعل، أما المفعول به فهو من وقع عليه الفعل.</p>
          </details>
          <details>
            <summary>هل كل جملة فيها مفعول به؟</summary>
            <p class="muted" style="margin-top:12px;">لا، بعض الأفعال تكتفي بالفاعل ولا تحتاج إلى مفعول به.</p>
          </details>
          <details>
            <summary>كيف أكتشفه بسرعة؟</summary>
            <p class="muted" style="margin-top:12px;">بعد تحديد الفعل والفاعل، اسأل: ماذا؟ أو مَن؟ لتصل غالبًا إلى المفعول به.</p>
          </details>
        </section>

        <section class="card" id="summary">
          <h2>📌 بطاقة الخلاصة</h2>
          <p class="muted">مرجع سريع ومفيد للقاعدة.</p>
          <div class="summary-grid">
            <div class="mini-card">
              <h3>التعريف</h3>
              <p class="muted">المفعول به اسم منصوب وقع عليه فعل الفاعل.</p>
            </div>
            <div class="mini-card">
              <h3>السؤال المفتاح</h3>
              <p class="muted">ماذا؟ أو مَن؟</p>
            </div>
            <div class="mini-card">
              <h3>العلامة</h3>
              <p class="muted">النصب أو ما ينوب عنه.</p>
            </div>
            <div class="mini-card">
              <h3>تذكّر</h3>
              <p class="muted">افهم معنى الجملة أولًا حتى لا تخلط بين الفاعل والمفعول به.</p>
            </div>
          </div>
        </section>

        <section class="card">
          <h2>🎖️ لوحة الإنجاز</h2>
          <ul class="list">
            <li>🥉 <strong>مستكشف الجملة:</strong> تعرّفت إلى المفعول به.</li>
            <li>🥈 <strong>قارئ ذكي:</strong> أصبحت تميّز بين الفاعل والمفعول به.</li>
            <li>🥇 <strong>بطل النحو:</strong> صرت قادرًا على شرح القاعدة بثقة.</li>
          </ul>
        </section>
      </aside>
    </div>

    <footer class="footer">
      صُمّم هذا الدرس ليجعل النحو أوضح وأمتع 💜<br>
      generated by AI Prompt Dictionary
    </footer>
  </div>
</body>
</html>
Live Preview
← Back to Dictionary