import React, { useState, useEffect } from ‘react’; import { Trophy, Star, Clock, CheckCircle, AlertCircle, Award, Brain, XCircle } from ‘lucide-react’; const MathVerificationApp = () => { const [stage, setStage] = useState(‘menu’); const [currentLevel, setCurrentLevel] = useState(1); const [userAnswer, setUserAnswer] = useState(”); const [verifyAnswer, setVerifyAnswer] = useState(”); const [selectedTrap, setSelectedTrap] = useState(null); const [timeSpent, setTimeSpent] = useState(0); const [minTimeReached, setMinTimeReached] = useState(false); const [score, setScore] = useState(0); const [slowBadges, setSlowBadges] = useState(0); const [attempts, setAttempts] = useState(0); const [showHint, setShowHint] = useState(false); const questions = [ { id: 1, question: “一个水池，用甲管单独注满需要4小时，用乙管单独注满需要6小时。现在两管同时注水，需要多少小时注满？”, answer: “2.4”, verifyQuestion: “如果两管同时注水2.4小时注满，请计算：甲管每小时注入几分之几？乙管每小时注入几分之几？两管合计每小时注入几分之几？”, verifyAnswer: “1/4+1/6=5/12”, verifyDetail: “2.4小时=12/5小时，5/12×12/5=1”, type: “工程问题”, traps: [ { text: “甲管和乙管速度相加：4+6=10小时”, correct: false, reason: “错误：不能直接相加时间，应该相加工作效率” }, { text: “取平均值：(4+6)/2=5小时”, correct: false, reason: “错误：工程问题不能简单取平均” }, { text: “计算效率：1/4+1/6=5/12，时间=1÷5/12=2.4小时”, correct: true, reason: “正确：先算每小时完成的工作量，再求总时间” }, { text: “用较快的管子时间减去较慢的：6-4=2小时”, correct: false, reason: “错误：逻辑混乱，两管同时工作不是做减法” } ], hints: [“工程问题关键是计算工作效率”, “总工作量可以看作1”, “多个人或管子同时工作，效率相加”] }, { id: 2, question: “一件商品打八折后售价240元，这件商品的原价是多少元？”, answer: “300”, verifyQuestion: “如果原价是300元，请验证：打八折后的价格是否为240元。写出计算过程。”, verifyAnswer: “300×0.8=240”, verifyDetail: “或者 300×(1-0.2)=240”, type: “折扣问题”, traps: [ { text: “240÷0.8=300元”, correct: true, reason: “正确：现价除以折扣率等于原价” }, { text: “240×0.8=192元”, correct: false, reason: “错误：这是把现价又打了一次折，而不是求原价” }, { text: “240+240×0.2=288元”, correct: false, reason: “错误：这个算法的逻辑有问题，0.2不是原价的20%” }, { text: “240÷0.2=1200元”, correct: false, reason: “错误：混淆了折扣率，八折是0.8不是0.2” } ], hints: [“八折表示现价是原价的80%”, “已知现价和折扣率，求原价用除法”, “可以用方程思考：原价×0.8=240”] }, { id: 3, question: “一个长方体的长是8分米，宽是5分米，高是4分米。它的表面积是多少平方分米？”, answer: “184”, verifyQuestion: “如果表面积是184平方分米，请列出6个面的面积计算，并验证总和。”, verifyAnswer: “8×5×2+8×4×2+5×4×2”, verifyDetail: “40×2+32×2+20×2=80+64+40=184”, type: “几何计算”, traps: [ { text: “8×5×4=160平方分米”, correct: false, reason: “错误：这是体积公式，不是表面积” }, { text: “(8×5+8×4+5×4)×2=184平方分米”, correct: true, reason: “正确：三个不同面的面积之和乘以2” }, { text: “8+5+4=17分米”, correct: false, reason: “错误：把长宽高相加了，毫无意义” }, { text: “(8+5+4)×2=34平方分米”, correct: false, reason: “错误：表面积不能这样算，混淆了周长概念” } ], hints: [“长方体有6个面，相对的两个面面积相等”, “表面积是所有面的面积之和”, “注意单位是平方分米”] }, { id: 4, question: “小华从家到学校，去时速度是每分钟60米，用了15分钟。回来时用了10分钟，回来时的速度是每分钟多少米？”, answer: “90”, verifyQuestion: “如果回来速度是每分钟90米，用10分钟，请计算路程。这个路程是否等于去时的路程？”, verifyAnswer: “60×15=900”, verifyDetail: “90×10=900，两次路程相等”, type: “行程问题”, traps: [ { text: “60+15-10=65米/分钟”, correct: false, reason: “错误：速度、时间、距离不能这样混合运算” }, { text: “60×15=900米，900÷10=90米/分钟”, correct: true, reason: “正确：先算总路程，再用路程除以时间” }, { text: “60÷15×10=40米/分钟”, correct: false, reason: “错误：计算逻辑混乱” }, { text: “15÷10=1.5，60×1.5=90米/分钟”, correct: true, reason: “正确：时间比例法，去时是回时的1.5倍，速度也是1.5倍” } ], hints: [“去时和回时路程相同”, “速度=路程÷时间”, “可以先算出总路程”] }, { id: 5, question: “一个三角形的面积是24平方厘米，底是6厘米，高是多少厘米？”, answer: “8”, verifyQuestion: “如果高是8厘米，底是6厘米，请用三角形面积公式验证面积是否为24平方厘米。”, verifyAnswer: “6×8÷2=24”, verifyDetail: “三角形面积=底×高÷2”, type: “三角形面积”, traps: [ { text: “24÷6=4厘米”, correct: false, reason: “错误：忘记三角形面积公式中的÷2” }, { text: “24×2÷6=8厘米”, correct: true, reason: “正确：从面积公式推导，面积×2÷底=高” }, { text: “24÷6×2=8厘米”, correct: true, reason: “正确：先除以底，再乘以2” }, { text: “6×24=144厘米”, correct: false, reason: “错误：计算毫无逻辑，单位也错了” } ], hints: [“三角形面积公式：底×高÷2”, “已知面积求高，需要逆向运算”, “注意除以2这个关键步骤”] }, { id: 6, question: “某数的3/5是30，这个数的2/3是多少？”, answer: “100/3”, acceptableAnswers: [“100/3”, “33.33”, “33又1/3”], verifyQuestion: “如果答案是100/3（约33.33），请先求出某数是多少，再验证2/3的结果。”, verifyAnswer: “30÷3/5=50”, verifyDetail: “50×2/3=100/3”, type: “分数应用”, traps: [ { text: “30÷3×5=50，50×2÷3=100/3”, correct: true, reason: “正确：先求某数，再求2/3” }, { text: “30×2÷3=20”, correct: false, reason: “错误：直接用30算了，没有先求出某数” }, { text: “30×5÷3=50”, correct: false, reason: “错误：这只是求出了某数，没有继续求2/3” }, { text: “30×(2/3÷3/5)=30×10/9=100/3”, correct: true, reason: “正确：用比例法一步计算” } ], hints: [“先求出某数是多少”, “某数的3/5是30，求某数用除法”, “再用某数乘以2/3″] } ]; const currentQuestion = questions[currentLevel – 1]; useEffect(() => { let timer; if (stage === ‘question’ || stage === ‘answer’) { timer = setInterval(() => { setTimeSpent(prev => { const newTime = prev + 1; if (newTime >= 45) { setMinTimeReached(true); } return newTime; }); }, 1000); } return () => clearInterval(timer); }, [stage]); const handleStartLevel = () => { setStage(‘question’); setUserAnswer(”); setVerifyAnswer(”); setSelectedTrap(null); setTimeSpent(0); setMinTimeReached(false); setAttempts(0); setShowHint(false); }; const handleSubmitAnswer = () => { if (!minTimeReached) { alert(‘请仔细思考，至少需要45秒沉淀时间。’); return; } if (!selectedTrap) { alert(‘请先选择一个解题思路进行分析。’); return; } setStage(‘verify’); }; const checkAnswer = (answer) => { if (currentQuestion.acceptableAnswers) { return currentQuestion.acceptableAnswers.some(acceptable => answer.trim().replace(/\s/g, ”) === acceptable.replace(/\s/g, ”) ); } return answer.trim() === currentQuestion.answer; }; const handleVerifyAnswer = () => { const isAnswerCorrect = checkAnswer(userAnswer); const isTrapCorrect = selectedTrap?.correct === true; const isVerifyCorrect = verifyAnswer.includes(currentQuestion.verifyAnswer.replace(/\s/g, ”)); if (isAnswerCorrect && isTrapCorrect && isVerifyCorrect) { let points = 100; if (timeSpent >= 90) { points = 150; setSlowBadges(prev => prev + 1); } setScore(prev => prev + points); setStage(‘result’); } else { setAttempts(prev => prev + 1); let errorMsg = ‘验证失败！’; if (!isAnswerCorrect) errorMsg += ‘ 答案不正确。’; if (!isTrapCorrect) errorMsg += ‘ 解题思路有误。’; if (!isVerifyCorrect) errorMsg += ‘ 反向验证过程不完整。’; errorMsg += ` 这是第${attempts + 1}次尝试。`; alert(errorMsg); if (attempts >= 2) { setStage(‘question’); setUserAnswer(”); setVerifyAnswer(”); setSelectedTrap(null); setTimeSpent(0); setMinTimeReached(false); } } }; const handleNextLevel = () => { if (currentLevel < questions.length) { setCurrentLevel(prev => prev + 1); handleStartLevel(); } else { setStage(‘complete’); } }; return (

{score}分

深度思考徽章 × {slowBadges}

关卡进度

{currentLevel} / {questions.length}

{stage === ‘menu’ && (

反向验证闯关

培养细致思考，避开常见陷阱

每题至少思考45秒，识别错误思路，完成反向验证

)} {stage === ‘question’ && (

{currentQuestion.type}

= 45 ? “text-green-500” : “text-orange-500”} size={20} /> = 45 ? “text-green-500” : “text-orange-500”}`}> {timeSpent}秒

第 {currentLevel} 题

{currentQuestion.question}

{showHint && (

思考提示：

{currentQuestion.hints.map((hint, idx) => (

{hint}

))}

)} {!showHint && timeSpent >= 20 && ( )} {!minTimeReached && (

请再思考 {45 – timeSpent} 秒，不要着急作答

)}

)} {stage === ‘answer’ && (

作答区

{timeSpent}秒

{currentQuestion.question}

你的答案： setUserAnswer(e.target.value)} className=”w-full border-2 border-gray-300 rounded-lg p-4 text-lg focus:border-blue-500 focus:outline-none” placeholder=”在这里输入答案…” />

请选择正确的解题思路（包含常见错误，请仔细辨别）：

{currentQuestion.traps.map((trap, idx) => (

setSelectedTrap(trap)} className={`border-2 rounded-lg p-4 cursor-pointer transition ${ selectedTrap === trap ? ‘border-blue-500 bg-blue-50’ : ‘border-gray-300 hover:border-gray-400’ }`} >

{trap.text}

{selectedTrap === trap && (

已选择此项

)}

))}

{minTimeReached ? ( ) : (

还需要思考 {45 – timeSpent} 秒才能提交

)}

)} {stage === ‘verify’ && (

反向验证环节

你的答案是：

{userAnswer}

你选择的解题思路：

{selectedTrap?.text}

现在请完成反向验证：

{currentQuestion.verifyQuestion}

请写出完整的验证过程：

setVerifyAnswer(e.target.value)}
                  className=”w-full border-2 border-gray-300 rounded-lg p-4 text-lg focus:border-purple-500 focus:outline-none min-h-32″
                  placeholder=”写出详细的计算步骤和推理过程…”
                />
              </div>

<div className="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
                <p className="text-blue-800">
                  提示：反向验证要求你从答案倒推回题目条件，确保每一步逻辑严密。
                </p>
              </div>

<button
                onClick={handleVerifyAnswer}
                className="w-full bg-purple-500 text-white py-4 rounded-xl font-bold hover:bg-purple-600 transition"
              >
                提交验证
              </button>
            </div>
          </div>
        )}

{stage === ‘result’ && (
          <div className="bg-white rounded-2xl shadow-lg p-8">
            <div className="mb-6">
              <CheckCircle className="mx-auto text-green-500 mb-4" size={64} />
              <h2 className="text-3xl font-bold text-gray-800 mb-4 text-center">闯关成功</h2>
              
              <div className="bg-green-50 rounded-lg p-6 mb-6">
                <p className="text-green-800 font-semibold mb-2 text-center">本关成绩：</p>
                <p className="text-4xl font-bold text-green-600 mb-4 text-center">
                  +{timeSpent >= 90 ? 150 : 100}分
                </p>
                
                {timeSpent >= 90 && (
                  <div className="bg-yellow-100 border-2 border-yellow-400 rounded-lg p-4 mt-4">
                    <Award className="mx-auto text-yellow-600 mb-2" size={32} />
                    <p className="font-bold text-yellow-800 text-center">
                      获得深度思考徽章
                    </p>
                    <p className="text-sm text-yellow-700 text-center">
                      用时{timeSpent}秒，深度思考，额外奖励50分
                    </p>
                  </div>
                )}
              </div>

<div className="bg-gray-50 rounded-lg p-6 mb-6">
                <p className="font-semibold text-gray-700 mb-3">解题分析：</p>
                <div className="space-y-4">
                  <div>
                    <p className="text-sm text-gray-600 mb-1">你的答案：</p>
                    <p className="font-medium text-gray-800">{userAnswer}</p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600 mb-1">正确思路：</p>
                    <p className="font-medium text-gray-800">
                      {currentQuestion.traps.find(t => t.correct)?.text}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600 mb-1">验证详解：</p>
                    <p className="font-medium text-gray-800">{currentQuestion.verifyDetail}</p>
                  </div>
                  <div className="border-t pt-3">
                    <p className="text-sm text-gray-600 mb-2">常见错误提醒：</p>
                    {currentQuestion.traps.filter(t => !t.correct).map((trap, idx) => (
                      <div key={idx} className="mb-2 pl-4 border-l-2 border-red-300">
                        <p className="text-sm text-red-700">{trap.reason}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

<div className="text-left bg-gray-50 rounded-lg p-4 mb-6">
                <p className="font-semibold text-gray-700 mb-2">本关数据：</p>
                <p className="text-gray-600">用时：{timeSpent}秒</p>
                <p className="text-gray-600">验证次数：{attempts + 1}次</p>
              </div>
            </div>

<button
              onClick={handleNextLevel}
              className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 rounded-xl font-bold hover:shadow-lg transition"
            >
              {currentLevel < questions.length ? '进入下一关' : '查看总结'}
            </button>
          </div>
        )}

{stage === ‘complete’ && (
          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
            <Trophy className="mx-auto text-yellow-500 mb-4" size={80} />
            <h2 className="text-3xl font-bold text-gray-800 mb-4">完成所有关卡</h2>
            
            <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg p-6 mb-6">
              <p className="text-2xl font-bold text-gray-800 mb-4">总分：{score}分</p>
              <p className="text-xl font-semibold text-purple-700">
                深度思考徽章 × {slowBadges}
              </p>
            </div>

<div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 mb-6">
              <p className="text-green-800 font-semibold mb-3">
                你已经掌握的能力：
              </p>
              <ul className="text-left text-green-700 space-y-2">
                <li>认真审题，识别题目类型</li>
                <li>辨别常见错误思路</li>
                <li>反向验证，确保逻辑严密</li>
                <li>深度思考，避免粗心大意</li>
              </ul>
            </div>

<button
              onClick={() => {
                setStage(‘menu’);
                setCurrentLevel(1);
                setScore(0);
                setSlowBadges(0);
              }}
              className=”w-full bg-blue-500 text-white py-4 rounded-xl font-bold hover:bg-blue-600 transition”
            >
              重新开始挑战
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default MathVerificationApp;
		</div>

</article>

</div>

</main>

<footer id="footer" class="ct-footer" data-id="type-1" itemscope="" itemtype="https://schema.org/WPFooter"><div data-row="middle"><div class="ct-container" data-columns-divider="md"><div data-column="ghost"></div><div data-column="widget-area-1"><div class="ct-widget is-layout-flow widget_text" id="text-8"><h3 class="widget-title">About us</h3>			<div class="textwidget"><ul>
<li><a href="#">About Organization</a></li>
<li><a href="#">Our Clients</a></li>
<li><a href="#">Our Partners</a></li>
</ul>
</div>
		</div><div class="ct-widget is-layout-flow widget_text" id="text-9"><h3 class="widget-title">Achievements</h3>			<div class="textwidget"><p>Massa sed elementum tempus egestas sed sed risus at ultrices mi tempus imperdiet nulla.</p>
</div>
		</div></div><div data-column="widget-area-2"><div class="ct-widget is-layout-flow widget_text" id="text-10"><h3 class="widget-title">Quick Links</h3>			<div class="textwidget"><ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Organisation Team</a></li>
<li><a href="#">Press Enquiries</a></li>
</ul>
</div>
		</div><div class="ct-widget is-layout-flow widget_text" id="text-11"><h3 class="widget-title">Useful Information</h3>			<div class="textwidget"><p>Amet commodo nulla facilisi nullam vehicula ipsum. Faucibus pulvinar elementum integer enim.</p>
</div>
		</div></div><div data-column="widget-area-3"><div class="ct-widget is-layout-flow widget_text" id="text-12"><h3 class="widget-title">Important Links</h3>			<div class="textwidget"><ul>
<li><a href="https://startersites.io/blocksy/business/privacy-policy/">Privacy Policy</a></li>
<li><a href="#">Cookies Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
		</div><div class="ct-widget is-layout-flow widget_text" id="text-13"><h3 class="widget-title">Shipping Information</h3>			<div class="textwidget"><p>Fringilla urna porttitor rhoncus dolor purus nonulla malesuada pellentesque elit eget.</p>
</div>
		</div></div></div></div><div data-row="bottom"><div class="ct-container"><div data-column="copyright">
<div
	class="ct-footer-copyright"
	data-id="copyright">

</div>

</div></div></div></footer></div>

</body>
</html>