Commit 46cf38ff authored by limingzhe's avatar limingzhe

feat: 增加简答题错误动画

parent 1563aaa4
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
<div style="width: 300px;"> <div style="width: 300px;">
纠错视频: 讲解视频:
<app-upload-video <app-upload-video
(videoUploaded)="onVideoUploadSuccess($event, op)" (videoUploaded)="onVideoUploadSuccess($event, op)"
[item]="op" [item]="op"
...@@ -154,7 +154,91 @@ ...@@ -154,7 +154,91 @@
<div *ngIf="item.ques_type == 'short_answer'"> <div *ngIf="item.ques_type == 'short_answer'">
<div style="margin-top: 30px; display: flex; width: 1000px;"> <div *ngFor="let ques of item.choiceQuesArr" style="padding: 20px; display: flex; align-items: center; border: 1px solid #ccc; border-radius: 15px; margin-top: 10px;">
<div style="width: 300px;">
<div style="width: 300px; margin-bottom: 20px;">
<span style="margin-right: 5px; ">错误答案:</span>
<div style="width: 200px; display: flex; justify-content: center; align-items: center;">
<app-formula-input style="margin-top: 5px" [(ngfModel)]="ques.mathLabel" (ngfBlur)="save()"></app-formula-input>
</div>
</div>
<div>
<button nz-button nzType="danger" (click)="deleteWrongAnswer(ques)" style="margin-bottom: 10px;">
删除此项
</button>
</div>
讲解视频:
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event, ques)"
[item]="ques"
[videoUrl]="ques.video_url">
</app-upload-video>
</div>
<div style="margin-left: 20px;">
<div style="display: flex; align-items: center;">
<span style="margin-right: 5px;">小标题2:</span>
<app-audio-recorder
[audioUrl]="ques.title_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url', ques)"
></app-audio-recorder>
</div>
<div style="width: 300px;">
<app-upload-image-with-preview
[picUrl]="ques.title_pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'title_pic_url', ques)">
</app-upload-image-with-preview>
</div>
<span style="margin-left: 15px;" >问题2:</span>
<div style="width: 300px;">
<app-upload-image-with-preview
[picUrl]="ques.ques_pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'ques_pic_url', ques)">
</app-upload-image-with-preview>
</div>
</div>
<div style="margin-left: 20px;">
<div *ngFor="let op2 of ques.optionArr" style="display: flex; align-items: center; margin-top: 5px;">
{{op2.id}}
<div style="width: 150px; margin-left: 5px;">
<app-upload-image-with-preview
[picUrl]="op2.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url', op2)">
</app-upload-image-with-preview>
</div>
<div style="margin-left: 5px;">
<span> 正确: </span>
<nz-switch [(ngModel)]="op2.is_right" (ngModelChange)="save()"></nz-switch>
</div>
</div>
</div>
</div>
<button nz-button nzType="dashed" (click)="addWrongAnswer()" style="width: 200px; height: 60px; margin-top: 10px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加简答错误项
</button>
<!-- <div style="margin-top: 30px; display: flex; width: 1000px;">
<div style="width: 300px; margin-top: 10px; margin-right: 15px;"> <div style="width: 300px; margin-top: 10px; margin-right: 15px;">
<span style="margin-right: 5px;">选择题问题:</span> <span style="margin-right: 5px;">选择题问题:</span>
...@@ -204,7 +288,7 @@ ...@@ -204,7 +288,7 @@
</div> </div> -->
<nz-divider style="margin-top: 50px;"></nz-divider> <nz-divider style="margin-top: 50px;"></nz-divider>
......
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
AfterViewInit AfterViewInit
} from '@angular/core'; } from '@angular/core';
import { JsonPipe } from '@angular/common'; import { JsonPipe } from '@angular/common';
import { removeItemFromArr } from '../play/Unit';
@Component({ @Component({
...@@ -118,6 +119,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -118,6 +119,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
ngOnDestroy() { ngOnDestroy() {
} }
init() { init() {
if (!this.item.sentenceArr) { if (!this.item.sentenceArr) {
...@@ -152,7 +154,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -152,7 +154,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
]; ];
} }
if (!this.item.choiceQuesArr) {
this.item.choiceQuesArr = []
}
if (!this.item.ques_type) { if (!this.item.ques_type) {
...@@ -162,37 +166,31 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -162,37 +166,31 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
} }
addSubTemplate() {
this.item.templateArr.push({
})
this.save();
}
onDeleteTemplate(e, index) { addWrongAnswer() {
this.item.templateArr[index] = {};
this.item.templateArr.splice(index, 1);
this.save();
}
onSaveTemplate(e, index) { console.log(' in addWrongAnswer');
this.item.choiceQuesArr.push({
optionArr: [
{id: 'A'},
{id: 'B'},
{id: 'C'},
{id: 'D'},
]
})
this.item.templateArr[index] = e;
this.save(); this.save();
} }
deleteWrongAnswer(choiceQues) {
removeItemFromArr( this.item.choiceQuesArr, choiceQues );
addBtnClick() {
this.item.sentenceArr.push({});
this.save(); this.save();
} }
deleteBtnClick(index) {
this.item.sentenceArr.splice(index, 1);
this.save();
}
onSaveCustomAction(e) { onSaveCustomAction(e) {
console.log('e:', e); console.log('e:', e);
......
...@@ -864,7 +864,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -864,7 +864,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const {data} = arr[index]; const {data} = arr[index];
if (data.gIdx == '0' || data.gIdx == '2' || data.gIdx == '3') { if (data.gIdx == '0' || data.gIdx == '2') {
this.showHotZonePic(arr[index]); this.showHotZonePic(arr[index]);
...@@ -2175,7 +2175,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2175,7 +2175,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} else { } else {
if (this.checkClickTarget(this.answerRect)) { if (this.answerRectNode.visible && this.checkClickTarget(this.answerRect)) {
this.answerRectClick(); this.answerRectClick();
return; return;
} }
...@@ -2212,6 +2212,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2212,6 +2212,8 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
boardData;
writeBtnClick() { writeBtnClick() {
const courseware = window['courseware']; const courseware = window['courseware'];
...@@ -2219,10 +2221,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2219,10 +2221,14 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
this.answerRectNode.visible = true;
// const data = {"msg":"success","url":"https://staging-teach.cdn.ireadabc.com/a509c85b5730a8459381551f926fd90e.png","ppt_html":"https://staging-teach.cdn.ireadabc.com/ppt/a509c85b5730a8459381551f926fd90e/index.html"} // const data = {"msg":"success","url":"https://staging-teach.cdn.ireadabc.com/a509c85b5730a8459381551f926fd90e.png","ppt_html":"https://staging-teach.cdn.ireadabc.com/ppt/a509c85b5730a8459381551f926fd90e/index.html"}
// this.setWriteAreaPic(data); // this.setWriteAreaPic(data);
// this.checkNextQues();
courseware.activeWhiteBoard((data) => { courseware.activeWhiteBoard((data) => {
...@@ -2231,12 +2237,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2231,12 +2237,12 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('activeWhiteBoard data: ', dataObj); console.log('activeWhiteBoard data: ', dataObj);
this.setWriteAreaPic(dataObj); this.setWriteAreaPic(dataObj);
this.checkNextQues();
}); });
} }
setWriteAreaPic(data) { setWriteAreaPic(data) {
this.boardData = data;
if (!data.url) { if (!data.url) {
return; return;
...@@ -2278,6 +2284,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2278,6 +2284,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
mathData;
answerRectClick() { answerRectClick() {
console.log('in answerRectClick'); console.log('in answerRectClick');
...@@ -2304,8 +2311,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2304,8 +2311,10 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('in activeFormulaBoard data 2 : ', data); console.log('in activeFormulaBoard data 2 : ', data);
this.setShortAnswerData(data); this.setShortAnswerData(data);
this.checkNextQues();
}); });
// const data = { // const data = {
// formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png', // formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png',
...@@ -2313,22 +2322,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2313,22 +2322,21 @@ export class PlayComponent implements OnInit, OnDestroy {
// } // }
// this.setShortAnswerData(data); // this.setShortAnswerData(data);
// this.checkNextQues();
} }
setShortAnswerData(data) { checkNextQues() {
const {formulaSrc, formula} = data; if (this.mathData && this.boardData) {
this.enterNextQues();
}
}
curChoiceQues;
enterNextQues() {
const labelPic = this.answerLabelPic; const { formula } = this.mathData;
labelPic.load(formulaSrc).then(img => {
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.y;
});
this.quesNum ++; this.quesNum ++;
this.canTouch = false; this.canTouch = false;
...@@ -2353,10 +2361,58 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2353,10 +2361,58 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.canTouch = true; this.canTouch = true;
this.changeChoiceArea(this.data.contentObj.choice_obj);
const data = this.getCurChoiceQues(formula);
this.curChoiceQues = data;
if (data.video_url) {
this.showVideo(data);
} else {
// this.callTeacher();
this.changeChoiceArea(data);
}
}, 2000); }, 2000);
} }
}
getCurChoiceQues(formula) {
let defualtData = {};
const choiceQuesArr = this.data.contentObj.choiceQuesArr;
for (let i=0; i<choiceQuesArr.length; i++) {
if (!choiceQuesArr[i].mathLabel) {
defualtData = choiceQuesArr[i];
}
if (choiceQuesArr[i].mathLabel == formula) {
return choiceQuesArr[i];
}
}
return defualtData;
}
setShortAnswerData(data) {
this.mathData = data;
const {formulaSrc, formula} = data;
const labelPic = this.answerLabelPic;
labelPic.load(formulaSrc).then(img => {
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.y;
});
} }
changeBase64ToPicUrl(base64Data) { changeBase64ToPicUrl(base64Data) {
...@@ -2405,6 +2461,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2405,6 +2461,13 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.curOpItem) { if (this.curOpItem) {
this.changeChoiceArea(this.curOpItem.data); this.changeChoiceArea(this.curOpItem.data);
} }
if (this.templateQuesType == this.TYPE_SHORT_ANSWER) {
this.changeChoiceArea(this.curChoiceQues);
}
if (this.curVideo && !this.videoBtn.visible) { if (this.curVideo && !this.videoBtn.visible) {
this.videoBtn.visible = true; this.videoBtn.visible = true;
} }
...@@ -2430,6 +2493,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2430,6 +2493,9 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.writeBtn) { if (this.writeBtn) {
this.writeBtn.visible = false; this.writeBtn.visible = false;
} }
this.mathData = null;
this.boardData = null;
} }
curOpItem; curOpItem;
...@@ -2467,7 +2533,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2467,7 +2533,6 @@ export class PlayComponent implements OnInit, OnDestroy {
optionWrong(opItem) { optionWrong(opItem) {
this.changeOpItemBg(opItem, 'wrongPic'); this.changeOpItemBg(opItem, 'wrongPic');
this.canTouch = false; this.canTouch = false;
if (this.quesNum >= 3) { if (this.quesNum >= 3) {
...@@ -2483,7 +2548,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2483,7 +2548,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
if (opItem.data.video_url) { if (opItem.data.video_url) {
this.showVideo(opItem); this.showVideo(opItem.data);
} else { } else {
this.callTeacher(); this.callTeacher();
} }
...@@ -2495,8 +2560,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2495,8 +2560,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.changeChoiceArea(this.data.contentObj); this.changeChoiceArea(this.data.contentObj);
} }
showVideo(opItem) { showVideo(data) {
const {data} = opItem;
this.videoMask.visible = true; this.videoMask.visible = true;
this.videoBg.visible = true; this.videoBg.visible = true;
...@@ -3763,7 +3828,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3763,7 +3828,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item.x = saveRect.x item.x = saveRect.x
item.y = saveRect.y item.y = saveRect.y
item['data'] = data; item['data'] = data;
item.alpha = 0; // item.alpha = 0;
item.visible = false; item.visible = false;
this.answerRectNode = item; this.answerRectNode = item;
...@@ -3833,6 +3898,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3833,6 +3898,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item['normalPic'] = answerNormal; item['normalPic'] = answerNormal;
this.answerRectNode.curRes = 'normalPic'; this.answerRectNode.curRes = 'normalPic';
const answerRight = this.getMySprite('answer_right'); const answerRight = this.getMySprite('answer_right');
answerRight.setScaleXY(s); answerRight.setScaleXY(s);
answerRight.x = answerNormal.x; answerRight.x = answerNormal.x;
...@@ -3972,7 +4038,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3972,7 +4038,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item.y = saveRect.y item.y = saveRect.y
item['data'] = data; item['data'] = data;
// item.alpha = 0; // item.alpha = 0;
// item.visible = false; item.visible = false;
this.answerRectNode = item; this.answerRectNode = item;
this.answerRect = this.setAnswerRect(item, saveRect); this.answerRect = this.setAnswerRect(item, saveRect);
......
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