javascript ile basit bir quiz nasıl yapılır

javascript ile basit bir quiz nasıl yapılır – Websitemize quiz eklemek ve ziyaretçilere belirli konularda test sunmak kullanıcı etkileşimi açısından oldukça önemlidir. Bu sayede ziyaretçilerimiz sitede daha uzun süre kalabilmektedir.

Şimdi Javascript ile bir quiz hazırlayalım

<h3> Matematik Testi</h3> ile quizimizin konusunu yani başlığını belirleyelim. Yazacağımız quiz ul li yapısında olacak. O yüzden <ul class=”alistirmalar”> ile liste elamanı oluşturalım. Sonra <li> etiketi içine testimizin sorularını ekleyeceğiz. <li id=”licevap1″> buraya kadar bütün aşağıdaki gibi olacak.

<h3> Javascript Quiz </h3>
<ul id="alistirmalar">
<li id="licevap1">
<strong>1 - Türkiye'nin başkenti nedir?</strong>

Buradan sonra şimdi doğru ve yanlış cevaplarını göstereceğimiz span etiketlerini yazalım.

<span class="green red" id="yanitspan"></span>

Ardından bir tane div etiketi içinde input ile sorularımız yazalım. Yazdığımız div etiketine class atayarak CSS ile şekillendirebiliriz. Buraya kadar bütün kod aşağıdaki gibi olacak.

<h3> Javascript Quiz </h3>
<ul id="alistirmalar">
<li id="licevap1">
<strong>1 - Türkiyenin Başkenti</strong>
<span class="green red" id="yanitspan"></span>
<div class="mcanswers">
</div>
</li>

Şimdi sıra geldi sorularımızı eklemeye.İlk olarak içinden yanıtları alacağımız gizli bir input ekleyelim.

<input type="hidden" name="0dogrucevap" id="0dogrucevap">

Bunun ardından sıra geldi sorularımız yazmaya. Bir tane label ve içine input ekleyelim. Bu bizim sorumuzun ilk şıkkı olacak.

<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="00radio" value="adana">adana</label>

Diğer şıkları da aşağıdaki gibi ekleyelim.

<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="00radio" value="adana">adana</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="01radio" value="konya">konya</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="02radio" value="ankara">ankara</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="03radio" value="izmir">izmir</label>

Burada ziyaretçinin seçim yapabilmesi için bir tipi radio olan seçim input’u ekledik. Eklediğimiz bu radio input’unun name yani isim değerini 0radio yapıyoruz. Bunu yapmamızdakş amaç soruların birbiri ile karışmasını önlemek. Zira ikinci sorunun radio ismini 1radio yapacağız. Radio etiketinin değerleri birbirinden farklı olmalıdır. Buraya kadar bütün kod aşağıdaki gibi olmalıdır.

<h3> Javascript Quiz </h3>
<ul id="alistirmalar">
<li id="licevap1">
<strong>1 - Türkiyenin Başkenti</strong>
<span class="green red" id="yanitspan"></span>
<div class="mcanswers">
<input type="hidden" name="0dogrucevap" id="0dogrucevap">
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="00radio" value="adana">adana</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="01radio" value="konya">konya</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="02radio" value="ankara">ankara</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="03radio" value="izmir">izmir</label>
</div>
</li>

Şimdi bir fonksiyon yazalım ve bununla cevapları kontrol edelim.

<script type="text/javascript">
function checkanswers(){

Fonksiyonumuz içinde kontrolleri sağlayalım. Fonksiyonun bütün kodu aşağıdaki gibi olmalıdır.

if(document.getElementById('0dogrucevap').value.toLowerCase().replace(/'/, ''') == 'ankara'){document.getElementById('yanitspan').innerHTML = 'Doğru!';document.getElementById('licevap1').className = 'correct';}else{document.getElementById('yanitspan').innerHTML = 'Yanlış!';document.getElementById('licevap1').className = 'wrong';}

DEMO

.correct {color: green;} .wrong {color: red;}

Javascript Quiz

  • 1 – Türkiyenin Başkenti
  • 2 – Türkiye’nin en kalabalık şehri
function checkanswers(){ if(document.getElementById(‘0dogrucevap’).value.toLowerCase().replace(/’/, ‘'’) == ‘ankara’){document.getElementById(‘yanitspan’).innerHTML = ‘Doğru!’;document.getElementById(‘licevap1’).className = ‘correct’;}else{document.getElementById(‘yanitspan’).innerHTML = ‘Yanlış!’;document.getElementById(‘licevap1’).className = ‘wrong’;} if(document.getElementById(‘1dogrucevap’).value.toLowerCase().replace(/’/, ‘'’) == ‘istanbul’){document.getElementById(‘yanitspan1’).innerHTML = ‘Doğru!’;document.getElementById(‘licevap2’).className = ‘correct’;}else{document.getElementById(‘yanitspan1’).innerHTML = ‘Yanlış!’;document.getElementById(‘licevap2’).className = ‘wrong’;} }

Bütün kod aşağıdaki gibi olmalıdır.

<style type="text/css">
.correct {color: green;}
.wrong {color: red;}
</style>
<h3> Javascript Quiz </h3>
<ul id="alistirmalar">
<li id="licevap1">
<strong>1 - Türkiyenin Başkenti</strong>
<span class="green red" id="yanitspan"></span>
<div class="mcanswers">
<input type="hidden" name="0dogrucevap" id="0dogrucevap">
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="00radio" value="adana">adana</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="01radio" value="konya">konya</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="02radio" value="ankara">ankara</label>
<label><input onclick="document.getElementById('0dogrucevap').value = this.value;" type="radio" name="0radio" id="03radio" value="izmir">izmir</label>
</div>
</li>
<!-- end of birinci soru -->
<li id="licevap2">
<strong>2 - Türkiye'nin en kalabalık şehri</strong>
<span class="gostercevap" id="yanitspan1"></span>
<div class="mcanswers">
<input type="hidden" name="1dogrucevap" id="1dogrucevap">
<label><input onclick="document.getElementById('1dogrucevap').value = this.value;" type="radio" name="1radio" id="10radio" value="istanbul">istanbul</label>
<label><input onclick="document.getElementById('1dogrucevap').value = this.value;" type="radio" name="1radio" id="12radio" value="konya">konya</label>
<label><input onclick="document.getElementById('1dogrucevap').value = this.value;" type="radio" name="1radio" id="13radio" value="ankara">ankara</label>
<label><input onclick="document.getElementById('1dogrucevap').value = this.value;" type="radio" name="1radio" id="14radio" value="izmir">izmir</label>
</div>
</li>
<!-- end of ikinci soru -->
</ul>

<script type="text/javascript">
function checkanswers(){

if(document.getElementById('0dogrucevap').value.toLowerCase().replace(/'/, ''') == 'ankara'){document.getElementById('yanitspan').innerHTML = 'Doğru!';document.getElementById('licevap1').className = 'correct';}else{document.getElementById('yanitspan').innerHTML = 'Yanlış!';document.getElementById('licevap1').className = 'wrong';}
<!-- ikinci soru -->
if(document.getElementById('1dogrucevap').value.toLowerCase().replace(/'/, ''') == 'istanbul'){document.getElementById('yanitspan1').innerHTML = 'Doğru!';document.getElementById('licevap2').className = 'correct';}else{document.getElementById('yanitspan1').innerHTML = 'Yanlış!';document.getElementById('licevap2').className = 'wrong';}

}
</script>

<input name="Check_Answers" type="button" onclick="checkanswers();" value="Check Answers">

Önceki

ingilizce drool kelimesinin anlamı

Sonraki

ücretsiz wordpress woocommerce e-ticaret teması

Email aboneliği

Esakademi.com'dan iyi ve güzel haberler almak için listeye mailinizi ekleyin