index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Masking Millionaire</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
  <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-2xl">
    <h1 class="text-4xl font-bold text-indigo-600 text-center mb-2">Masking Millionaire</h1>
    <p class="text-center text-sm text-gray-500 mb-6">
      Content source:
      <a href="https://learn.microsoft.com/en-us/fabric/data-warehouse/dynamic-data-masking"
         target="_blank"
         class="underline hover:text-indigo-700">
        Dynamic Data Masking in Fabric Data Warehouse
      </a>
    </p>

    <div id="board">
      <div id="question" class="text-2xl font-semibold text-gray-800 mb-4"></div>
      <div id="choices" class="space-y-3"></div>
      <div id="lifelines" class="flex justify-around mt-6">
        <button id="life5050" class="lifeline bg-yellow-400 hover:bg-yellow-500 text-white font-medium py-2 px-4 rounded-lg shadow">
          50:50
        </button>
        <button id="lifePoll" class="lifeline bg-blue-400 hover:bg-blue-500 text-white font-medium py-2 px-4 rounded-lg shadow">
          Ask the Class
        </button>
        <button id="lifeHint" class="lifeline bg-green-400 hover:bg-green-500 text-white font-medium py-2 px-4 rounded-lg shadow">
          Ask an Expert
        </button>
      </div>
      <div id="poll" class="text-sm text-gray-700 mt-4"></div>
      <div id="hint" class="text-sm italic text-gray-600 mt-2"></div>
      <button id="next" class="hidden mt-8 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg shadow">
        Next Question
      </button>
    </div>
  </div>

  <script>
    // Masking quiz data
    const questions = [
      { q: "Which feature simplifies obfuscation of sensitive data without modifying existing application queries?", choices: ["Column-level security","Dynamic data masking","Row-level security","Transparent data encryption"], correct: 1, hint: "It applies masks at query results, not at storage." },
      { q: "How many built-in masking functions does dynamic data masking provide in Fabric Data Warehouse?", choices: ["2","3","4","5"], correct: 2, hint: "The options: default, email, random, custom string." },
      { q: "Which mask function replaces string data with 'XXXX' based on data type?", choices: ["default()","email()","random()","partial()"], correct: 0, hint: "This is full masking according to the data type." },
      { q: "Which mask function exposes the first letter of an email and the constant suffix '.com'?", choices: ["default()","email()","random()","partial()"], correct: 1, hint: "It formats answer like aXXX@XXXX.com." },
      { q: "Which function masks numeric data with a random value within a specified range?", choices: ["default()","email()","random(start,end)","partial()"], correct: 2, hint: "Syntax: random([start],[end])." },
      { q: "Which masking function allows you to expose prefix and suffix with custom padding?", choices: ["default()","email()","random()","partial(prefix,pad,suffix)"], correct: 3, hint: "It’s called 'partial'." },
      { q: "Which Transact-SQL command is used to add a mask to an existing column?", choices: ["ADD MASK","MASK COLUMN","ALTER COLUMN... ADD MASKED WITH","CREATE MASK"], correct: 2, hint: "Use ALTER COLUMN ... ADD MASKED WITH." },
      { q: "Which permission is required to add, replace, or remove a mask on a column?", choices: ["UNMASK","ALTER ANY MASK","CONTROL","SELECT"], correct: 1, hint: "This permission targets mask operations." },
      { q: "Which permission grants a user the ability to view unmasked data specifically?", choices: ["UNMASK","ALTER ANY MASK","CONTROL","SELECT"], correct: 0, hint: "It’s literally named UNMASK." },
      { q: "The CONTROL permission on the database includes which of the following?", choices: ["UNMASK only","ALTER ANY MASK only","Both UNMASK and ALTER ANY MASK","None of the above"], correct: 2, hint: "It covers full mask management." },
      { q: "Dynamic data masking in Fabric Data Warehouse is complementary to which security feature?", choices: ["Transparent data encryption","Column-level security","Backup encryption","Data classification"], correct: 1, hint: "Think of restricting rows and fields." },
      { q: "By default, what value is used to mask datetime columns?", choices: ["0000-00-00","1900-01-01 00:00:00.0000000","1970-01-01","NULL"], correct: 1, hint: "It uses SQL Server’s default minimal date." },
      { q: "What is a limitation of dynamic data masking regarding security?", choices: ["Cannot mask numeric data","Protects against brute-force inference","Only applies to SELECT queries","Doesn't prevent malicious inference"], correct: 3, hint: "Unprivileged users can still infer data." },
      { q: "Who sees unmasked data by default in a masked table?", choices: ["Contributors","All database users","Unprivileged users","All users"], correct: 0, hint: "Workspace roles like Admin, Member or Contributor." },
      { q: "Which object-level security should you combine with dynamic data masking?", choices: ["Row-level security only","Column-level security only","Both row-level and column-level security","None"], correct: 2, hint: "Use multiple data protection features." }
    ];
    const prizes = [100,200,300,500,1000,2000,4000,8000,16000,32000,64000,125000,250000,500000,1000000];
    let idx = 0;
    let currentPrize = prizes[0];
    // Redistribute correct answers evenly across A–D
    questions.forEach((q, i) => {
      const target = i % 4;
      if (q.correct !== target) {
        [q.choices[target], q.choices[q.correct]] = [q.choices[q.correct], q.choices[target]];
        q.correct = target;
      }
    });
    const qEl     = document.getElementById('question');
    const cEl     = document.getElementById('choices');
    const pollEl  = document.getElementById('poll');
    const hintEl  = document.getElementById('hint');
    const nextBtn = document.getElementById('next');
    const boardEl = document.getElementById('board');
    function updateQuestionDisplay() {
      qEl.textContent = `$${currentPrize}: ${questions[idx].q}`;
    }
    function showQuestion() {
      ['life5050','lifePoll','lifeHint'].forEach(id => {
        const btn = document.getElementById(id);
        btn.disabled = false;
        btn.classList.remove('opacity-50');
      });
      pollEl.textContent = '';
      hintEl.textContent = '';
      nextBtn.classList.add('hidden');
      currentPrize = prizes[idx];
      updateQuestionDisplay();
      cEl.innerHTML = questions[idx].choices.map((ch,i) =>
        `<button class="choice bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded w-full" data-i="${i}">` +
        `${String.fromCharCode(65+i)}. ${ch}</button>`
      ).join('');
      document.querySelectorAll('.choice').forEach(btn => {
        btn.disabled = false;
        btn.onclick = selectAnswer;
      });
    }
    function selectAnswer(e) {
      const chosen = +e.target.dataset.i;
      const corr = questions[idx].correct;
      document.querySelectorAll('.choice').forEach(b => b.disabled = true);
      if (chosen === corr) {
        e.target.classList.replace('bg-indigo-500','bg-green-500');
      } else {
        e.target.classList.replace('bg-indigo-500','bg-red-500');
        document.querySelector(`.choice[data-i="${corr}"]`).classList.replace('bg-indigo-500','bg-green-500');
      }
      nextBtn.classList.remove('hidden');
    }
    // 50:50 Lifeline
    document.getElementById('life5050').onclick = () => {
      const btn = document.getElementById('life5050');
      if (btn.disabled) return;
      btn.disabled = true;
      btn.classList.add('opacity-50');
      const corr = questions[idx].correct;
      questions[idx].choices
        .map((_, i) => i)
        .filter(i => i !== corr)
        .sort(() => Math.random() - 0.5)
        .slice(0, 2)
        .forEach(i => {
          const b = document.querySelector(`.choice[data-i="${i}"]`);
          b.disabled = true;
          b.classList.add('opacity-50');
        });
      currentPrize = Math.floor(currentPrize / 2);
      updateQuestionDisplay();
    };
    // Ask the Class
    document.getElementById('lifePoll').onclick = () => {
      const btn = document.getElementById('lifePoll');
      if (btn.disabled) return;
      btn.disabled = true;
      btn.classList.add('opacity-50');
      const corr = questions[idx].correct;
      const pct = [0,0,0,0];
      pct[corr] = 70 + Math.floor(Math.random() * 21);
      let rem = 100 - pct[corr];
      questions[idx].choices.forEach((_, i) => {
        if (i !== corr) {
          const alloc = Math.floor(rem / 3);
          pct[i] = alloc;
          rem -= alloc;
        }
      });
      pollEl.textContent = `Class Poll: A:${pct[0]}% B:${pct[1]}% C:${pct[2]}% D:${pct[3]}%`;
    };
    // Ask an Expert
    document.getElementById('lifeHint').onclick = () => {
      const btn = document.getElementById('lifeHint');
      if (btn.disabled) return;
      btn.disabled = true;
      btn.classList.add('opacity-50');
      hintEl.textContent = `Expert Hint: ${questions[idx].hint}`;
    };
    // Next Question
    nextBtn.onclick = () => {
      idx++;
      if (idx < questions.length) {
        showQuestion();
      } else {
        boardEl.innerHTML = '<div class="text-3xl font-bold text-green-600 text-center">🎉 Congratulations! You’ve mastered Masking Millionaire! 🎉</div>';
      }
    };
    // Start
    showQuestion();
  </script>
</body>
</html>