https://example.com/tools/ Recent content in Tools on MC Chung Hugo en Wed, 05 Nov 2025 00:00:00 +0000 https://example.com/tools/rpsgame/ Wed, 05 Nov 2025 00:00:00 +0000 https://example.com/tools/rpsgame/ <style> .game-description { margin-bottom: 20px; } .game-container { max-width: 800px; margin: 0 auto; padding: 20px; border: 2px solid #666; border-radius: 10px; background-color: transparent; } .parameters-title { font-size: 20px; font-weight: bold; margin-bottom: 25px; color: white; } .input-section { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .top-row { display: flex; gap: 15px; justify-content: space-between; } .input-group { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .input-group label { font-weight: bold; color: white; white-space: nowrap; } .input-group input { padding: 8px; border: 1px solid #666; border-radius: 4px; font-size: 14px; width: 60px; background-color: transparent; color: white; } #startButton { padding: 12px 24px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; margin-left: 20px; margin-bottom: 10px; } #startButton:hover { background-color: #0056b3; } #startButton:disabled { background-color: #6c757d; cursor: not-allowed; } #simulationResults { margin-top: 30px; background-color: white; border: 2px solid #666; border-radius: 10px; height: 400px; position: relative; overflow: hidden; display: none; } #gameCanvas { width: 100%; height: 100%; display: block; } #countdown { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: bold; color: #333; z-index: 1000; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); background-color: white; } .rps-item { position: absolute; width: 40px; height: 40px; pointer-events: none; } #progressBar { position: absolute; bottom: 10px; left: 10px; right: 10px; background-color: rgba(102, 102, 102, 0.8); border-radius: 8px; height: 8px; overflow: hidden; display: none; /* border: 1px solid rgba(51, 51, 51, 0.8); */ z-index: 500; } #progressFill { height: 100%; width: 0%; background: linear-gradient(90deg, #007bff, #0056b3, #004085); transition: width 0.1s ease; border-radius: 6px; } #simulationSummary { margin-top: 10px; background-color: white; border: 2px solid #666; border-radius: 10px; padding: 20px; display: none; color: #333; } .summary-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; text-align: center; color: #333; } .summary-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; } .result-item { padding: 10px; border-radius: 8px; background-color: #f8f9fa; border: 1px solid #dee2e6; } .result-item .type { font-weight: bold; font-size: 16px; margin-bottom: 5px; } .result-item .count { font-size: 24px; font-weight: bold; color: #007bff; } @media (max-width: 600px) { #countdown { font-size: 80px; } .rps-item { width: 30px; height: 30px; } } @media (max-width: 600px) { .top-row { flex-direction: column; align-items: center; gap: 10px; } .bottom-row { flex-direction: column; align-items: flex-start; gap: 10px; } #startButton { margin-left: 0; } } </style> <div class="game-description"> <p>Set the quantity of each option and simulation time to observe the distribution of battle results.</p> https://example.com/tools/unfaircoin/ Tue, 30 Sep 2025 00:00:00 +0000 https://example.com/tools/unfaircoin/ <style> .game-container { text-align: center; padding: 20px; max-width: 600px; margin: 0 auto; } .coin-container { margin: 40px 0; perspective: 1000px; height: 200px; display: flex; justify-content: center; align-items: center; } .coin { width: 150px; height: 150px; position: relative; transform-style: preserve-3d; transition: transform ease-out; } .coin-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 50%; overflow: hidden; } .coin-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .coin-heads { transform: rotateY(0deg); } .coin-tails { transform: rotateY(180deg); } .flip-animation { animation: flip ease-out; } @keyframes flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(1800deg); } } .game-button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor: pointer; border-radius: 4px; } .game-button:disabled { background-color: #cccccc; cursor: not-allowed; } </style> <div> Press start to flip the coin. <ul> <li> If it lands heads up, you give me 10 dollars.</li> <li> If it lands tails up, I will give you 10 dollars.</li> </ul> </div> <div class="game-container"> <div class="coin-container"> <div id="coin" class="coin"> <div class="coin-face coin-heads"> <img src="https://example.com/images/coin-head.png" width="150" height="150" alt="Coin Head"> </div> <div class="coin-face coin-tails"> <img src="https://example.com/images/coin-tail.png" width="150" height="150" alt="Coin Tail"> </div> </div> </div> <button id="flipButton" class="game-button" onclick="flipCoin()">Start</button> </div> <script> let isFlipping = false; function flipCoin() { if (isFlipping) return; isFlipping = true; const flipButton = document.getElementById('flipButton'); const coin = document.getElementById('coin'); flipButton.disabled = true; flipButton.textContent = 'Flipping...'; // 隨機翻轉時間 3-7 秒 const flipDuration = Math.random() * 4000 + 3000; // 3000-7000ms // 決定結果 (90% 正面, 10% 背面) const isHeads = Math.random() < 0.9; // 計算最終角度 const baseRotations = 5; // 基本翻轉次數 const extraRotations = Math.floor(Math.random() * 3); // 額外 0-2 次翻轉 const totalRotations = baseRotations + extraRotations; const finalAngle = isHeads ? totalRotations * 360 : totalRotations * 360 + 180; // 應用動畫 coin.style.animationDuration = flipDuration + 'ms'; coin.style.transform = `rotateY(${finalAngle}deg)`; coin.classList.add('flip-animation'); setTimeout(() => { coin.classList.remove('flip-animation'); flipButton.disabled = false; flipButton.textContent = 'Start'; isFlipping = false; }, flipDuration); } </script> https://example.com/tools/montyhall/ Wed, 10 Jul 2024 00:00:00 +0000 https://example.com/tools/montyhall/ <style> .grid-wapper { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: lightgray; } .grid-wapper1 { display: grid; grid-template-columns: 1fr; text-align: center; } .center { display: flex; justify-self: center; align-content: center; } </style> <div> Suppose you're on a game show, and you're given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what's behind the doors, opens another door, say No. 3, which has a goat. He then says to you, "Do you want to pick door No. 2?" Is it to your advantage to switch your choice? </div> <div class="grid-wapper" style="margin-top: 20px;"> <div class="grid-wapper1"> <div class="center" style="margin-top: 20px;"><img id="doorImg1" src="https://example.com/images/door.svg" /></div> <div style="margin-bottom: 10px;"><input type="radio" id="door1" value="door1" name="chooseDoor" /></div> </div> <div class="grid-wapper1"> <div class="center" style="margin-top: 20px;"><img id="doorImg2" src="https://example.com/images/door.svg" /></div> <div style="margin-bottom: 10px;"><input type="radio" id="door2" value="door2" name="chooseDoor" /></div> </div> <div class="grid-wapper1"> <div class="center" style="margin-top: 20px;"><img id="doorImg3" src="https://example.com/images/door.svg" /></div> <div style="margin-bottom: 10px;"><input type="radio" id="door3" value="door3" name="chooseDoor" /></div> </div> </div> <div style="text-align: center; margin-top: 10px;"> <button type="button" id="checkBtn" onclick="showOneDoor()">Check</button> <button type="button" id="changeBtn" style="display: none;" onclick="showResult(this.id)">Change</button> <button type="button" id="notChangeBtn" style="display: none; margin-left: 10px;" onclick="showResult(this.id)">Not Change</button> <button type="button" id="restartBtn" style="display: none;" onclick="location.reload()">Restart</button> </div> <script> var carDoor, chooseDoor, openGoatDoor, remainDoor; function showOneDoor() { try { chooseDoor = parseInt(document.querySelector('input[name="chooseDoor"]:checked').value[4]); carDoor = Math.ceil(Math.random() * 3); const doors = [1, 2, 3]; // openDoor(carDoor); console.log(chooseDoor); console.log(`door${carDoor}`); if (`${chooseDoor}` === `door${carDoor}`) { doors.splice(carDoor - 1, 1); console.log(doors); var openGoatDoorIndex = Math.ceil(Math.random() * 2); openGoatDoor = doors[openGoatDoorIndex - 1]; doors.splice(openGoatDoorIndex - 1, 1); remainDoor = doors[0]; openDoor(openGoatDoor); } else { openGoatDoor = doors.filter(x => x != carDoor && x != chooseDoor)[0]; remainDoor = doors.filter(x => x != openGoatDoor && x != chooseDoor)[0]; openDoor(openGoatDoor); } var checkBtn = document.getElementById("checkBtn"); var changeBtn = document.getElementById("changeBtn"); var notChangeBtn = document.getElementById("notChangeBtn"); checkBtn.style.display = 'none'; changeBtn.style.display = ''; notChangeBtn.style.display = ''; } catch (e) { alert("Please choose a door!") } } function openDoor(doorNumber) { var doorImgElement = document.getElementById(`doorImg${doorNumber}`); doorImgElement.src = "/images/goat.svg"; } async function showResult(btnId) { console.log(btnId) var doorImgElement = document.getElementById(`doorImg${openGoatDoor}`); doorImgElement.style.opacity = 0; if (btnId == "changeBtn") { var doorRadioElement = document.getElementById(`door${remainDoor}`); doorRadioElement.checked = true; var temp = remainDoor; remainDoor = chooseDoor; chooseDoor = temp; } await new Promise(r => setTimeout(r, 500)); var doorImgElement = document.getElementById(`doorImg${chooseDoor}`); if (carDoor == chooseDoor) { doorImgElement.src = "/images/car.svg"; } else { doorImgElement.src = "/images/goat.svg"; } var restartBtn = document.getElementById("restartBtn"); var changeBtn = document.getElementById("changeBtn"); var notChangeBtn = document.getElementById("notChangeBtn"); restartBtn.style.display = ''; changeBtn.style.display = 'none'; notChangeBtn.style.display = 'none'; } </script> https://example.com/tools/arrangeseat/ Sun, 11 Feb 2024 00:00:00 +0000 https://example.com/tools/arrangeseat/ <ul> <li> Please upload the student list downloaded from NTU Cool directly. </li> </ul><br> <form id="info"> <div> <input type="file" id="studentList" accept=".xlsx, .csv" required /> </div> <div style="margin-top: 20px;"> <select name="classroom" id="classroom" required> <option value="" disabled selected="selected">Choose your classroom</option> </select> </div> <div style="margin-top: 20px;"> <select name="method" id="method" required> <option value="" disabled selected="selected">Choose a method</option> <option value="method1">Method1</option> <!-- <option value="method2">Method2</option> --> </select> </div> <div style="margin-top: 20px;"> <label for="seatTitle">Title:</label> <input type="text" id="seatTitle" placeholder="(optional)" /> </div> <div style="margin-top: 20px;"> <button type="submit">Submit</button> <button type="button" id="printBtn" style="display: none;" onclick="printTable()">Print</button> </div> <div id="printElement" style="display: none;"> <div class="seat"> <table id="table1"> </table> </div> </div> </form> <script src="https://example.com/js/arrangeSeat.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.fonts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.1/jspdf.plugin.autotable.min.js"></script> <script> document.getElementById('info').addEventListener('submit', function (event) { event.preventDefault() submit() }); addOptions(); var numberOfStudents = 0; function submit() { var studentList = document.getElementById('studentList').files[0] var reader = new FileReader() reader.onload = function (file) { var data = new Uint8Array(file.target.result) var workbook = XLSX.read(data, { type: 'array' }) var sheet_name = workbook.SheetNames[0] var sheet = workbook.Sheets[sheet_name] jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 }) var studentNames = [] for (var i = 1; i < jsonData.length; i++) { studentNames.push(jsonData[i][4].split(" (")[0]) } dataProcess(studentNames) } reader.readAsArrayBuffer(studentList); } function dataProcess(studentNames) { numberOfStudents = studentNames.length var sampleNames = sample(studentNames, studentNames.length) var classroom = getClassroom(); var result; var method = document.getElementById('method').value; switch (method) { case 'method1': result = method1(sampleNames, classroom) break; case 'method2': result = method1(sampleNames, classroom) break; default: break; } console.log(result) createTable(result) var printBtn = document.getElementById('printBtn'); printBtn.style.display = ''; } function createTable(tableData) { var table = document.getElementById('table1'); var tableBody = document.createElement('tbody'); tableData.forEach(function (rowData, rIndex) { var row = document.createElement('tr'); rowData.forEach(function (cellData, cIndex) { var cell = document.createElement('td'); if (cellData === "AA") cell.classList.add('aisle'); if (rIndex == 0 || cIndex == 0) cell.classList.add('index'); cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.replaceChildren(tableBody); } </script>