HTML ve Saf JavaScript ile Çoktan Seçmeli Basit Anket Kodu Yazımı İçin Adım Adım Kılavuz
Günümüz dijital dünyasında, web sitelerinin kullanıcılarıyla etkileşim kurması ve onların düşüncelerini anlaması her zamankinden daha önemli hale gelmiştir. Bir geri bildirim mekanizması olarak anketler, bu hedefe ulaşmanın en etkili yollarından biridir. Karmaşık üçüncü taraf anket araçlarına bağımlı kalmadan, kendi basit çoktan seçmeli anketinizi HTML ve saf JavaScript kullanarak oluşturmak, hem size tam kontrol sağlar hem de sitenizin web performansı üzerinde olumlu bir etki yaratır. Bu kılavuzda, temel web teknolojilerini kullanarak tamamen işlevsel, basit bir anket oluşturmanın adımlarını keşfedeceğiz. Bir SEO editörü olarak, bu tür özgün ve hafif içeriklerin sitenizin arama motorlarındaki görünürlüğünü nasıl artırabileceğini ve AdSense reklamları için uyumlu bir kullanıcı deneyimi sunabileceğini de göz önünde bulunduracağız.
Neden Kendi Anketinizi Oluşturmalısınız?
Hazır anket platformları hız ve kolaylık sunsa da, kendi anketinizi oluşturmanın birçok avantajı vardır:
* Tam Kontrol ve Özelleştirme: Anketinizin görünümünü ve davranışını tam olarak kontrol edersiniz. Markanızın estetiğine ve sitenizin genel tasarımına kusursuzca uyum sağlayabilir.
* Gizlilik ve Veri Güvenliği: Kullanıcı verileri üzerinde tam mülkiyete sahip olursunuz. Üçüncü taraf hizmet sağlayıcılarla veri paylaşma ihtiyacınız azalır, bu da kullanıcı gizliliği açısından önemli bir avantajdır.
* Performans Avantajı: Harici kütüphanelere veya ağır çerçevelere bağımlılık olmaksızın, saf HTML ve JavaScript ile oluşturulan bir anket, çok daha hızlı yüklenir ve sitenizin genel performansını düşürmez. Bu, hem kullanıcı deneyimi için kritik hem de arama motoru sıralamaları için önemli bir faktördür.
* Öğrenme ve Gelişim: Web geliştirme becerilerinizi pratik bir proje üzerinde kullanarak geliştirme fırsatı sunar.
* AdSense Dostu: Hafif kod yapısı ve hızlı yükleme süreleri, Google AdSense politikalarıyla uyumludur ve reklamların düzgün bir şekilde gösterilmesine olanak tanır. Ağır betikler veya yavaş yüklenen içerikler, reklam gösterimlerini olumsuz etkileyebilirken, optimize edilmiş bir anket tam tersi bir etki yaratır.
Anket Yapısının Temelleri: HTML Bölümü
Anketimizin iskeletini HTML ile oluşturacağız. Bu bölüm, anketin görsel olarak nasıl görüneceğini ve kullanıcıların etkileşimde bulunacağı temel elementleri tanımlar. Minimalist ve semantik bir yapı, hem geliştirme kolaylığı hem de erişilebilirlik açısından idealdir.
Temel HTML İskeleti
İlk olarak, anket içeriğimizi barındıracak genel bir kapsayıcıya ihtiyacımız var. Genellikle bir `div` elementi kullanılır ve buna benzersiz bir ID veririz (örneğin, `survey-container`), böylece JavaScript ile kolayca erişebiliriz. Bu kapsayıcının içinde, anket sorumuzu gösterecek bir başlık (örneğin, `h2` veya `h3`) ve seçenekleri listelemek için başka bir `div` elementi yer alacak.
```html
Anket Sorusu Buraya Gelecek mi?
```
Bu HTML yapısı, anketin dinamik olarak doldurulması için bir temel sağlar. `question-text`, `options-container`, `submit-button` ve `results-container` gibi ID'ler, JavaScript'in bu elementlere kolayca erişmesini ve içeriğini manipüle etmesini sağlar.
Çoktan Seçmeli Seçeneklerin Oluşturulması
Çoktan seçmeli anketlerde, kullanıcılar birden fazla seçenek arasından yalnızca birini seçerler. Bu, HTML'de `input` etiketinin `type="radio"` özelliği ile sağlanır. Her bir radyo düğmesi, aynı `name` özniteliğine sahip olmalıdır, böylece tarayıcı aynı gruptaki radyo düğmelerinden yalnızca birinin seçilmesine izin verir. Her seçeneğin bir `label` etiketi ile ilişkilendirilmesi, erişilebilirlik için çok önemlidir, çünkü bu, kullanıcının hem metne hem de radyo düğmesine tıklayarak seçim yapmasına olanak tanır. JavaScript ile bu seçenekleri dinamik olarak oluştururken, her birine benzersiz bir `value` ve `id` atamamız gerekecek.
Örnek olarak, options-container içine JavaScript ile nasıl seçenekler ekleyeceğimizi düşünelim:
Her bir seçenek için yeni bir `div` veya `label` oluşturulur, içine bir `input type="radio"` ve bir `span` veya metin düğümünü içeren bir `label` yerleştirilir. Bu, temiz ve okunabilir bir arayüz sağlar.
Anketin Dinamik Kalbi: JavaScript Bölümü
Anketimizin etkileşimli ve dinamik olmasını sağlayan kısım, saf JavaScript kodumuzdur. Bu bölümde, anket sorularını yönetmek, kullanıcı yanıtlarını almak ve sonuçları görüntülemek için gerekli JavaScript fonksiyonları ve mantığı ele alacağız.
Gerekli HTML Elementlerine Erişmek
JavaScript kodumuzun ilk adımı, HTML belgesindeki önemli elementlere erişim sağlamaktır. Bunu, `document.getElementById()` metodunu kullanarak yapacağız. Erişeceğimiz elementler arasında anket kapsayıcısı (`survey-container`), soru metnini göstereceğimiz yer (`question-text`), seçenekleri barındıran `div` (`options-container`), gönderme butonu (`submit-button`) ve sonuçları göstereceğimiz yer (`results-container`) bulunur. Bu elementlere birer değişken atayarak, kodumuzun geri kalanında onlara kolayca başvurabiliriz.
Anket Verilerini Tanımlamak
Anket sorularımızı ve seçeneklerini JavaScript içinde yapılandırılmış bir şekilde saklamamız gerekmektedir. En yaygın ve etkili yöntem, bir dizi (array) ve bu dizinin içindeki her bir elemanın bir nesne (object) olmasını sağlamaktır. Her nesne, bir soruyu, o sorunun seçeneklerini ve belki de doğru cevabı (eğer bir quiz değil de basit bir anket ise, sadece seçenekler yeterli olacaktır) içerecektir.
Örnek bir veri yapısı şöyle tanımlanabilir:
```javascript
const questions = [
{
question: "Web sitenizde en çok hangi içeriği görmek istersiniz?",
options: ["Eğitim Yazıları", "Ürün İncelemeleri", "Kılavuzlar", "Haberler"]
},
{
question: "Sitemizi ziyaret etmenizin ana nedeni nedir?",
options: ["Bilgi Edinmek", "Alışveriş Yapmak", "Eğlenmek", "Toplulukla Etkileşim Kurmak"]
}
// Daha fazla soru buraya eklenebilir
];
```
Bu yapı, anketimizin dinamik içerik yüklemesi için esnek bir temel sunar.
Anket Sorularını Yüklemek
Şimdi, bu veri yapısını kullanarak HTML arayüzümüze anket sorularını ve seçeneklerini yükleyecek bir fonksiyon oluşturalım. Bu fonksiyon, mevcut soru indeksini alacak, `question-text` elementinin `innerText`'ini güncelleyecek ve `options-container`'ı temizleyip her bir seçenek için yeni radyo düğmeleri oluşturacaktır. Her radyo düğmesi için bir `label` elementi oluşturmayı ve `name` özelliğini tüm seçenekler için aynı tutmayı unutmayın.
```javascript
let currentQuestionIndex = 0;
let userAnswers = []; // Kullanıcı yanıtlarını saklamak için
function loadQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionTextElement.innerText = currentQuestion.question;
optionsContainerElement.innerHTML = ''; // Önceki seçenekleri temizle
currentQuestion.options.forEach((option, index) => {
const optionDiv = document.createElement('div');
const radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = 'survey-option'; // Tüm seçenekler için aynı isim
radioInput.id = `option${index}`;
radioInput.value = option; // Seçenek metnini değer olarak atayın
const label = document.createElement('label');
label.htmlFor = `option${index}`;
label.innerText = option;
optionDiv.appendChild(radioInput);
optionDiv.appendChild(label);
optionsContainerElement.appendChild(optionDiv);
});
}
```
Kullanıcı Yanıtlarını İşlemek
Gönderme butonuna tıklandığında ne olacağını tanımlamamız gerekiyor. `submit-button` elementine bir olay dinleyicisi (`addEventListener`) ekleyeceğiz. Bu dinleyici tetiklendiğinde, seçili olan radyo düğmesini bulmalı (örneğin, `document.querySelector('input[name="survey-option"]:checked')`), seçilen değeri (`value`) `userAnswers` dizisine eklemeli, `currentQuestionIndex`'i artırmalı ve bir sonraki soruyu yüklemelidir. Eğer tüm sorular yanıtlandıysa, anket sonuçlarını gösteren bir fonksiyonu çağırmalıdır.
```javascript
submitButtonElement.addEventListener('click', () => {
const selectedOption = document.querySelector('input[name="survey-option"]:checked');
if (selectedOption) {
userAnswers.push(selectedOption.value);
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
loadQuestion();
} else {
displayResults(); // Anket bitti, sonuçları göster
}
} else {
alert('Lütfen bir seçenek belirleyin!'); // Kullanıcıya geri bildirim
}
});
```
Sonuçları Göstermek
Anket tamamlandığında, `displayResults()` fonksiyonunu çağıracağız. Bu fonksiyon, anket kapsayıcısını gizleyebilir ve `results-container`'ı görünür hale getirerek kullanıcıya bir teşekkür mesajı veya yanıtlarının bir özetini gösterebilir. Basit bir senaryoda, sadece bir teşekkür mesajı ve perhaps user's selections could be displayed.
```javascript
function displayResults() {
surveyContainerElement.style.display = 'none'; // Anket görünümünü gizle
resultsContainerElement.style.display = 'block'; // Sonuçları göster
// Örnek: Basit bir teşekkür mesajı
resultsContainerElement.innerHTML = '
Ankete katıldığınız için teşekkür ederiz!
';// İsterseniz, burada userAnswers dizisini kullanarak kullanıcı seçimlerini de listeleyebilirsiniz.
userAnswers.forEach((answer, index) => {
resultsContainerElement.innerHTML += `
Soru ${index + 1}: Seçiminiz: ${answer}
`;});
}
```
Adım Adım Geliştirme Süreci (Kodu Açıklama)
Şimdiye kadar ele aldığımız tüm bu bileşenleri bir araya getirerek, basit bir anket oluşturma sürecini adım adım özetleyelim. Kod blokları vermeden, her adımda ne yapılması gerektiğini açıklayacağız.
1. HTML Yapısını Hazırlamak
İlk olarak, HTML dosyanızda anketiniz için gerekli temel yapıyı oluşturun. Bu, bir ana `div` kapsayıcısı (`id="survey-container"`), soruyu gösterecek bir `h2` (`id="question-text"`), seçenekleri barındıracak bir başka `div` (`id="options-container"`), bir `button` (`id="submit-button"`) ve anket bittikten sonra sonuçları gösterecek gizli bir `div` (`id="results-container"`) içermelidir. Bu elementlere verdiğimiz ID'ler, JavaScript'in onlara kolayca erişmesini sağlayacaktır.
2. JavaScript Dosyasını Bağlamak
HTML dosyanızın `