Commit 46cf38ff authored by limingzhe's avatar limingzhe

feat: 增加简答题错误动画

parent 1563aaa4
......@@ -89,7 +89,7 @@
<div style="width: 300px;">
纠错视频:
讲解视频:
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event, op)"
[item]="op"
......@@ -154,7 +154,91 @@
<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;">
<span style="margin-right: 5px;">选择题问题:</span>
......@@ -204,7 +288,7 @@
</div>
</div> -->
<nz-divider style="margin-top: 50px;"></nz-divider>
......
......@@ -11,6 +11,7 @@ import {
AfterViewInit
} from '@angular/core';
import { JsonPipe } from '@angular/common';
import { removeItemFromArr } from '../play/Unit';
@Component({
......@@ -118,6 +119,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
ngOnDestroy() {
}
init() {
if (!this.item.sentenceArr) {
......@@ -152,7 +154,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
];
}
if (!this.item.choiceQuesArr) {
this.item.choiceQuesArr = []
}
if (!this.item.ques_type) {
......@@ -162,37 +166,31 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
}
addSubTemplate() {
this.item.templateArr.push({
})
this.save();
}
onDeleteTemplate(e, index) {
this.item.templateArr[index] = {};
this.item.templateArr.splice(index, 1);
this.save();
}
addWrongAnswer() {
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();
}
addBtnClick() {
this.item.sentenceArr.push({});
deleteWrongAnswer(choiceQues) {
removeItemFromArr( this.item.choiceQuesArr, choiceQues );
this.save();
}
deleteBtnClick(index) {
this.item.sentenceArr.splice(index, 1);
this.save();
}
onSaveCustomAction(e) {
console.log('e:', e);
......
......@@ -864,7 +864,7 @@ export class PlayComponent implements OnInit, OnDestroy {
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]);
......@@ -2175,7 +2175,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
} else {
if (this.checkClickTarget(this.answerRect)) {
if (this.answerRectNode.visible && this.checkClickTarget(this.answerRect)) {
this.answerRectClick();
return;
}
......@@ -2212,6 +2212,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}
boardData;
writeBtnClick() {
const courseware = window['courseware'];
......@@ -2219,10 +2221,14 @@ export class PlayComponent implements OnInit, OnDestroy {
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"}
// this.setWriteAreaPic(data);
// this.checkNextQues();
courseware.activeWhiteBoard((data) => {
......@@ -2231,12 +2237,12 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('activeWhiteBoard data: ', dataObj);
this.setWriteAreaPic(dataObj);
this.checkNextQues();
});
}
setWriteAreaPic(data) {
this.boardData = data;
if (!data.url) {
return;
......@@ -2278,6 +2284,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
mathData;
answerRectClick() {
console.log('in answerRectClick');
......@@ -2304,8 +2311,10 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('in activeFormulaBoard data 2 : ', data);
this.setShortAnswerData(data);
this.checkNextQues();
});
// const data = {
// formulaSrc: 'http://staging-teach.cdn.ireadabc.com/82f0ecacdc80cbb50c1a229cdee253c4.png',
......@@ -2313,22 +2322,21 @@ export class PlayComponent implements OnInit, OnDestroy {
// }
// this.setShortAnswerData(data);
// this.checkNextQues();
}
setShortAnswerData(data) {
const {formulaSrc, formula} = data;
checkNextQues() {
if (this.mathData && this.boardData) {
this.enterNextQues();
}
}
curChoiceQues;
enterNextQues() {
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;
});
const { formula } = this.mathData;
this.quesNum ++;
this.canTouch = false;
......@@ -2353,10 +2361,58 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => {
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);
}
}
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) {
......@@ -2405,6 +2461,13 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.curOpItem) {
this.changeChoiceArea(this.curOpItem.data);
}
if (this.templateQuesType == this.TYPE_SHORT_ANSWER) {
this.changeChoiceArea(this.curChoiceQues);
}
if (this.curVideo && !this.videoBtn.visible) {
this.videoBtn.visible = true;
}
......@@ -2430,6 +2493,9 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.writeBtn) {
this.writeBtn.visible = false;
}
this.mathData = null;
this.boardData = null;
}
curOpItem;
......@@ -2467,7 +2533,6 @@ export class PlayComponent implements OnInit, OnDestroy {
optionWrong(opItem) {
this.changeOpItemBg(opItem, 'wrongPic');
this.canTouch = false;
if (this.quesNum >= 3) {
......@@ -2483,7 +2548,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if (opItem.data.video_url) {
this.showVideo(opItem);
this.showVideo(opItem.data);
} else {
this.callTeacher();
}
......@@ -2495,8 +2560,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.changeChoiceArea(this.data.contentObj);
}
showVideo(opItem) {
const {data} = opItem;
showVideo(data) {
this.videoMask.visible = true;
this.videoBg.visible = true;
......@@ -3763,7 +3828,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item.x = saveRect.x
item.y = saveRect.y
item['data'] = data;
item.alpha = 0;
// item.alpha = 0;
item.visible = false;
this.answerRectNode = item;
......@@ -3833,6 +3898,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item['normalPic'] = answerNormal;
this.answerRectNode.curRes = 'normalPic';
const answerRight = this.getMySprite('answer_right');
answerRight.setScaleXY(s);
answerRight.x = answerNormal.x;
......@@ -3972,7 +4038,7 @@ export class PlayComponent implements OnInit, OnDestroy {
item.y = saveRect.y
item['data'] = data;
// item.alpha = 0;
// item.visible = false;
item.visible = false;
this.answerRectNode = item;
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