代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>创建你的AI人物提示词</h1>
<p>请填写相关信息后提交</p>
<!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-center">基本信息</h2>
<div class="input-group">
<span class="input-group-addon">名字</span>
<input type="text" name="name" id="name" class="form-control">
<span class="input-group-addon">出生日期</span>
<input type="date" name="date" id="date" class="form-control">
<span class="input-group-addon">性别</span>
<select class="form-control" id="sex" name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<hr>
</div>
<div id="history">
<div class="row">
<div class="col-md-12">
<h2 class="text-center">个人经历</h2>
<button class="btn btn-info" onclick="add_event()">添加你的时间节点</button>
<hr>
</div>
</div>
<div class="row events_row_o">
<div class="col-md-6">
<label>事件名称</label>
<input type="name" class="form-control events" name="events" >
</div>
<div class="col-md-6">
<label>事件期限</label>
<div class="input-group">
<label class="input-group-addon">开始时间</label>
<input type="date" name="events_start_date" class="form-control events_start_date">
<label class="input-group-addon">结束时间</label>
<input type="date" name="events_end_date" class="form-control events_end_date">
</div>
</div>
<div class="col-md-12">
<label>事件描述及相关的判断经过</label>
<textarea class="form-control events_text" rows="5"></textarea>
</div>
<div class="col-md-12 text-center">
<br/>
<button class="btn btn-danger" onclick="remove_event(this)">删除</button>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-center">个人兴趣爱好及特长</h2>
<textarea class="form-control hobbies" rows="3" id="hobbies"></textarea>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-center">本人的主要社会关系</h2>
<textarea class="form-control social" rows="6" id="social"></textarea>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-center">其他人对本人的看法</h2>
<textarea class="form-control think" rows="3" id="think"></textarea>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-center">MBTI测试</h2>
</div>
<div class="col-md-12">
<h3>MBTI题目(从心出发)</h3>
<div id="question-container"></div>
</div>
<div class="col-md-12 text-center">
<button class="btn btn-warning" onclick="displayQuestions() ">重新测试</button>
<button id="submit-button" onclick="submitAnswers()" class="btn btn-success">提交答案</button>
</div>
<hr>
<div class="col-md-12 bg-warning" style="margin-top:50px ;margin-bottom:20px;">
<h3 id="result" class="text-info text-center" ></h3>
</div>
<hr>
<br>
</div>
<div class="row bg-success" style="padding: 20px;" >
<div class="col-md-12 text-center">
<button onclick="get_info()" class="btn btn-lg btn-success">生成提示词</button>
</div>
<div class="col-md-12">
<H2 class="text-center">最终生成的提示词</H2>
<textarea class="form-control" rows="15" id="end"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>请复制上面文本框的内容到你的AI工具，作为起始的提示词！</h2>
</div>
</div>
</div>
</body>
<script>
// 定义所有题目和对应的选项及类型 MBTI测试
var mbtiDescriptions = {
"ISTJ": "你是一个严谨、注重细节的务实主义者，擅长建立标准化流程。在分析问题时习惯按时间线梳理事实依据，偏好使用数字编号（如步骤1/2/3）提供可验证的解决方案。",
"ISFJ": "你是一个善于观察的守护者，总是优先考虑群体和谐。回答问题时会自然代入他人视角，习惯使用'我们'作为主语，提出的建议兼顾实用性与情感接受度。",
"INFJ": "你是一个富有远见的理想主义者，善于洞察事物深层联系。表达观点时习惯构建隐喻框架（如'这就像...'），在理性分析中融入人文关怀，引导对话者反思价值观。",
"INTJ": "你是一个目标明确的战略家，擅长构建系统性解决方案。对话时直接定位核心矛盾，用逻辑树呈现多级影响，总是附带备用方案和风险评估框架。",
"ISTP": "你是一个机敏的问题解决者，专注当下可操作的现实方案。善于将抽象问题转化为工具使用指南，回答包含具体参数（如温度/尺寸/时长）和效果对比数据。",
"ISFP": "你是一个注重体验的艺术家，擅长通过感官细节传递信息。表达时偏好具象化描述（如颜色/质感/声音），会主动评估事物的美学价值与情感共鸣点。",
"INFP": "你是一个信念至上的调解者，语言充满诗意比喻。在分析问题时会构建道德坐标系，善于用开放式提问（'如果...会不会...'）激发自我反思。",
"INTP": "你是一个逻辑严谨的分析师，热衷于解构复杂系统。回答时自动生成思维导图式的多维度框架，允许无限追问'为什么'直至触及基础原理层。",
"ESTP": "你是一个行动导向的实践家，关注即时可得的成果。擅长在动态环境中快速制定应急方案，用简明指令（'现在做A，然后B'）取代理论解释。",
"ESFP": "你是一个活力四射的表演者，善于营造轻松氛围。对话中穿插个人经历和即兴幽默，优先考虑方案的趣味性和互动性，用场景化描述替代抽象概念。",
"ENFP": "你是一个灵感迸发的创意者，思维跳跃充满可能性。善于将不同领域概念进行非常规组合，用激励性语言（'想象一下...'）推动突破常规框架。",
"ENTP": "你是一个挑战现状的革新者，擅长用辩证视角解构问题。习惯在标准答案后追加'另一方面...'，通过设置思维实验（'假设...会怎样？'）引发深度探讨。",
"ESTJ": "你是一个效率优先的管理者，注重建立清晰的责任体系。回答时自动生成时间节点和量化指标，用权威数据（如行业标准/成功案例）强化方案可信度。",
"ESFJ": "你是一个关系驱动的协调者，善于维系群体共识。决策时优先考虑社会规范与传统经验，用'大家通常...'等表述建立安全感，避免极端化方案。",
"ENFJ": "你是一个愿景驱动的引导者，擅长洞察他人潜力。表达时使用赋能性语言（'你可以...'），善于将具体问题提升到成长维度，构建积极行动框架。",
"ENTJ": "你是一个目标明确的指挥官，擅长资源的最优配置。回答呈现清晰的决策树结构，用'首先攻破A点，24小时内达成B指标'等强指向性指令推动进程。"
};
const questions = [
{
question: '当你要外出一整天，你会',
options: [
{ text: '计划你要做什么和在什么时候做', type: 'J' },
{ text: '说去就去', type: 'P' }
]
},
{
question: '你认为自己是一个',
options: [
{ text: '较为随兴所至的人', type: 'P' },
{ text: '较为有条理的人', type: 'J' }
]
},
{
question: '假如你是一位老师，你会选教',
options: [
{ text: '以事实为主的课程', type: 'S' },
{ text: '涉及理论的课程', type: 'N' }
]
},
{
question: '你通常',
options: [
{ text: '与人容易混熟', type: 'E' },
{ text: '比较沉静或矜持', type: 'I' }
]
},
{
question: '一般来说，你和哪些人比较合得来？',
options: [
{ text: '富于想象力的人', type: 'N' },
{ text: '现实的人', type: 'S' }
]
},
{
question: '你是否经常让',
options: [
{ text: '你的情感支配你的理智', type: 'F' },
{ text: '你的理智主宰你的情感', type: 'T' }
]
},
{
question: '处理许多事情上，你会喜欢',
options: [
{ text: '凭兴所至行事', type: 'P' },
{ text: '按照计划行事', type: 'J' }
]
},
{
question: '你是否',
options: [
{ text: '容易让人了解', type: 'E' },
{ text: '难于让人了解', type: 'I' }
]
},
{
question: '按照程序表做事，',
options: [
{ text: '合你心意', type: 'J' },
{ text: '令你感到束缚', type: 'P' }
]
},
{
question: '当你有一份特别的任务，你会喜欢',
options: [
{ text: '开始前小心组织计划', type: 'J' },
{ text: '边做边找须做什么', type: 'P' }
]
},
{
question: '在大多数情况下，你会选择',
options: [
{ text: '顺其自然', type: 'P' },
{ text: '按程序表做事', type: 'J' }
]
},
{
question: '大多数人会说你是一个',
options: [
{ text: '重视自我隐私的人', type: 'I' },
{ text: '非常坦率开放的人', type: 'E' }
]
},
{
question: '你宁愿被人认为是一个',
options: [
{ text: '实事求是的人', type: 'S' },
{ text: '机灵的人', type: 'N' }
]
},
{
question: '在一大群人当中，通常是',
options: [
{ text: '你介绍大家认识', type: 'E' },
{ text: '别人介绍你', type: 'I' }
]
},
{
question: '你会跟哪些人做朋友？',
options: [
{ text: '常提出新注意的', type: 'N' },
{ text: '脚踏实地的', type: 'S' }
]
},
{
question: '你倾向',
options: [
{ text: '重视感情多于逻辑', type: 'F' },
{ text: '重视逻辑多于感情', type: 'T' }
]
},
{
question: '你比较喜欢',
options: [
{ text: '坐观事情发展才作计划', type: 'P' },
{ text: '很早就作计划', type: 'J' }
]
},
{
question: '你喜欢花很多的时间',
options: [
{ text: '一个人独处', type: 'I' },
{ text: '和别人在一起', type: 'E' }
]
},
{
question: '与很多人一起会',
options: [
{ text: '令你活力培增', type: 'E' },
{ text: '常常令你心力憔悴', type: 'I' }
]
},
{
question: '你比较喜欢',
options: [
{ text: '很早便把约会、社交聚集等事情安排妥当', type: 'J' },
{ text: '无拘无束，看当时有什么好玩就做什么', type: 'P' }
]
},
{
question: '计划一个旅程时，你较喜欢',
options: [
{ text: '大部分的时间都是跟当天的感觉行事', type: 'P' },
{ text: '事先知道大部分的日子会做什么', type: 'J' }
]
},
{
question: '在社交聚会中，你',
options: [
{ text: '有时感到郁闷', type: 'I' },
{ text: '常常乐在其中', type: 'E' }
]
},
{
question: '你通常',
options: [
{ text: '和别人容易混熟', type: 'E' },
{ text: '趋向自处一隅', type: 'I' }
]
},
{
question: '哪些人会更吸引你？',
options: [
{ text: '一个思想敏捷及非常聪颖的人', type: 'N' },
{ text: '实事求是，具丰富常识的人', type: 'S' }
]
},
{
question: '在日常工作中，你会',
options: [
{ text: '颇为喜欢处理迫使你分秒必争的突发', type: 'P' },
{ text: '通常预先计划，以免要在压力下工作', type: 'J' }
]
},
{
question: '你认为别人一般',
options: [
{ text: '要花很长时间才认识你', type: 'I' },
{ text: '用很短的时间便认识你', type: 'E' }
]
},
{
question: 'A.注重隐私，B.坦率开放，哪一个词语更合你心意？',
options: [
{ text: '注重隐私', type: 'I' },
{ text: '坦率开放', type: 'E' }
]
},
{
question: 'A.预先安排的，B.无计划的，哪一个词语更合你心意？',
options: [
{ text: '预先安排的', type: 'J' },
{ text: '无计划的', type: 'P' }
]
},
{
question: 'A.抽象，B.具体，哪一个词语更合你心意？',
options: [
{ text: '抽象', type: 'N' },
{ text: '具体', type: 'S' }
]
},
{
question: 'A.温柔，B.坚定，哪一个词语更合你心意？',
options: [
{ text: '温柔', type: 'F' },
{ text: '坚定', type: 'T' }
]
},
{
question: 'A.思考，B.感受，哪一个词语更合你心意？',
options: [
{ text: '思考', type: 'T' },
{ text: '感受', type: 'F' }
]
},
{
question: 'A.事实，B.意念，哪一个词语更合你心意？',
options: [
{ text: '事实', type: 'S' },
{ text: '意念', type: 'N' }
]
},
{
question: 'A.冲动，B.决定，哪一个词语更合你心意？',
options: [
{ text: '冲动', type: 'P' },
{ text: '决定', type: 'J' }
]
},
{
question: 'A.热衷，B.文静，哪一个词语更合你心意？',
options: [
{ text: '热衷', type: 'E' },
{ text: '文静', type: 'I' }
]
},
{
question: 'A.文静，B.外向，哪一个词语更合你心意？',
options: [
{ text: '文静', type: 'I' },
{ text: '外向', type: 'E' }
]
},
{
question: 'A.有系统，B.随意，哪一个词语更合你心意？',
options: [
{ text: '有系统', type: 'J' },
{ text: '随意', type: 'P' }
]
},
{
question: 'A.理论，B.肯定，哪一个词语更合你心意？',
options: [
{ text: '理论', type: 'N' },
{ text: '肯定', type: 'S' }
]
},
{
question: 'A.敏感，B.公正，哪一个词语更合你心意？',
options: [
{ text: '敏感', type: 'F' },
{ text: '公正', type: 'T' }
]
},
{
question: 'A.令人信服，B.感人的，哪一个词语更合你心意？',
options: [
{ text: '令人信服', type: 'T' },
{ text: '感人的', type: 'F' }
]
},
{
question: 'A.声明，B.概念，哪一个词语更合你心意？',
options: [
{ text: '声明', type: 'S' },
{ text: '概念', type: 'N' }
]
},
{
question: 'A.不受约束，B.预先安排，哪一个词语更合你心意？',
options: [
{ text: '不受约束', type: 'P' },
{ text: '预先安排', type: 'J' }
]
},
{
question: 'A.矜持，B.健谈，哪一个词语更合你心意？',
options: [
{ text: '矜持', type: 'I' },
{ text: '健谈', type: 'E' }
]
},
{
question: 'A.有条不紊，B.不拘小节，哪一个词语更合你心意？',
options: [
{ text: '有条不紊', type: 'J' },
{ text: '不拘小节', type: 'P' }
]
},
{
question: 'A.意念，B.实况，哪一个词语更合你心意？',
options: [
{ text: '意念', type: 'N' },
{ text: '实况', type: 'S' }
]
},
{
question: 'A.同情怜悯，B.远见，哪一个词语更合你心意？',
options: [
{ text: '同情怜悯', type: 'F' },
{ text: '远见', type: 'N' }
]
},
{
question: 'A.利益，B.祝福，哪一个词语更合你心意？',
options: [
{ text: '利益', type: 'T' },
{ text: '祝福', type: 'F' }
]
},
{
question: 'A.务实的，B.理论的，哪一个词语更合你心意？',
options: [
{ text: '务实的', type: 'S' },
{ text: '理论的', type: 'N' }
]
},
{
question: 'A.朋友不多，B.朋友众多，哪一个词语更合你心意？',
options: [
{ text: '朋友不多', type: 'I' },
{ text: '朋友众多', type: 'E' }
]
},
{
question: 'A.有系统，B.即兴，哪一个词语更合你心意？',
options: [
{ text: '有系统', type: 'J' },
{ text: '即兴', type: 'P' }
]
},
{
question: 'A.富想象的，B.以事论事，哪一个词语更合你心意？',
options: [
{ text: '富想象的', type: 'N' },
{ text: '以事论事', type: 'S' }
]
},
{
question: 'A.亲切的，B.客观的，哪一个词语更合你心意？',
options: [
{ text: '亲切的', type: 'F' },
{ text: '客观的', type: 'T' }
]
},
{
question: 'A.客观的，B.热情的，哪一个词语更合你心意？',
options: [
{ text: '客观的', type: 'T' },
{ text: '热情的', type: 'F' }
]
},
{
question: 'A.建造，B.发明，哪一个词语更合你心意？',
options: [
{ text: '建造', type: 'S' },
{ text: '发明', type: 'N' }
]
},
{
question: 'A.文静，B.爱合群，哪一个词语更合你心意？',
options: [
{ text: '文静', type: 'I' },
{ text: '爱合群', type: 'E' }
]
},
{
question: 'A.理论，B.事实，哪一个词语更合你心意？',
options: [
{ text: '理论', type: 'N' },
{ text: '事实', type: 'S' }
]
},
{
question: 'A.富同情，B.合逻辑，哪一个词语更合你心意？',
options: [
{ text: '富同情', type: 'F' },
{ text: '合逻辑', type: 'T' }
]
},
{
question: 'A.具分析力，B.多愁善感，哪一个词语更合你心意？',
options: [
{ text: '具分析力', type: 'T' },
{ text: '多愁善感', type: 'F' }
]
},
{
question: 'A.合情合理，B.令人着迷，哪一个词语更合你心意？',
options: [
{ text: '合情合理', type: 'S' },
{ text: '令人着迷', type: 'N' }
]
},
{
question: '当你要在一个星期内完成一个大项目，你在开始的时候会',
options: [
{ text: '把要做的不同工作依次列出', type: 'J' },
{ text: '马上动工', type: 'P' }
]
}
// 这里可以继续添加剩余的 91 道题目
// ...
];
// 随机抽取 20 道题目
function getRandomQuestions() {
const shuffled = questions.sort(() => 0.5 - Math.random());
return shuffled.slice(0, 20);
}
// 显示题目
function displayQuestions() {
const questionContainer = document.getElementById('question-container');
questionContainer.innerHTML="";
const randomQuestions = getRandomQuestions();
randomQuestions.forEach((question, index) => {
const questionDiv = document.createElement('div');
questionDiv.innerHTML = `<h4>${index + 1}. ${question.question}</h4>`;
question.options.forEach((option, optionIndex) => {
const input = document.createElement('input');
input.type = 'radio';
input.name = `question-${index}`;
input.value = option.type;
const label = document.createElement('label');
label.className="text-muted";
label.textContent = option.text;
questionDiv.appendChild(input);
questionDiv.appendChild(label);
questionDiv.appendChild(document.createElement('br'));
});
questionDiv.className="col-md-6";
questionContainer.appendChild(questionDiv);
});
}
// 提交答案并计算 MBTI 类型
function submitAnswers() {
const radios = document.querySelectorAll('input[type="radio"]:checked');
const typeCount = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
radios.forEach(radio => {
const type = radio.value;
typeCount[type]++;
});
let mbti = '';
mbti += typeCount.E > typeCount.I ? 'E' : 'I';
mbti += typeCount.S > typeCount.N ? 'S' : 'N';
mbti += typeCount.T > typeCount.F ? 'T' : 'F';
mbti += typeCount.J > typeCount.P ? 'J' : 'P';
const resultDiv = document.getElementById('result');
resultDiv.textContent = `你的 MBTI 类型是: ${mbti}`;
global_mbti=mbti;
console.log(mbtiDescriptions[mbti])
global_xg=mbtiDescriptions[mbti];
}
// 页面加载时显示题目
window.onload = displayQuestions;
</script>
<script>
function add_event(){
console.log(123);
var events_row=$(".events_row_o");
var events_clone=events_row.clone();
events_clone.removeClass("events_row_o");
events_clone.find(".events").val("");
events_clone.find(".events_start_date").val("");
events_clone.find(".events_end_date").val("");
events_clone.find(".events_text").val("");
$("#history").append(events_clone);
}
function remove_event(btn){
$(btn).parent().parent().remove();
}
function get_events(){
var info=[];
var events=$(".events");
var events_text=$(".events_text");
var events_start_date=$(".events_start_date");
var events_end_date=$(".events_end_date");
global_events="";
for (let index = 0; index < events.length; index++) {
// const element_events = events[index];
var title=events[index].value;
var start_date=events_start_date[index].value;
var text=events_text[index].value;
var end_date=events_end_date[index].value;
if(end_date.length<3){
end_date="至今";
}
// console.log(events[index].value,events_start_date[index].value,events_end_date[index].value,events_text[index].value);
console.log(title,start_date,'-',end_date,text);
global_events=global_events+title+"从"+start_date+'至'+end_date+"其中主要内容有："+text+";";
info.push(title,start_date,end_date,text);
}
return info;
}
function get_info(){
if(typeof global_mbti ==='undefined'){
alert("请先完成MBTI测试后再点击！");
}else{
var name=$("#name").val();
var date=$("#date").val();
var sex=$("#sex").val();
var hobbies=$("#hobbies").val();
var social=$("#social").val();
var think=$("#think").val();
get_events();
var txt="你叫"+name+"，出生于"+date+"，性别是"+sex+"。\n个人成长经历:"+global_events+"。\n你的兴趣爱好是"+hobbies+"。\n你的社会关系包括"+social+"。\n别人对你的看法是"+think+"。\n你的MBTI类型是"+global_mbti+"。\n你的性格的主要特点是"+global_xg+"\n【交互指令】\n请严格基于以下规范进行对话：\n1. 以第一人称视角回应，保持自然语言风格\n2. 将MBTI特质融入问题分析过程\n3. 重要决策需引用相关经历佐证\n4. 涉及专业领域时展现对应知识储备。";
console.log(txt);
$("#end").val(txt);
}
}
</script>
</html>