Sign In | Starter Of The Day | Tablesmaster | Fun Maths | Maths Map | Topics | More
@media (max-width: 620px) .desktop-content grid-template-columns: repeat(2, 1fr); gap: 1rem; .controls justify-content: center; width: 100%; .taskbar flex-direction: column; align-items: stretch; .blur-slider-container justify-content: space-between; </style> </head> <body> <div class="desktop-container"> <div class="blur-pc"> <!-- Taskbar / Header --> <div class="taskbar"> <div class="logo-area"> <div class="blur-badge"> <span>🌀 BLUR</span> PC </div> <div class="title">Blur Desktop Sim</div> </div> <div class="controls"> <div class="blur-slider-container"> <label>🌫️ Blur intensity</label> <input type="range" id="blurSlider" min="0" max="24" step="0.5" value="8"> <span id="blurValueDisplay" class="blur-value">8.0px</span> </div> <div class="reset-btn" id="resetBlurBtn">⟳ Reset</div> </div> </div>
<script> (function() { // --- DOM Elements --- const desktopArea = document.getElementById('desktopArea'); const blurSlider = document.getElementById('blurSlider'); const blurValueDisplay = document.getElementById('blurValueDisplay'); const liveBlurSpan = document.getElementById('liveBlurVal'); const resetBtn = document.getElementById('resetBlurBtn'); const demoToastBtn = document.getElementById('demoToastBtn'); const toggleGlowBtn = document.getElementById('toggleGlowBtn');
// --- State --- let currentBlur = 8; // default px let glowActive = false; let originalBorderStyle = '';
@keyframes subtlePulse 0% opacity: 0.7; 100% opacity: 1; Blur PC
button.small-action background: none; border: 1px solid cyan; color: cyan; padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; cursor: pointer; transition: 0.2s;
.blur-badge background: rgba(0, 255, 255, 0.2); padding: 5px 12px; border-radius: 40px; font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; backdrop-filter: blur(4px); color: #aaf0ff; border: 0.5px solid cyan; box-shadow: 0 0 4px cyan;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Blur PC | Desktop Blur Effect Simulator</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* prevent accidental text selection while dragging */ @media (max-width: 620px)
// For floating window dynamic status we already update live blur with slider. // Additional effect: show current blur on floating window status live. // Also ensure that any dynamic window can display value. const observer = new MutationObserver(() => {}); // just for style: make desktop area interactive even with blur filter. // to prevent annoying selection while dragging blur slider desktopArea.style.willChange = 'filter'; }
.reset-btn background: rgba(255, 80, 120, 0.2); border: 1px solid #ff7795; color: #ffb7c7; padding: 6px 14px; border-radius: 40px; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: 0.2s; backdrop-filter: blur(4px);
.window-content color: #ddd; font-size: 0.9rem; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; const observer = new MutationObserver(() => {}); //
/* THE "BLUR PC" CORE WIDGET */ .blur-pc background: #0f1119e6; border-radius: 1.8rem; backdrop-filter: blur(2px); overflow: hidden; width: 100%; max-width: 1100px; min-width: 280px; box-shadow: 0 20px 35px -12px black; transition: all 0.2s ease;
button.small-action:hover background: cyan; color: #0a0f1a;
input[type="range"]:focus outline: none;
// interactive icon clicks (just simulate desktop actions with a toast) function bindIconActions() const icons = [ el: docIcon, name: "Documents", msg: "📄 Opening 'My Documents' — blur protected storage" , el: photoIcon, name: "Gallery", msg: "🖼️ Gallery would show blurred previews (matching current blur)" , el: settingsIcon, name: "Blur FX", msg: `⚙️ Blur settings: intensity = $currentBlur.toFixed(1)px` , el: browserIcon, name: "Web Canvas", msg: "🌐 Browser canvas: rendered under blur effect" , el: terminalIcon, name: "Terminal", msg: ">_ BlurPC terminal: 'blur' command active." ]; icons.forEach(icon => if (!icon.el) return; icon.el.addEventListener('click', (e) => e.stopPropagation(); showToastMessage(`$icon.msg`, "#b0e0ff"); // extra special: settings updates current blur info dynamically if (icon.name === "Blur FX") setTimeout(() => showToastMessage(`Current blur radius: $currentBlur.toFixed(1)px`, "#7df9ff"); , 400); ); );
|
This is a game that can be played by one or two players or teams. It involves skill, timing and the ability to mentally add and subtract numbers. Players take it in turns to throw three darts at the board. The scores are then added and finally subtracted from the game total. The first person to reduce their game total to zero is the winner. The red circle at the centre of the board is called the bull's eye. You score 50 for getting a dart to land in this circle. Around that is a slightly larger circle which scores 25. Their are two thin rings on the board for which the sector score is either doubled or trebled. Double means multiply by two. Treble means multiply by three. The options below are only available to Transum subscribers. Solutions to puzzles, exercises and activities are also available when you are signed in to your Transum subscription account. If you do not yet have an account and you are a teacher or parent you can apply for one here. A Transum subscription also gives you access to the 'Class Admin' student management system and opens up ad-free access to the Transum website for you and your pupils. Number of seconds per turn: Game total for each player: Must get exactly zero to finish International darts rules also require you to finish with a double but it has been decided that that would be too difficult for this game. |
||
|
|
Playing a game requiring some mental arithmetic is much more fun that working through a traditional exercise. There are many other games on the Transum website requiring players to practise their numeracy skills. Have a look at the Mental Methods topic page. |
|
|
Do you have any comments? It is always useful to receive feedback and helps make this free resource even more useful for those learning Mathematics anywhere in the world. Click here to enter your comments. | ||
Karen Donnelly, Twitter
Friday, June 28, 2019