登岛！发现你的兴趣坐标（课件）2026-2027学年七年级心理下册
|
4份
|
46页
|
145人阅读
|
23人下载
普通
内容正文：
登岛！
发现你的兴趣坐标
——生涯规划第二课时
授课教师：卷毛老师
授课时间：25 十月 2026
1min
1
上节课，我们探索了
职业开火车
这个世界上有非常多种职业，光是在中国就有1000多种，你所了解的可能只是冰山一角
你的一天有多少职业
从早到晚,无数职业在默默支撑我们的生活，每一份职业都很重要
一份工作对你来说意味着什么
职业不只是为了赚钱，也是为了个人追求；职业没有高低贵贱
2min
中华人民共和国职业分类大典（2022年版）1639个
1999年版（首版）1838个1999年5月颁布2022年版（最新）1639个2022年9月颁布
2
我了解到……
2分钟，每个人一句话分享
你的家里人从事什么职业？为什么选择这个职业?
还有哪些有趣的职业？这份职业是怎么样的？
1分钟，每个人一句话分享
你选了什么职业?为什么选它?
职业的选择,跟你的兴趣有很大关系
7min
那么这节课老师就带大家探索一下自己的兴趣，不过
3
霍兰德职业兴趣理论
实用
研究
R
秩序
艺术
A
S
企业
社交
分类是倾向,不是标签
重要的是觉察倾向,不是贴标签
兴趣会变化
很多人同时有两三种兴趣
3min
我要特别说一件事。这个六边形是一个倾向，不是一个标签。不是说我是艺术岛的就只能做艺术类的工作。很多人同时具有两三种兴趣，而且兴趣是会变化的——你现在喜欢的不代表永远喜欢。重要的是，你开始觉察自己的倾向，而不是给自己贴一个标签。
12岁的你和25岁的你，喜欢的东西可能很不一样。这个测试的结果只是一个参考，帮助你了解自己，但不是你的"命运"。
4
6座岛，你想去哪座?
实用岛
研究岛
艺术岛
喜欢观察、分析、探索未知
喜欢创造、表达、追求美
喜欢动手制作、修理、建造
享受看得见摸得着的成果
享受自由发挥想象力
享受解开谜题的感觉
上节课的时候老师简单介绍了一下这六座岛，今天，我们用更直观的方式来看看岛上的风采
社交岛
企业岛
秩序岛
喜欢帮助、教导、陪伴他人
喜欢领导、组织、说服别人
享受达成目标的成就感
喜欢整理、规划、按规则做事
享受井井有条的秩序感
享受与人连接的温暖
6座岛，你想去哪座?
6min
6
不知道去哪座岛？
去不了想去的岛怎么办？
1分钟在心理本上按想去的程度给这六座岛排序
我想去……
尝试回答以下的几道题目
5min
决定不了小组长的老师来决定
有同学会问了，那这个岛满了怎么办，同学们，有时候，不如意也是求职路上会遇到的问题，我们学会去面对问题
现在大家想想，人满了怎么办？也就是你将来一下子没法去你最想去的那个职业怎么办？
先不着急手快有手慢无，如果这个岛满人了，可以去第二志愿，如果还是满人了，可以和岛内的人商量一下换岛
7
限时登岛
去不了想去的岛怎么办？
1分钟在心理本上按想去的程度给这六座岛排序
我想去……
1分钟去到想去的岛屿坐下，
每座岛6-8人（岛屿名字在桌子前）
如果想去的岛屿满人了，就按意愿顺延，找下一座岛
5min
决定不了小组长的老师来决定
有同学会问了，那这个岛满了怎么办，同学们，有时候，不如意也是求职路上会遇到的问题，我们学会去面对问题
现在大家想想，人满了怎么办？也就是你将来一下子没法去你最想去的那个职业怎么办？
先不着急手快有手慢无，如果这个岛满人了，可以去第二志愿，如果还是满人了，可以和岛内的人商量一下换岛
8
讨论
讨论时间2分钟，之后请同学分享
每个人一句话分享：
这座岛吸引你的地方有什么？
岛上的人适合做什么职业?（至少3个）
影响职业选择的因素有很多，能力、环境、家庭……还有兴趣，今天我们就来聊一下兴趣
9
搭一座桥：从现在到未来
看到将来的自己那么闪耀，我们也会心生向往，如果以后真的能这样就好了！
那么，现在我们就来哦架起一座从现在通向未来的桥梁，去想想，我们做什么才能成为那个理想中的自己
但老师要告诉你，成为那样的人，不是要等以后的，人生不是在某个转折点之后就突然走上巅峰的，每个人都是要脚踏实地，一步一个脚印的，那要怎么成为
10
搭一座桥：从现在到未来
我的兴趣岛
将来的我想成为
能让现在的我向未来的我
靠近的每周小事（至少一件）
？
2min说明+3min绘画
天下难事必作于易，天下大事必作于细
有同学会说老师只做一件小事那多简单啊，可是这里是每周都要做的，每周都能坚持下去是一件很不简单的事情，天下难事必作于易，天下大事必作于细，做大事就是把一件件小事做好
大家先想着先，每组第一个到我这领纸和彩色笔，每人一张，每组共用一盒彩色笔，用完的彩色笔要归回原位
如果你想不到要做什么，没关系，这个时候迷茫是正常的，我们可以从现在就能做的一件小事做起，同学们，请你思考，能让现在的你向未来的你靠近的一件每周都能做的小事，举个例子，如果想成为画家……
请注意，你选的这个小事不能脱离你现在的身份，你现在是一名……学生！对，你最主要的任务还是好好学习，所以老师这里设置的是每周小事，有些兴趣培养是需要大段的时间的，所以周末再做也可以，比如练习吉他，画一副完整的画，写一个小剧本，在有余力的情况下，你也可以多做几件事
请你注意，我们这节课的重点是文字部分的内容，建议大家先写好在心理本上，再构思着画到a4纸上。
不会画怎么办，简易版
一步登天是不切实际的，做什么事情都是一步一个脚印，从每一件小事做起的
有些同学会说，老师，我没有兴趣怎么办
11
搭一座桥：从现在到未来
我的兴趣岛
将来的我想成为
能让现在的我向未来的我靠近的每周小事
（现在的我有什么优点）
（我能做什么寻找自己的兴趣）
（理想中的我）
那么话又说回来
2min说明+3min绘画
有些同学会说，老师，我没有兴趣怎么办
12
搭一座桥:从现在到未来
现在的我
我的岛
我想做的职业
本周小事
小明的桥
我的岛:
想做的职业:
本周小事:
现在的我:喜欢
欢画画,课间涂
鸦
给喜欢的故事
画一幅插图
艺术岛
插画师
🧩 职业万花筒 🎨
✨ 兴趣岛探险 · 找到你的专属小岛 ✨
1 / 6
加载题目中...
⬅ 上一题
下一题 ➡
🎉 恭喜你到达了 ——
🏝️ 兴趣岛
你的专属岛屿描述
🔄 再来一次冒险
💡 每题选一个最吸引你的选项 · 答案没有对错哦
$
《登岛！发现你的兴趣坐标》AI课件设计说明
一、基本信息
教材章节：《广东省教育厅关于中小学心理健康教育工作规范指引》生涯规划部分
课件名称：登岛！发现你的兴趣坐标（课件）2026-2027学年七年级心理下册
适用学段：七年级
课件格式：PPTX（含配套AI互动网页游戏HTML源文件）
二、教学目标
1.知识与技能了解兴趣是多元的，并能初步识别自己的兴趣倾向；掌握一种连接兴趣与当下行动的方法。
2.过程与方法：通过情景体验、小组合作探究、个人创作与分享，经历“感知-探索-联结-规划”的完整探索过程。
3.情感态度与价值观：悦纳自我兴趣，认识到每一种兴趣都有其价值；培养“立足当下，小步行动”的积极生涯态度。
三、AI工具名称与使用方法
本课件深度应用了生成式AI工具，真实解决了传统心理课备课中“活动设计难创新、视觉素材难匹配、互动测评难即时”的痛点。
（一）AI图像生成工具（扣子、腾讯元宝）
使用方法： 输入精准的Prompt（提示词），生成活泼可爱、色彩明亮的卡通风格视觉素材。
具体应用：
1、使用扣子生成PPT封面主视觉，奠定PPT总体基调。
2、使用腾讯元宝生成课件内页所需的“六座兴趣岛”场景插图，每座岛用不同色调和元素区分（现实岛用齿轮工具、艺术岛用画笔音符等），增强视觉吸引力。
解决了什么问题： 传统方式下，心理课教师需花费大量时间在网络搜索合适图片，往往面临版权不明、画质模糊、风格不统一等问题。AI绘图能够精准匹配课程主题，一键生成高质量原创素材，且可根据反馈反复调整，大幅提升课件美观度与专业性。
（二）AI代码生成大模型（腾讯元宝）
使用方法： 通过自然语言描述游戏逻辑（如：6道选择题、霍兰德六维度计分、自动匹配兴趣岛、即时反馈结果等），让AI直接生成可运行的HTML/CSS/JS前端代码。
具体应用：
开发课堂配套的《兴趣岛探险》互动网页游戏。学生通过点击6道选择题的选项，系统自动累加各维度分数，并在完成后即时输出“最适合你的兴趣岛”及对应的职业方向描述。
游戏界面采用与PPT一致的活泼卡通风格，包含进度条、选项按钮、结果展示区等功能模块，无需网络即可离线运行。
解决了什么问题： 传统的兴趣测评通常采用纸质问卷，学生填写后需要教师逐一统计汇总，耗时低效且缺乏即时反馈。AI生成的互动游戏实现了“即测即得”，学生在点击选项的瞬间就能获得结果反馈，极大提升了课堂参与度和体验感，真正实现了AI赋能课堂互动。
（三）AI大语言模型（腾讯元宝·DeepSeek模型）
使用方法： 通过多轮对话，辅助教学设计、活动构思与文本润色。
具体应用：
输入“初一心理课·生涯规划·霍兰德职业兴趣理论”等关键词，由AI生成完整的教案框架、教学活动设计、师生互动脚本。
通过多轮迭代优化教学逻辑：第一轮生成基础教案后，提出“需要加入团体动力学理论作为教学组织理论”，AI随即补充了团体热身、转换、工作、总结四阶段的设计；第二轮提出“需要加入安全教育环节”，AI在课程末尾增加了1分钟的网络安全与人身安全提醒。
使用AI辅助提炼霍兰德理论的核心信息，将其转化为初一学生能理解的通俗语言，如将“现实型”描述为“喜欢动手操作、户外活动”，将“研究型”描述为“喜欢观察思考、探索未知”。
解决了什么问题： 传统备课中，心理课的活动设计往往依赖教师个人经验积累，耗时长且容易陷入套路化。AI辅助备课能够在短时间内提供多种活动方案参考，帮助教师快速聚焦核心教学目标，同时启发创新思路。
四、设计意图与创新融合
（一）兴趣点燃认知（导入设计）
传统生涯规划课往往直接罗列职业类型或发放问卷，学生被动接受。本课利用AI生成的“职业万花筒”封面视觉，以绚丽的色彩和丰富的职业图标瞬间抓住学生注意力。随后通过“职业接龙”游戏激活已有认知，再以“发现隐身英雄”环节制造认知冲突，层层递进，自然引出“兴趣岛”探索主题。
（一）游戏化自我探索（核心环节）
引入霍兰德职业兴趣理论，但摒弃枯燥的理论讲解。利用AI生成HTML互动游戏，将兴趣测评变为“登岛探险”。学生通过6道贴近生活的选择题（如“周末最想做什么？”“社团招新加入哪个？”），在轻松的游戏氛围中完成自我评估。游戏即时输出结果，学生当场获得“我的兴趣岛”反馈，极大地激发了探索热情和自我觉察。
（二）同伴互助深化（小组讨论）
在“兴趣岛”测评之后，安排小组分享环节：相同兴趣类型的同学组成“岛民小组”，讨论“我们这类人有什么共同特点？未来可能适合做什么？”通过同伴互动，学生不仅验证了测评结果的合理性，还在交流中拓展了对各类职业的认知。
（三）“搭一座桥”情感升华（课程收尾）
设计“搭一座桥：从现在到未来”环节，引导学生思考“我现在的兴趣，如何通向未来的职业？”将课堂探索与个人生活建立情感连接，传递“每一种兴趣都有价值，每一步努力都在搭建通往未来的桥梁”的积极信念。
（四） 校本化元素融合
课件中融入广州大学附属中学美林湖学校的校园文化元素：
以“美林湖学子的一天”为线索，引导学生发现校园生活中隐藏的职业角色；
“兴趣岛探险”游戏中的部分职业案例结合了学校周边社区的真实职业场景；
课件整体风格活泼、积极向上，契合广附“做最好的自己”的育人理念。
五、原创声明
课件中的教案框架、教学活动设计、师生互动脚本、PPT视觉素材、互动游戏代码等内容，均为本人借助AI工具辅助生成并进行深度加工、整合与优化后完成，非简单复制粘贴或搬运他人成果。课件中涉及的AI生成图像（封面、六座兴趣岛场景图等）、HTML互动代码（兴趣岛探险游戏），均为本人利用合法合规的AI工具生成，相关生成源文件（网页源代码）及制作过程截图均已打包附在附件中，作为佐证材料。
学科网（北京）股份有限公司
$
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧭 兴趣岛探险 · 职业万花筒</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', cursive, sans-serif;
background: linear-gradient(145deg, #ffe9d6 0%, #ffdab9 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0;
}
.game-container {
max-width: 800px;
width: 100%;
background: rgba(255, 248, 235, 0.92);
backdrop-filter: blur(4px);
border-radius: 60px 60px 30px 30px;
box-shadow: 0 20px 45px rgba(210, 140, 90, 0.25), 0 8px 20px rgba(0, 0, 0, 0.08);
padding: 28px 24px 22px;
border: 4px solid #fff6e0;
transition: all 0.2s;
}
h1 {
text-align: center;
font-size: 2.4rem;
color: #c77d42;
text-shadow: 3px 3px 0 #fbe9d2, 0 6px 12px rgba(170, 110, 70, 0.15);
letter-spacing: 2px;
margin-top: -6px;
margin-bottom: 12px;
word-break: break-word;
}
h1 span {
display: inline-block;
transform: rotate(-2deg);
}
.subhead {
text-align: center;
font-size: 1.05rem;
color: #a57355;
background: #fdefdc;
padding: 6px 14px;
border-radius: 40px;
display: inline-block;
margin: 0 auto 18px;
letter-spacing: 1px;
box-shadow: inset 0 -2px 0 #dbb594;
}
/* 进度条 */
.progress-area {
display: flex;
justify-content: space-between;
align-items: center;
background: #eddccb;
padding: 6px 14px 6px 18px;
border-radius: 50px;
margin-bottom: 20px;
}
.step-dots {
display: flex;
gap: 8px;
}
.dot {
width: 26px;
height: 26px;
border-radius: 50%;
background: #dbbc9f;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.85rem;
color: #876b52;
transition: 0.2s;
box-shadow: inset 0 -3px 0 #b39278;
}
.dot.active {
background: #f8b281;
color: #4f321f;
box-shadow: 0 0 0 3px #ffe1c0, inset 0 -3px 0 #d9884a;
transform: scale(1.05);
}
.dot.done {
background: #b8d8b0;
color: #386035;
box-shadow: inset 0 -3px 0 #7fa877;
}
.question-counter {
font-weight: bold;
color: #7a5c43;
background: #f3e3d3;
padding: 2px 16px;
border-radius: 30px;
font-size: 0.95rem;
}
/* 题目卡片 */
.question-card {
background: #fffbf5;
border-radius: 40px;
padding: 18px 20px 16px;
margin-bottom: 14px;
box-shadow: 0 6px 0 #dbb594, 0 10px 20px rgba(150, 100, 60, 0.12);
border: 2px solid #f2dac8;
}
.question-text {
font-size: 1.35rem;
font-weight: 600;
color: #593d29;
margin-bottom: 18px;
line-height: 1.5;
padding-left: 6px;
}
.question-text::before {
content: "❓ ";
font-size: 1.6rem;
}
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 520px) {
.options-grid {
grid-template-columns: 1fr;
}
}
.option-btn {
background: #f7efe7;
border: 3px solid #ecd6c2;
border-radius: 40px;
padding: 12px 10px;
font-size: 1rem;
font-weight: 500;
color: #442f21;
cursor: pointer;
transition: all 0.12s ease;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 0 #c7ab92;
text-align: left;
line-height: 1.3;
}
.option-btn:hover:not(:disabled) {
background: #ffeada;
border-color: #dbb594;
transform: translateY(-2px);
box-shadow: 0 6px 0 #c7ab92;
}
.option-btn.selected {
background: #ffdbb5;
border-color: #d9905a;
box-shadow: 0 2px 0 #b57647;
transform: translateY(2px);
}
.option-btn:disabled {
opacity: 0.75;
cursor: default;
filter: grayscale(0.2);
}
.option-icon {
font-size: 1.6rem;
flex-shrink: 0;
width: 32px;
text-align: center;
}
.nav-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}
.nav-btn {
background: #f5dccb;
border: none;
border-radius: 40px;
padding: 12px 28px;
font-weight: bold;
font-size: 1.1rem;
color: #503725;
cursor: pointer;
box-shadow: 0 5px 0 #c7a78b;
transition: 0.07s linear;
flex: 1;
min-width: 120px;
border: 2px solid #e7cdb6;
}
.nav-btn:active:not(:disabled) {
transform: translateY(4px);
box-shadow: 0 1px 0 #c7a78b;
}
.nav-btn:disabled {
opacity: 0.4;
transform: translateY(2px);
box-shadow: 0 3px 0 #c7a78b;
cursor: not-allowed;
}
.nav-btn.primary {
background: #fbc49e;
color: #402b1d;
box-shadow: 0 5px 0 #d99463;
}
/* 结果区域 */
.result-area {
background: #fff7ee;
border-radius: 40px;
padding: 20px 18px 18px;
margin-top: 12px;
box-shadow: inset 0 0 0 3px #f2dac8, 0 8px 16px rgba(130, 80, 40, 0.12);
display: none;
}
.result-area.show {
display: block;
animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
@keyframes popIn {
0% { transform: scale(0.88); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.result-title {
font-size: 2rem;
font-weight: bold;
color: #764b2c;
text-align: center;
margin-bottom: 6px;
}
.result-island {
font-size: 2.6rem;
text-align: center;
background: #fce6d2;
border-radius: 60px;
padding: 8px 10px;
margin: 8px 0 12px;
border: 4px dashed #dbaa7a;
}
.result-description {
font-size: 1.1rem;
color: #3d2c1e;
background: #faf0e6;
padding: 14px 18px;
border-radius: 30px;
line-height: 1.7;
margin: 8px 0 12px;
}
.result-scores {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
justify-content: center;
margin: 12px 0 8px;
}
.score-tag {
background: #eedccb;
padding: 4px 16px;
border-radius: 30px;
font-weight: 600;
color: #4b3322;
font-size: 0.95rem;
border: 2px solid #dbbc9f;
}
.score-tag.highlight {
background: #fbc49e;
border-color: #d9905a;
}
.restart-btn {
background: #b8d8b0;
border: none;
border-radius: 40px;
padding: 12px 28px;
font-weight: bold;
font-size: 1.2rem;
color: #2e5228;
cursor: pointer;
box-shadow: 0 5px 0 #7fa877;
transition: 0.07s linear;
margin-top: 6px;
width: 100%;
border: 2px solid #a1c798;
}
.restart-btn:active {
transform: translateY(4px);
box-shadow: 0 1px 0 #7fa877;
}
.footer-note {
text-align: center;
font-size: 0.8rem;
color: #a88369;
margin-top: 14px;
border-top: 2px dashed #e7d0bd;
padding-top: 12px;
}
</style>
</head>
<body>
<div class="game-container" id="app">
<h1><span>🧩</span> 职业万花筒 <span>🎨</span></h1>
<div style="text-align:center;"><span class="subhead">✨ 兴趣岛探险 · 找到你的专属小岛 ✨</span></div>
<!-- 进度 -->
<div class="progress-area">
<div class="step-dots" id="dotsContainer"></div>
<div class="question-counter" id="counterLabel">1 / 6</div>
</div>
<!-- 题目区 -->
<div id="questionCard" class="question-card">
<div class="question-text" id="questionText">加载题目中...</div>
<div class="options-grid" id="optionsContainer"></div>
</div>
<!-- 导航按钮 -->
<div class="nav-buttons">
<button class="nav-btn" id="prevBtn" disabled>⬅ 上一题</button>
<button class="nav-btn primary" id="nextBtn">下一题 ➡</button>
</div>
<!-- 结果区 -->
<div class="result-area" id="resultArea">
<div class="result-title">🎉 恭喜你到达了 ——</div>
<div class="result-island" id="islandName">🏝️ 兴趣岛</div>
<div class="result-description" id="islandDesc">你的专属岛屿描述</div>
<div class="result-scores" id="scoresContainer"></div>
<button class="restart-btn" id="restartBtn">🔄 再来一次冒险</button>
</div>
<div class="footer-note">💡 每题选一个最吸引你的选项 · 答案没有对错哦</div>
</div>
<script>
(function() {
// ----- 题库 (6题) 每个选项对应 RIASEC -----
const questions = [
{
text: "周末的自由时间，你最想做哪件事？",
options: [
{ label: "🔧 修自行车、拼乐高或做手工", type: 'R' },
{ label: "🔬 观察蚂蚁搬家、做个小实验", type: 'I' },
{ label: "🎨 画画、写故事、弹琴或跳舞", type: 'A' },
{ label: "🤗 去敬老院帮忙、照顾流浪猫狗", type: 'S' },
{ label: "📢 组织同学玩桌游、义卖小商品", type: 'E' },
{ label: "📋 整理书桌、列计划表、贴标签", type: 'C' }
]
},
{
text: "学校要举办社团招新，你会优先加入哪个？",
options: [
{ label: "⚙️ 机器人制作社 / 木工坊", type: 'R' },
{ label: "🧪 科学实验社 / 天文社", type: 'I' },
{ label: "🎭 戏剧社 / 美术社 / 文学社", type: 'A' },
{ label: "❤️ 志愿者协会 / 心理社", type: 'S' },
{ label: "🏆 模拟联合国 / 创业小集市", type: 'E' },
{ label: "📊 图书管理员 / 档案整理社", type: 'C' }
]
},
{
text: "如果给你一个「超能力」，你希望是？",
options: [
{ label: "🛠️ 能修理一切坏掉的东西", type: 'R' },
{ label: "🔍 能看清微观世界的一切秘密", type: 'I' },
{ label: "🌈 能凭空创造美丽的色彩和旋律", type: 'A' },
{ label: "💞 能让所有伤心的人开心起来", type: 'S' },
{ label: "🗣️ 能说服任何人跟你合作", type: 'E' },
{ label: "🗂️ 能把混乱瞬间变得井井有条", type: 'C' }
]
},
{
text: "在小组项目中，你通常更愿意承担哪种角色？",
options: [
{ label: "🖐️ 动手操作、制作实物的人", type: 'R' },
{ label: "📚 查找资料、分析数据的人", type: 'I' },
{ label: "🎨 设计海报、构思创意的人", type: 'A' },
{ label: "🤝 协调矛盾、照顾组员情绪的人", type: 'S' },
{ label: "📢 分配任务、代表小组发言的人", type: 'E' },
{ label: "✅ 记录进度、检查细节的人", type: 'C' }
]
},
{
text: "哪种类型的电视节目或短视频最吸引你？",
options: [
{ label: "🚜 荒野求生、汽车改装、手工达人", type: 'R' },
{ label: "🌌 宇宙探索、动物纪录片、科普实验", type: 'I' },
{ label: "🎬 动画电影、音乐MV、创意手工画", type: 'A' },
{ label: "👨👩👧👦 公益故事、育儿日记、治愈系vlog", type: 'S' },
{ label: "💼 商业访谈、创业故事、营销案例", type: 'E' },
{ label: "📆 收纳技巧、时间管理、高效学习法", type: 'C' }
]
},
{
text: "未来的职业，你最看重的是？",
options: [
{ label: "🔨 亲手做出有用的东西，很有成就感", type: 'R' },
{ label: "🧠 不断探索未知，解决难题", type: 'I' },
{ label: "🎶 自由表达想法，创造美与感动", type: 'A' },
{ label: "🤲 帮助别人，让世界变得更温暖", type: 'S' },
{ label: "🚀 领导团队，影响很多人", type: 'E' },
{ label: "📂 稳定有序，把事情做得精确完美", type: 'C' }
]
}
];
// ----- 岛屿信息 (RIASEC) -----
const islandData = {
R: { name: '🏝️ 现实岛', desc: '你是一个「动手小达人」！喜欢户外运动、机械、建造，做事踏实认真。适合的职业有：工程师、建筑师、消防员、运动员、园艺师……你的双手能创造真实的价值！' },
I: { name: '🏝️ 智慧岛', desc: '你是一个「小小科学家」！好奇心旺盛，喜欢观察、分析和解决谜题。适合的职业有：研究员、程序员、医生、天文学家、侦探……你的大脑就是最厉害的武器！' },
A: { name: '🏝️ 艺术岛', desc: '你是一个「创意小天才」！想象力丰富，热爱音乐、绘画、写作和表演。适合的职业有：设计师、作家、演员、摄影师、音乐人……世界因你的灵感而多彩！' },
S: { name: '🏝️ 爱心岛', desc: '你是一个「温暖小太阳」！善良体贴，乐于助人，喜欢和人打交道。适合的职业有：老师、护士、心理咨询师、社工、导游……你的关怀能点亮别人的生活！' },
E: { name: '🏝️ 领袖岛', desc: '你是一个「未来CEO」！充满自信，善于沟通和领导，喜欢挑战和竞争。适合的职业有：企业家、销售经理、律师、政治家、导演……你能带领团队走向成功！' },
C: { name: '🏝️ 秩序岛', desc: '你是一个「细致小管家」！做事有条理，细心负责，喜欢计划和整理。适合的职业有：会计、银行职员、行政助理、数据分析师、编辑……你的严谨让一切井然有序！' }
};
// ----- 状态 -----
let currentIndex = 0;
let answers = []; // 存储每道题选择的type (字符串)
let selectedIndices = []; // 存储每道题选择的选项索引 (0~5)
const totalQuestions = questions.length;
// DOM 元素
const dotsContainer = document.getElementById('dotsContainer');
const counterLabel = document.getElementById('counterLabel');
const questionText = document.getElementById('questionText');
const optionsContainer = document.getElementById('optionsContainer');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const resultArea = document.getElementById('resultArea');
const islandName = document.getElementById('islandName');
const islandDesc = document.getElementById('islandDesc');
const scoresContainer = document.getElementById('scoresContainer');
const restartBtn = document.getElementById('restartBtn');
// 初始化
function init() {
currentIndex = 0;
answers = new Array(totalQuestions).fill(null);
selectedIndices = new Array(totalQuestions).fill(-1);
renderDots();
renderQuestion(currentIndex);
updateNavButtons();
resultArea.classList.remove('show');
document.querySelector('.question-card').style.display = 'block';
document.querySelector('.nav-buttons').style.display = 'flex';
}
// 渲染进度点
function renderDots() {
dotsContainer.innerHTML = '';
for (let i = 0; i < totalQuestions; i++) {
const dot = document.createElement('div');
dot.className = 'dot';
dot.textContent = i + 1;
if (i === currentIndex) dot.classList.add('active');
else if (answers[i] !== null) dot.classList.add('done');
dotsContainer.appendChild(dot);
}
counterLabel.textContent = `${currentIndex + 1} / ${totalQuestions}`;
}
// 更新dots高亮
function updateDots() {
const dots = dotsContainer.children;
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active', 'done');
if (i === currentIndex) dots[i].classList.add('active');
else if (answers[i] !== null) dots[i].classList.add('done');
}
counterLabel.textContent = `${currentIndex + 1} / ${totalQuestions}`;
}
// 渲染题目
function renderQuestion(index) {
const q = questions[index];
questionText.textContent = q.text;
optionsContainer.innerHTML = '';
q.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.dataset.index = idx;
btn.dataset.type = opt.type;
// 图标+文字
const iconSpan = document.createElement('span');
iconSpan.className = 'option-icon';
// 提取第一个emoji作为图标 (已经自带)
iconSpan.textContent = opt.label.match(/^(\p{Emoji})/u)?.[0] || '🔹';
const textSpan = document.createElement('span');
textSpan.textContent = opt.label.replace(/^(\p{Emoji}\s*)/u, '');
btn.appendChild(iconSpan);
btn.appendChild(textSpan);
// 如果之前选过，恢复选中状态
if (selectedIndices[index] === idx) {
btn.classList.add('selected');
}
btn.addEventListener('click', function(e) {
if (this.disabled) return;
// 取消同组其他选中
const siblings = this.parentElement.querySelectorAll('.option-btn');
siblings.forEach(b => b.classList.remove('selected'));
this.classList.add('selected');
const idxVal = parseInt(this.dataset.index);
const typeVal = this.dataset.type;
selectedIndices[currentIndex] = idxVal;
answers[currentIndex] = typeVal;
// 更新dots状态
updateDots();
// 启用下一题按钮（如果有选择）
if (answers[currentIndex] !== null) {
nextBtn.disabled = false;
}
});
optionsContainer.appendChild(btn);
});
// 如果此题已答过，禁用按钮？ 不禁用，允许修改。但为了交互友好，保留可改。
// 但如果已答过，启用下一题
if (answers[index] !== null) {
nextBtn.disabled = false;
} else {
nextBtn.disabled = true;
}
}
// 更新导航按钮
function updateNavButtons() {
prevBtn.disabled = (currentIndex === 0);
// 如果当前题目未选，禁用下一题
if (answers[currentIndex] === null) {
nextBtn.disabled = true;
} else {
nextBtn.disabled = false;
}
// 如果是最后一题且已选，改变按钮文字
if (currentIndex === totalQuestions - 1) {
nextBtn.textContent = '🏁 查看结果';
} else {
nextBtn.textContent = '下一题 ➡';
}
}
// 切换到指定题目
function goToQuestion(index) {
if (index < 0 || index >= totalQuestions) return;
currentIndex = index;
renderQuestion(currentIndex);
updateDots();
updateNavButtons();
// 隐藏结果区
resultArea.classList.remove('show');
document.querySelector('.question-card').style.display = 'block';
document.querySelector('.nav-buttons').style.display = 'flex';
}
// 计算并显示结果
function showResult() {
// 统计分数
const scores = { R: 0, I: 0, A: 0, S: 0, E: 0, C: 0 };
answers.forEach(type => {
if (type && scores.hasOwnProperty(type)) {
scores[type]++;
}
});
// 找出最高分（可能有多个并列）
const maxScore = Math.max(...Object.values(scores));
const topTypes = Object.keys(scores).filter(key => scores[key] === maxScore);
// 取第一个作为主岛（若并列，显示多个）
let mainType = topTypes[0];
// 如果并列，组合名字
let islandDisplayName = '';
let islandDisplayDesc = '';
if (topTypes.length === 1) {
const data = islandData[mainType];
islandDisplayName = data.name;
islandDisplayDesc = data.desc;
} else {
// 多个并列，组合名称
const names = topTypes.map(t => islandData[t].name.replace('🏝️ ', '')).join(' & ');
islandDisplayName = `🏝️ ${names}`;
const descParts = topTypes.map(t => islandData[t].desc.split('。')[0]); // 取第一句
islandDisplayDesc = `你拥有多种特质！既有 ${descParts.join('，也有 ')} 。你可以探索融合这些兴趣的领域哦～`;
}
// 显示结果
islandName.textContent = islandDisplayName;
islandDesc.textContent = islandDisplayDesc;
// 显示各项分数
scoresContainer.innerHTML = '';
const typeLabels = { R: '现实', I: '研究', A: '艺术', S: '社会', E: '企业', C: '常规' };
for (let key of ['R','I','A','S','E','C']) {
const tag = document.createElement('span');
tag.className = 'score-tag';
if (topTypes.includes(key)) tag.classList.add('highlight');
tag.textContent = `${typeLabels[key]}岛 ${scores[key]}分`;
scoresContainer.appendChild(tag);
}
// 隐藏题目，显示结果
document.querySelector('.question-card').style.display = 'none';
document.querySelector('.nav-buttons').style.display = 'none';
resultArea.classList.add('show');
}
// 事件绑定
prevBtn.addEventListener('click', function() {
if (currentIndex > 0) {
goToQuestion(currentIndex - 1);
}
});
nextBtn.addEventListener('click', function() {
// 如果当前未选，不允许下一步
if (answers[currentIndex] === null) {
return;
}
// 如果是最后一题，显示结果
if (currentIndex === totalQuestions - 1) {
showResult();
} else {
goToQuestion(currentIndex + 1);
}
});
restartBtn.addEventListener('click', function() {
init();
});
// 启动
init();
})();
</script>
</body>
</html>
学科网（北京）股份有限公司
$null
资源预览图
