Sınav Sorularını Kaydedin: JavaScript Local Storage ve Session Storage Kullanarak Quiz Oluşturma

Adı : Sınav Sorularını Kaydedin: JavaScript Local Storage ve Session Storage Kullanarak Quiz Oluşturma

JavaScript Local Storage ve Session Storage, web tarayıcılarında verilerin depolanmasını sağlayan iki önemli API'dir. Bu depolama yöntemleri, kullanıcıya ait verilerin geçici olarak tarayıcıda tutulmasını sağlar ve daha sonra bu verilere erişim imkanı sunar.

LocalStorage ve SessionStorage, key-value çiftlerinden oluşan bir veri yapısı kullanır. Her bir veri öğesi bir anahtarla ilişkilendirilir ve bu anahtarı kullanarak veriye erişim sağlanır. Anahtarlar ve değerler, genellikle metin veya JSON formatında kaydedilir.

LocalStorage ve SessionStorage arasındaki temel fark, depolama süresidir. LocalStorage, verileri kalıcı bir şekilde saklar ve tarayıcı kapatılsa bile veriler korunur. Buna karşılık, SessionStorage, tarayıcı oturumu boyunca verileri saklar ve oturum sonlandığında veriler silinir.

Quiz oluşturma için LocalStorage veya SessionStorage kullanarak soruları ve cevapları kaydedebiliriz. Bu şekilde kullanıcı, sayfayı yenilese bile daha önce yanıtladığı soruların cevaplarını görebilir. Aşağıda örnek bir Quiz oluşturmak için kullanabileceğiniz JavaScript kodu bulunmaktadır:

```javascript
// Quiz verilerini LocalStorage'dan alır
function getQuizData() {
const quizData = localStorage.getItem('quizData');
return quizData ? JSON.parse(quizData) : [];
}

// Quiz verilerini LocalStorage'a kaydeder
function saveQuizData(quizData) {
localStorage.setItem('quizData', JSON.stringify(quizData));
}

// Quiz sorusu oluşturur
function createQuestion(question, options, correctAnswer) {
return {
question: question,
options: options,
correctAnswer: correctAnswer
};
}

// Quiz sorularını oluşturur ve LocalStorage'a kaydeder
function createQuiz() {
const quizData = [
createQuestion('Hangi programlama dili resimleri düzenler?', ['JavaScript', 'Python', 'CSS', 'HTML'], 2),
createQuestion('Web sayfalarında stil ve tasarımı düzenlemek için hangi dil kullanılır?', ['JavaScript', 'Python', 'CSS', 'HTML'], 3),
createQuestion('Web tarayıcısı üzerindeki davranışları yönlendirmek için hangi dil kullanılır?', ['JavaScript', 'Python', 'CSS', 'HTML'], 0),
createQuestion('Hangi dil web sayfalarının yapısını tanımlar?', ['JavaScript', 'Python', 'CSS', 'HTML'], 3),
];

saveQuizData(quizData);
}

// Quizi başlatır ve soruları görüntüler
function startQuiz() {
const quizData = getQuizData();

quizData.forEach(function(questionData, index) {
const questionContainer = document.createElement('div');
const questionElement = document.createElement('h3');
const optionsContainer = document.createElement('ul');

questionElement.textContent = questionData.question;
questionData.options.forEach(function(option, optionIndex) {
const optionElement = document.createElement('li');
optionElement.textContent = option;

if (optionIndex === questionData.correctAnswer) {
optionElement.setAttribute('data-correct', 'true');
}

optionsContainer.appendChild(optionElement);
});

questionContainer.appendChild(questionElement);
questionContainer.appendChild(optionsContainer);

// Soruları sayfaya ekleme işlemi burada gerçekleştirilebilir
// Örneğin, document.querySelector('.quiz-container').appendChild(questionContainer);
});
}

// Quizin yanıtlarını kontrol eder
function checkQuizAnswers() {
const options = document.querySelectorAll('li');
let correctAnswers = 0;

options.forEach(function(option) {
if (option.getAttribute('data-correct') === 'true' && option.classList.contains('selected')) {
correctAnswers++;
} else {
option.classList.add('incorrect');
}
});

// Doğru cevapları sayfa üzerinde göstermek için burada işlemler yapılabilir
// Örneğin, document.querySelector('.correct-answers').textContent = correctAnswers;
}

// Quizi çalıştır
startQuiz();
```

Yukarıdaki örnekte, createQuiz fonksiyonu ile sorular ve cevaplar oluşturulur ve LocalStorage'a kaydedilir. startQuiz fonksiyonu bu verileri alır ve sayfada soruları görüntüler. checkQuizAnswers fonksiyonu ise kullanıcının yanıtlarını kontrol eder ve doğru cevapları sayfa üzerinde gösterir.

Bu örnekte, soruların ve cevapların kullanıcı tarafından seçildiği varsayılmıştır. Ancak gerçek bir Quiz uygulamasında kullanıcı girişi ve doğru cevap kontrolü farklı şekillerde gerçekleştirilebilir.

Sık Sorulan Sorular:

1. LocalStorage ve SessionStorage arasındaki temel fark nedir?
- LocalStorage, verileri kalıcı bir şekilde saklar ve tarayıcı kapatılsa bile veriler korunur. Buna karşılık, SessionStorage, tarayıcı oturumu boyunca verileri saklar ve oturum sonlandığında veriler silinir.

2. Quiz oluşturmak için hangi depolama yöntemi tercih edilmelidir?
- Depolama süresi açısından LocalStorage tercih edilebilir. Böylece kullanıcı daha önce yanıtladığı soruların cevaplarını görebilir.

3. Quizde doğru cevap kontrolü nasıl yapılır?
- Kullanıcının seçtiği yanıtlar ile doğru cevaplar karşılaştırılabilir. Örneğin, her seçenek üzerinde bir data attribute kullanarak doğru cevabı işaretleyebilir ve kullanıcının seçtiği seçenekleri kontrol edebilirsiniz.

4. Quiz verilerini nasıl depolayabilirim?
- Çoğunlukla JSON formatında veriler depolanır. Veriyi JSON.stringify() ile dizeye çevirip, LocalStorage veya SessionStorage'a kaydedebilirsiniz. Veriyi geri alırken ise JSON.parse() ile veriyi yeniden nesne formatına dönüştürebilirsiniz.

5. Kullanıcının yanıtlarını nasıl kontrol edebilirim?
- Kullanıcının seçtiği yanıtları, doğru cevaplarla karşılaştırarak kullanıcının kaç doğru yanıt verdiğini bulabilirsiniz. Bu sayede kullanıcıya doğru cevap sayısını gösterebilir ya da sınav sonucunu hesaplayabilirsiniz.

Bu yazıda JavaScript Local Storage ve Session Storage kullanarak nasıl bir Quiz oluşturabileceğimizi inceledik. Verileri depolamanın yanı sıra, kullanıcının yanıtlarını kontrol etmek ve sonuçları göstermek için de örnekler verdik. Bu yöntemler, dinamik içerikler oluşturmada ve geçici verileri saklama amacıyla sıkça kullanılmaktadır."