HTML網頁碼-反應時間測定
HTML網頁碼-反應時間測定
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>反應時間測定</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* 將CSS代碼放在此處 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
background-color: green;
border: none;
color: white;
font-size: 2vw; /* 使用視窗寬度的百分比來設定字體大小 */
padding: 1vw 4vw; /* 使用視窗寬度的百分比來設定內邊距 */
cursor: pointer;
width: 80%; /* 設定按鈕寬度為視窗寬度的80% */
max-width: 600px; /* 可選：限制按鈕的最大寬度 */
height: 20%; /* 設定按鈕高度為視窗高度的20% */
max-height: 150px; /* 可選：限制按鈕的最大高度 */
display: inline-block; /* 讓按鈕保持內聯元素，以便正確設定高度 */
box-sizing: border-box; /* 確保邊框和內邊距包含在按鈕的尺寸內 */
}
table {
border-collapse: collapse;
width: 50%;
margin: 30px auto;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
#resultsChart {
max-width: 100%;
max-height: 50%;
}
</style>
</head>
<body>
<h1>反應時間測定</h1>
<button id="reactionButton">按我！</button>
<canvas id="resultsChart" width="200" height="50"></canvas> <!-- Step 2: 添加canvas標籤 -->
<table id="resultsTable">
<thead>
<tr>
<th>遊戲次數</th>
<th>反應時間 (秒)</th>
</tr>
</thead>
<tbody>
<!-- 游戲結果將顯示在此 -->
</tbody>
<tfoot>
<tr>
<td>平均值</td>
<td id="averageTime">N/A</td>
</tr>
</tfoot>
</table>
<script>
// 將JavaScript代碼放在此處
const reactionButton = document.getElementById('reactionButton');
const resultsTable = document.getElementById('resultsTable');
let startTime = 0;
let endTime = 0;
let gameCounter = 0;
let isRed = false;
let penaltyTime = 0;
reactionButton.addEventListener('click', () => {
if (isRed) {
endTime = performance.now();
recordResult(endTime - startTime);
} else {
penaltyTime += 100;
}
});
function changeToRed() {
isRed = true;
reactionButton.style.backgroundColor = 'red';
reactionButton.textContent = '按我！'; // 更新紅色按鈕的文字
startTime = performance.now();
}
function calculateAverage(array) {
const sum = array.reduce((a, b) => a + b, 0);
return sum / array.length;
}
function recordResult(reactionTime) {
gameCounter++;
const resultRow = document.createElement('tr');
resultRow.innerHTML = `
<td>${gameCounter}</td>
<td>${((reactionTime + penaltyTime) / 1000).toFixed(3)}</td>
`;
resultsTable.querySelector('tbody').appendChild(resultRow);
updateChartData(reactionTime + penaltyTime);
penaltyTime = 0; // Reset penalty time
const averageTimeElement = document.getElementById('averageTime');
const averageTime = calculateAverage(chartData.datasets[0].data);
averageTimeElement.textContent = averageTime.toFixed(3);
if (gameCounter < 5) {
resetGame();
} else {
reactionButton.disabled = true;
reactionButton.textContent = '遊戲結束';
}
}
function resetGame() {
isRed = false;
reactionButton.style.backgroundColor = 'green';
reactionButton.textContent = '亂按加0.1秒'; // 更新綠色按鈕的文字
const randomTime = Math.random() * 15000;
setTimeout(changeToRed, randomTime);
}
resetGame();
// Step 3: 創建和更新長條圖
const resultsChartCanvas = document.getElementById('resultsChart').getContext('2d');
const chartData = {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: '反應時間 (秒)',
data: [],
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
};
const resultsChart = new Chart(resultsChartCanvas, {
type: 'bar',
data: chartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
function updateChartData(reactionTime) {
chartData.datasets[0].data.push(reactionTime / 1000);
resultsChart.update();
}
</script>
</body>
</html>