JavaScript ဖြင့် HTML ကုဒ်အတွင်း မေးခွန်းများနှင့် အဖြေများပါသော စာမေးပွဲ

ဤသင်ခန်းစာနှင့် နောက်လာမည့် သင်ခန်းစာအချို့တွင် ကျွန်ုပ်တို့သည် မေးခွန်းများနှင့် အဖြေများပါသော စာမေးပွဲများ ဖန်တီးခြင်းကို လုပ်ဆောင်ပါမည်။ အလွယ်ကူဆုံး ပုံစံများမှ စတင်ပြီး တဖြည်းဖြည်း ရှုပ်ထွေးလာစေမည်။

အစတွင် ကျွန်ုပ်တို့သည် မေးခွန်းတစ်ခုစီအတွက် အဖြေတစ်ခုသာ ဖြစ်နိုင်သော မေးခွန်းအစုံတစ်ခု ပြုလုပ်လိုသည်ဟု ယူဆပါစို့။ အဖြေများကို အသုံးပြုသူမှ မေးခွန်းများ၏ အောက်တွင် ရှိသော input များထဲသို့ ရိုက်ထည့်ခိုင်းပါမည်။

ရေးထားသည်ကို HTML ကုဒ်ဖြင့် သရုပ်ဖော်ပြပါမည်။

html<div id="test">
  <div>
    <p>မေးခွန်း 1?</p>
    <input>
  </div>
  <div>
    <p>မေးခွန်း 2?</p>
    <input>
  </div>
  <div>
    <p>မေးခွန်း 3?</p>
    <input>
  </div>
</div>

မြင်တွေ့ရသည့်အတိုင်း၊ ကျွန်ုပ်တို့တွင် မေးခွန်းများနှင့် အဖြေများအတွက် input များ ရှိပါသည်။ မှန်ကန်သော အဖြေများကို ကျွန်ုပ်တို့ ဘယ်နေရာတွင် သိမ်းဆည်းမည်ကို စဉ်းစားရန် လိုအပ်ပါသည်။

စဉ်းစားနိုင်သော အရိုးရှင်းဆုံးနည်းလမ်းမှာ အဖြေများကို input များ၏ HTML ကုဒ်အတွင်း တိုက်ရိုက်သိမ်းဆည်းခြင်း၊ မည်သည့် data- attribute ထဲမဆို ထည့်သွင်းခြင်းပင် ဖြစ်သည်။

html<div id="test">
  <div>
    <p>မေးခွန်း 1?</p>
    <input data-right="အဖြေ 1">
  </div>
  <div>
    <p>မေးခွန်း 2?</p>
    <input data-right="အဖြေ 2">
  </div>
  <div>
    <p>မေးခွန်း 3?</p>
    <input data-right="အဖြေ 3">
  </div>
</div>

နောက်ထပ် စဉ်းစားရမည့် အချက်မှာ ကျွန်ုပ်တို့သည် မည်သည့်အချိန်တွင် အဖြေများ၏ မှန်ကန်မှုကို စစ်ဆေးမည်နည်းဟူသည့်အချက် ဖြစ်သည်။ ဤနေရာတွင် နည်းလမ်းနှစ်ခု ကောင်းကြံနိုင်ပါသည်။ တစ်ခုမှာ မေးခွန်းတစ်ခုချင်းစီအတွက် အဖြေရိုက်ထည့်ပြီးသည်နှင့် ချက်ချင်း စစ်ဆေးခြင်းဖြစ်ပြီး နောက်တစ်ခုမှာ နှိပ်လိုက်သည့်အခါ မေးခွန်းအားလုံး၏ အဖြေများကို တစ်ပြိုင်နက်တည်း စစ်ဆေးမည့် ခလုတ်တစ်ခု ထားရှိခြင်း ဖြစ်သည်။

ကျွန်ုပ်တို့ မည်သည့်နည်းလမ်းကို ရွေးချယ်သည်ဖြစ်စေ၊ အဖြေမှန်ပါက input ၏ အနားသတ်ကို အစိမ်းရောင်ဖြင့် ဆေးခြယ်ပါစို့။ အဖြေမှားပါက အနီရောင်ဖြင့် ဆေးခြယ်ပါစို့။ ထိုသို့ပြုလုပ်ရန် သက်ဆိုင်ရာ CSS class များကို ဖန်တီးပါမည်။

css.right {
  border: 1px solid green;
}
.wrong {
  border: 1px solid red;
}