Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM_MATH01
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
JM_MATH01
Commits
46cf38ff
Commit
46cf38ff
authored
Nov 22, 2021
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 增加简答题错误动画
parent
1563aaa4
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
194 additions
and
46 deletions
+194
-46
form.component.html
src/app/form/form.component.html
+87
-3
form.component.ts
src/app/form/form.component.ts
+19
-21
play.component.ts
src/app/play/play.component.ts
+88
-22
No files found.
src/app/form/form.component.html
View file @
46cf38ff
...
...
@@ -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>
...
...
src/app/form/form.component.ts
View file @
46cf38ff
...
...
@@ -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
);
...
...
src/app/play/play.component.ts
View file @
46cf38ff
...
...
@@ -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
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment