Bu yazımızda, DOM nesnelerinden radio butonlarını kullanarak bir test uygulaması yapacağız.
Not: Bu uygulamamızdaki amaç tam teşekküllü bir test hazırlamak değil, sadece, radio nesne özellikleri ve kullanım şekillerine kısaca bir gözatmaktır.
Uygulama:
Aşağıdaki sorulara cevap verildikten sonra sonuçlar aşağıda değerlendirilmekte.
Html Form gösterimi:
<form name="formTest">
<fieldset class="radiogroup">
<legend>Soru 1: HTML5 sisteminde aşağıdaki özelliklerden hangisi kaldırılmıştır?</legend>
<ul class="radio" style="list-style:none">
<li>A) <input type="radio" name="q1" value="A" /><label>Div</label></li>
<li>B) <input type="radio" name="q1" value="B" /><label>applet</label></li>
<li>C) <input type="radio" name="q1" value="C" /><label>p</label></li>
</ul>
</fieldset>
<fieldset class="radiogroup">
<legend>Soru 2: HTML5 sisteminde aşağıdaki etiketlerden(tag) hangisi yeni eklenmiştir?</legend>
<ul class="radio" style="list-style:none">
<li>A) <input type="radio" name="q2" value="A" /><label>table</label></li>
<li>B) <input type="radio" name="q2" value="B" /><label>p</label></li>
<li>C) <input type="radio" name="q2" value="C" /><label>header</label></li>
</ul>
</fieldset>
<fieldset class="radiogroup">
<legend>Soru 2: HTML5 sisteminde cookie uygulaması eklenmiştir?</legend>
<ul class="radio" style="list-style:none">
<li>A) <input type="radio" name="q3" value="A" /><label>Doğru</label></li>
<li>B) <input type="radio" name="q3" value="B" /><label>Yanlış</label></li>
</ul>
</fieldset>
<input type="button" value="Cevapla" onclick="checkAnswer()" />
</form>
<div id="rapor"></div>
Javascript kodları:
<script type="text/javascript">
function checkAnswer() {
var soruSayisi=3;
var gelenCevap = new Array();
var dogruCevap = new Array("B","C","A");
var dogru=0;
var yanlis=0;
var cevap=0;
var rapor="";
for(i=1; i <= soruSayisi; i++){
var secenekler=document.getElementsByName("q"+i);
for(j=0; j < secenekler.length; j++){
if(secenekler[j].checked){
if(secenekler[j].value==dogruCevap[i-1]){
cevap=1;
}else{
cevap=0;
}
if(cevap){
rapor +=i+". Soru için cevabınız: "+secenekler[j].value+", Doğru <br />";
}else{
rapor +=i+". Soru için cevabınız: "+secenekler[j].value+", YANLIŞ, Doğru Cevap: "+dogruCevap[i-1]+"<br />";
}
gelenCevap.push(secenekler[j].value);
}
}
}
for(k=0; k < soruSayisi; k++){
if(gelenCevap[k]==dogruCevap[k]){
dogru++;
}else{
yanlis++;
}
}
rapor +="Sonuç: "+dogru+" Doğru, "+yanlis+" Yanlış"+"<br />";
document.getElementById('rapor').innerHTML=rapor;
}
</script>
Açıklamalar:
- 2. Soru sayısını belirttik
- 3. Gönderilecek cevapları dizi içine almak için gelenCevap dizinini tanımladık
- 4. Doğru cevaplar dizi olarak verildi
- 5. Doğru sayısı için başlangıç değeri
- 6. Yanlış sayısı için başlangıç değeri
- 8. Rapor için başlangıç değeri
- 10. İlk döngümüzü soru sayısı kadar yapıyoruz, ve getElementsByName("q"+i) ile sırasıyla q1,q2,q3 radio butonlarını hedefliyoruz
- 1. İlk döngünün içindeki döngüde ise sorunun secenek sayısına göre bir döngü kurup, verilen cevabı doğru seçenekle karşılaştırıp yapılan seçime ve sonuca göre "rapor" değişkenine ekliyoruz
- 12. İşaretli cevapları gelenCevap dizinin içine ekliyoruz (gelenCevap.push())
- 29. Bu döngümüzde de doğruCevap dizini ile gelenCevap dizininin elemanlarını karşılaştırp doğru ve yanlış cevap sayısını belirliyoruz.
- 36. Sonuçları rapor değişkenine ekliyoruz.
- 37. Tüm raporu "rapor" id'li katmanın içine yazdırıyoruz
Kolay gelsin, görüşmek üzere...
