Commit be3fbec1 authored by liujiangnan's avatar liujiangnan

feat: 样式调整

parent 72d219a1
......@@ -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: 0px 5px 12px 5px #0a6500;
border-bottom-left-radius: 0.36rem;
border-bottom-right-radius: 0.36rem;
box-shadow: 0rem 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.35rem;
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.5rem;
font-size: 0.4rem;
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.0rem;
border-radius: 0.3rem;
}
\ No newline at end of file
......@@ -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>
......
......@@ -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};
}
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