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
3d8c0773
Commit
3d8c0773
authored
Aug 06, 2021
by
liujiangnan
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://vcs.ireadabc.com/template/JM-07
parents
a60035dd
7469a2e0
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
95 additions
and
114 deletions
+95
-114
index.html
play/index.html
+0
-16
index.js
play/index.js
+95
-98
No files found.
play/index.html
View file @
3d8c0773
...
...
@@ -199,22 +199,6 @@
</div>
</div>
</div>
<div
class=
"modal fade"
id=
'progressModal'
aria-hidden=
"false"
data-backdrop=
"static"
>
<div
class=
"modal-dialog"
style=
"width:60%; margin: 18% auto;"
>
<div
class=
"modal-content"
style=
"border-radius: 36px;background-color: #3e9e33"
>
<div
class=
"modal-header"
>
<h3
class=
"loading-text"
>
正在评测,请稍后
</h3>
</div>
<div
class=
"modal-body"
>
<div
class=
"progress"
>
<div
class=
"progress-bar progress-bar-info progress-bar-striped active"
role=
"progressbar"
aria-valuenow=
"100"
aria-valuemin=
"0"
aria-valuemax=
"100"
style=
"width: 100%"
>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src=
"./index.js"
></script>
<script
src=
"./util.js"
></script>
...
...
play/index.js
View file @
3d8c0773
...
...
@@ -3,20 +3,20 @@
(
function
(
doc
,
win
)
{
window
.
base
=
document
.
documentElement
.
clientWidth
/
1920
;
var
docEl
=
doc
.
documentElement
,
resizeEvt
=
'
orientationchange
'
in
window
?
'
orientationchange
'
:
'
resize
'
,
recalc
=
function
()
{
window
.
clientWidth
=
docEl
.
clientWidth
;
window
.
clientHeight
=
docEl
.
clientHeight
;
var
aspectRatio
=
window
.
clientWidth
/
window
.
clientHeight
;
if
(
aspectRatio
>
1920
/
1080
)
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientHeight
/
1080
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientHeight
/
1080
);
}
else
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientWidth
/
1920
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientWidth
/
1920
);
// 判断是否为移动设备,提示旋转屏幕
}
};
resizeEvt
=
'
orientationchange
'
in
window
?
'
orientationchange
'
:
'
resize
'
,
recalc
=
function
()
{
window
.
clientWidth
=
docEl
.
clientWidth
;
window
.
clientHeight
=
docEl
.
clientHeight
;
var
aspectRatio
=
window
.
clientWidth
/
window
.
clientHeight
;
if
(
aspectRatio
>
1920
/
1080
)
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientHeight
/
1080
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientHeight
/
1080
);
}
else
{
docEl
.
style
.
fontSize
=
100
*
(
window
.
clientWidth
/
1920
)
+
'
px
'
;
window
.
base
=
100
*
(
window
.
clientWidth
/
1920
);
// 判断是否为移动设备,提示旋转屏幕
}
};
recalc
();
win
.
addEventListener
(
resizeEvt
,
recalc
,
false
);
doc
.
addEventListener
(
'
DOMContentLoaded
'
,
recalc
,
false
);
...
...
@@ -176,7 +176,7 @@ function addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback =
function
playAudio
(
key
,
now
=
false
,
callback
=
null
)
{
const
audio
=
audioObj
[
key
];
console
.
log
(
audio
);
const
audio
=
audioObj
[
key
];
console
.
log
(
audio
);
if
(
audio
)
{
if
(
now
)
{
...
...
@@ -254,12 +254,12 @@ class PlayView {
$
(
"
.total-time
"
).
empty
();
$
(
"
.total-time
"
).
append
(
totalTime
);
if
(
ROLE
==
'
tea
'
)
{
if
(
ROLE
==
'
tea
'
)
{
teaUserAspect
.
totalTime
=
video
.
duration
;
cw
.
storeAspect
(
teaUserAspect
);
}
clearInterval
(
i
);
}
},
100
);
...
...
@@ -298,10 +298,10 @@ class PlayView {
bindConfirmBtn
();
//
$(".hello-container").show();
$
(
"
.hello-container
"
).
show
();
$
(
"
#submitBtn
"
).
show
();
$
(
"
#exercise
"
).
show
();
//
$("#submitBtn").show();
//
$("#exercise").show();
// 学生特定的页面
$
(
"
[role='stu']
"
).
show
();
}
...
...
@@ -379,11 +379,10 @@ function recoverPage(aspect) {
//如果没有删除最后一段,则显示删除按钮
if
(
stuUserAspect
.
isDelTemp
)
{
//重新绘画进度条
drawProgress
(
$
(
"
#progressbar
"
),
last
.
endTime
);
drawProgress
(
$
(
"
#progressbar
"
),
last
.
endTime
,
teaAspect
.
totalTime
);
}
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
);
...
...
@@ -426,7 +425,7 @@ function bindVideoPlayBtn() {
// 监听视频播放结束
$
(
"
.video-play-icon .control
"
).
removeClass
(
"
pause
"
).
addClass
(
"
play
"
);
});
$
(
"
.video-play-icon
"
).
on
(
'
click touchend
'
,
function
()
{
$
(
"
.video-play-icon
"
).
on
(
'
click touchend
'
,
function
()
{
const
video
=
$
(
"
#video
"
)[
0
];
const
control
=
$
(
"
.video-play-icon .control
"
);
const
status_
=
control
.
hasClass
(
"
play
"
);
...
...
@@ -445,16 +444,52 @@ let tempTimeLen = 0;
function
bindRecorderBtn
()
{
bindPressAnimation
(
$
(
"
.recorder-play-icon
"
));
$
(
"
#video
"
)[
0
].
addEventListener
(
'
ended
'
,
function
()
{
// 监听视频播放结束
//结束录音处理
const
endRecord
=
()
=>
{
const
control
=
$
(
"
.recorder-play-icon .control
"
);
$
(
"
#ani
"
).
hide
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
$
(
"
.recorder-play-icon .control
"
).
addClass
(
"
recorder-play
"
);
stuUserAspect
.
isPause
=
true
;
control
.
addClass
(
"
recorder-play
"
);
let
curTime
=
$
(
"
#video
"
)[
0
].
currentTime
;
tempRecorder
.
endTime
=
curTime
;
if
(
started
)
{
//直接绘制结束
drawProgress
(
$
(
"
#tempProgressbar
"
),
curTime
-
tempRecorder
.
startTime
,
$
(
"
#video
"
)[
0
].
duration
);
clearInterval
(
started
);
}
cw
.
stopRecord
(
0
,
function
(
data
)
{
//录完后,显示撤销按钮
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
show
();
}
tempRecorder
.
data
=
data
;
$
(
"
#backBtn
"
).
show
();
$
(
"
#submitBtn
"
).
show
();
//将当前时间保存到切片中
stuUserAspect
.
videoCurTime
=
curTime
;
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
stuUserAspect
.
recorderTimeLenArr
.
push
(
Date
.
now
()
-
tempTimeLen
);
stuUserAspect
.
isDelTemp
=
false
;
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
})
}
$
(
"
#video
"
)[
0
].
addEventListener
(
'
ended
'
,
function
()
{
// 监听视频播放结束
$
(
"
.video-play-bg
"
).
hide
();
endRecord
();
});
$
(
"
.recorder-play-icon
"
).
on
(
'
click touchend
'
,
function
()
{
...
...
@@ -484,12 +519,12 @@ function bindRecorderBtn() {
let
progressValue
=
$
(
"
#progressbar
"
).
attr
(
"
data-value
"
);
let
newValue
=
parseFloat
(
progressValue
)
+
parseFloat
(
tempProgressValue
)
;
// console.log(
newValue);
let
newValue
=
(
parseFloat
(
progressValue
)
+
parseFloat
(
tempProgressValue
))
*
$
(
"
#video
"
)[
0
].
duration
/
100
;
console
.
log
(
tempProgressValue
,
progressValue
,
newValue
);
//绘制滚动条
drawProgress
(
$
(
"
#progressbar
"
),
newValue
);
drawProgress
(
$
(
"
#progressbar
"
),
newValue
,
$
(
"
#video
"
)[
0
].
duration
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
,
$
(
"
#video
"
)[
0
].
duration
);
control
.
removeClass
(
"
recorder-play
"
);
...
...
@@ -514,48 +549,16 @@ function bindRecorderBtn() {
cw
.
startRecord
(
keyWord
);
}
else
{
$
(
"
#ani
"
).
hide
();
$
(
"
.recorder-play-icon .recorder-pause
"
).
hide
();
control
.
addClass
(
"
recorder-play
"
);
$
(
"
#video
"
)[
0
].
pause
();
let
curTime
=
$
(
"
#video
"
)[
0
].
currentTime
;
tempRecorder
.
endTime
=
curTime
;
if
(
started
)
{
clearInterval
(
started
);
}
cw
.
stopRecord
(
0
,
function
(
data
)
{
//录完后,显示撤销按钮
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
show
();
}
tempRecorder
.
data
=
data
;
$
(
"
#backBtn
"
).
show
();
$
(
"
#submitBtn
"
).
show
();
//将当前时间保存到切片中
stuUserAspect
.
videoCurTime
=
curTime
;
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
stuUserAspect
.
recorderTimeLenArr
.
push
(
Date
.
now
()
-
tempTimeLen
);
stuUserAspect
.
isDelTemp
=
false
;
//保存切片
cw
.
storeAspect
(
stuUserAspect
);
})
endRecord
();
}
});
}
// 绑定点击效果
...
...
@@ -644,7 +647,7 @@ function bindSentBtn() {
bindPressAnimation
(
$
(
"
.sent-btn
"
));
$
(
"
.sent-btn
"
).
on
(
'
click touchend
'
,
function
()
{
$
(
"
.sent-btn
"
).
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
...
...
@@ -680,7 +683,10 @@ function bindBackBtn() {
bindPressAnimation
(
backBtn
);
backBtn
.
on
(
'
click touchend
'
,
function
()
{
backBtn
.
on
(
'
click touchend
'
,
function
()
{
$
(
"
.video-play-bg
"
).
show
();
playAudio
(
'
click
'
,
true
);
if
(
stuUserAspect
.
firstClickCancel
)
{
$
(
"
.back-tips
"
).
hide
();
...
...
@@ -697,9 +703,11 @@ function bindBackBtn() {
$
(
"
#curTime
"
).
empty
();
$
(
"
#curTime
"
).
append
(
getTimeStr
(
video
.
currentTime
));
//重新绘画进度条
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
0
,
video
.
duration
);
stuUserAspect
.
isDelTemp
=
true
;
stuUserAspect
.
videoCurTime
=
video
.
currentTime
;
}
if
(
stuUserAspect
.
recorderArr
.
length
==
0
)
{
...
...
@@ -719,7 +727,7 @@ function bindSubmitBtn() {
bindPressAnimation
(
submitBtn
);
submitBtn
.
on
(
'
click touchend
'
,
function
()
{
submitBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
submit
'
,
true
);
$
(
"
#submitDialog
"
).
modal
(
'
show
'
);
});
...
...
@@ -744,24 +752,16 @@ function refreshProgress() {
$
(
"
#curTime
"
).
empty
();
$
(
"
#curTime
"
).
append
(
getTimeStr
(
curTime
))
drawProgress
(
$
(
"
#tempProgressbar
"
),
duration
);
drawProgress
(
$
(
"
#tempProgressbar
"
),
duration
,
video
.
duration
);
},
100
);
}
function
drawProgress
(
progressbar
,
duration
,
totalTime
)
{
const
video
=
$
(
"
#video
"
)[
0
];
let
tempTotalTime
=
totalTime
;
//加载成功
if
(
video
&&
video
.
readyState
>
0
)
{
tempTotalTime
=
video
.
duration
;
}
let
progress
=
0
;
if
(
t
empTotalTime
&&
tempT
otalTime
!=
0
)
{
progress
=
Math
.
floor
(
duration
/
t
empT
otalTime
*
100
*
100
)
/
100
;
if
(
t
otalTime
&&
t
otalTime
!=
0
)
{
progress
=
Math
.
floor
(
duration
/
totalTime
*
100
*
100
)
/
100
;
}
progressbar
.
attr
(
'
data-value
'
,
progress
);
...
...
@@ -780,7 +780,7 @@ function bindContinueBtnBtn() {
const
continueBtn
=
$
(
"
#continueBtn
"
);
bindPressAnimation
(
continueBtn
,
'
submit-press
'
);
continueBtn
.
on
(
'
click touchend
'
,
function
()
{
continueBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
})
...
...
@@ -794,13 +794,11 @@ function bindConfirmBtn() {
const
confirmBtn
=
$
(
"
#confirmBtn
"
);
bindPressAnimation
(
confirmBtn
,
'
submit-press
'
);
confirmBtn
.
on
(
'
click touchend
'
,
function
()
{
playAudio
(
'
click
'
,
true
);
$
(
"
#submitDialog
"
).
modal
(
'
hide
'
);
$
(
"
#progressModal
"
).
modal
(
'
show
'
);
let
recorderArr
=
stuUserAspect
.
recorderArr
;
let
text
=
""
;
...
...
@@ -834,23 +832,22 @@ function drawResult(data, text) {
$
(
"
#exercise
"
).
hide
();
$
(
"
#result
"
).
show
();
$
(
"
#progressModal
"
).
modal
(
'
hide
'
);
console
.
log
(
data
);
let
temp
=
JSON
.
parse
(
data
);
const
timeLen
=
stuUserAspect
.
recorderTimeLenArr
.
reduce
((
a
,
b
)
=>
a
+
b
,
0
);
let
{
integrity
,
fluency
}
=
scoreByText
(
text
,
$
(
"
#keyWord
"
).
val
(),
timeLen
);
const
timeLen
=
stuUserAspect
.
recorderTimeLenArr
.
reduce
((
a
,
b
)
=>
a
+
b
,
0
);
let
{
integrity
,
fluency
}
=
scoreByText
(
text
,
$
(
"
#keyWord
"
).
val
(),
timeLen
);
$
(
"
#complete
"
).
text
(
Math
.
floor
(
integrity
*
100
));
$
(
"
#fluent
"
).
text
(
Math
.
floor
(
fluency
*
100
));
$
(
"
#grammar
"
).
text
(
temp
.
overall
);
let
score
=
Math
.
floor
(
integrity
*
60
+
fluency
*
20
+
(
temp
.
overall
-
0
)
*
0.20
);
let
score
=
Math
.
floor
(
integrity
*
60
+
fluency
*
20
+
(
temp
.
overall
-
0
)
*
0.20
);
let
imgSrc
=
""
;
let
tips
=
""
;
let
fontColor
=
''
;
let
fontColor
=
''
;
if
(
score
>=
80
)
{
imgSrc
=
"
../lib/images/excellent.png
"
;
...
...
@@ -907,11 +904,11 @@ function scoreByText(text, keyWords, timeLen) {
const
speakedDetailWordArr
=
[];
let
detailLastIndex
=
-
1
;
for
(
let
i
=
0
;
i
<
detailArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
detailArr
.
length
;
i
++
)
{
const
index
=
smallText
.
indexOf
(
detailArr
[
i
]);
if
(
index
!=
-
1
)
{
speakedDetailWordArr
.
push
({
index
,
text
:
detailArr
[
i
]
});
speakedDetailWordArr
.
push
({
index
,
text
:
detailArr
[
i
]
});
if
(
detailLastIndex
==
-
1
||
index
>
detailLastIndex
)
{
detailLastIndex
=
index
;
}
...
...
@@ -920,11 +917,11 @@ function scoreByText(text, keyWords, timeLen) {
const
speakedMainWordArr
=
[];
let
mainFirstIndex
=
-
1
;
for
(
let
i
=
0
;
i
<
mainArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
mainArr
.
length
;
i
++
)
{
const
index
=
smallText
.
indexOf
(
mainArr
[
i
]);
if
(
index
!=
-
1
)
{
speakedMainWordArr
.
push
({
index
,
text
:
mainArr
[
i
]
});
speakedMainWordArr
.
push
({
index
,
text
:
mainArr
[
i
]
});
if
(
mainFirstIndex
==
-
1
||
index
<
speakedMainWordArr
)
{
mainFirstIndex
=
index
;
}
...
...
@@ -935,7 +932,7 @@ function scoreByText(text, keyWords, timeLen) {
const
targetSpeakCount
=
detailArr
.
length
+
mainArr
.
length
;
const
rate1
=
speakedCount
/
targetSpeakCount
;
const
integrity
=
Math
.
round
(
rate1
*
100
)
/
100
;
// 完整度
const
integrity
=
Math
.
round
(
rate1
*
100
)
/
100
;
// 完整度
const
time
=
timeLen
/
1000
;
...
...
@@ -947,7 +944,7 @@ function scoreByText(text, keyWords, timeLen) {
rate2
=
1
;
}
const
fluency
=
Math
.
round
(
rate2
*
100
)
/
100
;
// 流利度
const
fluency
=
Math
.
round
(
rate2
*
100
)
/
100
;
// 流利度
return
{
integrity
:
integrity
||
0
,
...
...
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