Muhammed Arslan ın Kişisel Sitesi
  • Anasayfa
  • Hakkımda
  • Blog
    • Film Hepsi

      Film: Cyberbully

      Temmuz 28, 2017

      Film: 12 Angry Man

      Temmuz 28, 2017

      Mükemmel Şarkılar Listesi

      Temmuz 30, 2017

      Film: Cyberbully

      Temmuz 28, 2017

      Film: 12 Angry Man

      Temmuz 28, 2017

  • Programlama
    • Php WordPress Hepsi

      Boşluk Doldurma Soruları Yapımı

      Ağustos 14, 2017

      Sayfayı Şifreleyerek Gösterme

      Ağustos 2, 2017

      Php Kodları Neden Çalışmaz?

      Temmuz 27, 2017

      Php Kayıpsız Resim Boyutlandırma

      Temmuz 26, 2017

      WordPress Metinlerde Kısayol Kullanımı

      Eylül 9, 2017

      WordPress Eklentisiz wp-login Düzenleme

      Ağustos 21, 2017

      Sms Onayı İle Sayfa Gösterme

      Temmuz 29, 2017

      2 Uygulamanın Üyelik Sistemlerini Birleştirme

      Eylül 11, 2017

      WordPress Metinlerde Kısayol Kullanımı

      Eylül 9, 2017

      Adblock Tarafından Gizlenen Nesneleri Gösterme

      Eylül 6, 2017

      WordPress Eklentisiz wp-login Düzenleme

      Ağustos 21, 2017

  • Sunucu Yönetimi
    • Centos Hepsi

      Linux Üzerinde Windows Çalıştırma

      Ağustos 19, 2017

      Centos 7 Panelsiz Sunucu Kurulumu

      Temmuz 26, 2017

      Centos 7 Uzak Masaüstü Kurulumu

      Temmuz 24, 2017

      Centos 6 Uzak Masaüstü Kurulumu

      Temmuz 24, 2017

      Linux Üzerinde Windows Çalıştırma

      Ağustos 19, 2017

      Digital Ocean Vpn Kurulumu

      Ağustos 9, 2017

      Nginx Ssl Kurulumu

      Temmuz 31, 2017

      Centos 7 Panelsiz Sunucu Kurulumu

      Temmuz 26, 2017

  • Sağdan Soldan
    • Yararlı Hepsi

      Google Adsense Tavsiyeleri

      Ağustos 5, 2017

      Amazon Cloudfront Cdn Kurulumu

      Ağustos 1, 2017

      Domain Dns Değiştirdikten Sonra Yapılabilecekler

      Temmuz 27, 2017

      En Ucuz Domain Firmaları

      Ağustos 18, 2017

      Resim Saydamlaştırma ve Png Düzenleme

      Ağustos 13, 2017

      Özel Email Adresi Alma ve Yönetme

      Ağustos 11, 2017

      Amazon Web Services’e Nasıl Kayıt Olunur?

      Ağustos 6, 2017

  • What Color is it?
  • İletisim
  • Anasayfa
  • Hakkımda
  • Blog
    • Film Hepsi

      Film: Cyberbully

      Temmuz 28, 2017

      Film: 12 Angry Man

      Temmuz 28, 2017

      Mükemmel Şarkılar Listesi

      Temmuz 30, 2017

      Film: Cyberbully

      Temmuz 28, 2017

      Film: 12 Angry Man

      Temmuz 28, 2017

  • Programlama
    • Php WordPress Hepsi

      Boşluk Doldurma Soruları Yapımı

      Ağustos 14, 2017

      Sayfayı Şifreleyerek Gösterme

      Ağustos 2, 2017

      Php Kodları Neden Çalışmaz?

      Temmuz 27, 2017

      Php Kayıpsız Resim Boyutlandırma

      Temmuz 26, 2017

      WordPress Metinlerde Kısayol Kullanımı

      Eylül 9, 2017

      WordPress Eklentisiz wp-login Düzenleme

      Ağustos 21, 2017

      Sms Onayı İle Sayfa Gösterme

      Temmuz 29, 2017

      2 Uygulamanın Üyelik Sistemlerini Birleştirme

      Eylül 11, 2017

      WordPress Metinlerde Kısayol Kullanımı

      Eylül 9, 2017

      Adblock Tarafından Gizlenen Nesneleri Gösterme

      Eylül 6, 2017

      WordPress Eklentisiz wp-login Düzenleme

      Ağustos 21, 2017

  • Sunucu Yönetimi
    • Centos Hepsi

      Linux Üzerinde Windows Çalıştırma

      Ağustos 19, 2017

      Centos 7 Panelsiz Sunucu Kurulumu

      Temmuz 26, 2017

      Centos 7 Uzak Masaüstü Kurulumu

      Temmuz 24, 2017

      Centos 6 Uzak Masaüstü Kurulumu

      Temmuz 24, 2017

      Linux Üzerinde Windows Çalıştırma

      Ağustos 19, 2017

      Digital Ocean Vpn Kurulumu

      Ağustos 9, 2017

      Nginx Ssl Kurulumu

      Temmuz 31, 2017

      Centos 7 Panelsiz Sunucu Kurulumu

      Temmuz 26, 2017

  • Sağdan Soldan
    • Yararlı Hepsi

      Google Adsense Tavsiyeleri

      Ağustos 5, 2017

      Amazon Cloudfront Cdn Kurulumu

      Ağustos 1, 2017

      Domain Dns Değiştirdikten Sonra Yapılabilecekler

      Temmuz 27, 2017

      En Ucuz Domain Firmaları

      Ağustos 18, 2017

      Resim Saydamlaştırma ve Png Düzenleme

      Ağustos 13, 2017

      Özel Email Adresi Alma ve Yönetme

      Ağustos 11, 2017

      Amazon Web Services’e Nasıl Kayıt Olunur?

      Ağustos 6, 2017

  • What Color is it?
  • İletisim

Muhammed Arslan ın Kişisel Sitesi

Webmaster Blogu

Boşluk Doldurma Soruları Yapımı
Php

Boşluk Doldurma Soruları Yapımı

Muhammed Arslan Ağustos 14, 2017

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.

Demo

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  🙂


Boşluk Doldurma Soruları Yapımı
Ort: 5 | 9 Kişi

0 yorum
1
Facebook Twitter Google + Pinterest
Önceki Makale
Resim Saydamlaştırma ve Png Düzenleme
Sonraki Makale
En Ucuz Domain Firmaları

Bunları da Beğenebilirsin

Php Kodları Neden Çalışmaz?

Php Kayıpsız Resim Boyutlandırma

Sayfayı Şifreleyerek Gösterme

Yorum Yap Yorumu Kapat

HAKKIMDA

HAKKIMDA

Muhammed Arslan

Kendimi yazılımın php ve java alanlarında gelistirmeye çalısıyorum. Aynı zamanda sunucu yönetiminden de az çok anlıyorum. En önemlisi ögrendiğim yeni seyleri sizlerle paylaşmayı seviyorum. Blogumu takipte kalırsanız sevinirim :)

Arama Kutusu

Son Makaleler

  • 2 Uygulamanın Üyelik Sistemlerini Birleştirme

    Eylül 11, 2017
  • WordPress Metinlerde Kısayol Kullanımı

    Eylül 9, 2017
  • Adblock Tarafından Gizlenen Nesneleri Gösterme

    Eylül 6, 2017
  • WordPress Eklentisiz wp-login Düzenleme

    Ağustos 21, 2017
  • Linux Üzerinde Windows Çalıştırma

    Ağustos 19, 2017

Kategoriler

  • Blog
  • Centos
  • Diğer
  • Film
  • Php
  • Programlama
  • Sunucu Yönetimi
  • Wordpress
  • Yararlı

Son Yorumlar

  • Centos 7 Uzak Masaüstü Kurulumu için Muhammed Arslan
  • Centos 7 Uzak Masaüstü Kurulumu için devrim
  • İletişim için Muhammed Arslan
  • İletişim için mert
  • Jquery Tablo Üzerinde Veri Düzenleme için Murat
  • Facebook
  • Twitter
  • Google +
  • Instagram
  • Youtube
  • Spotify

Muhammed Arslan

Tüm Haklarım Ceketimin İç Cebinde Saklıdır ve Askılık Tarafından Korunmaktadır

DMCA.com Protection Status


Yukarı Çık