HTML Seviyeli Bilgi Yarışması Oyunu (Blogger için)

 HTML Seviyeli Bilgi Yarışması Oyunu (Blogger için)

Aşağıda Blogger'da yayınlayabileceğiniz, seviyeli bir bilgi yarışması oyununun HTML, CSS ve JavaScript kodlarını bulabilirsiniz. Bu kodları Blogger'ın "HTML/JavaScript" widget'ına ekleyerek yayınlayabilirsiniz.

Tam Kod Örneği

html

Copy

Download

Run

<div class="quiz-container">
  <div id="quiz-level-selection" class="quiz-section">
    <h2>Bilgi Yarışması</h2>
    <p>Seviye seçerek bilginizi test edin!</p>
    <div class="level-buttons">
      <button onclick="startQuiz(1)">Seviye 1 (Kolay)</button>
      <button onclick="startQuiz(2)">Seviye 2 (Orta)</button>
      <button onclick="startQuiz(3)">Seviye 3 (Zor)</button>
    </div>
  </div>

  <div id="quiz-game" class="quiz-section" style="display:none;">
    <div class="quiz-header">
      <span id="level-display">Seviye: 1</span>
      <span id="score-display">Puan: 0</span>
      <span id="question-count">Soru: 1/5</span>
    </div>
    
    <div id="question-container">
      <h3 id="question-text">Soru buraya gelecek</h3>
      <div id="options-container" class="options-grid"></div>
    </div>
    
    <button id="next-button" onclick="nextQuestion()" disabled>Sonraki Soru</button>
  </div>

  <div id="quiz-result" class="quiz-section" style="display:none;">
    <h2>Yarışma Sonuçları</h2>
    <div id="result-details">
      <p>Seviye: <span id="result-level">1</span></p>
      <p>Doğru Cevaplar: <span id="correct-answers">0</span>/<span id="total-questions">5</span></p>
      <p>Toplam Puan: <span id="total-score">0</span></p>
      <p id="result-message">Sonuç mesajı burada görünecek</p>
    </div>
    <button onclick="restartQuiz()">Tekrar Oyna</button>
    <button onclick="selectLevel()">Başka Seviye Seç</button>
  </div>
</div>

<style>
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.quiz-section {
  text-align: center;
}

.quiz-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.level-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.level-buttons button {
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.level-buttons button:nth-child(1) {
  background-color: #2ecc71;
  color: white;
}

.level-buttons button:nth-child(2) {
  background-color: #f39c12;
  color: white;
}

.level-buttons button:nth-child(3) {
  background-color: #e74c3c;
  color: white;
}

.level-buttons button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

#question-text {
  font-size: 20px;
  margin-bottom: 30px;
  color: #2c3e50;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.option-btn {
  padding: 12px;
  background-color: #ecf0f1;
  border: 2px solid #bdc3c7;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
}

.option-btn:hover {
  background-color: #d6eaf8;
  border-color: #3498db;
}

.option-btn.correct {
  background-color: #2ecc71;
  color: white;
  border-color: #27ae60;
}

.option-btn.incorrect {
  background-color: #e74c3c;
  color: white;
  border-color: #c0392b;
}

.option-btn.selected {
  border: 2px solid #3498db;
  background-color: #3498db;
  color: white;
}

#next-button {
  padding: 12px 30px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

#next-button:hover {
  background-color: #2980b9;
}

#next-button:disabled {
  background-color: #95a5a6;
  cursor: not-allowed;
}

#quiz-result button {
  padding: 12px 20px;
  margin: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

#quiz-result button:nth-child(1) {
  background-color: #3498db;
  color: white;
}

#quiz-result button:nth-child(2) {
  background-color: #2ecc71;
  color: white;
}

#quiz-result button:hover {
  opacity: 0.9;
}

#result-details {
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 5px;
  margin: 20px 0;
  text-align: left;
}

#result-details p {
  font-size: 18px;
  margin: 10px 0;
}

#result-message {
  font-weight: bold;
  font-size: 20px;
  color: #2c3e50;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .options-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
// Soru bankası
const questions = {
  1: [
    {
      question: "Türkiye'nin başkenti neresidir?",
      options: ["İstanbul", "Ankara", "İzmir", "Bursa"],
      answer: 1
    },
    {
      question: "Hangi gezegen 'Kızıl Gezegen' olarak bilinir?",
      options: ["Venüs", "Mars", "Jüpiter", "Satürn"],
      answer: 1
    },
    {
      question: "Atatürk'ün doğduğu şehir hangisidir?",
      options: ["İstanbul", "Ankara", "Selanik", "Samsun"],
      answer: 2
    },
    {
      question: "Türkiye'nin en uzun nehri hangisidir?",
      options: ["Sakarya", "Kızılırmak", "Fırat", "Dicle"],
      answer: 1
    },
    {
      question: "Hangi mevsimde yapraklar dökülür?",
      options: ["İlkbahar", "Yaz", "Sonbahar", "Kış"],
      answer: 2
    }
  ],
  2: [
    {
      question: "Mona Lisa tablosu kime aittir?",
      options: ["Van Gogh", "Picasso", "Da Vinci", "Michelangelo"],
      answer: 2
    },
    {
      question: "Hangi elementin sembolü 'Au'dur?",
      options: ["Gümüş", "Altın", "Arsenik", "Alüminyum"],
      answer: 1
    },
    {
      question: "Türkiye'nin en büyük gölü hangisidir?",
      options: ["Tuz Gölü", "Van Gölü", "Eğirdir Gölü", "Beyşehir Gölü"],
      answer: 1
    },
    {
      question: "Hangi ülkenin bayrağında hilal ve yıldız vardır?",
      options: ["Pakistan", "Türkiye", "Malezya", "Azerbaycan"],
      answer: 1
    },
    {
      question: "İlk Türk denizcisi kimdir?",
      options: ["Piri Reis", "Barbaros Hayreddin Paşa", "Kemal Reis", "Turgut Reis"],
      answer: 0
    }
  ],
  3: [
    {
      question: "Hangi yazar 'Kürk Mantolu Madonna' romanını yazmıştır?",
      options: ["Yaşar Kemal", "Sabahattin Ali", "Orhan Pamuk", "Ahmet Hamdi Tanpınar"],
      answer: 1
    },
    {
      question: "Türkiye'nin ilk milli parkı hangisidir?",
      options: ["Yozgat Çamlığı", "Uludağ", "Göreme Tarihi Milli Parkı", "Dilek Yarımadası"],
      answer: 0
    },
    {
      question: "Hangi bilim insanı yerçekimi kanununu bulmuştur?",
      options: ["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Nikola Tesla"],
      answer: 1
    },
    {
      question: "Türkiye'nin en doğusundaki il hangisidir?",
      options: ["Iğdır", "Kars", "Ağrı", "Van"],
      answer: 0
    },
    {
      question: "Hangi gezegenin halkaları vardır?",
      options: ["Mars", "Jüpiter", "Satürn", "Uranüs"],
      answer: 2
    }
  ]
};

let currentLevel = 1;
let currentQuestionIndex = 0;
let score = 0;
let selectedOption = null;
let correctAnswers = 0;

// Seviye seçimi
function startQuiz(level) {
  currentLevel = level;
  currentQuestionIndex = 0;
  score = 0;
  correctAnswers = 0;
  
  document.getElementById('quiz-level-selection').style.display = 'none';
  document.getElementById('quiz-game').style.display = 'block';
  document.getElementById('level-display').textContent = `Seviye: ${level}`;
  document.getElementById('score-display').textContent = `Puan: ${score}`;
  
  loadQuestion();
}

// Soru yükleme
function loadQuestion() {
  const currentQuestions = questions[currentLevel];
  const question = currentQuestions[currentQuestionIndex];
  
  document.getElementById('question-text').textContent = question.question;
  document.getElementById('question-count').textContent = `Soru: ${currentQuestionIndex + 1}/${currentQuestions.length}`;
  
  const optionsContainer = document.getElementById('options-container');
  optionsContainer.innerHTML = '';
  
  question.options.forEach((option, index) => {
    const button = document.createElement('button');
    button.textContent = option;
    button.className = 'option-btn';
    button.onclick = () => selectOption(index);
    optionsContainer.appendChild(button);
  });
  
  document.getElementById('next-button').disabled = true;
  selectedOption = null;
}

// Seçenek seçme
function selectOption(index) {
  if (selectedOption !== null) return;
  
  selectedOption = index;
  const options = document.querySelectorAll('.option-btn');
  options.forEach(option => option.classList.remove('selected'));
  options[index].classList.add('selected');
  
  document.getElementById('next-button').disabled = false;
}

// Sonraki soru
function nextQuestion() {
  const currentQuestions = questions[currentLevel];
  const question = currentQuestions[currentQuestionIndex];
  const options = document.querySelectorAll('.option-btn');
  
  // Doğru cevabı işaretle
  options[question.answer].classList.add('correct');
  
  // Yanlış cevap verilmişse işaretle
  if (selectedOption !== question.answer) {
    options[selectedOption].classList.add('incorrect');
  } else {
    correctAnswers++;
    score += currentLevel * 10; // Seviye yükseldikçe puan artar
    document.getElementById('score-display').textContent = `Puan: ${score}`;
  }
  
  // Kısa bir bekleme süresi
  setTimeout(() => {
    currentQuestionIndex++;
    
    if (currentQuestionIndex < currentQuestions.length) {
      loadQuestion();
    } else {
      showResult();
    }
  }, 1500);
}

// Sonuçları göster
function showResult() {
  document.getElementById('quiz-game').style.display = 'none';
  document.getElementById('quiz-result').style.display = 'block';
  
  const currentQuestions = questions[currentLevel];
  document.getElementById('result-level').textContent = currentLevel;
  document.getElementById('correct-answers').textContent = correctAnswers;
  document.getElementById('total-questions').textContent = currentQuestions.length;
  document.getElementById('total-score').textContent = score;
  
  const percentage = (correctAnswers / currentQuestions.length) * 100;
  let message = '';
  
  if (percentage >= 80) {
    message = 'Mükemmel! Çok iyi bir performans gösterdiniz.';
  } else if (percentage >= 60) {
    message = 'İyi iş! Biraz daha çalışarak daha iyi olabilirsiniz.';
  } else if (percentage >= 40) {
    message = 'Orta seviye. Daha fazla pratik yapmalısınız.';
  } else {
    message = 'Başarısız oldunuz. Tekrar denemelisiniz.';
  }
  
  document.getElementById('result-message').textContent = message;
}

// Yeniden başlat
function restartQuiz() {
  startQuiz(currentLevel);
}

// Seviye seçimine dön
function selectLevel() {
  document.getElementById('quiz-result').style.display = 'none';
  document.getElementById('quiz-level-selection').style.display = 'block';
}
</script>

Özellikler

1. 3 Farklı Seviye: Kolay, Orta ve Zor seviyeleri

2. Dinamik Puanlama: Seviye arttıkça soru başına kazanılan puan artar

3. Cevap Geribildirimi: Doğru ve yanlış cevaplar renklerle gösterilir

4. Mobil Uyumlu: Küçük ekranlarda da düzgün görüntülenir

5. Detaylı Sonuç Ekranı: Performans değerlendirmesi ve özet bilgiler

Blogger'a Nasıl Eklenir?

1. Blogger paneline giriş yapın

2. "Yerleşim" sekmesine tıklayın

3. "Gadget Ekle" butonuna tıklayın

4. Açılan listeden "HTML/JavaScript" seçeneğini seçin

5. Açılan pencereye yukarıdaki tüm kodu kopyalayıp yapıştırın

6. "Kaydet" butonuna tıklayın

Özelleştirme Önerileri

1. Soru Bankasını Genişletin: Daha fazla soru ve seviye ekleyebilirsiniz

2. Tema Renklerini Değiştirin: CSS bölümündeki renk kodlarını değiştirerek sitenize uyumlu hale getirebilirsiniz

3. Zamanlayıcı Ekleyin: Her soru için belirli bir süre ekleyebilirsiniz

4. Konu Seçme Özelliği: Farklı konularda quizler ekleyebilirsiniz

Bu bilgi yarışması oyunu, blog ziyaretçilerinizin etkileşimde bulunmasını sağlayacak ve sitenizde daha fazla vakit geçirmelerine yardımcı olacaktır.