Commit 74394283 authored by limingzhe's avatar limingzhe

feat: 添加视频 写题 按钮

parent b0dc80e3
...@@ -118,6 +118,12 @@ ...@@ -118,6 +118,12 @@
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)"> <input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div> </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;"> <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)" > <button nz-button (click)="copyItem(it)" >
......
...@@ -124,7 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -124,7 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
'selectType', 'selectType',
'labelText', 'labelText',
'posX', 'posX',
'posY' 'posY',
'mathLabel',
] ]
......
...@@ -239,7 +239,9 @@ ...@@ -239,7 +239,9 @@
<div style="width: 400px; margin-left: 15px;"> <div style="width: 400px; margin-left: 15px;">
<span style="margin-right: 5px; ">新简答题 答案:</span> <span style="margin-right: 5px; ">新简答题 答案:</span>
<div style="width: 200px; display: flex; justify-content: center; align-items: center;"> <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>
</div> </div>
......
...@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// label: '比对', // label: '比对',
}, },
{ {
name: '选择区域', name: '选择区域',
rect: true, rect: true,
}, },
{ {
...@@ -49,7 +49,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -49,7 +49,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
{ {
name: '简答填空区', name: '简答填空区',
rect: true, rect: true,
label: '答案', mathLabel: '答案',
},
{
name: '讲解按钮',
rect: true,
},
{
name: '填过程按钮',
rect: true,
}, },
]; ];
testValue = '123'; testValue = '123';
......
...@@ -853,7 +853,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -853,7 +853,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log(' in showOneHotZone') console.log(' in showOneHotZone')
if (index > arr.length - 1) { if (index > arr.length - 1) {
this.showWriteBtn();
return; return;
} }
...@@ -941,6 +941,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -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) { showSmallTitle(data) {
const imgObj = this.images.get(data.title_pic_url); const imgObj = this.images.get(data.title_pic_url);
...@@ -2144,6 +2153,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2144,6 +2153,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
// 选择题区域 可见
if (this.curAreaItem && this.curAreaItem.visible) { if (this.curAreaItem && this.curAreaItem.visible) {
for (let i=0; i<this.optionItemArr.length; i++) { for (let i=0; i<this.optionItemArr.length; i++) {
if (this.checkClickTarget(this.optionItemArr[i])) { if (this.checkClickTarget(this.optionItemArr[i])) {
...@@ -2151,12 +2161,22 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2151,12 +2161,22 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
} }
if (this.checkClickTarget(this.videoBtn)) {
this.videoBtnClick();
return;
}
} else { } else {
if (this.checkClickTarget(this.answerRect)) { if (this.checkClickTarget(this.answerRect)) {
this.answerRectClick(); this.answerRectClick();
return; return;
} }
if (this.checkClickTarget(this.writeBtn)) {
this.writeBtnClick();
return;
}
} }
...@@ -2185,6 +2205,28 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -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() { answerRectClick() {
console.log('in answerRectClick'); console.log('in answerRectClick');
...@@ -2194,17 +2236,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2194,17 +2236,25 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
// courseware.activeFormulaBoard((data) => { courseware.activeFormulaBoard((data) => {
// // TODO // TODO
// console.log('in activeFormulaBoard data: ', data); console.log('in activeFormulaBoard data 1 : ', data);
// }); if (typeof (data) == 'string') {
data = JSON.parse(data);
}
const data = { console.log('in activeFormulaBoard data 2 : ', data);
formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png',
formula:"\\sqrt {777}+\\sqrt {444}"
}
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) { setShortAnswerData(data) {
...@@ -2213,12 +2263,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2213,12 +2263,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const labelPic = this.answerLabelPic; const labelPic = this.answerLabelPic;
labelPic.load(formulaSrc).then(img => { labelPic.load(formulaSrc).then(img => {
const sx = (this.answerRect.width - 20) / labelPic.width; const sx = (this.answerRect.width * this.answerRect.scaleX - 20) / labelPic.width;
const sy = this.answerRect.height / labelPic.height; const sy = this.answerRect.height * this.answerRect.scaleY / labelPic.height;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
labelPic.setScaleXY(s); labelPic.setScaleXY(s);
labelPic.x = labelPic.width / 2 * labelPic.scaleX + 10; 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 { ...@@ -2231,7 +2281,7 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.changeChoiceArea(this.data.contentObj.choice_obj); // this.changeChoiceArea(this.data.contentObj.choice_obj);
}, 2000); }, 2000);
} }
} }
...@@ -2274,14 +2324,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2274,14 +2324,17 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log("in videoCloseBtnClick"); console.log("in videoCloseBtnClick");
this.videoBg.visible = false; this.videoBg.visible = false;
this.videoMask.visible = false; this.videoMask.visible = false;
if (this.curVideo) { if (this.curVideo) {
this.curVideo.element.pause(); this.curVideo.element.pause();
} }
if (this.curOpItem) { if (this.curOpItem) {
this.changeChoiceArea(this.curOpItem.data); this.changeChoiceArea(this.curOpItem.data);
} }
if (this.curVideo && !this.videoBtn.visible) {
this.videoBtn.visible = true;
}
} }
cleanSmallTitle() { cleanSmallTitle() {
...@@ -2292,6 +2345,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2292,6 +2345,10 @@ export class PlayComponent implements OnInit, OnDestroy {
removeItemFromArr(this.renderArr, this.curAreaItem); removeItemFromArr(this.renderArr, this.curAreaItem);
removeItemFromArr(this.renderArr, this.answerRectNode); removeItemFromArr(this.renderArr, this.answerRectNode);
removeItemFromArr(this.renderArr, this.answerQuesPic) removeItemFromArr(this.renderArr, this.answerQuesPic)
if (this.videoBtn) {
this.videoBtn.visible = false;
}
} }
curOpItem; curOpItem;
...@@ -3427,12 +3484,82 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3427,12 +3484,82 @@ export class PlayComponent implements OnInit, OnDestroy {
case "3": // 简答题答案区 case "3": // 简答题答案区
return this.setOneShortAnswerRect(data); return this.setOneShortAnswerRect(data);
case "4": // 讲解按钮
return this.setOneBtnVideo(data);
case "5": // 书写过程按钮
return this.setOneBtnWrite(data);
} }
return ; 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; answerQuesPic;
setOneShortAnswerPic(data) { setOneShortAnswerPic(data) {
console.log('setOneShortAnswerPic data: ', data) console.log('setOneShortAnswerPic data: ', data)
......
...@@ -15,6 +15,8 @@ const res = [ ...@@ -15,6 +15,8 @@ const res = [
['answer_normal', "assets/play/answer_normal.png"], ['answer_normal', "assets/play/answer_normal.png"],
['answer_right', "assets/play/answer_right.png"], ['answer_right', "assets/play/answer_right.png"],
['answer_wrong', "assets/play/answer_wrong.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