Commit 74394283 authored by limingzhe's avatar limingzhe

feat: 添加视频 写题 按钮

parent b0dc80e3
......@@ -118,6 +118,12 @@
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
<app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<button nz-button (click)="copyItem(it)" >
......
......@@ -124,7 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
'selectType',
'labelText',
'posX',
'posY'
'posY',
'mathLabel',
]
......
......@@ -239,7 +239,9 @@
<div style="width: 400px; margin-left: 15px;">
<span style="margin-right: 5px; ">新简答题 答案:</span>
<div style="width: 200px; display: flex; justify-content: center; align-items: center;">
<input type="text" nz-input [(ngModel)]="item.new_answer" (blur)="save()" style="margin-top: 5px">
<!-- <input type="text" nz-input [(ngModel)]="item.new_answer" (blur)="save()" style="margin-top: 5px"> -->
<app-formula-input style="margin-top: 5px" [(ngfModel)]="item.new_answer" (ngfBlur)="save()"></app-formula-input>
</div>
</div>
......
......@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// label: '比对',
},
{
name: '选择区域',
name: '选择区域',
rect: true,
},
{
......@@ -49,7 +49,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
{
name: '简答填空区',
rect: true,
label: '答案',
mathLabel: '答案',
},
{
name: '讲解按钮',
rect: true,
},
{
name: '填过程按钮',
rect: true,
},
];
testValue = '123';
......
......@@ -853,7 +853,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log(' in showOneHotZone')
if (index > arr.length - 1) {
this.showWriteBtn();
return;
}
......@@ -941,6 +941,15 @@ export class PlayComponent implements OnInit, OnDestroy {
}
showWriteBtn() {
if (this.writeBtn) {
this.writeBtn.visible = true;
this.writeBtn.alpha = 0;
tweenChange(this.writeBtn, {alpha: 1}, 1);
}
}
showSmallTitle(data) {
const imgObj = this.images.get(data.title_pic_url);
......@@ -2144,6 +2153,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
// 选择题区域 可见
if (this.curAreaItem && this.curAreaItem.visible) {
for (let i=0; i<this.optionItemArr.length; i++) {
if (this.checkClickTarget(this.optionItemArr[i])) {
......@@ -2151,12 +2161,22 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
}
if (this.checkClickTarget(this.videoBtn)) {
this.videoBtnClick();
return;
}
} else {
if (this.checkClickTarget(this.answerRect)) {
this.answerRectClick();
return;
}
if (this.checkClickTarget(this.writeBtn)) {
this.writeBtnClick();
return;
}
}
......@@ -2185,6 +2205,28 @@ export class PlayComponent implements OnInit, OnDestroy {
}
writeBtnClick() {
const courseware = window['courseware'];
if (!courseware) {
return;
}
courseware.activeWhiteBoard((data) => {
// TODO 公式编辑器返回的结果
console.log('activeWhiteBoard data: ', data);
});
}
videoBtnClick() {
this.videoMask.visible = true;
this.videoBg.visible = true;
const video = this.curVideo;
video.element.currentTime = 0.01;
video.element.play();
}
answerRectClick() {
console.log('in answerRectClick');
......@@ -2194,17 +2236,25 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
// courseware.activeFormulaBoard((data) => {
// // TODO
// console.log('in activeFormulaBoard data: ', data);
// });
courseware.activeFormulaBoard((data) => {
// TODO
console.log('in activeFormulaBoard data 1 : ', data);
if (typeof (data) == 'string') {
data = JSON.parse(data);
}
const data = {
formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png',
formula:"\\sqrt {777}+\\sqrt {444}"
}
console.log('in activeFormulaBoard data 2 : ', data);
this.setShortAnswerData(data);
this.setShortAnswerData(data);
});
// const data = {
// formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png',
// formula:"\\sqrt {777}+\\sqrt {444}"
// }
// this.setShortAnswerData(data);
}
setShortAnswerData(data) {
......@@ -2213,12 +2263,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const labelPic = this.answerLabelPic;
labelPic.load(formulaSrc).then(img => {
const sx = (this.answerRect.width - 20) / labelPic.width;
const sy = this.answerRect.height / labelPic.height;
const sx = (this.answerRect.width * this.answerRect.scaleX - 20) / labelPic.width;
const sy = this.answerRect.height * this.answerRect.scaleY / labelPic.height;
const s = Math.min(sx, sy);
labelPic.setScaleXY(s);
labelPic.x = labelPic.width / 2 * labelPic.scaleX + 10;
labelPic.y = this.answerRect.height / 2;
labelPic.y = this.answerRect.height * this.answerRect.scaleY / 2;
});
......@@ -2231,7 +2281,7 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => {
this.changeChoiceArea(this.data.contentObj.choice_obj);
// this.changeChoiceArea(this.data.contentObj.choice_obj);
}, 2000);
}
}
......@@ -2274,14 +2324,17 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log("in videoCloseBtnClick");
this.videoBg.visible = false;
this.videoMask.visible = false;
if (this.curVideo) {
this.curVideo.element.pause();
}
if (this.curOpItem) {
this.changeChoiceArea(this.curOpItem.data);
}
if (this.curVideo && !this.videoBtn.visible) {
this.videoBtn.visible = true;
}
}
cleanSmallTitle() {
......@@ -2292,6 +2345,10 @@ export class PlayComponent implements OnInit, OnDestroy {
removeItemFromArr(this.renderArr, this.curAreaItem);
removeItemFromArr(this.renderArr, this.answerRectNode);
removeItemFromArr(this.renderArr, this.answerQuesPic)
if (this.videoBtn) {
this.videoBtn.visible = false;
}
}
curOpItem;
......@@ -3427,12 +3484,82 @@ export class PlayComponent implements OnInit, OnDestroy {
case "3": // 简答题答案区
return this.setOneShortAnswerRect(data);
case "4": // 讲解按钮
return this.setOneBtnVideo(data);
case "5": // 书写过程按钮
return this.setOneBtnWrite(data);
}
return ;
}
videoBtn;
setOneBtnVideo(data) {
console.log('setOneBtnVideo data: ', data)
const btn = new MySprite();
btn.init(this.images.get('btn_video'))
const saveRect = data.rect;
btn.x = saveRect.x + saveRect.width / 2;
btn.y = saveRect.y + saveRect.height / 2;
btn['data'] = data;
const sx = saveRect.width / btn.width;
const sy = saveRect.height / btn.height;
// btn.scaleX = sx;
// btn.scaleY = sy;
btn.setScaleXY(this.mapScale);
btn.visible = false;
this.renderArr.push(btn);
this.videoBtn = btn;
return btn;
}
writeBtn;
setOneBtnWrite(data) {
console.log('setOneBtnWrite data: ', data)
const btn = new MySprite();
btn.init(this.images.get('btn_write'))
const saveRect = data.rect;
btn.x = saveRect.x + saveRect.width / 2;
btn.y = saveRect.y + saveRect.height / 2;
btn['data'] = data;
const sx = saveRect.width / btn.width;
const sy = saveRect.height / btn.height;
// btn.scaleX = sx;
// btn.scaleY = sy;
btn.setScaleXY(this.mapScale);
btn.visible = false;
const label = new Label();
label.text = "书写答题过程"
btn.addChild(label);
label.fontColor = '#fff';
label.textAlign = 'center';
label.fontSize = 50;
this.renderArr.push(btn);
this.writeBtn = btn;
return btn;
}
answerQuesPic;
setOneShortAnswerPic(data) {
console.log('setOneShortAnswerPic data: ', data)
......
......@@ -15,6 +15,8 @@ const res = [
['answer_normal', "assets/play/answer_normal.png"],
['answer_right', "assets/play/answer_right.png"],
['answer_wrong', "assets/play/answer_wrong.png"],
['btn_video', "assets/play/btn_video.png"],
['btn_write', "assets/play/btn_write.png"],
];
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment