pbl-teacher-table/src/components/pages/pblCourse/index.vue

<template>
	<div class="pblCourse" v-loading="loading">
		<div class="pc_left">
			<div class="pc_l_top">
				<procedureArea :phase="phase" />
			</div>
			<div class="pc_l_bottom">
				<doWorkArea :phase="phase" @changePhase="changePhase" @choiceAnswer="choiceAnswer" @submitTask="submitTask" :task="taskList[phase.atPhase]" @getTaskList="getTaskList"/>
			</div>
		</div>
		<div class="pc_right">
			<chatArea />
		</div>
		<selectTopicDialog ref="selectTopicDialogRef" @success="selectTopicSuccess"/>
	</div>
</template>

<script>
import chatArea from './component/chatArea'
import doWorkArea from './component/doWorkArea'
import procedureArea from './component/procedureArea'
import { v4 as uuidv4 } from "uuid";
import selectTopicDialog from './component/selectTopicDialog'
export default {
	components: {
		chatArea,
		doWorkArea,
		procedureArea,
		selectTopicDialog,
	},
	data() {
		return {
			loading: false,
			phase:{
				doPhase:0,
				atPhase:0,
			},
			selectTopic:"",
			taskList:[]
		};
	},
	methods: {
		changePhase(type,newValue){
			this.phase[type] = newValue;
		},
		getTaskList(phase = 0){
			return new Promise((resolve,reject)=>{
				if(this.loading)return this.$message.info("请稍等")
			this.loading = true;
		const _uuid = uuidv4()
		const _msg = `
NOTICE
Role: 作为学生的学习指导Agent，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成自适应的学习任务和对应的5道考核题目。
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

# Context
## 语气
你的语气应该是亲切地，有趣的，循循善诱的一个老师

## 工具能力
1. 5E教学模型应用：
你需要熟悉并应用5E教学模型（即引入、探索、解释、扩展和评估）于学习任务的设计中，确保学习过程的有效性和吸引力。5E教学模型是一种以学生为中心的教学方法，旨在通过五个阶段（Engage, Explore, Explain, Elaborate, Evaluate）来促进学生的学习和理解。
Engage（引入）：在这个阶段，教师通过引人入胜的活动或问题来激发学生的兴趣和好奇心，帮助他们建立与新知识的联系。
Explore（探索）：学生通过动手实验或调查活动来探索新概念，培养他们的探究能力和批判性思维。
Explain（解释）：学生在这个阶段分享他们的发现，教师提供进一步的解释和指导，帮助学生理解新概念。
Elaborate（拓展）：学生通过应用新知识来解决更复杂的问题，进一步深化他们的理解。
Evaluate（评估）：教师和学生共同评估学习效果，反思学习过程，确定需要改进的地方。
2. 学生表现与选择的感知：
通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成：
基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

## 工作流程
1. 判断学生当前处在5E模型中哪一个学习阶段。如果未提供学情数据，或无法判断学生当前处在5E教学模型中的哪一个解释，则默认处在第一个阶段（引入）阶段。请随机选择一个适合小学五年级学生的科学学习主题，并生成相应的符合引入阶段的学习任务。
2. 结合学生当前的学情数据，生成紧随其后的下一个阶段的学习任务，但是仅仅生成紧随其后的下一个阶段的学习任务。你需要沿着这个顺序判断：引入阶段→探索阶段→解释阶段→拓展阶段→评估阶段。比如，当你判断学情数据中，学生目前已经完成了引入阶段的学习，那么你需要提供探索阶段的学习任务。
3. 生成上一步中学习任务对应的5道考核选择题

## 限制
1. 请仅仅生成某一个阶段对应的学习任务。不要同时给出多个阶段、多个学习任务。
2. 请严格按照以下格式要求输出内容，请仅仅告知相应的5E阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
3. 生成相应的考核题目，仅限单选题
4. 任务描述的格式以markdown方式输出

## 学情数据
选题：${this.selectTopic}
${this.phase.doPhase==0?'':`这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(this.taskList[this.phase.doPhase-1])}（当前的学习任务设计、学习表现数据、作业数据等）。`}

# Format example
{
"name": "任务名字",
"detail": "任务描述（要求markdown的格式）",
"target":"任务目标",
"steps":"任务步骤",
"tips":"任务提示",
"answerArray":[
{
	"title": "标题",
	"type": "单选题",
	"option": ["选项1","选项2","选项3","选项4"],
	"answer": "答案（最好是index）"
},
{
	"title": "标题",
	"type": "单选题",
	"option": ["选项1","选项2","选项3","选项4"],
	"answer": "答案（最好是index）"
}
]
}

Instruction: Based on the context, follow "Format example", write content.
`
			console.log(_msg)
			// ${
			// 	this.phase.doPhase==0?'':`
			// 	## 学情数据
			// 	这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(this.taskList[this.phase.doPhase])}（当前的学习任务设计、学习表现数据、作业数据等）。`
			// }

			let params = {
				model: "gpt-3.5-turbo",
				temperature: 0,
				max_tokens: 4096,
				top_p: 1,
				frequency_penalty: 0,
				presence_penalty: 0,
				messages: [{role:"user",content:_msg}],
				uid: _uuid,
				mind_map_question: "",
				stream:false
			}
			this.ajax
			.post("https://gpt4.cocorobo.cn/chat", params)
			.then((res) => {
				let _data = res.data.FunctionResponse.choices[0];
				let content = _data.message.content;
				console.log(content)
				content = content.replaceAll('```json','').replaceAll('```','')
				// console.log(content)
				const _result = JSON.parse(content);
				
				_result.detail = _result.detail?_result.detail:"",
				_result.steps = _result.steps?_result.steps:"",
				_result.target = _result.target?_result.target:"",
				_result.tips =_result.tips?_result.tips:""
				this.taskList[phase] = _result;
				// this.phase.doPhase = phase;
				this.phase.atPhase = phase;
				console.log(this.taskList)
				this.loading = false;
				resolve();
			})
			.catch((e) => {
				this.loading = false;
				this.$message.error("获取任务失败")
				if(this.phase.doPhase!=0){
					this.phase.doPhase--;
				}
				resolve();
				console.log(e);
			});
			})
			
		},
		choiceAnswer(_data){
			this.taskList[this.phase.atPhase].answerArray[_data[0]].userAnswer = _data[1];
			this.$forceUpdate()
		},
		submitTask(){
			
			this.loading = true;
			let sum = 0;
			this.taskList[this.phase.atPhase].answerArray.forEach(i=>{
				if('userAnswer' in i){
					sum++;
				}
			})
			if(sum<this.taskList[this.phase.atPhase].answerArray.length){
				this.loading = false;
				return this.$message.error("当前阶段还未完成")
			}else if((this.phase.doPhase>this.phase.atPhase)){
				this.loading = false;
				return this.$message.error("该阶段已经提交过了")
			}else{
				this.loading = false;
				this.phase.doPhase++;
				if(this.phase.doPhase==5){
					return this.$message.error('所有阶段已经完成');
				}
				this.getTaskList(this.phase.doPhase)
			}
		},
		selectTopicSuccess(_form){
			if(_form.title){
					this.phase = {
					doPhase:0,
					atPhase:0,
				}
				this.selectTopic = _form.title;
				this.getTaskList()
				this.$refs.selectTopicDialogRef.close();
			}
		}
	},
	mounted() {
		
		this.selectTopic = "";
		this.$refs.selectTopicDialogRef.open();
		// this.getTaskList()
	},
};
</script>

<style scoped>
.pblCourse {
	min-width: 1500px;
	/* min-height: 800px; */
	width: 100%;
	height: 100vh;
	display: flex;
	background-color: #f0f2f5;
	box-sizing: border-box;
	padding: 20px;
}

.pc_left {
	width: calc(100% - 500px - 20px);
	margin-right: 20px;
	box-sizing: border-box;
}

.pc_l_top {
	width: 100%;
	height: 150px;
	box-sizing: border-box;
}

.pc_l_bottom {
	width: 100%;
	height: calc(100% - 150px - 15px);
	box-sizing: border-box;
	margin-top: 15px;
}

.pc_right {
	width: 500px;
	height: 100%;
	box-sizing: border-box;
}
</style>