Spaces:

Culturetiming
/

Test_game

Running

App Files Files Community

Culturetiming commited on Jul 23, 2025

Commit

df2e204

verified ·

1 Parent(s): f0fe359

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -18

index.html CHANGED Viewed

@@ -1,19 +1,174 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </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>