Javascript İle Dinamik Bir Etkileşimli Sınav Uygulaması Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Bir sınav uygulaması geliştirmek için karmaşık araçlara ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox veya Edge) ve bir kod düzenleyici (VS Code önerilir) yeterlidir. Projenin çalışması için herhangi bir sunucu tarafı bağımlılığı yoktur; tamamen istemci taraflı (client-side) çalışacaktır.

• Modern Tarayıcı: ES6+ özelliklerini destekleyen güncel bir tarayıcı.
• VS Code veya Benzeri Editör: Kod yazımı için gerekli ortam.
• Temel Bilgi: Değişkenler, döngüler ve fonksiyonlar hakkında temel düzeyde JavaScript bilgisi.

Sınav Veri Yapısını Oluşturma

Dinamik bir uygulama geliştirirken veriyi kodun içine gömmek yerine, düzenlenebilir bir yapıda tutmak en iyi pratiktir. Sınav sorularımızı bir dizi (array) içerisinde nesneler (objects) olarak tanımlayacağız. Bu yöntem, gelecekte soruları bir JSON dosyasından çekmenizi kolaylaştıracaktır.

const quizData = [
    {
        question: "JavaScript hangi yıl piyasaya sürülmüştür?",
        a: "1995",
        b: "1998",
        c: "2000",
        d: "2005",
        correct: "a"
    },
    {
        question: "Aşağıdakilerden hangisi bir JavaScript framework'üdür?",
        a: "HTML",
        b: "CSS",
        c: "React",
        d: "Python",
        correct: "c"
    }
];

Yukarıdaki kod bloğunda, her bir soru için bir nesne oluşturduk. 'correct' anahtarı, doğru cevabın hangi seçenekle eşleştiğini tutar. Bu yapı, sınavın dinamik olarak genişletilmesine olanak tanır.

HTML Arayüzünü Hazırlama

Sınavın görüneceği basit bir HTML yapısı kurmamız gerekiyor. Bu yapı, JavaScript ile manipüle edeceğimiz bir kapsayıcı (container) içermelidir. Sayfa yüklendiğinde boş bir şablon sunup, soruları JavaScript ile bu şablonun içine enjekte edeceğiz.

    


Soru buraya gelecek
    

        
 Seçenek A
        
 Seçenek B
    
    Cevabı Gönder

HTML yapısında her bir seçenek için bir radio butonu ve ona bağlı bir label kullandık. Bu sayede kullanıcı seçeneğe tıkladığında buton otomatik olarak seçilecektir.

JavaScript ile Soru Yükleme Fonksiyonu

Şimdi veriyi HTML'e bağlama zamanı. Bir fonksiyon yazarak mevcut soru indeksindeki verileri ekrana yazdıracağız. Bu aşamada DOM elemanlarını seçmek için document.getElementById metodunu kullanacağız.

const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
let currentQuiz = 0;

function loadQuiz() {
    const currentQuizData = quizData[currentQuiz];
    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    // Diğer seçenekler de benzer şekilde atanır
}

loadQuiz();

Bu fonksiyon, currentQuiz değişkeni ile hangi sorunun gösterileceğini kontrol eder. Her soru değişiminde bu fonksiyonu çağırarak arayüzü güncelleyeceğiz.

Kullanıcı Yanıtlarını İşleme ve Doğrulama

Kullanıcı "Cevabı Gönder" butonuna bastığında, seçilen seçeneğin doğru olup olmadığını kontrol etmemiz gerekir. Bunun için radio butonlarının durumunu kontrol eden bir mantık kuracağız.

const submitBtn = document.getElementById('submit');

submitBtn.addEventListener('click', () => {
    const selectedAnswer = document.querySelector('input[name="answer"]:checked');
    if (selectedAnswer) {
        if (selectedAnswer.id === quizData[currentQuiz].correct) {
            score++;
        }
        currentQuiz++;
        if (currentQuiz < quizData.length) {
            loadQuiz();
        } else {
            alert("Sınav bitti! Skorunuz: " + score);
        }
    }
});

Burada querySelector kullanarak seçili olan radio butonunu yakalıyoruz. Eğer bir seçim yapılmadıysa kullanıcıyı uyarmak (veya işlemi engellemek) iyi bir kullanıcı deneyimi pratiğidir.

Yöntemlerin Karşılaştırması

Güvenlik Uyarısı: İstemci taraflı (client-side) doğrulama, kullanıcı deneyimi içindir. Asla sınav sonuçlarını veya doğru cevapları sadece JavaScript ile doğrulamayın; çünkü kullanıcı tarayıcı konsolu üzerinden kodlarınızı değiştirebilir. Kritik sınavlarda sonuçları mutlaka bir sunucu (Node.js, Python vb.) üzerinden kontrol edin.

Sıkça Sorulan Sorular

Sınav sorularını dış bir JSON dosyasından nasıl çekebilirim?

Fetch API kullanarak fetch('sorular.json') komutuyla veriyi alabilir ve ardından loadQuiz fonksiyonunuzu bu veriye göre güncelleyebilirsiniz.

Kullanıcının boş geçmesini nasıl engelleyebilirim?

selectedAnswer değişkeninin null olup olmadığını kontrol ederek, eğer null ise kullanıcıya bir uyarı mesajı (alert veya modal) gösterebilirsiniz.

Süre sınırı eklemek mümkün mü?

Evet, setInterval fonksiyonunu kullanarak geri sayım yapan bir sayaç oluşturabilir ve süre bittiğinde sınavı otomatik sonlandırabilirsiniz.

Neden "var" yerine "let" veya "const" kullanmalıyım?

2026 yılı standartlarında var kullanımı kapsam (scope) hatalarına yol açtığı için önerilmez. let ve const, blok kapsamlı değişkenler sunarak kodunuzun daha güvenli ve öngörülebilir olmasını sağlar.

Mobilde görünüm bozulursa ne yapmalıyım?

CSS'de media queries kullanarak farklı ekran boyutları için genişlik ve yazı tipi ayarlarını düzenlemeniz gerekir.

Sınav Uygulamasını Tarayıcı Hafızasında (LocalStorage) Kalıcı Hale Getirme

Kullanıcı sınavı yarıda bıraktığında veya sayfayı yenilediğinde ilerlemesini kaybetmemesi, kullanıcı deneyimini (UX) doğrudan iyileştirir. localStorage API'si, verileri tarayıcı kapansa bile saklamanıza olanak tanır. Aşağıdaki örnekte, kullanıcının mevcut soru indeksini ve verdiği yanıtları nasıl kaydedeceğimizi görebilirsiniz.

// İlerlemeyi kaydetme fonksiyonu
function saveProgress(questionIndex, selectedOption) {
    const progress = {
        currentIndex: questionIndex,
        lastAnswer: selectedOption,
        timestamp: new Date().getTime()
    };
    localStorage.setItem('quizProgress', JSON.stringify(progress));
}

// Sayfa yüklendiğinde ilerlemeyi geri yükleme
function loadProgress() {
    const saved = localStorage.getItem('quizProgress');
    if (saved) {
        return JSON.parse(saved);
    }
    return null;
}

Bu verileri window.onload aşamasında kontrol ederek, kullanıcının kaldığı yerden devam etmesini sağlayabilirsiniz. Ancak, güvenlik gereği sınavın süresi dolmuşsa bu verileri localStorage.removeItem('quizProgress') komutuyla temizlemeyi unutmamalısınız.

Uygulama Performansını Artırmak İçin İleri İpuçları

Uygulamanız büyüdükçe ve soru sayısı arttıkça, DOM manipülasyonları yavaşlamaya başlayabilir. Performansı optimize etmek için şu stratejileri uygulayabilirsiniz:

• DOM Erişimlerini Azaltın: Sık kullanılan elemanları (örneğin "Soru Konteyneri") bir değişkene atayarak her seferinde document.getElementById çağırmaktan kaçının.
• Event Delegation (Olay Yetkilendirme): Her bir şık için ayrı bir olay dinleyicisi (event listener) eklemek yerine, ana kapsayıcıya tek bir dinleyici ekleyerek tıklanan elemanı tespit edin.
• Görsel Optimizasyon: Sınavda kullanılan görseller varsa, bunları lazy loading (tembel yükleme) yöntemiyle yükleyerek ilk açılış hızını artırın.

Aşağıdaki kod, olay yetkilendirme yönteminin nasıl daha verimli çalıştığını göstermektedir:

// Her şık için ayrı dinleyici yerine tek bir kapsayıcı dinleyicisi
const optionsContainer = document.getElementById('options-container');

optionsContainer.addEventListener('click', function(event) {
    if (event.target.classList.contains('option-btn')) {
        const selectedValue = event.target.getAttribute('data-value');
        handleAnswer(selectedValue);
    }
});

Hata Ayıklama (Debugging) Stratejileri

Sınav uygulamanızda beklenmedik hatalarla karşılaştığınızda, tarayıcının geliştirici araçlarını (F12) etkin bir şekilde kullanmalısınız. Özellikle console.log() yerine console.table() kullanarak soru dizilerini daha okunaklı bir şekilde inceleyebilirsiniz.

Eğer sınav mantığınızda bir hata varsa, debugger; anahtar kelimesini kodunuzun kritik noktalarına ekleyerek tarayıcının o satırda durmasını sağlayabilir ve değişkenlerin o anki değerlerini adım adım takip edebilirsiniz.

İpucu: Sınav verilerinizin doğruluğunu kontrol etmek için JSON Validator araçlarını kullanın. Eksik bir virgül veya tırnak işareti, tüm sınavın yüklenmesini engelleyebilir.

Sonuç

JavaScript ile dinamik bir etkileşimli sınav uygulaması geliştirmek, temel programlama mantığını pekiştirmek için mükemmel bir yoldur. Bu rehberde veriyi nasıl yöneteceğinizi, DOM elemanlarını nasıl güncelleyeceğinizi ve kullanıcı etkileşimlerini nasıl işleyeceğinizi öğrendiniz. Bir sonraki adım olarak, sınav sonuçlarını yerel tarayıcı hafızasında (localStorage) saklamayı veya sınavın sonuna bir "tekrar dene" butonu eklemeyi deneyebilirsiniz. İyi çalışmalar!