<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>估算策略训练营</title>
<style>
:root {
--correct: #C8E6C9;
--wrong: #FFCDD2;
--primary: #2196F3;
}
body {font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;}
.card {border: 2px solid #4CAF50; border-radius: 10px; padding: 20px; margin: 20px 0;}
.question {color: #2196F3; font-size: 18px; margin: 15px 0;}
.strategy-guide {background: #FFF3E0; padding: 15px; border-radius: 8px; margin: 15px 0;}
button {padding: 8px 15px; border-radius: 5px; cursor: pointer; transition: all 0.3s;}
.step {margin: 15px 0; padding: 10px; border-left: 4px solid var(--primary);}
.highlight {color: #4CAF50; font-weight: bold;}
.calculation {background: #F5F5F5; padding: 10px; margin: 10px 0;}
.icon {font-size: 20px; vertical-align: middle;}
</style>
</head>
<body>
<h1>🔍 估算策略训练营 - 突破思维关键点 🔍</h1>
<div class="strategy-guide">
<h3>📌 估大估小判断口诀：</h3>
<p>① <span class="highlight">问"够不够" → 估大需求</span>（确保足够）</p>
<p>② <span class="highlight">问"会不会" → 估小能力</span>（确保能完成）</p>
<p>③ 估算方向与实际情况的关系：</p>
<p> ✓ <span class="highlight">估大后还够 → 实际一定够</span></p>
<p> ✓ <span class="highlight">估小仍不够 → 实际一定不够</span></p>
</div>
<div id="problemArea"></div>
<button onclick="generateNewProblem()">换一道题</button>
<script>
const problems = [
{
type: "supply",
template: "学校买了<%= total %>根跳绳，每班分<%= perUnit %>根，够分给<%= units %>个班吗？",
generate: () => ({
total: Math.floor(Math.random()*200+400),
perUnit: Math.floor(Math.random()*10+40),
units: Math.floor(Math.random()*5+8)
})
},
{
type: "time",
template: "华华每分钟最多走<%= speed %>米，家到学校<%= distance %>米，<%= time %>分钟后上课，会迟到吗？",
generate: () => ({
speed: Math.floor(Math.random()*10+75),
distance: Math.floor(Math.random()*100+700),
time: Math.floor(Math.random()*3+8)
})
}
];
let currentProblem;
function generateNewProblem() {
const problem = problems[Math.floor(Math.random()*problems.length)];
const params = problem.generate();
currentProblem = {
template: problem.template,
params,
type: problem.type
};
renderProblem();
}
function renderProblem() {
const question = Object.entries(currentProblem.params).reduce((str,[k,v]) =>
str.replace(new RegExp(`<%= ${k} %>`, 'g'), v), currentProblem.template);
document.getElementById("problemArea").innerHTML = `
<div class="card">
<div class="question">${question}</div>
<div class="step">
<h4>💡 思考步骤：</h4>
<button onclick="showThinkingProcess()">显示解题思路</button>
<div id="thinkingSteps" style="display:none; margin-top:10px;">
<p>1. 判断题目类型 → ${currentProblem.type === 'supply' ? '"够不够"类' : '"会不会"类'}</p>
<p>2. 选择估算策略 → ${currentProblem.type === 'supply' ? '估大需求' : '估小能力'}</p>
<button onclick="showEstimation()">开始估算</button>
</div>
</div>
<div id="calculationSteps"></div>
</div>
`;
}
function showThinkingProcess() {
document.getElementById("thinkingSteps").style.display = 'block';
}
function showEstimation() {
const isSupply = currentProblem.type === 'supply';
const steps = [
`✅ 选择策略：<span class="highlight">${isSupply ? '估大每班需求量' : '估小行走速度'}</span>`,
`🔧 估算过程：${
isSupply ?
`把每班分 ${currentProblem.params.perUnit} 估为 ${Math.ceil(currentProblem.params.perUnit/10)*10}` :
`把每分钟 ${currentProblem.params.speed} 米估为 ${Math.floor(currentProblem.params.speed/10)*10}`
}`,
`⚖️ 比较结果：${
isSupply ?
`总需求估算值 ≤ 实际数量 → 肯定足够` :
`估算时间 ≤ 可用时间 → 不会迟到`
}`
].join('<br>');
document.getElementById("calculationSteps").innerHTML = `
<div class="calculation">
${steps}
<button onclick="showComparison()">查看详细比较</button>
<div id="comparison" style="margin-top:10px;"></div>
</div>
`;
}
function showComparison() {
const {type, params} = currentProblem;
let content;
if(type === 'supply') {
const est = Math.ceil(params.perUnit/10)*10;
const totalEst = est * params.units;
content = `
<p>估算每班需求：${est} × ${params.units} = ${totalEst}</p>
<p>实际资源：${params.total} →
${totalEst <= params.total ?
`<span class="highlight">估算足够 → 实际肯定足够</span>` :
`需要精确计算`}
`;
} else {
const est = Math.floor(params.speed/10)*10;
const timeEst = Math.ceil(params.distance / est);
content = `
<p>估算速度：${est} 米/分钟</p>
<p>估算时间：${params.distance} ÷ ${est} ≈ ${timeEst} 分钟</p>
<p>可用时间：${params.time} 分钟 →
${timeEst <= params.time ?
`<span class="highlight">估算能完成 → 实际不会迟到</span>` :
`需要精确计算`}
`;
}
document.getElementById("comparison").innerHTML = content + `
<br><button onclick="showExact()">查看精确计算</button>
<div id="exactResult" style="margin-top:10px;"></div>
`;
}
function showExact() {
const {type, params} = currentProblem;
let result;
if(type === 'supply') {
const exact = params.perUnit * params.units;
result = exact <= params.total;
document.getElementById("exactResult").innerHTML = `
<p>实际需求：${params.perUnit} × ${params.units} = ${exact}</p>
<p>比较结果：${exact} ${result ? '≤' : '>'} ${params.total} →
<span class="highlight">${result ? '足够' : '不够'}</span></p>
`;
} else {
const exactTime = params.distance / params.speed;
result = exactTime <= params.time;
document.getElementById("exactResult").innerHTML = `
<p>实际需要：${params.distance} ÷ ${params.speed} ≈ ${exactTime.toFixed(1)} 分钟</p>
<p>比较结果：${exactTime.toFixed(1)} ${result ? '≤' : '>'} ${params.time} →
<span class="highlight">${result ? '不会迟到' : '会迟到'}</span></p>
`;
}
}
generateNewProblem();
</script>
</body>
</html>
index.html
style.css
index.js
index.html