25 Kasım 2015 Çarşamba

Radio Buton ile Test Sayfası Oluşturma

HTML yapısında Web sayfanızda test oluşturmak isteyebilirsiniz. Bu Blogger veya sade HTML sayfalarında kullanabileceğiniz bir Javascript kodudur.
Veritabanı bağlantısı oluşturmadan ve istatistikleri kaydetmeden sayfa üzerinde doğru yanlışları sayabilmeniz mümkün olacaktır.
HTML <INPUT type=radio> etiketi, bir seçeneğin seçilebileceği radyo düğmesi oluşturulması için kullanılmıştır.
Kullanıcıya tek seçenek sunmak için <INPUT type=radio> etiketinin bütün radyo düğmelerinde name özelliklerinin aynı olması gerekir.

HTML INPUT type=radio etiketi kullanılarak 4 farklı seçenekle cevabı kontrol eden JavaScript fonksiyonunu göstermektedir.

<script type="text/javascript">
function cevap() {
var cevaplar = document.getElementsByName("cevaplar");
if(cevaplar[0].checked)alert("Cevap1 Katı verildi");
else if(cevaplar[1].checked)alert("Cevap2 Gaz verildi");
else if(cevaplar[2].checked)alert("Cevap3 Buhar verildi");
else alert("Cevap4 Sıvı verildi");
}
</script>
<p>Sıvı bir madde ısı vererek hangi hale geçer?</p>
<input type="radio" id="cevap1" name="cevaplar" value="1" />
<label for="cevap1">Katı</label>
<br />
<input type="radio" id="cevap2" name="cevaplar" value="2" />
<label for="cevap2">Gaz</label>
<br />
<input type="radio" id="cevap3" name="cevaplar" value="3" />
<label for="cevap3">Buhar</label>
<br />
<input type="radio" id="cevap4" name="cevaplar" value="4" />
<label for="cevap3">Sıvı</label>
<br />
<button type="button" onclick="cevap()">Cevapla</button>


Sıvı bir madde ısı vererek hangi hale geçer?






Bu kodu nasıl düzenler ve kullanırım?

Kodları doğrudan site üzerinde denemek yerine Notepad++ gibi programlarda bilgisayarınızda deneyerek, daha sonra sitenize yerleştirebilirsiniz. 

Not: Blogger içerisinde de kodları HTML kısmında kullanmalısınız. Şablon kısmına herhangi bir Javascript kodu eklemenize gerek yoktur.

0 yorum:

Yorum Gönder