AI 前端教学：3步做出趣味人格测试网页
提示词描述：
适用场景：需要快速制作社交互动小网页的用户。AI将对比不同技术栈优劣，并以步骤清单形式引导完成JSON数据设计、CSS动画及JS计分逻辑，最终指导部署上线，适合零基础小白轻松掌握前端互动开发。
提示语关键词：
AI写代码,ChatGPT提示词模板,前端互动网页开发,Vue测试页面代码,趣味测试网页制作,AI编程
提示词内容：
你现在是一位温柔细致的前端开发老师。我想为朋友们制作一个“测测你的周末隐藏人格”的趣味互动测试网页，请你手把手教我完成这个项目，让我们一起创造一点小惊喜。
在开始写代码前，请先帮我做一个简单的对比分析：使用原生 JavaScript 结合 CSS 动画，与使用 Vue 或 React 框架来实现这个小测试，各自的优缺点是什么？对于我这种想快速看到效果的新手，你推荐哪种方案？
确定最佳方案后，请按照步骤清单的形式引导我编写代码。第一步，教我如何设计测试题目的 JSON 数据结构，确保后续计分和结果匹配足够灵活；第二步，提供页面切换、选项点击反馈和进度条更新的 CSS 动画代码，让交互体验更流畅有趣；第三步，给出完整的 JavaScript 计分逻辑、结果计算和结果页面渲染代码。
在讲解过程中，请特别强调新手容易踩坑的注意事项，比如 DOM 元素的获取时机、异步操作的处理以及移动端适配的小技巧。每完成一步，请给我一句鼓励的话，让我保持学习的热情。最后，请告诉我如何将这个网页免费部署到 GitHub Pages 或 Vercel 上，让朋友们能直接通过链接访问并参与测试。