Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM-07
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-07
Commits
888192a8
Commit
888192a8
authored
Aug 02, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:完成模板开发
parent
e62dd896
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
269 additions
and
73 deletions
+269
-73
index.css
play/index.css
+12
-3
index.html
play/index.html
+7
-5
index.js
play/index.js
+250
-65
No files found.
play/index.css
View file @
888192a8
...
@@ -586,9 +586,18 @@ body {
...
@@ -586,9 +586,18 @@ body {
color
:
#ffffff
;
color
:
#ffffff
;
}
}
.detail
{
position
:
absolute
;
width
:
100%
;
height
:
62%
;
top
:
38%
;
left
:
0
;
right
:
0
;
}
#recorder-text
{
#recorder-text
{
width
:
98%
;
width
:
98%
;
height
:
6
0%
;
height
:
4
0%
;
overflow-x
:
inherit
;
overflow-x
:
inherit
;
overflow-y
:
auto
;
overflow-y
:
auto
;
margin-top
:
60px
;
margin-top
:
60px
;
...
@@ -620,10 +629,10 @@ body {
...
@@ -620,10 +629,10 @@ body {
#evaluation
{
#evaluation
{
width
:
90%
;
width
:
90%
;
height
:
55
%
;
height
:
32
%
;
overflow-x
:
inherit
;
overflow-x
:
inherit
;
overflow-y
:
auto
;
overflow-y
:
auto
;
margin-top
:
60
px
;
margin-top
:
44
px
;
text-align
:
left
;
text-align
:
left
;
padding
:
20px
50px
;
padding
:
20px
50px
;
margin-left
:
5%
;
margin-left
:
5%
;
...
...
play/index.html
View file @
888192a8
...
@@ -56,7 +56,7 @@
...
@@ -56,7 +56,7 @@
</div>
</div>
</div>
</div>
<div
class=
"my-btn sent-btn"
>
<div
class=
"my-btn sent-btn"
>
Sen
t
Sen
d
</div>
</div>
</div>
</div>
...
@@ -138,14 +138,15 @@
...
@@ -138,14 +138,15 @@
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>
80
</td>
<td
id=
'complete'
>
80
</td>
<td>
80
</td>
<td
id=
'fluent'
>
80
</td>
<td>
60
</td>
<td
id=
'grammar'
>
60
</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
</div>
</div>
</div>
<div
class=
"detail"
>
<div
id=
"recorder-text"
>
<div
id=
"recorder-text"
>
</div>
</div>
...
@@ -154,6 +155,7 @@
...
@@ -154,6 +155,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
...
play/index.js
View file @
888192a8
...
@@ -20,7 +20,8 @@ var defaultData = '{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8
...
@@ -20,7 +20,8 @@ var defaultData = '{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8
// 维护切面数据
// 维护切面数据
var
teaUserAspect
=
{
var
teaUserAspect
=
{
isSendQuestion
:
false
,
// 是否是答题环节
isSendQuestion
:
false
,
// 是否是答题环节
bindData
:
null
bindData
:
null
,
totalTime
:
0
};
};
var
stuUserAspect
=
{
var
stuUserAspect
=
{
speed
:
1
,
//播放速度
speed
:
1
,
//播放速度
...
@@ -28,8 +29,10 @@ var stuUserAspect = {
...
@@ -28,8 +29,10 @@ var stuUserAspect = {
recorderScoreObj
:
null
,
// 这块只记录一个最好的成绩
recorderScoreObj
:
null
,
// 这块只记录一个最好的成绩
recorderArr
:
[],
//录音记录
recorderArr
:
[],
//录音记录
isPause
:
true
,
isPause
:
true
,
firstClickRecorder
:
true
,
firstClickRecorder
:
true
,
//是否第一次点击录音
firstClickCancel
:
true
,
firstClickCancel
:
true
,
//是否第一次点击撤销按钮
isEnd
:
false
,
isDelTemp
:
false
,
//是否删除临时录音
};
};
//进度条刷新是否启动
//进度条刷新是否启动
...
@@ -39,10 +42,8 @@ var tempRecorder;
...
@@ -39,10 +42,8 @@ var tempRecorder;
$
(
function
()
{
$
(
function
()
{
window
.
courseware
.
getData
(
function
(
data
)
{
window
.
courseware
.
getData
(
function
(
data
,
aspect
)
{
//初始化监听事件
initListener
();
USERINFO
=
window
.
air
.
airClassInfo
.
user
;
USERINFO
=
window
.
air
.
airClassInfo
.
user
;
ROLE
=
USERINFO
.
classRole
;
ROLE
=
USERINFO
.
classRole
;
...
@@ -51,6 +52,13 @@ $(function () {
...
@@ -51,6 +52,13 @@ $(function () {
playView
.
init
();
playView
.
init
();
if
(
aspect
)
{
recoverPage
(
aspect
);
}
//初始化监听事件
initListener
();
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window
.
air
.
hideAirClassLoading
(
key
,
this
.
data
);
window
.
air
.
hideAirClassLoading
(
key
,
this
.
data
);
},
key
);
},
key
);
...
@@ -94,6 +102,40 @@ class PlayView {
...
@@ -94,6 +102,40 @@ class PlayView {
initView
()
{
initView
()
{
if
(
this
.
data
.
video
)
{
$
(
"
.video
"
).
attr
(
"
src
"
,
this
.
data
.
video
);
const
video
=
$
(
"
#video
"
)[
0
];
let
i
=
setInterval
(()
=>
{
if
(
video
.
readyState
>
0
)
{
let
totalTime
=
getTimeStr
(
video
.
duration
);
$
(
"
.total-time
"
).
empty
();
$
(
"
.total-time
"
).
append
(
totalTime
);
teaUserAspect
.
totalTime
=
video
.
duration
;
cw
.
storeAspect
(
teaUserAspect
);
clearInterval
(
i
);
}
},
100
);
}
if
(
this
.
data
.
stuImage
)
{
$
(
"
#stuimage
"
).
attr
(
"
src
"
,
this
.
data
.
stuImage
);
}
if
(
this
.
data
.
title
)
{
$
(
"
.title
"
).
empty
();
$
(
"
.title
"
).
append
(
this
.
data
.
title
);
}
$
(
"
#keyWord
"
).
val
(
this
.
data
.
keyWord
);
if
(
ROLE
==
"
tea
"
)
{
if
(
ROLE
==
"
tea
"
)
{
$
(
"
[role='tea']
"
).
show
();
// 老师特定的页面
$
(
"
[role='tea']
"
).
show
();
// 老师特定的页面
...
@@ -120,33 +162,112 @@ class PlayView {
...
@@ -120,33 +162,112 @@ class PlayView {
$
(
"
[role='stu']
"
).
show
();
$
(
"
[role='stu']
"
).
show
();
}
}
if
(
this
.
data
.
video
)
{
$
(
"
.video
"
).
attr
(
"
src
"
,
this
.
data
.
video
);
}
}
const
video
=
$
(
"
#video
"
)[
0
];
/**
let
i
=
setInterval
(()
=>
{
*
* @param {*} aspect 断线恢复
*/
function
recoverPage
(
aspect
)
{
if
(
ROLE
==
"
tea
"
)
{
// 解析切面数据
if
(
!
aspect
.
user_aspect
)
{
return
;
}
teaUserAspect
=
aspect
.
user_aspect
&&
JSON
.
parse
(
aspect
.
user_aspect
);
if
(
teaUserAspect
.
isSendQuestion
)
{
$
(
"
.sent-btn
"
).
hide
();
}
}
else
{
// 解析切面数据
const
tea
=
aspect
.
all_user
.
find
(
item
=>
item
.
user
.
classRole
==
"
tea
"
);
if
(
!
tea
||
!
tea
.
aspect
)
{
return
;
}
const
teaAspect
=
JSON
.
parse
(
tea
.
aspect
);
//没有答题,则结束
if
(
!
teaAspect
.
isSendQuestion
)
{
return
;
}
if
(
video
.
readyState
>
0
)
{
//隐藏欢迎界面
let
totalTime
=
getTimeStr
(
video
.
duration
);
$
(
"
.hello-container
"
).
hide
(
);
$
(
"
.total-time
"
).
empty
();
const
stuAspect
=
aspect
.
user_aspect
&&
JSON
.
parse
(
aspect
.
user_aspect
);
$
(
"
.total-time
"
).
append
(
totalTime
);
}
},
100
);
if
(
stuAspect
)
{
stuUserAspect
=
stuAspect
;
}
cw
.
storeAspect
(
stuUserAspect
);
if
(
this
.
data
.
stuImage
)
{
//设置速度
$
(
"
#stuimage
"
).
attr
(
"
src
"
,
this
.
data
.
stuImage
);
setSpeed
(
stuUserAspect
.
speed
);
}
if
(
this
.
data
.
title
){
//已经结束,就显示结束画面
$
(
"
.title
"
).
empty
();
if
(
stuUserAspect
.
isEnd
)
{
$
(
"
.title
"
).
append
(
this
.
data
.
title
);
}
$
(
"
#keyWord
"
).
val
(
this
.
data
.
keyWord
);
let
score
=
stuUserAspect
.
recorderScoreObj
;
drawResult
(
score
.
result
,
score
.
text
);
}
else
{
let
recorderArr
=
stuUserAspect
.
recorderArr
;
let
videoCurTime
=
stuUserAspect
.
videoCurTime
;
$
(
"
#curTime
"
).
empty
();
$
(
"
#curTime
"
).
append
(
getTimeStr
(
videoCurTime
));
//已经录制
if
(
recorderArr
.
length
>
0
){
let
length
=
recorderArr
.
length
;
let
last
=
recorderArr
[
length
-
1
];
$
(
"
#submitBtn
"
).
show
();
//如果没有删除最后一段,则显示删除按钮
if
(
stuUserAspect
.
isDelTemp
){
//重新绘画进度条
drawProgress
(
$
(
"
#progressbar
"
),
last
.
endTime
);
}
else
{
console
.
log
(
"
-----------
"
)
console
.
log
(
last
.
endTime
-
last
.
startTime
,
teaAspect
.
totalTime
)
//重新绘画进度条
drawProgress
(
$
(
"
#tempProgressbar
"
),
last
.
endTime
-
last
.
startTime
,
teaAspect
.
totalTime
);
drawProgress
(
$
(
"
#progressbar
"
),
last
.
startTime
-
0
,
teaAspect
.
totalTime
);
$
(
"
#backBtn
"
).
show
();
if
(
!
stuUserAspect
.
firstClickCancel
){
$
(
"
.back-tips
"
).
hide
();
}
else
{
$
(
"
.back-tips
"
).
show
();
}
}
if
(
!
stuUserAspect
.
firstClickRecorder
){
$
(
"
.recorder-tips
"
).
hide
();
}
}
const
video
=
$
(
"
#video
"
)[
0
];
if
(
video
)
{
video
.
currentTime
=
videoCurTime
;
}
$
(
"
#exercise
"
).
show
();
}
}
}
}
}
}
...
@@ -219,9 +340,9 @@ function bindRecorderBtn() {
...
@@ -219,9 +340,9 @@ function bindRecorderBtn() {
let
newValue
=
parseFloat
(
progressValue
)
+
parseFloat
(
tempProgressValue
);
let
newValue
=
parseFloat
(
progressValue
)
+
parseFloat
(
tempProgressValue
);
console
.
log
(
newValue
);
console
.
log
(
newValue
);
//绘制滚动条
//绘制滚动条
drawProgress
(
$
(
"
#progressbar
"
),
newValue
);
drawProgress
(
$
(
"
#progressbar
"
),
newValue
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
control
.
removeClass
(
"
recorder-play
"
);
control
.
removeClass
(
"
recorder-play
"
);
...
@@ -255,7 +376,7 @@ function bindRecorderBtn() {
...
@@ -255,7 +376,7 @@ function bindRecorderBtn() {
if
(
started
)
{
if
(
started
)
{
clearInterval
(
started
);
clearInterval
(
started
);
}
}
cw
.
stopRecord
(
0
,
function
(
data
)
{
cw
.
stopRecord
(
0
,
function
(
data
)
{
//录完后,显示撤销按钮
//录完后,显示撤销按钮
if
(
stuUserAspect
.
firstClickCancel
)
{
if
(
stuUserAspect
.
firstClickCancel
)
{
...
@@ -269,15 +390,17 @@ function bindRecorderBtn() {
...
@@ -269,15 +390,17 @@ function bindRecorderBtn() {
$
(
"
#submitBtn
"
).
show
();
$
(
"
#submitBtn
"
).
show
();
//将当前时间保存到切片中
//将当前时间保存到切片中
stuUserAspect
.
c
urTime
=
curTime
;
stuUserAspect
.
videoC
urTime
=
curTime
;
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
stuUserAspect
.
isDelTemp
=
false
;
//保存切片
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
cw
.
storeAspect
(
stuUserAspect
);
})
})
}
}
...
@@ -290,7 +413,7 @@ function bindPressAnimation(_dom, cssName = null) {
...
@@ -290,7 +413,7 @@ function bindPressAnimation(_dom, cssName = null) {
let
css
=
'
press
'
;
let
css
=
'
press
'
;
if
(
cssName
)
{
if
(
cssName
)
{
css
=
cssName
;
css
=
cssName
;
}
}
...
@@ -326,14 +449,7 @@ function getTimeStr(time) {
...
@@ -326,14 +449,7 @@ function getTimeStr(time) {
function
bindSpeedBtn
()
{
function
bindSpeedBtn
()
{
$
.
each
(
$
(
"
#exercise
"
).
find
(
"
.speed-choice
"
),
function
(
i
,
item
)
{
setSpeed
(
stuUserAspect
.
speed
);
let
speed
=
$
(
item
).
attr
(
"
data-speed
"
);
if
(
speed
==
stuUserAspect
.
speed
)
{
$
(
item
).
addClass
(
'
speed-active
'
);
return
;
}
});
$
(
"
.speed-choice
"
).
click
(
function
()
{
$
(
"
.speed-choice
"
).
click
(
function
()
{
...
@@ -356,6 +472,21 @@ function bindSpeedBtn() {
...
@@ -356,6 +472,21 @@ function bindSpeedBtn() {
});
});
}
}
function
setSpeed
(
speed
)
{
$
.
each
(
$
(
"
#exercise
"
).
find
(
"
.speed-choice
"
),
function
(
i
,
item
)
{
let
value
=
$
(
item
).
attr
(
"
data-speed
"
);
if
(
value
==
speed
)
{
$
(
item
).
addClass
(
'
speed-active
'
);
const
video
=
$
(
"
#video
"
)[
0
];
if
(
video
)
{
video
.
playbackRate
=
speed
;
}
return
;
}
});
}
function
bindSentBtn
()
{
function
bindSentBtn
()
{
bindPressAnimation
(
$
(
"
.sent-btn
"
));
bindPressAnimation
(
$
(
"
.sent-btn
"
));
...
@@ -377,11 +508,12 @@ function initListener() {
...
@@ -377,11 +508,12 @@ function initListener() {
}
else
{
}
else
{
stuUserAspect
.
currentWordIndex
=
data
.
currentWordIndex
;
stuUserAspect
.
currentWordIndex
=
data
.
currentWordIndex
;
const
bindData
=
data
.
bindData
;
$
(
"
.hello-container
"
).
hide
();
$
(
"
.hello-container
"
).
hide
();
$
(
"
#exercise
"
).
show
();
$
(
"
#exercise
"
).
show
();
cw
.
storeAspect
(
stuUserAspect
);
}
}
next
();
next
();
});
});
...
@@ -409,19 +541,28 @@ function bindBackBtn() {
...
@@ -409,19 +541,28 @@ function bindBackBtn() {
$
(
"
#curTime
"
).
append
(
getTimeStr
(
video
.
currentTime
));
$
(
"
#curTime
"
).
append
(
getTimeStr
(
video
.
currentTime
));
//重新绘画进度条
//重新绘画进度条
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
stuUserAspect
.
isDelTemp
=
true
;
}
}
if
(
stuUserAspect
.
recorderArr
.
length
==
0
){
$
(
"
#submitBtn
"
).
hide
();
}
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
$
(
this
).
hide
();
$
(
this
).
hide
();
})
})
}
}
function
bindSubmitBtn
(){
function
bindSubmitBtn
()
{
const
submitBtn
=
$
(
"
#submitBtn
"
);
const
submitBtn
=
$
(
"
#submitBtn
"
);
bindPressAnimation
(
submitBtn
);
bindPressAnimation
(
submitBtn
);
submitBtn
.
click
(
function
()
{
submitBtn
.
click
(
function
()
{
$
(
"
#submitDialog
"
).
modal
(
'
show
'
);
$
(
"
#submitDialog
"
).
modal
(
'
show
'
);
});
});
}
}
...
@@ -449,12 +590,21 @@ function refreshProgress() {
...
@@ -449,12 +590,21 @@ function refreshProgress() {
},
100
);
},
100
);
}
}
function
drawProgress
(
progressbar
,
duration
)
{
function
drawProgress
(
progressbar
,
duration
,
totalTime
)
{
const
video
=
$
(
"
#video
"
)[
0
];
const
video
=
$
(
"
#video
"
)[
0
];
let
totalTime
=
video
.
duration
;
let
tempTotalTime
=
totalTime
;
//加载成功
if
(
video
&&
video
.
readyState
>
0
){
tempTotalTime
=
video
.
duration
;
}
let
progress
=
0
;
let
progress
=
Math
.
floor
(
duration
/
totalTime
*
100
*
100
)
/
100
;
if
(
tempTotalTime
&&
tempTotalTime
!=
0
){
progress
=
Math
.
floor
(
duration
/
tempTotalTime
*
100
*
100
)
/
100
;
}
progressbar
.
attr
(
'
data-value
'
,
progress
);
progressbar
.
attr
(
'
data-value
'
,
progress
);
...
@@ -464,48 +614,83 @@ function drawProgress(progressbar, duration) {
...
@@ -464,48 +614,83 @@ function drawProgress(progressbar, duration) {
/**
/**
* 继续录制操作
* 继续录制操作
*/
*/
function
bindContinueBtnBtn
(){
function
bindContinueBtnBtn
()
{
const
continueBtn
=
$
(
"
#continueBtn
"
);
const
continueBtn
=
$
(
"
#continueBtn
"
);
bindPressAnimation
(
continueBtn
,
'
submit-press
'
);
bindPressAnimation
(
continueBtn
,
'
submit-press
'
);
continueBtn
.
click
(
function
()
{
continueBtn
.
click
(
function
()
{
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
})
})
}
}
/**
/**
* 确认提交事件
* 确认提交事件
*/
*/
function
bindConfirmBtn
(){
function
bindConfirmBtn
()
{
const
confirmBtn
=
$
(
"
#confirmBtn
"
);
const
confirmBtn
=
$
(
"
#confirmBtn
"
);
bindPressAnimation
(
confirmBtn
,
'
submit-press
'
);
bindPressAnimation
(
confirmBtn
,
'
submit-press
'
);
confirmBtn
.
on
(
'
click
'
,
function
()
{
confirmBtn
.
on
(
'
click
'
,
function
()
{
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
$
(
"
#progressModal
"
).
modal
(
'
show
'
);
$
(
"
#progressModal
"
).
modal
(
'
show
'
);
setTimeout
(()
=>
{
let
recorderArr
=
stuUserAspect
.
recorderArr
;
let
text
=
""
;
$
(
"
#exercise
"
).
hide
();
for
(
let
i
=
0
;
i
<
recorderArr
.
length
;
++
i
)
{
$
(
"
#result
"
).
show
();
let
data
=
JSON
.
parse
(
recorderArr
[
i
].
data
);
text
+=
"
"
+
data
.
text
;
}
$
(
"
#progressModal
"
).
modal
(
'
hide
'
);
cw
.
greadPapersForText
(
text
,
function
(
data
)
{
let
recorderArr
=
stuUserAspect
.
recorderArr
;
stuUserAspect
.
recorderScoreObj
=
{
let
text
=
""
;
result
:
data
,
text
:
text
};
stuUserAspect
.
isEnd
=
true
;
for
(
let
i
=
0
;
i
<
recorderArr
.
length
;
++
i
){
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
let
data
=
JSON
.
parse
(
recorderArr
[
i
].
data
);
//画结束界面
text
+=
"
"
+
data
.
text
;
drawResult
(
data
,
text
);
}
});
cw
.
greadPapersForText
(
text
,
function
(
data
){
console
.
log
(
data
);
});
},
3000
);
})
})
}
}
function
drawResult
(
data
,
text
)
{
$
(
"
#exercise
"
).
hide
();
$
(
"
#result
"
).
show
();
$
(
"
#progressModal
"
).
modal
(
'
hide
'
);
console
.
log
(
data
);
let
temp
=
JSON
.
parse
(
data
);
let
score
=
temp
.
overall
;
let
imgSrc
=
""
;
if
(
score
>=
80
)
{
imgSrc
=
"
../lib/images/excellent.png
"
;
}
else
if
(
score
>=
60
)
{
imgSrc
=
"
../lib/images/great.png
"
;
}
else
{
imgSrc
=
"
../lib/images/nicetry.png
"
;
}
$
(
"
.medal
"
).
attr
(
'
src
'
,
imgSrc
);
$
(
"
#score
"
).
empty
().
append
(
score
);
$
(
"
#recorder-text
"
).
empty
().
append
(
text
);
$
(
"
#evaluation
"
).
empty
().
append
(
temp
.
evaluate
);
}
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