Merhabalar,
Bu makale de genellikle eğitim amaçlı sitelerde kullanılabilecek boşluk doldurma soruları yapacağız. Php ve jquery kullanacağız ve hiçbir cms alt yapısına bağlı kalmayacağız. Eğer siz wordpress tarzı bir cms kullanıyorsanız düzenlemeleri manuel olarak görünüm -> düzenleyici sekmesinden yapabilirsiniz.
Öncelikle senaryomuz şu: Eğitimci sayfaya boşluk doldurmalı sorular girecek, soruların cevapları veritabanında saklanacak. Daha sonra öğrenciler sayfaya girdiğinde boşlukları dolduracaklar ve kontrol butonuna basacaklar. Öğrencilerin verdiği cevaplara göre boşluklar doğru yada yanlış olarak gösterilecek.
- Öncelikle birkaç dosyayı siteye yerleştirmemiz lazım. İlk olarak header.php ‘de <head></head> tagları arasına css dosyamızı çağıralım.
<link rel="stylesheet" href="sonuc.css" type="text/css" />
Daha sonra footer.php ‘ye js dosyalarımızı çağıralım. Eğer jquery dosyası daha önceden çağırılmış ise eklemenize gerek yoktur.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="sonuc.js"></script>
- Şimdi sonuc.css dosyamızı oluşturalım ve basit birkaç css düzenlemesi yapalım.
.cevap { border:0;border-bottom:2px dashed #c3c3c3;padding:0px;color:black;font-family:Arial;font-weight:bold;font-size:14px;text-align:center; } .sonuc { border:0;border-bottom:2px ;padding:0px;color:black;font-family:Arial;font-weight:bold;font-size:14px;text-align:center; } .yanlis { border:0;border-bottom:2px dashed #c3c3c3;padding:0px;color:red;font-family:Arial;font-weight:bold;font-size:14px;text-align:center; } .dogru { border:0;border-bottom:2px dashed #c3c3c3;padding:0px;color:green;font-family:Arial;font-weight:bold;font-size:14px;text-align:center; } - Şimdi ise sonuc.js dosyamızı oluşturalım ve kodları ekleyelim.
function kontrol(){ var son_p = $('p:last').attr('id'); var son_id_al =son_p.split("-"); var son = son_id_al['1']; var sayi = '1'; while (sayi <= son) { var id = $('#satir-'+sayi+' input').attr('id'); var cevap = $('#satir-'+sayi+' input').val(); var data = 'veri='+id+'-'+cevap; var sonuc = $.ajax({ type: 'POST', url: "kontrol.php", data: data, dataType: 'html', context: document.body, global: false, async:false, success: function(data) { return data; } }).responseText; var parcala=sonuc.split("-"); var durum = parcala['0']; var dogrusu = parcala['1']; if(cevap=='') {var cevap='- - -';} if(durum=='1'){ $('#'+id).val(cevap); $("#y-"+id).val("Cevap Doğru"); $("#y-"+id).show(); $('#'+id).prop('readonly', true); $('#'+id).removeClass('cevap').addClass('dogru'); }else { $("#"+id).val(cevap); $("#y-"+id).val("Doğru Cevap: "+dogrusu); $("#y-"+id).show(); $('#'+id).prop('readonly', true); $('#'+id).removeClass('cevap').addClass('yanlis'); } sayi++; } } - Son dosyamız olarak kontrol.php dosyamızı oluşturalım. Bu dosyada post edilen cevapları alıp doğruluğunu kontrol edeceğiz.
<?php if($_POST) { $gelen = $_POST['veri']; $parcala = explode("-",$gelen); $id = $parcala['0']; $deger = $parcala['1']; try { $db = new PDO("mysql:host=localhost;dbname=test", "root", ""); //Veritabanı Bilgileri } catch ( PDOException $e ){ print $e->getMessage(); } $veri= $db->query("SELECT * FROM sorular WHERE ID='$id'")->fetch(PDO::FETCH_ASSOC); $cevap = $veri['cevap']; if(strtoupper($deger) == strtoupper($cevap)) { echo "1-".$cevap; } else { echo "0-".$cevap; } } else { echo "Bu Sayfaya Dışarıdan Erişim Bulunmamaktadır!"; } - Phpmyadmin yardımıyla yukarıda 16. satırda gördüğümüz sorular tablosunu oluşturalım. 2 sütunlu bir tablo ihtiyacımızı görecektir. İlk sütun sorunun id değeri, 2. sütun ise sorunun cevabı olacaktır. Aşağıda doldurmanız gereken alanları kırmızı dikdörtgen içerisine aldım.
- Veritabanında soruların cevapları olacak demiştik. Cevap’ların id değerlerine göre de kontrol işlemi yapılacak. Sonuç olarak yeni veri eklerken sorunun cevanını ekleyin ve oluşan id değerini not alın. Küçük/büyük harf ‘e dikkat etmenize gerek yok, eşitlenirken bütün karakterler küçük sayılacaktır.
- Son olarak sorularımızı oluşturalım.
<p id='satir-1'>Türkiyenin Başkenti <input type='text' id='1' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-1' readonly> </p>
Sorular, <p> tagları arasında 2 adet input’tan oluşur. <p> tagında ki id değeri sayfada kaçıncı soru olduğu anlamına gelir. İnput ‘ların içerisindeki id değerleri ise veritabanında ki cevabın id değeri olacaktır. Mesela veritabanında Türkiye cevabının id değeri 433 ise <input id=”433″ olacaktır. Gizli olan input ‘ta ise <input id=’y-433’ olacaktır.
Örnek çoklu kullanım,
<p id='satir-1'>Türkiyenin Başkenti <input type='text' id='1' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-1' readonly> </p> <p id='satir-2'>Almanyanın Başkenti <input type='text' id='44' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-44' readonly> </p> <p id='satir-3'>Amerikanın Başkenti <input type='text' id='4345' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-4345' readonly> </p> <p id='satir-4'>İtalyanın Başkenti <input type='text' id='23123' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-23123' readonly> </p> <p id='satir-5'>İspanyanın Başkenti <input type='text' id='456456' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-456456' readonly> </p> <p id='satir-6'>Hollandanın Başkenti <input type='text' id='1312' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-1312' readonly> </p> <p id='satir-7'>Bulgaristanın Başkenti <input type='text' id='2' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-2' readonly> </p> <p id='satir-8'>Yunanistanın Başkenti <input type='text' id='45645645' class='cevap'> dır. <input class='sonuc' style='display:none' type='text' id='y-45645645' readonly> </p>
- Sorularımızın cevaplarını kontrol etmek için butonumuzu oluşturalım. Butonla ilgili tek önemli şey onclick değerinin kontrol() olmasıdır.
<input type="submit" value='Kontrol Et' onclick="kontrol()">
- Soruları, herhangi bir editör kullanıyorsanız kod bölümünden ekleyebilirsiniz. Görsel olarak zaten gelecektir. Örneğin wordpress editöründe Metin alanına geçerek kodları ekleyebilirsiniz.
- Olayın işleyişi,
onclick değeri kontrol olan butona basıldığında js dosyasındaki kontrol fonksiyonu çalışır. Bu fonksiyon son <p> tagının id değerini alarak satır sayısını belirler. Daha sonra verileri 1 ‘den başlayarak satır sayısı kadar döngüye sokar. Döngü içerisinde <p> tagının içerisindeki input’un id değeri alınır ve kullanıcının cevabı ile birlikte kontrol.php dosyasına post edilir. kontrol.php dosyasında input’un id değerine ait veritabanındaki cevap alınır ve kullanıcının cevabı ile karşılaştırılır. Eğer cevaplar aynı ise 1-cevap, değil ise 0-cevap değerleri geri döner. Geri dönen değeri jquery alır ve “-” işaretinden parçalar. Eğer ilk değer 1 ise kullanıcının cevabı doğru, 0 ise yanlıştır. Bu 1 veya 0 değerlerine göre gerekli görsel düzenlemeler yapılır ve sonraki satıra geçilir. Bu şekilde tüm satırlar kontrol edilir.
Takıldığınız yerleri yorum olarak belirtirseniz yardımcı olmaya çalışırım. Eğer bu makaleyi yararlı bulduysanız aşağıdan oy vermeyi unutmayın. İyi günler dilerim 🙂