Update index.html
Browse files- index.html +19 -3
index.html
CHANGED
|
@@ -37,7 +37,10 @@
|
|
| 37 |
}
|
| 38 |
.btn-reset:hover{ transform: translateY(-1px) }
|
| 39 |
.btn-reset:active{ transform: translateY(0) }
|
| 40 |
-
|
|
|
|
|
|
|
|
|
|
| 41 |
#game-board{
|
| 42 |
display:grid;
|
| 43 |
grid-template-columns: repeat(5, 1fr);
|
|
@@ -111,6 +114,9 @@
|
|
| 111 |
position: fixed; inset:0; display:none; align-items:center; justify-content:center;
|
| 112 |
z-index: 9999; pointer-events:none;
|
| 113 |
background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));
|
|
|
|
|
|
|
|
|
|
| 114 |
animation: dd-bg 1.2s ease-in-out 2;
|
| 115 |
}
|
| 116 |
.dd-text{
|
|
@@ -145,8 +151,8 @@
|
|
| 145 |
</head>
|
| 146 |
<body>
|
| 147 |
<h1>Five Algorithms Jeopardy</h1>
|
| 148 |
-
<a class="source" href="
|
| 149 |
-
Source:
|
| 150 |
</a>
|
| 151 |
|
| 152 |
<div class="topbar">
|
|
@@ -229,6 +235,7 @@
|
|
| 229 |
a: ["Feature scaling/standardization", "Adding bias terms to features", "Label smoothing"], correct: 0 }
|
| 230 |
]
|
| 231 |
];
|
|
|
|
| 232 |
let score = 0, answered = 0;
|
| 233 |
const total = 15;
|
| 234 |
const board = document.getElementById("game-board"),
|
|
@@ -239,7 +246,9 @@
|
|
| 239 |
const ddAudio = document.getElementById("dd-audio");
|
| 240 |
const shuffleRegistry = new Map();
|
| 241 |
const missedQuestions = [];
|
|
|
|
| 242 |
const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };
|
|
|
|
| 243 |
document.getElementById('reset-btn').addEventListener('click', () => location.reload());
|
| 244 |
|
| 245 |
function createBoard() {
|
|
@@ -266,6 +275,8 @@
|
|
| 266 |
board.appendChild(card);
|
| 267 |
}
|
| 268 |
}
|
|
|
|
|
|
|
| 269 |
}
|
| 270 |
|
| 271 |
function handleCardClick(card){
|
|
@@ -284,11 +295,15 @@
|
|
| 284 |
const ring = document.createElement("div");
|
| 285 |
ring.className = "flash-ring";
|
| 286 |
card.appendChild(ring);
|
|
|
|
| 287 |
ddAudio.currentTime = 0;
|
| 288 |
ddAudio.play().catch(()=>{});
|
|
|
|
|
|
|
| 289 |
ddOverlay.style.display = "flex";
|
| 290 |
setTimeout(() => {
|
| 291 |
ddOverlay.style.display = "none";
|
|
|
|
| 292 |
ring.remove();
|
| 293 |
onDone();
|
| 294 |
}, 2400);
|
|
@@ -380,6 +395,7 @@
|
|
| 380 |
}
|
| 381 |
}
|
| 382 |
|
|
|
|
| 383 |
createBoard();
|
| 384 |
</script>
|
| 385 |
</body>
|
|
|
|
| 37 |
}
|
| 38 |
.btn-reset:hover{ transform: translateY(-1px) }
|
| 39 |
.btn-reset:active{ transform: translateY(0) }
|
| 40 |
+
|
| 41 |
+
/* Anti-blink: hide the stage until JS finishes injecting cards */
|
| 42 |
+
.stage{ perspective: 1200px; width:min(1100px, 95vw); visibility:hidden; }
|
| 43 |
+
|
| 44 |
#game-board{
|
| 45 |
display:grid;
|
| 46 |
grid-template-columns: repeat(5, 1fr);
|
|
|
|
| 114 |
position: fixed; inset:0; display:none; align-items:center; justify-content:center;
|
| 115 |
z-index: 9999; pointer-events:none;
|
| 116 |
background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));
|
| 117 |
+
/* animation only applied when shown to avoid any first-paint flicker */
|
| 118 |
+
}
|
| 119 |
+
.dd-overlay.active{
|
| 120 |
animation: dd-bg 1.2s ease-in-out 2;
|
| 121 |
}
|
| 122 |
.dd-text{
|
|
|
|
| 151 |
</head>
|
| 152 |
<body>
|
| 153 |
<h1>Five Algorithms Jeopardy</h1>
|
| 154 |
+
<a class="source" href="https://www.linkedin.com/pulse/foundational-machine-learning-algorithms-modern-data-science-lively-t4xje/" target="_blank" rel="noopener noreferrer">
|
| 155 |
+
Source: Foundational Machine Learning Algorithms for Modern Data Science (LinkedIn)
|
| 156 |
</a>
|
| 157 |
|
| 158 |
<div class="topbar">
|
|
|
|
| 235 |
a: ["Feature scaling/standardization", "Adding bias terms to features", "Label smoothing"], correct: 0 }
|
| 236 |
]
|
| 237 |
];
|
| 238 |
+
|
| 239 |
let score = 0, answered = 0;
|
| 240 |
const total = 15;
|
| 241 |
const board = document.getElementById("game-board"),
|
|
|
|
| 246 |
const ddAudio = document.getElementById("dd-audio");
|
| 247 |
const shuffleRegistry = new Map();
|
| 248 |
const missedQuestions = [];
|
| 249 |
+
|
| 250 |
const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };
|
| 251 |
+
|
| 252 |
document.getElementById('reset-btn').addEventListener('click', () => location.reload());
|
| 253 |
|
| 254 |
function createBoard() {
|
|
|
|
| 275 |
board.appendChild(card);
|
| 276 |
}
|
| 277 |
}
|
| 278 |
+
// Reveal the stage only after cards are injected to prevent initial blink
|
| 279 |
+
document.querySelector('.stage').style.visibility = 'visible';
|
| 280 |
}
|
| 281 |
|
| 282 |
function handleCardClick(card){
|
|
|
|
| 295 |
const ring = document.createElement("div");
|
| 296 |
ring.className = "flash-ring";
|
| 297 |
card.appendChild(ring);
|
| 298 |
+
|
| 299 |
ddAudio.currentTime = 0;
|
| 300 |
ddAudio.play().catch(()=>{});
|
| 301 |
+
|
| 302 |
+
ddOverlay.classList.add('active');
|
| 303 |
ddOverlay.style.display = "flex";
|
| 304 |
setTimeout(() => {
|
| 305 |
ddOverlay.style.display = "none";
|
| 306 |
+
ddOverlay.classList.remove('active');
|
| 307 |
ring.remove();
|
| 308 |
onDone();
|
| 309 |
}, 2400);
|
|
|
|
| 395 |
}
|
| 396 |
}
|
| 397 |
|
| 398 |
+
// Build board on load
|
| 399 |
createBoard();
|
| 400 |
</script>
|
| 401 |
</body>
|