freeCodeCamp

5.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08834	Create a Set of Radio Buttons	0		قم بإنشاء مجموعة من أزرار الراديو

Description

يمكنك استخدام radio buttons للإجابة على الأسئلة حيث تريد أن يمنحك المستخدم إجابة واحدة فقط من الخيارات المتعددة. أزرار الراديو هي نوع من input . يمكن تداخل كل زر من أزرار الراديو داخل عنصر label الخاص به. من خلال لف عنصر input داخل عنصر label ، سيقوم تلقائيًا بربط إدخال زر الراديو مع عنصر التسمية المحيط به. يجب أن يكون لكل أزرار الراديو ذات الصلة سمة name نفسه لإنشاء مجموعة أزرار الراديو. من خلال إنشاء مجموعة راديو ، سيؤدي تحديد أي زر راديو فردي إلى إلغاء تحديد الأزرار الأخرى في نفس المجموعة تلقائيًا ، مما يضمن إجابة واحدة فقط من قبل المستخدم. في ما يلي مثال على زر الاختيار:

<التسمية>
<input type = "radio" name = "indoor-outdoor"> داخلي
</ التسمية>

فهو يعتبر أفضل الممارسات لوضع for السمة على label عنصر، مع قيمة يطابق قيمة id السمة ل input عنصر. يسمح ذلك للتقنيات المساعدة لإنشاء علاقة مرتبطة بين الملصق وعنصر input الطفل. فمثلا:

<label for = "indoor">
<input id = "indoor" type = "radio" name = "indoor-outdoor"> داخلي
</ التسمية>

Instructions

أضف زوجًا من أزرار التحديد إلى النموذج ، كل منها متداخل في عنصر التسمية الخاص به. ينبغي للمرء أن يكون خيار indoor والآخر ينبغي أن يكون خيار في outdoor . يجب أن يشترك كلاهما في خاصية name of indoor-outdoor لإنشاء مجموعة راديو.

Tests

tests:
  - text: يجب أن تحتوي صفحتك على عنصري زر راديو.
    testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
  - text: امنح أزرار الاختيار الخاصة بك السمة <code>name</code> <code>indoor-outdoor</code> .
    testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
  - text: يجب أن يتداخل كل عنصر من عناصر زر الراديو في عنصر <code>label</code> الخاص به.
    testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
  - text: تأكد من أن كل عنصر من عناصر <code>label</code> لديه علامة إغلاق.
    testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
  - text: يجب أن يكون أحد أزرار الراديو لديك <code>indoor</code> .
    testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
  - text: يجب أن يحتوي أحد أزرار الراديو على الملصق <code>outdoor</code> .
    testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
  - text: يجب إضافة كل عنصر من عناصر زر الراديو داخل علامة <code>form</code> .
    testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'

Challenge Seed

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

5.3 KiB Raw Blame History