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
be3fbec1
Commit
be3fbec1
authored
Aug 05, 2021
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 样式调整
parent
72d219a1
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
104 additions
and
39 deletions
+104
-39
index.css
play/index.css
+22
-19
index.html
play/index.html
+16
-16
index.js
play/index.js
+66
-4
No files found.
play/index.css
View file @
be3fbec1
...
...
@@ -525,7 +525,7 @@ body {
width
:
100%
;
height
:
100%
;
z-index
:
100
;
display
:
none
;
/* display: none; */
}
.score
{
...
...
@@ -535,20 +535,22 @@ body {
top
:
0
;
left
:
0
;
right
:
0
;
display
:
flex
;
justify-content
:
center
;
flex-direction
:
column
;
align-items
:
center
;
background
:
url(../lib/images/bg.jpg)
repeat-y
;
background-size
:
100%
;
border-bottom-left-radius
:
36px
;
border-bottom-right-radius
:
36px
;
box-shadow
:
0
px
5px
12px
5px
#0a6500
;
border-bottom-left-radius
:
0.36rem
;
border-bottom-right-radius
:
0.36rem
;
box-shadow
:
0
rem
0.05rem
0.12rem
0.05rem
#0a6500
;
z-index
:
100
;
text-align
:
center
;
}
.score
.medal
{
position
:
absolute
;
top
:
6%
;
left
:
45%
;
width
:
10%
;
width
:
2.2rem
;
position
:
relative
;
}
.score
.val
{
...
...
@@ -558,10 +560,13 @@ body {
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#ffffff
;
position
:
absolute
;
top
:
0px
;
width
:
100%
;
line-height
:
2.6rem
;
}
.score
.tips
{
...
...
@@ -571,7 +576,7 @@ body {
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
line-height
:
normal
;
line-height
:
1.5rem
;
letter-spacing
:
normal
;
text-align
:
center
;
color
:
#2890bc
;
...
...
@@ -590,13 +595,10 @@ body {
}
.score
.sub-score
{
width
:
60%
;
width
:
15rem
;
height
:
18%
;
background-color
:
#3e9b31
;
border-radius
:
0.4rem
;
left
:
20%
;
top
:
76%
;
position
:
absolute
;
border-radius
:
0.6rem
;
}
.sub-score
.thead
{
...
...
@@ -626,6 +628,7 @@ body {
}
.detail
{
background-color
:
#3e9b31
;
position
:
absolute
;
width
:
100%
;
height
:
60%
;
...
...
@@ -644,7 +647,7 @@ body {
padding
:
0.1rem
0.8rem
;
object-fit
:
contain
;
font-family
:
Arial
;
font-size
:
0.5rem
;
font-size
:
0.
3
5rem
;
font-weight
:
normal
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -659,7 +662,7 @@ body {
}
.hr
{
height
:
2%
;
height
:
0.1rem
;
width
:
96%
;
margin-top
:
0.5%
;
background-image
:
url(../lib/images/line.png)
;
...
...
@@ -677,7 +680,7 @@ body {
margin-left
:
5%
;
object-fit
:
contain
;
font-family
:
DroidSansFallback
;
font-size
:
0.
5
rem
;
font-size
:
0.
4
rem
;
font-weight
:
600
;
font-stretch
:
normal
;
font-style
:
normal
;
...
...
@@ -685,5 +688,5 @@ body {
letter-spacing
:
normal
;
color
:
#ffffff
;
background-color
:
#2c8a1e
;
border-radius
:
1.0
rem
;
border-radius
:
0.3
rem
;
}
\ No newline at end of file
play/index.html
View file @
be3fbec1
...
...
@@ -133,19 +133,23 @@
<div
class=
"score"
>
<div
class=
"medal"
>
<img
id=
"medal"
src=
"../lib/images/excellent.png"
style=
"width: 100%;"
>
<div
id=
"score"
class=
"val"
>
90
</div>
</div>
<div
style=
"position: absolute;left: 40%;top: 23%;width: 20%;text-align: center;"
>
<span
id=
"score"
class=
"val"
>
90
</span>
</div>
<div
style=
"position: absolute; top: 55%;left: 35%;width: 30%;"
><span
class=
"tips"
>
Great!
</span></div>
<span
class=
"tips"
>
Great!
</span>
<div
class=
'sub-score'
>
<table
style=
"width: 100%;
height: 100%; position: relative
;"
>
<table
style=
"width: 100%;
margin-top: 0.2rem; height: 0.8rem
;"
>
<tr
class=
"thead"
>
<td
style=
"width: 33%;"
>
完整度
</td>
<td
style=
"width: 33%;"
>
流利度
</td>
<td
style=
"width: 33%;"
>
语法
</td>
<td
style=
"width: 33%;"
>
完整度
</td>
<td
style=
"width: 33%;"
>
流利度
</td>
<td
style=
"width: 33%;"
>
语法
</td>
</tr>
<tr
class=
"tbody"
>
<td
id=
'complete'
>
80
</td>
...
...
@@ -156,13 +160,9 @@
</div>
</div>
<div
class=
"detail"
>
<div
id=
"recorder-text"
>
</div>
<div
id=
"recorder-text"
></div>
<div
class=
"hr"
></div>
<div
id=
"evaluation"
>
</div>
<div
id=
"evaluation"
></div>
</div>
</div>
...
...
play/index.js
View file @
be3fbec1
...
...
@@ -52,6 +52,7 @@ var stuUserAspect = {
videoCurTime
:
0
,
//播放进度
recorderScoreObj
:
null
,
// 这块只记录一个最好的成绩
recorderArr
:
[],
//录音记录
recorderTimeLenArr
:
[],
//录音时长
isPause
:
true
,
firstClickRecorder
:
true
,
//是否第一次点击录音
firstClickCancel
:
true
,
//是否第一次点击撤销按钮
...
...
@@ -440,6 +441,7 @@ function bindVideoPlayBtn() {
}
// 录音按钮
let
tempTimeLen
=
0
;
function
bindRecorderBtn
()
{
bindPressAnimation
(
$
(
"
.recorder-play-icon
"
));
...
...
@@ -508,6 +510,7 @@ function bindRecorderBtn() {
refreshProgress
();
//开始录制
tempTimeLen
=
Date
.
now
();
cw
.
startRecord
(
keyWord
);
}
else
{
...
...
@@ -539,6 +542,7 @@ function bindRecorderBtn() {
stuUserAspect
.
isPause
=
true
;
stuUserAspect
.
recorderArr
.
push
(
tempRecorder
);
stuUserAspect
.
recorderTimeLenArr
.
push
(
Date
.
now
()
-
tempTimeLen
);
stuUserAspect
.
isDelTemp
=
false
;
...
...
@@ -682,6 +686,7 @@ function bindBackBtn() {
stuUserAspect
.
firstClickCancel
=
false
;
}
stuUserAspect
.
recorderTimeLenArr
.
pop
();
//移除录音时长
var
recorder
=
stuUserAspect
.
recorderArr
.
pop
();
if
(
recorder
)
{
...
...
@@ -827,19 +832,22 @@ function bindConfirmBtn() {
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
);
let
score
=
temp
.
overall
;
$
(
"
#complete
"
).
text
(
integrity
*
100
);
$
(
"
#fluent
"
).
text
(
fluency
*
100
);
$
(
"
#grammar
"
).
text
(
temp
.
overall
);
let
imgSrc
=
""
;
let
score
=
integrity
*
60
+
fluency
*
20
+
(
temp
.
overall
-
0
)
*
0.20
;
let
imgSrc
=
""
;
let
tips
=
""
;
let
fontColor
=
''
;
...
...
@@ -865,3 +873,57 @@ function drawResult(data, text) {
$
(
"
#recorder-text
"
).
empty
().
append
(
text
);
$
(
"
#evaluation
"
).
empty
().
append
(
temp
.
evaluate
);
}
function
scoreByText
(
text
,
keyWords
,
timeLen
)
{
const
smallText
=
text
.
toLowerCase
();
const
detailArr
=
keyWords
;
const
mainArr
=
[];
const
speakedDetailWordArr
=
[];
let
detailLastIndex
=
-
1
;
for
(
let
i
=
0
;
i
<
detailArr
.
length
;
i
++
)
{
const
index
=
smallText
.
indexOf
(
detailArr
[
i
]);
if
(
index
!=
-
1
)
{
speakedDetailWordArr
.
push
({
index
,
text
:
detailArr
[
i
]});
if
(
detailLastIndex
==
-
1
||
index
>
detailLastIndex
)
{
detailLastIndex
=
index
;
}
}
}
const
speakedMainWordArr
=
[];
let
mainFirstIndex
=
-
1
;
for
(
let
i
=
0
;
i
<
mainArr
.
length
;
i
++
)
{
const
index
=
smallText
.
indexOf
(
mainArr
[
i
]);
if
(
index
!=
-
1
)
{
speakedMainWordArr
.
push
({
index
,
text
:
mainArr
[
i
]});
if
(
mainFirstIndex
==
-
1
||
index
<
speakedMainWordArr
)
{
mainFirstIndex
=
index
;
}
}
}
const
speakedCount
=
speakedDetailWordArr
.
length
+
speakedMainWordArr
.
length
;
const
targetSpeakCount
=
detailArr
.
length
+
mainArr
.
length
;
const
rate1
=
speakedCount
/
targetSpeakCount
;
const
integrity
=
Math
.
round
(
rate1
*
100
)
/
100
;
// 完整度
const
time
=
timeLen
/
1000
;
const
textArr
=
text
.
split
(
'
'
);
const
baseNum
=
textArr
.
length
/
(
time
/
60
);
const
targetNum
=
90
;
// 语速
let
rate2
=
baseNum
/
targetNum
;
if
(
rate2
>
1
)
{
rate2
=
1
;
}
const
fluency
=
Math
.
round
(
rate2
*
100
)
/
100
;
// 流利度
return
{
integrity
,
fluency
};
}
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