Selam dijital kaşif! 🌍
Bugün klavyeni ve fareni kullanarak eğlenceli, interaktif bir mini quiz tasarlayacağız. Hedefimiz hem öğrenmek hem de eğlenmek. Doğru/Yanlış veya çoktan seçmeli sorularla HTML dünyasına adım atacağız ve <form> ile <input> sihirli kombinasyonlarını keşfedeceğiz.
Hazırsanız, kartlar dağıtılıyor… 🎴
1. Quiz Sayfasının Temel Yapısı – HTML ile Başlangıç
HTML, quiz’in iskeleti. Form olmadan hiçbir kullanıcı etkileşimi yok!
İşte temel bir yapı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Mini Quiz Oyunu</title>
<style>
body { font-family: Arial, sans-serif; background: #fdf6e3; padding: 20px; }
h1 { text-align: center; color: #1e90ff; }
form h2 { background: #f0f8ff; padding: 10px; border-radius: 10px; box-shadow: 2px 2px 5px gray; }
button { background-color: #1e90ff; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 10px; }
button:hover { background-color: #3742fa; }
.result { margin-top: 20px; font-size: 1.2em; font-weight: bold; }
</style>
</head>
<body>
<h1>Bilgi Kartı Quiz 🎲</h1>
<form id="quizForm">
<h2>Soru 1: HTML bir programlama dili midir?</h2>
<input type="radio" id="q1-true" name="q1" value="true">
<label for="q1-true">Doğru</label><br>
<input type="radio" id="q1-false" name="q1" value="false">
<label for="q1-false">Yanlış</label><br><br>
<h2>Soru 2: Hangisi HTML etiketi değildir?</h2>
<input type="radio" id="q2-div" name="q2" value="div">
<label for="q2-div">&lt;div&gt;</label><br>
<input type="radio" id="q2-span" name="q2" value="span">
<label for="q2-span">&lt;span&gt;</label><br>
<input type="radio" id="q2-bold" name="q2" value="bold">
<label for="q2-bold">&lt;bold&gt;</label><br><br>
<button type="submit">Cevapları Gönder 🎯</button>
</form>
<div id="result" class="result"></div>
</body>
</html>
🔹 İpucu:
<form>quiz’in ruhu; cevapları toplar ve işleme gönderir.<input type="radio">kullanıcıya tek seçim hakkı verir.<label>ile tıklanabilir alanı büyütüp erişilebilirliği artırıyoruz.
2. Kullanıcı Etkileşimi: Formu Canlandırmak
Formun gönderilmesi sadece HTML ile yetinmez; JavaScript ile interaktif hâle getiriyoruz:
<script>
const form = document.getElementById('quizForm');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', function(e) {
e.preventDefault(); // Sayfanın yenilenmesini durdur
let score = 0;
// Kullanıcı cevaplarını al
const q1 = form.q1.value;
const q2 = form.q2.value;
// Doğru cevapları kontrol et
if(q1 === 'false') score++; // HTML bir programlama dili değildir
if(q2 === 'bold') score++; // <bold> HTML etiketi değildir
// Sonucu göster
resultDiv.innerHTML = `<h2>Skorunuz: ${score}/2 🎉</h2>`;
// Mizahi bir dokunuş
if(score === 2){
resultDiv.innerHTML += "<p>Harika! Sen bir HTML kart sihirbazısın! 🧙♂️</p>";
} else if(score === 1){
resultDiv.innerHTML += "<p>İyi iş! Biraz daha pratikle uzman olursun. 😉</p>";
} else {
resultDiv.innerHTML += "<p>Hmm… Daha çok çalışmalısın! 💡</p>";
}
});
</script>
🔹 İpuçları:
e.preventDefault()sayfanın yenilenmesini engeller ve kullanıcı deneyimini bozmadan sonucu gösterir.- Kullanıcıya puanı ve küçük mesajlar göstererek interaktif ve eğlenceli bir deneyim yaratıyoruz.
3. Çoktan Seçmeli ve Doğru/Yanlış Sorularla Kartlar
Quiz’in daha eğlenceli hâle gelmesi için soruları kart gibi tasarlayabiliriz.
<h2>Soru 3: Hangi etiket içerik bölümlerini gruplar?</h2>
<input type="radio" id="q3-div" name="q3" value="div">
<label for="q3-div">&lt;div&gt;</label><br>
<input type="radio" id="q3-section" name="q3" value="section">
<label for="q3-section">&lt;section&gt;</label><br>
<input type="radio" id="q3-article" name="q3" value="article">
<label for="q3-article">&lt;article&gt;</label><br>
Kart tarzı ipucu:
- CSS ile
box-shadow,border-radiusvepaddingkullanarak her soruyu bir kart gibi göster. - Hover efekti ile kartlar açılır gibi animasyon ekle, kullanıcıyı eğlendir.
4. CSS ile Görsellik ve Eğlence
form h2 {
background: linear-gradient(135deg, #fdfbfb, #ebedee);
padding: 15px;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
form h2:hover {
transform: scale(1.02);
box-shadow: 4px 4px 15px rgba(0,0,0,0.3);
}
- Hover efekti ile kullanıcı soruya yaklaşınca kart “canlanır”.
- Renkli gradient ile sayfa daha çekici olur.
- Box-shadow ile kartlara derinlik katılır.
5. Bonus: Zamanlayıcı ile Mini Challenge ⏱️
<p id="timer">Kalan süre: 30 saniye</p>
<script>
let timeLeft = 30;
const timer = document.getElementById('timer');
const countdown = setInterval(() => {
if(timeLeft <= 0) {
clearInterval(countdown);
timer.innerHTML = "Süre doldu! ⏳";
} else {
timer.innerHTML = `Kalan süre: ${timeLeft} saniye`;
}
timeLeft -= 1;
}, 1000);
</script>
🎯 Kullanıcı soruları hızlı cevaplamaya çalışacak ve eğlence katlanacak!
6. Öğretici İpuçları ve Sıradışı Fikirler
<form>ile veri topla, JS ile anında geri bildirim ver.- Hover ve animasyon efektleri ile kartları canlandır.
- Emoji ve mizah ekle; kullanıcı sıkılmasın.
<details>ve<summary>kullanarak gizli ipuçları ver.- CSS ile her kartı farklı renk ve şekillerle kişiselleştir.
- Skor sonrası mesajlar ve animasyonlarla kullanıcıyı motive et.
7. Özet
- HTML: Quiz’in iskeleti (
<form>,<input>,<label>). - CSS: Kartları stilize et, hover ve gölge ile eğlence kat.
- JavaScript: Kullanıcı etkileşimi, puanlama ve geri bildirim.
- Pratik ipuçları: Hover efektleri, renkli kartlar, gizli ipuçları ve animasyonlar.
- Bonus fikir: Zamanlayıcı, emoji kullanımı, mini oyun hissi.
🎉 Sonuç: Bu mini quiz, hem öğretici hem interaktif, hem de eğlenceli bir HTML projesi oldu. Kullanıcılar hem öğreniyor hem eğleniyor!
