اختيار أساسي

مثال يوضح كيفية دمج زر اختيار راديو بسيط مع دعم التسميات

class BasicSelectionExampleWidget extends NGSSelectionWidget {
    /* مثال يوضح كيفية دمج زر اختيار راديو بسيط
       مع دعم التسميات
  */

    /* قالب HTML سيتم إنشاؤه قبل إنشاء الصف
        سيتم إضافة لاحقة uniqueId إلى جميع معرفات وحالات CSS
        المقدمة أثناء إنشاء الودجت */
    static get template() {
        return `<div class="ngs-widget-basic-radio-sample">
      <div>
         <input type="radio" id="radioButton">
      </div>
      <div>
         <ngs-label></ngs-label>
       </div>
       </div>`
    }

    /* الأنماط التي ستُطبّق على هذا الودجت، لاحظ أن أسماء أصناف العناصر 
      ستُحدد نطاقها باستخدام معرف الودجت الفريد */  
    static get style() {
        return '.ngs-widget-basic-radio-sample { display:flex;flex-direction:row}';
    }

    init() {
        // الحصول على عنصر الإدخال من القالب
        // من المهم دائمًا إضافة لاحقة إلى أي معرف 
        // في القالب باستخدام uniqueid الخاص بالودجت
        this.radioButton = this.getWidgetElementById('radioButton');

        // الحصول على وضع العرض الحالي لمعرفة كيفية
        // إعداد الحالة هنا وجعلها معطلة إذا كان 
        // الودجت في وضع القراءة فقط 
        this.isDisabled$(disabled => {
            this.radioButton.disabled = disabled;
        });

        this.isSelected$(selected => {
            this.radioButton.checked = selected;
        });

        this.radioButton.addEventListener('click', (event) => {
            this.radioChecked(this.radioButton.checked, this);
        });
    }

    // إرسال القيمة إلى النموذج
    radioChecked(value, widget) {
        widget.selectAnswer(value);
    }
  }