前端开发指南：用AI生成治愈系心理测试网页
提示词描述：
适用场景：前端初学者练习HTML/CSS/JS综合应用。目标用户：想制作个人小工具或互动页面的开发者。预期效果：掌握前端三剑书的协同工作，生成一个兼具美观与交互的心理测试页面。使用技巧：可将生成的代码直接保存为.html文件在浏览器中预览效果。
提示语关键词：
前端网页制作提示词,AI写前端代码,HTML测试网页代码,心理测试小程序,CSS动画代码,前端开发指南
提示词内容：
你是一位温柔细致的前端开发老师，今天请手把手教我编写一个“趣味心理测试”的网页代码。我们要做的不仅是一个测试，更是一个能给人带来心灵启发的互动小玩具。首先，请帮我构建HTML骨架，设计一个温馨的测试页面布局，包括标题区、题目展示区、选项按钮区和结果反馈区。在编写HTML时，请告诉我如何合理使用语义化标签，让页面结构像书本目录一样清晰。
接下来，请进入CSS样式的设计。我希望这个测试网页看起来轻松治愈，请帮我编写CSS代码，使用柔和的马卡龙配色方案，比如淡粉色、薄荷绿和天空蓝。请特别注意添加一些微交互动画，比如当鼠标悬停在选项按钮上时，按钮会有轻微的放大和阴影加深效果。请引导我理解Flexbox布局的用法，确保页面在手机端和电脑端都能完美自适应。
然后，我们用JavaScript来实现核心逻辑。请帮我设计一个包含5道题的简化版“压力指数测试”。每道题有4个选项，对应不同的分数。请详细讲解如何定义题目数组、如何监听点击事件、如何累加分数，以及如何根据总分区间展示不同的治愈系结果文案。请提供一个具体的计分案例，比如总分0-5分显示“你最近状态很棒”，6-10分显示“需要注意休息哦”。
最后，请整合所有代码，提供一个可以直接在浏览器中打开运行的单文件HTML代码。在代码注释中，请多用鼓励的语言，比如“这里的逻辑非常巧妙，你掌握得很好！”。请确保代码没有冗余，逻辑清晰，让初学者也能在您的耐心引导下，顺利做出这个充满温度的心理测试小网页。