Commit be3fbec1 authored by liujiangnan's avatar liujiangnan

feat: 样式调整

parent 72d219a1
...@@ -525,7 +525,7 @@ body { ...@@ -525,7 +525,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 100; z-index: 100;
display: none; /* display: none; */
} }
.score{ .score{
...@@ -535,20 +535,22 @@ body { ...@@ -535,20 +535,22 @@ body {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: url(../lib/images/bg.jpg) repeat-y; background: url(../lib/images/bg.jpg) repeat-y;
background-size: 100%; background-size: 100%;
border-bottom-left-radius: 36px; border-bottom-left-radius: 0.36rem;
border-bottom-right-radius: 36px; border-bottom-right-radius: 0.36rem;
box-shadow: 0px 5px 12px 5px #0a6500; box-shadow: 0rem 0.05rem 0.12rem 0.05rem #0a6500;
z-index: 100; z-index: 100;
text-align: center; text-align: center;
} }
.score .medal{ .score .medal{
position: absolute; width: 2.2rem;
top: 6%; position: relative;
left: 45%;
width: 10%;
} }
.score .val{ .score .val{
...@@ -558,10 +560,13 @@ body { ...@@ -558,10 +560,13 @@ body {
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
line-height: normal;
letter-spacing: normal; letter-spacing: normal;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
position: absolute;
top: 0px;
width: 100%;
line-height: 2.6rem;
} }
.score .tips{ .score .tips{
...@@ -571,7 +576,7 @@ body { ...@@ -571,7 +576,7 @@ body {
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
line-height: normal; line-height: 1.5rem;
letter-spacing: normal; letter-spacing: normal;
text-align: center; text-align: center;
color: #2890bc; color: #2890bc;
...@@ -590,13 +595,10 @@ body { ...@@ -590,13 +595,10 @@ body {
} }
.score .sub-score{ .score .sub-score{
width: 60%; width: 15rem;
height: 18%; height: 18%;
background-color: #3e9b31; background-color: #3e9b31;
border-radius: 0.4rem; border-radius: 0.6rem;
left: 20%;
top: 76%;
position: absolute;
} }
.sub-score .thead{ .sub-score .thead{
...@@ -626,6 +628,7 @@ body { ...@@ -626,6 +628,7 @@ body {
} }
.detail{ .detail{
background-color: #3e9b31;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 60%; height: 60%;
...@@ -644,7 +647,7 @@ body { ...@@ -644,7 +647,7 @@ body {
padding: 0.1rem 0.8rem; padding: 0.1rem 0.8rem;
object-fit: contain; object-fit: contain;
font-family: Arial; font-family: Arial;
font-size: 0.5rem; font-size: 0.35rem;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
...@@ -659,7 +662,7 @@ body { ...@@ -659,7 +662,7 @@ body {
} }
.hr{ .hr{
height: 2%; height: 0.1rem;
width: 96%; width: 96%;
margin-top: 0.5%; margin-top: 0.5%;
background-image: url(../lib/images/line.png); background-image: url(../lib/images/line.png);
...@@ -677,7 +680,7 @@ body { ...@@ -677,7 +680,7 @@ body {
margin-left: 5%; margin-left: 5%;
object-fit: contain; object-fit: contain;
font-family: DroidSansFallback; font-family: DroidSansFallback;
font-size: 0.5rem; font-size: 0.4rem;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
...@@ -685,5 +688,5 @@ body { ...@@ -685,5 +688,5 @@ body {
letter-spacing: normal; letter-spacing: normal;
color: #ffffff; color: #ffffff;
background-color: #2c8a1e; background-color: #2c8a1e;
border-radius: 1.0rem; border-radius: 0.3rem;
} }
\ No newline at end of file
...@@ -133,19 +133,23 @@ ...@@ -133,19 +133,23 @@
<div class="score"> <div class="score">
<div class="medal"> <div class="medal">
<img id="medal" src="../lib/images/excellent.png" style="width: 100%;"> <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>
<span class="tips">Great!</span>
<div style="position: absolute; top: 55%;left: 35%;width: 30%;"><span class="tips">Great!</span></div>
<div class='sub-score'> <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"> <tr class="thead">
<td style="width: 33%;">完整度</td> <td style="width: 33%;">
<td style="width: 33%;">流利度</td> 完整度
<td style="width: 33%;">语法</td> </td>
<td style="width: 33%;">
流利度
</td>
<td style="width: 33%;">
语法
</td>
</tr> </tr>
<tr class="tbody"> <tr class="tbody">
<td id='complete'>80</td> <td id='complete'>80</td>
...@@ -156,13 +160,9 @@ ...@@ -156,13 +160,9 @@
</div> </div>
</div> </div>
<div class="detail"> <div class="detail">
<div id="recorder-text"> <div id="recorder-text"></div>
</div>
<div class="hr"></div> <div class="hr"></div>
<div id="evaluation"> <div id="evaluation"></div>
</div>
</div> </div>
</div> </div>
......
...@@ -52,6 +52,7 @@ var stuUserAspect = { ...@@ -52,6 +52,7 @@ var stuUserAspect = {
videoCurTime: 0,//播放进度 videoCurTime: 0,//播放进度
recorderScoreObj: null, // 这块只记录一个最好的成绩 recorderScoreObj: null, // 这块只记录一个最好的成绩
recorderArr: [],//录音记录 recorderArr: [],//录音记录
recorderTimeLenArr: [],//录音时长
isPause: true, isPause: true,
firstClickRecorder: true, //是否第一次点击录音 firstClickRecorder: true, //是否第一次点击录音
firstClickCancel: true,//是否第一次点击撤销按钮 firstClickCancel: true,//是否第一次点击撤销按钮
...@@ -440,6 +441,7 @@ function bindVideoPlayBtn() { ...@@ -440,6 +441,7 @@ function bindVideoPlayBtn() {
} }
// 录音按钮 // 录音按钮
let tempTimeLen = 0;
function bindRecorderBtn() { function bindRecorderBtn() {
bindPressAnimation($(".recorder-play-icon")); bindPressAnimation($(".recorder-play-icon"));
...@@ -508,6 +510,7 @@ function bindRecorderBtn() { ...@@ -508,6 +510,7 @@ function bindRecorderBtn() {
refreshProgress(); refreshProgress();
//开始录制 //开始录制
tempTimeLen = Date.now();
cw.startRecord(keyWord); cw.startRecord(keyWord);
} else { } else {
...@@ -539,6 +542,7 @@ function bindRecorderBtn() { ...@@ -539,6 +542,7 @@ function bindRecorderBtn() {
stuUserAspect.isPause = true; stuUserAspect.isPause = true;
stuUserAspect.recorderArr.push(tempRecorder); stuUserAspect.recorderArr.push(tempRecorder);
stuUserAspect.recorderTimeLenArr.push(Date.now() - tempTimeLen);
stuUserAspect.isDelTemp = false; stuUserAspect.isDelTemp = false;
...@@ -682,6 +686,7 @@ function bindBackBtn() { ...@@ -682,6 +686,7 @@ function bindBackBtn() {
stuUserAspect.firstClickCancel = false; stuUserAspect.firstClickCancel = false;
} }
stuUserAspect.recorderTimeLenArr.pop(); //移除录音时长
var recorder = stuUserAspect.recorderArr.pop(); var recorder = stuUserAspect.recorderArr.pop();
if (recorder) { if (recorder) {
...@@ -827,19 +832,22 @@ function bindConfirmBtn() { ...@@ -827,19 +832,22 @@ function bindConfirmBtn() {
function drawResult(data, text) { function drawResult(data, text) {
$("#exercise").hide(); $("#exercise").hide();
$("#result").show(); $("#result").show();
$("#progressModal").modal('hide'); $("#progressModal").modal('hide');
console.log(data); console.log(data);
let temp = JSON.parse(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 tips = "";
let fontColor =''; let fontColor ='';
...@@ -865,3 +873,57 @@ function drawResult(data, text) { ...@@ -865,3 +873,57 @@ function drawResult(data, text) {
$("#recorder-text").empty().append(text); $("#recorder-text").empty().append(text);
$("#evaluation").empty().append(temp.evaluate); $("#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