تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: TP: استبيان تفاعلي في jQuery


الصفحة السابقة
حتى هنا أنت في TP الأول ! TP يعني "العمل العملي" . بوضوح ، سوف تتدرب على ما رأيناه للتو. بانتظام ، سأجعلك تعمل من خلال هذا النوع من التمارين ، وسوف ترى ذلك سريعًا ، وأنت تعرف الكثير.
بالطبع ، لن أطلب منك أي شيء لا يمكنك فعله. حسنًا ، لن يحدث ذلك ... قد يحدث ، لكن في هذه الحالة ، سأعطيك الخطوات للوصول إلى نهاية TP .
حسنا ، هل أنت مستعد؟ لذلك دعونا نذهب! أقترح عليك إنشاء اختبار تفاعلي متعدد الخيارات في jQuery .

تعليمات لتنفيذ TP


في هذه المرحلة الأولى ، ستقوم بتنفيذ QCM تفاعلي يبدأ من قالب HTML الذي سأقدمه لك. باستخدام تعليمات jQuery ، ستحتاج إلى تحويل هذا القالب الأساسي للحصول على شيء مشابه للصورة التالية.
jQuery web
لتحقيق هذه النتيجة ، ستحتاج إلى:
  1. إخفاء الإجابات على الأسئلة ؛
  2. تنسيق العناصر المعروضة على الشاشة ؛
  3. القيام بالرد على رابط "اختبار الإجابات" عن طريق عرض ، لكل سؤال:
    1. الرمز good.png إذا كانت الإجابة جيدة أو الرمز bad.png إذا كانت الإجابة سيئة.
    2. النص التوضيحي باللون الأخضر إذا كانت الإجابة جيدة أو باللون الأحمر إذا كانت سيئة.
عادة ، يجب أن تكون الخطوة الثالثة فقط مشكلة. وقد شوهد بالفعل الآخرين. إذا واجهت أي مشكلة ، فلا تتردد في (إعادة) قراءة الفصول السابقة.
إذا كانت الخطوة الثالثة هي التي يمكن أن تسبب لك مشكلات ، فليس ما عقدها هو صعوبتها و انما تطلبها لاستخدام تعليمات jQuery التي لم يتم رؤيتها بعد والتي تعطي التفاعل إلى QCM . يمكن أن أقصر عملك على التنسيق الخالص ، لكن كان من الاجدر حقًا عدم دمج التفاعل في هذا النموذج. لذلك سأقدم لك عبارة jQuery لاستخدامها ، دون الخوض في الموضوع أو شرح كيفية عمله.
طريقة الاستخدام هي كما يلي:

      $('a').hover(
        function() {
          // تعليمات التشغيل عند تمرير الفارة على الرابط
        },
        function() {
          // تعليمات التشغيل عند عدم تمرير الفارة على الرابط
        }
      );     
      
ترى ، لا يوجد شيء جيد حقا حول هذا الموضوع. لقد كدت أن تجد الطريقة دون مساعدتي لأنها قريبة من نظيرها في CSS hover . إليك كود HTML لبدء التشغيل:

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>: استبيان تفاعلي في jQuery </title>
        </head>
        
        <body dir="rtl">
          <form>
          <a href=""> اختبار الإجابات </a>

          <div class="question">
            <div class="texte">
              <h2>السؤال 1</h2>
              يعمل كود jQuery:<br>
                <input type="radio" id="r1" name="q1">في المتصفح<br>
                <input type="radio" id="r2" name="q1">في الخادم اين يحفظ الكود<br>
              <input type="radio" id="r3" name="q1"> في بعض الأحيان في المتصفح ، وأحيانا على الخادم <br>
              <br><span class="answer" id="answer1"> كود jQuery ليس سوى JavaScript. على هذا النحو ، يتم تشغيله دائمًا على الأجهزة العميلة (أجهزة الكمبيوتر والأجهزة اللوحية والهواتف) التي تشير إلى هذا الرمز عبر صفحة HTML. الجواب الصحيح هو إذن الأول.</span>
            </div>  
            <img id="img1" src="question.png" />
          </div>

          <div class="question">
            <div class="texte">
              <h2>السؤال 2</h2>
              عندما تريد تشغيل كود jQuery ، انتظر توافر DOM:<br>
              <input type="radio" id="r4" name="q2"> أمر حيوي <br>
              <input type="radio" id="r5" name="q2">لا فائدة منه<br>
              <input type="radio" id="r6" name="q2">في بعض الأحيان مهم و في البعض الاخر بدون اهمية<br>
              <br><span class="answer" id="answer2"> من الضروري انتظار توفر DOM قبل تشغيل رمز jQuery. وإلا ، يمكن أن ينطبق هذا الرمز على عنصر غير متاح ويسبب سلوكًا غير متوقع ، أو حتى تعطل المتصفح.</span>
            </div>
            <img id="img2" src="question.png" />
          </div>

          <div class="question">
            <div class="texte">
              <h2>السؤال 3</h2>
              لسلسلة طريقتين jQuery  :<br>
              <input type="radio" id="r7" name="q3"> عليك أن تضعها واحدة تلو الأخرى عن طريق فصلها بفاصلة <br>
              <input type="radio" id="r8" name="q3"> يجب أن تضعها واحدة تلو الأخرى عن طريق الفصل بينها بفاصلة عشرية <br>
              <input type="radio" id="r9" name="q3"> من المستحيل سلسلة طريقتين jQuery<br>
              <br><span class="answer" id="answer3"> يؤدي تشغيل محدد jQuery إلى إنتاج كائن jQuery يمكنك تطبيق أسلوب jQuery عليه. هذه الطريقة تنتج نفسها كائن مسج. لذلك من الممكن تطبيق طريقة أخرى باستخدام حرف الربط المعتاد: العلامة العشرية.</span>
            </div>  
            <img id="img3" src="question.png" />
          </div>
          </form>
          
          <script src="jquery.js"></script>
          <script>
            $(function() {
              // jQuery
            }); 
          </script>
        </body>
      </html>     
      
لنلقِ نظرة على بنية هذا المستند.
لا يحتوي الرأس على أي كود لتنسيق CSS ، وهو أمر طبيعي تمامًا حيث سيتعين عليك كتابة كود التنسيق هذا في jQuery ! يحتوي نص المستند على نموذج - والذي يحتوي في حد ذاته على ارتباط تشعبي - بالإضافة إلى ثلاث علامات <div> تتوافق مع الأسئلة الثلاثة الخاصة بـ QCM .
تحتوي كل علامة <div>على عنصرين أساسيين:
  1. علامة أخرى <div> سيتم عرض كل العناصر النصية فيها ؛
  2. علامة <img> معرف img1، والتي تشير إلى الصورة question.png .
تم إنشاء هذا الترتيب لتسهيل التنسيق العائم للصورة بالنسبة للنص.
داخل علامة <div> الفصل texte، ستة عناصر:
  • عنوان المستوى 2 ؛
  • نص السؤال
  • ثلاثة أزرار الراديو (معرفات r1، r2و r3 وسمة nameq1 )، يليه الأجوبة المحتملة.
  • علامة <span> تعرض النص الذي يشرح الإجابة الصحيحة عندما يضع المستخدم مؤشر الماوس على الرابط "اختبار الإجابات".
ينتهي الرمز بطريقة كلاسيكية للغاية عن طريق دمج مكتبة jQuery وانتظار توافر DOM . هذا هو المكان الذي ستتدخل فيه من خلال إدخال أكبر عدد ممكن من تعليمات jQuery للوصول إلى النتيجة المطلوبة.
قبل أن أتركك لخيالك ولوحة المفاتيح ، سأوفر لك الصور الثلاث المستخدمة في المستند.
jQuery web jQuery web jQuery web
هيا ، الأمر متروك لك!

الاصلاح


أرجو ألا يكون لديك الكثير من المشاكل في هذا الاختبار. إليكم اصلاحي ، حيث أراجع جميع النقاط التي يمكن أن تكون "مستعصية".
إخفاء الإجابات على الأسئلة
جميع الردود لديها نفس الفئة answer . لإخفائها ، يكفي تنفيذ الأسلوب hide() على الكائنات التي يتم إرجاعها بواسطة المحدد $('.answer') بمجرد توفر DOM :

        $(function() {
          // إخفاء الإجابات
          $('.answer').hide();      
        
قم بتنسيق العناصر المعروضة على الشاشة
كخطوة أولى ، ستقوم بتنسيق علامات <div> الفصل question، وهي العلامات التي تتوافق مع الأسئلة المطروحة في QCM . عن طريق الاتصال الهاتفي $('.question') ، يمكنك عزل بسهولة ثلاث علامات <div> الطبقة question . فقط قم بتطبيق أسلوب jQuery بشكل متكرر css() على هذا المحدد لتعديل خصائص العلامات
:

        var q = $('.question');          // تخزين المحدد في متغير لتحسين الكود
        q.css('background', '#9EEAE0');  // لون الخلفية
        q.css('border-style', 'groove'); // نوع الحدود
        q.css('border-width', '4px');    // عرض الحدود
        q.css('width', '900px');         // عرض علامات div للفئة "سؤال"
        q.css('height', '250px');        // ارتفاع div علامات الفئات "سؤال"
        q.css('margin', '20px');         // الهامش حول علامات question للفئة     
          
النصوص والصور في عرض عائم
خصائص التنسيق لعلامات الفصل question التي يتم تعريفها ، سنقوم الآن بتعويم عناصر النص إلى اليسار والصورة على يمين هذه العلامات. سيتم هذا التصميم من خلال العمل على خاصية CSS float لعلامات texte الفئات والصور.
يطفو البيان الأول علامة <div> فئة النص على يسار العلامة <div> الأصل ، أي علامة <div> الفصل question:

            $('.texte').css('float', 'left');     
        
يعطي البيان الثاني 90٪ من العرض المتاح لعلامة
الفصل texte . وبالتالي ، سيكون لهذه العلامة دائمًا نفس العرض ، وبالتالي فإن الصور المعروضة على يمينها سيكون لها دائمًا نفس الموضع وستتم محاذاتها عموديًا:

            $('.texte').css('width', '90%');     
          
العبارة الثالثة تطفو الصورة على يمين العلامة الأصلية <div> ، أي علامة <div> الفصل question :

            $('img').css('float', 'right');    
          
أخيرًا ، يغيّر التعليمة الرابعة الصورة لأسفل عن طريق تحديد هامش علوي يبلغ 80 بكسل:

            $('img').css('margin-top', '80px');   
          
اكتمل الآن التخطيط. إذا قمت بتشغيل الكود ، يجب أن تحصل على شيء مشابه للصورة التالية.
jQuery web
النص والصور هي الآن في وضع جيد
في هذا التمرين ، تم تنسيق عناصر HTML في jQuery . ربما استخدم البعض منك تعليمات CSS بدلاً من ذلك. لا حرج في ذلك. أود أن أقول أن التنسيق فريد في CSS . إذا استخدمت تعليمات jQuery بدلاً من ذلك ، فسيتم إضافة بعض الأمثلة فقط لسجل التتبع
الرد عند تمرير مؤشر الماوس على الرابط "اختبار الإجابات"
في هذه المرحلة ، اكتمل التخطيط ، يمكنك الإجابة على الأسئلة ، ولكن ليس اختبار الإجابات. لهذا ، يجب عليك كتابة كود الطريقة $('a').hover() . عند الإشارة إلى "اختبار الإجابات" ، تكون الإجراءات التي يتعين تنفيذها هي التالية لكل سؤال:
  1. اختبار الجواب.
  2. إذا كانت الإجابة جيدة ، فقم بعرض الرمز good.png والنص التوضيحي باللون الأخضر.
  3. إذا كانت الإجابة خاطئة ، فقم بعرض الرمز bad.png والنص التوضيحي باللون الأحمر.
عندما لا يتم عرض رابط "اختبار الردود" ، فإن الإجراءات التي يتعين القيام بها هي كما يلي:
  1. إخفاء الإجابات.
  2. عرض الرمز question.png في العلامات الثلاثة <img> .
هنا هي الوظيفة محدثة:

        $('a').hover(
          function() { 
            $('.answer').show();
            if ($(':radio[id="r1"]:checked').val()) {
              $('#img1').attr('src', 'good.png'); 
              $('#answer1').css('color', 'green');
            }  
            else {
              $('#img1').attr('src', 'bad.png');
              $('#answer1').css('color', 'red');
            } 

            if ($(':radio[id="r4"]:checked').val()) {
              $('#img2').attr('src', 'good.png');
              $('#answer2').css('color', 'green');
            }
            else {
              $('#img2').attr('src', 'bad.png');
              $('#answer2').css('color', 'red');
            } 

            if ($(':radio[id="r8"]:checked').val()) {
              $('#img3').attr('src', 'good.png'); 
              $('#answer3').css('color', 'green');
            }
            else {
              $('#img3').attr('src', 'bad.png');
              $('#answer3').css('color', 'red');
            }
          },
          function() { 
            $('.answer').hide(); 
            $('#img1').attr('src', 'question.png');
            $('#img2').attr('src', 'question.png');
            $('#img3').attr('src', 'question.png');
          }
        );      
        
لا تنخدع بطول الكود! سترى ، كل هذه الخطوط هي حقا بسيطة الفهم!
تحتوي الوظيفة الأولى على ثلاث مجموعات متطابقة تقريبًا من التعليمات. كل واحد منهم مهتم بأحد الأسئلة المطروحة في QCM . سوف نركز على المجموعة الأولى من التعليمات. يمكنك بسهولة نقل التفسيرات التي ستعطى للكتلتين الأخريين.
بعد التحقق من صحة عرض علامات الفصل answer :

            $('.answer').show();     
          
... يتم اختبار حالة زر الاختيار الأول (يمثل هذا الخيار الإجابة الصحيحة). إذا تم اختيار هذا الزر:

            if ($(':radio[id="r1"]:checked').val()) {     
            
... يتم عرض الصورة good.png في علامة <img> المعرف #img1 :

            $('#img1').attr('src', 'good.png');    
          
ويتم عرض التفسيرات باللون الأخضر في علامة المعرف #answer1 :

            $('#answer1').css('color', 'green');    
          
إذا لم يتم تحديد زر الاختيار هذا:

            else {   
            
... يتم عرض الصورة bad.pngفي علامة <img>المعرف #img1 :

            $('#img1').attr('src', 'bad.png');  
          
ويتم عرض التفسيرات باللون الأحمر في علامة المعرف #reponse1 :

            $('#answer1').css('color', 'red');
          
تقوم الكتلتان الأخريان من التعليمات البرمجية بإجراء معالجة مماثلة ، فيما عدا اختبارهما لزر اختيار آخر ، والعمل على علامات أخرى <img>و <span>
تشير الدالة الثانية للأسلوب hover() إلى ما يجب فعله عندما لا يتم توجيه الرابط بواسطة الماوس. يجب أن تكون الإجابة مخفية:

        function() { 
          $('.answer').hide();
        
... ويجب أن يتم عرض الصورةquestion.png في العلامات الثلاثة <img>

        $('img').each(function() {
          $(this).attr('src', 'question.png');
        });
        

الكود الكامل


هذا كل شيء ، رمز التشغيل الكامل. بالطبع ، يمكنك تعديله لإنشاء QCMs الخاصة بك ...

        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>: استبيان تفاعلي في jQuery </title>
          </head>
          
          <body dir="rtl">
            <form>
            <a href=""> اختبار الإجابات </a>

            <div class="question">
              <div class="texte">
                <h2>السؤال 1</h2>
                يعمل كود jQuery:<br>
                  <input type="radio" id="r1" name="q1">في المتصفح<br>
                  <input type="radio" id="r2" name="q1">في الخادم اين يحفظ الكود<br>
                <input type="radio" id="r3" name="q1"> في بعض الأحيان في المتصفح ، وأحيانا على الخادم <br>
                <br><span class="answer" id="answer1"> كود jQuery ليس سوى JavaScript. على هذا النحو ، يتم تشغيله دائمًا على الأجهزة العميلة (أجهزة الكمبيوتر والأجهزة اللوحية والهواتف) التي تشير إلى هذا الرمز عبر صفحة HTML. الجواب الصحيح هو إذن الأول.</span>
              </div>  
              <img id="img1" src="question.png" />
            </div>

            <div class="question">
              <div class="texte">
                <h2>السؤال 2</h2>
                عندما تريد تشغيل كود jQuery ، انتظر توافر DOM:<br>
                <input type="radio" id="r4" name="q2"> أمر حيوي <br>
                <input type="radio" id="r5" name="q2">لا فائدة منه<br>
                <input type="radio" id="r6" name="q2">في بعض الأحيان مهم و في البعض الاخر بدون اهمية<br>
                <br><span class="answer" id="answer2"> من الضروري انتظار توفر DOM قبل تشغيل رمز jQuery. وإلا ، يمكن أن ينطبق هذا الرمز على عنصر غير متاح ويسبب سلوكًا غير متوقع ، أو حتى تعطل المتصفح.</span>
              </div>
              <img id="img2" src="question.png" />
            </div>

            <div class="question">
              <div class="texte">
                <h2>السؤال 3</h2>
                لسلسلة طريقتين jQuery  :<br>
                <input type="radio" id="r7" name="q3"> عليك أن تضعها واحدة تلو الأخرى عن طريق فصلها بفاصلة <br>
                <input type="radio" id="r8" name="q3"> يجب أن تضعها واحدة تلو الأخرى عن طريق الفصل بينها بفاصلة عشرية <br>
                <input type="radio" id="r9" name="q3"> من المستحيل سلسلة طريقتين jQuery<br>
                <br><span class="answer" id="answer3"> يؤدي تشغيل محدد jQuery إلى إنتاج كائن jQuery يمكنك تطبيق أسلوب jQuery عليه. هذه الطريقة تنتج نفسها كائن مسج. لذلك من الممكن تطبيق طريقة أخرى باستخدام حرف الربط المعتاد: العلامة العشرية.</span>
              </div>  
              <img id="img3" src="question.png" />
            </div>
            </form>
            
            <script src="jquery.js"></script>
            <script>
        $(function() {
                // Dissimulation des réponses
                $('.answer').hide();
                
                // Mise en forme des div du QCM
                var q = $('.question');
                q.css('background', '#9EEAE0');
                q.css('border-style', 'groove');
                q.css('border-width', '4px');
                q.css('width', '900px');
                q.css('height', '250px');
                q.css('margin', '20px');

                $('.texte').css('float', 'right');
                $('.texte').css('width', '90%');
                $('img').css('float', 'left');
                $('img').css('margin-top', '80px');
                
                // Action au survol du lien « Tester les réponses »
                $('a').hover(
                  function() { 
                    $('.answer').show();
                    if ($(':radio[id="r1"]:checked').val()) {
                      $('#img1').attr('src', 'good.png'); 
                      $('#answer1').css('color', 'green');
                    }  
                    else {
                      $('#img1').attr('src', 'bad.png');
                      $('#answer1').css('color', 'red');
                    } 
                    if ($(':radio[id="r4"]:checked').val()) {
                      $('#img2').attr('src', 'good.png');
                      $('#answer2').css('color', 'green');
                    }
                    else {
                      $('#img2').attr('src', 'bad.png');
                      $('#answer2').css('color', 'red');
                    } 
                    if ($(':radio[id="r8"]:checked').val()) {
                      $('#img3').attr('src', 'good.png'); 
                      $('#answer3').css('color', 'green');
                    }
                    else {
                      $('#img3').attr('src', 'bad.png');
                      $('#answer3').css('color', 'red');
                    }
                  },
                  function() { 
                    $('.answer').hide(); 
                    $('img').each(function() {
                      $(this).attr('src', 'question.png');
                  });
        }

                );  
              });  
            </script>
          </body>
        </html>