Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sports & Casino Quiz</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #0d1b2a, #1a2a4a);
      color: #fff;
      min-height: 100vh;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container {
      max-width: 500px;
      width: 100%;
      background: rgba(10, 23, 42, 0.9);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      position: relative;
      border: 2px solid #ffcc00;
    }
    
    .header {
      background: linear-gradient(90deg, #c90d0d, #a00808);
      padding: 20px;
      text-align: center;
      position: relative;
      border-bottom: 3px solid #ffcc00;
    }
    
    .header h1 {
      font-size: 1.8rem;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      letter-spacing: 1px;
    }
    
    .header p {
      font-size: 1rem;
      opacity: 0.9;
      margin-top: 8px;
    }
    
    .content {
      padding: 25px;
      position: relative;
    }
    
    .progress-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      background: rgba(255, 255, 255, 0.1);
      padding: 12px 20px;
      border-radius: 50px;
      position: relative;
    }
    
    .progress-bar {
      position: absolute;
      height: 100%;
      background: linear-gradient(90deg, #ffcc00, #ff9900);
      border-radius: 50px;
      top: 0;
      left: 0;
      z-index: 0;
      transition: width 0.4s ease;
    }
    
    .progress-text {
      z-index: 1;
      font-weight: 600;
      font-size: 0.9rem;
    }
    
    .score-display {
      z-index: 1;
      background: #ffcc00;
      color: #1a2a4a;
      padding: 5px 15px;
      border-radius: 20px;
      font-weight: 700;
    }
    
    .question-container {
      background: rgba(255, 255, 255, 0.07);
      border-radius: 15px;
      padding: 25px;
      margin-bottom: 25px;
      border: 1px solid rgba(255, 204, 0, 0.3);
    }
    
    .question-number {
      font-size: 0.9rem;
      color: #ffcc00;
      margin-bottom: 10px;
      font-weight: 600;
    }
    
    .question-text {
      font-size: 1.3rem;
      line-height: 1.4;
      margin-bottom: 25px;
    }
    
    .options-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .option {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 15px;
      text-align: left;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1rem;
      position: relative;
      overflow: hidden;
    }
    
    .option:hover {
      background: rgba(255, 204, 0, 0.2);
      border-color: rgba(255, 204, 0, 0.5);
    }
    
    .option.correct {
      background: rgba(40, 167, 69, 0.3);
      border-color: #28a745;
    }
    
    .option.wrong {
      background: rgba(220, 53, 69, 0.3);
      border-color: #dc3545;
    }
    
    .feedback {
      padding: 15px;
      border-radius: 12px;
      margin: 15px 0;
      text-align: center;
      font-weight: 600;
      display: none;
      animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .feedback.correct {
      background: rgba(40, 167, 69, 0.2);
      border: 1px solid #28a745;
      color: #28a745;
    }
    
    .feedback.wrong {
      background: rgba(220, 53, 69, 0.2);
      border: 1px solid #dc3545;
      color: #dc3545;
    }
    
    .next-btn {
      background: linear-gradient(90deg, #ffcc00, #ff9900);
      color: #1a2a4a;
      border: none;
      border-radius: 50px;
      padding: 15px;
      width: 100%;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      display: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .next-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }
    
    .next-btn:active {
      transform: translateY(0);
    }
    
    .results-container {
      text-align: center;
      padding: 30px;
      display: none;
    }
    
    .results-container h2 {
      font-size: 2.2rem;
      margin-bottom: 20px;
      color: #ffcc00;
    }
    
    .final-score {
      font-size: 4rem;
      font-weight: 800;
      background: linear-gradient(90deg, #ffcc00, #ff9900);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 20px 0;
    }
    
    .message {
      font-size: 1.4rem;
      margin: 20px 0;
      font-weight: 600;
    }
    
    .restart-btn {
      background: linear-gradient(90deg, #ffcc00, #ff9900);
      color: #1a2a4a;
      border: none;
      border-radius: 50px;
      padding: 15px 30px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .restart-btn:hover {
      transform: scale(1.05);
    }
    
    .icon {
      font-size: 3rem;
      margin: 20px 0;
      color: #ffcc00;
    }
    
    .copyright {
      text-align: center;
      padding: 15px;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.6);
      border-top: 1px solid rgba(255, 204, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
    
    .diamond {
      position: absolute;
      font-size: 0.7rem;
      color: #ffcc00;
      opacity: 0.5;
      z-index: 0;
    }
    
    .diamond:nth-child(1) { top: 10%; left: 10%; }
    .diamond:nth-child(2) { top: 15%; right: 15%; }
    .diamond:nth-child(3) { bottom: 20%; left: 20%; }
    .diamond:nth-child(4) { bottom: 15%; right: 10%; }
    
    @media (max-width: 480px) {
      .header h1 { font-size: 1.5rem; }
      .question-text { font-size: 1.2rem; }
      .option { padding: 12px; font-size: 0.95rem; }
      .final-score { font-size: 3.5rem; }
      .message { font-size: 1.2rem; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1><i class="fas fa-dice"></i> Sports & Casino Quiz</h1>
      <p>Test your knowledge of sports and casino games!</p>
    </div>
    
    <div class="content">
      
      <div class="diamond"><i class="fas fa-diamond"></i></div>
      <div class="diamond"><i class="fas fa-diamond"></i></div>
      <div class="diamond"><i class="fas fa-diamond"></i></div>
      <div class="diamond"><i class="fas fa-diamond"></i></div>
      
      <div class="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
        <div class="progress-text" id="progress-text">Question 1 of 12</div>
        <div class="score-display">Score: <span id="score">0</span></div>
      </div>
      
      <div class="question-container">
        <div class="question-number">QUESTION <span id="current-q">1</span></div>
        <div class="question-text" id="question-text"></div>
        
        <div class="options-container" id="options-container">
          
        </div>
        
        <div class="feedback" id="feedback"></div>
        
        <button class="next-btn" id="next-btn">Next Question <i class="fas fa-arrow-right"></i></button>
      </div>
    </div>
    
    <div class="results-container" id="results-container">
      <i class="fas fa-trophy icon"></i>
      <h2>Quiz Completed!</h2>
      <div class="final-score"><span id="final-score">0</span>/12</div>
      <div class="message" id="message"></div>
      <button class="restart-btn" id="restart-btn"><i class="fas fa-redo"></i> Play Again</button>
    </div>
    
    <div class="copyright">
      © 2025 BetDiamondsGroup. All rights reserved.
    </div>
  </div>

  <script>
    const questions = [
      { 
        q: "Which casino game uses a spinning wheel with numbers?", 
        correct: "Roulette", 
        wrongs: ["Blackjack", "Poker", "Baccarat"] 
      },
      { 
        q: "What sport is Lionel Messi famous for?", 
        correct: "Football", 
        wrongs: ["Basketball", "Tennis", "Golf"] 
      },
      { 
        q: "In blackjack, what is the goal number?", 
        correct: "21", 
        wrongs: ["18", "30", "25"] 
      },
      { 
        q: "What do you call the person dealing cards in a casino?", 
        correct: "Dealer", 
        wrongs: ["Croupier", "Banker", "Manager"] 
      },
      { 
        q: "What is the term for the odds stacked against a favored team?", 
        correct: "Upset", 
        wrongs: ["Underdog", "Longshot", "Dark Horse"] 
      },
      { 
        q: "Which slot machine feature allows you to spin without spending money?", 
        correct: "Free Spins", 
        wrongs: ["Bonus Round", "Wild Symbol", "Multiplier"] 
      },
      { 
        q: "What is the most popular live casino game with a spinning wheel?", 
        correct: "Dream Catcher", 
        wrongs: ["Lightning Roulette", "Monopoly Live", "Crazy Time"] 
      },
      { 
        q: "Which sport uses terms like 'strike' and 'spare'?", 
        correct: "Bowling", 
        wrongs: ["Baseball", "Cricket", "Tennis"] 
      },
      { 
        q: "In roulette, what is the name for a bet on a single number?", 
        correct: "Straight Up", 
        wrongs: ["Split Bet", "Street Bet", "Corner Bet"] 
      },
      { 
        q: "What is the highest payout in a standard slot machine for matching five 7s?", 
        correct: "Jackpot", 
        wrongs: ["Mega Win", "Grand Prize", "Top Award"] 
      },
      { 
        q: "Which of these is a famous slot machine manufacturer?", 
        correct: "IGT", 
        wrongs: ["EA Sports", "Blizzard", "Sony Interactive"] 
      },
      { 
        q: "Which live casino game features a presenter and a money wheel?", 
        correct: "Crazy Time", 
        wrongs: ["Lightning Dice", "Football Studio", "Gonzo's Treasure Hunt"] 
      }
    ];

    let currentQuestion = 0;
    let score = 0;
    const quizElement = document.querySelector('.question-container');
    const resultsElement = document.getElementById('results-container');
    const scoreElement = document.getElementById('score');
    const finalScoreElement = document.getElementById('final-score');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const currentQElement = document.getElementById('current-q');

    // Initialize quiz
    function initQuiz() {
      currentQuestion = 0;
      score = 0;
      scoreElement.textContent = score;
      updateProgressBar();
      showQuestion();
    }

    // Display current question
    function showQuestion() {
      if (currentQuestion >= questions.length) {
        showResults();
        return;
      }

      const question = questions[currentQuestion];
      document.getElementById('question-text').textContent = question.q;
      currentQElement.textContent = currentQuestion + 1;
      
      const optionsContainer = document.getElementById('options-container');
      optionsContainer.innerHTML = '';
      
      // Combine correct and wrong answers and shuffle
      const allOptions = [...question.wrongs, question.correct];
      shuffleArray(allOptions);
      
      // Create option buttons
      allOptions.forEach(option => {
        const button = document.createElement('div');
        button.className = 'option';
        button.textContent = option;
        button.addEventListener('click', () => checkAnswer(option, question.correct));
        optionsContainer.appendChild(button);
      });
      
      // Reset UI elements
      document.getElementById('feedback').style.display = 'none';
      document.getElementById('next-btn').style.display = 'none';
    }

    // Check selected answer
    function checkAnswer(selected, correct) {
      const options = document.querySelectorAll('.option');
      const feedback = document.getElementById('feedback');
      const nextBtn = document.getElementById('next-btn');
      
      // Disable all options
      options.forEach(option => {
        option.style.pointerEvents = 'none';
        if (option.textContent === correct) {
          option.classList.add('correct');
        } else if (option.textContent === selected) {
          option.classList.add('wrong');
        }
      });
      
      // Show feedback
      if (selected === correct) {
        feedback.textContent = '✅ Correct! Well done!';
        feedback.className = 'feedback correct';
        score++;
        scoreElement.textContent = score;
      } else {
        feedback.textContent = `❌ Incorrect! The correct answer is: ${correct}`;
        feedback.className = 'feedback wrong';
      }
      
      feedback.style.display = 'block';
      nextBtn.style.display = 'block';
    }

    // Show results screen
    function showResults() {
      quizElement.style.display = 'none';
      resultsElement.style.display = 'block';
      finalScoreElement.textContent = score;
      
      const message = document.getElementById('message');
      if (score >= 10) {
        message.textContent = '🎉 Casino Master! Excellent knowledge!';
        message.style.color = '#ffcc00';
      } else if (score >= 7) {
        message.textContent = '👍 Solid Performance! You know your stuff!';
        message.style.color = '#4CAF50';
      } else if (score >= 5) {
        message.textContent = '😅 Not bad! Try again to improve!';
        message.style.color = '#FF9800';
      } else {
        message.textContent = '🤔 Better luck next time! Keep learning!';
        message.style.color = '#F44336';
      }
    }

    // Update progress bar
    function updateProgressBar() {
      const progressPercentage = (currentQuestion / questions.length) * 100;
      progressBar.style.width = `${progressPercentage}%`;
      progressText.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
    }

    // Utility function to shuffle array
    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    // Event listeners
    document.getElementById('next-btn').addEventListener('click', () => {
      currentQuestion++;
      updateProgressBar();
      showQuestion();
    });

    document.getElementById('restart-btn').addEventListener('click', () => {
      resultsElement.style.display = 'none';
      quizElement.style.display = 'block';
      initQuiz();
    });

    // Initialize the quiz
    window.onload = initQuiz;
  </script>
</body>
</html>

betdiamonds