Commit e62dd896 authored by Chen Jiping's avatar Chen Jiping

feat:测试提交功能

parent 995f016f
......@@ -471,4 +471,171 @@ body {
@keyframes submit-press {
100% { box-shadow: 0px 0px 0px 0px #0a6500; transform: scale(.99, .99); }
}
.loading-text{
font-family: PingFangSC;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
}
.modal-backdrop{
background-color: #fff !important;
}
.modal-backdrop.in {
filter: alpha(opacity=60) !important;
opacity: .6 !important;
}
#result{
background-color: #3d992f;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.score{
position: absolute;
width: 100%;
height: 38%;
top: 0;
left: 0;
right: 0;
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;
z-index: 100;
text-align: center;
}
.score .medal{
position: absolute;
top: 6%;
margin-left: -100px;
}
.score .val{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-size: 60px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
position: absolute;
margin-left: -32px;
margin-top: 90px;
}
.score .tips{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-size: 64px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #2890bc;
}
.score .sub-score{
width: 60%;
height: 18%;
background-color: #3e9b31;
border-radius: 40px;
margin-left: 20%;
margin-top: 30px;
}
.sub-score thead{
object-fit: contain;
font-family: PingFangSC;
font-size: 24px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #cedebc;
}
.sub-score tbody{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
#recorder-text{
width: 98%;
height: 60%;
overflow-x: inherit;
overflow-y: auto;
margin-top: 60px;
text-align: left;
padding: 10px 90px;
object-fit: contain;
font-family: Arial;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.83;
letter-spacing: normal;
color: #ffffff;
margin-left: 1%;
}
.scrollbar{
}
.hr{
height: 10px;
width: 96%;
margin-top: 50px;
background-image: url(../lib/images/line.png);
margin-left: 2%;
}
#evaluation{
width: 90%;
height: 55%;
overflow-x: inherit;
overflow-y: auto;
margin-top: 60px;
text-align: left;
padding: 20px 50px;
margin-left: 5%;
object-fit: contain;
font-family: PingFangSC;
font-size: 36px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
background-color: #2c8a1e;
border-radius: 40px;
}
\ No newline at end of file
......@@ -16,6 +16,7 @@
<body>
<div class="content">
<input type="hidden" id='keyWord'>
<div style="position: absolute; top: 25px; left: 10%; z-index: 99;">
<span class="title">请同学们根据视频复述课文</span>
</div>
......@@ -120,6 +121,40 @@
<img class="jinmao-logo" src="../lib/images/logo.png" alt="">
</div>
</div>
<div id="result">
<div class="score">
<img src="../lib/images/excellent.png" class="medal">
<span id="score" class="val">90</span>
<h1 style="margin-top: 230px;"><span class="tips">Great!</span></h1>
<div class='sub-score'>
<table style="width: 100%; height: 84%; position: relative; top: 16%;">
<thead>
<tr>
<td style="width: 33%;">完整度</td>
<td style="width: 33%;">流利度</td>
<td style="width: 33%;">语法</td>
</tr>
</thead>
<tbody>
<tr>
<td>80</td>
<td>80</td>
<td>60</td>
</tr>
</tbody>
</table>
</div>
<div id="recorder-text">
</div>
<div class="hr"></div>
<div id="evaluation">
</div>
</div>
</div>
</div>
</div>
......@@ -155,6 +190,22 @@
</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>
......
......@@ -145,6 +145,8 @@ class PlayView {
$(".title").empty();
$(".title").append(this.data.title);
}
$("#keyWord").val(this.data.keyWord);
}
}
......@@ -199,6 +201,8 @@ function bindRecorderBtn() {
const control = $(".recorder-play-icon .control");
const status_ = control.hasClass("recorder-play");
let keyWord = $("#keyWord").val();
//开始录制
if (status_) {
......@@ -236,6 +240,9 @@ function bindRecorderBtn() {
//刷新进度条
refreshProgress();
//开始录制
cw.startRecord(keyWord);
} else {
$(".recorder-play-icon .recorder-pause").hide();
......@@ -248,24 +255,29 @@ function bindRecorderBtn() {
if (started) {
clearInterval(started);
}
cw.stopRecord(0, function(data){
//录完后,显示撤销按钮
if (stuUserAspect.firstClickCancel) {
$(".back-tips").show();
}
//录完后,显示撤销按钮
if (stuUserAspect.firstClickCancel) {
$(".back-tips").show();
}
tempRecorder.data = data;
$("#backBtn").show();
$("#backBtn").show();
$("#submitBtn").show();
$("#submitBtn").show();
//将当前时间保存到切片中
stuUserAspect.curTime = curTime;
//将当前时间保存到切片中
stuUserAspect.curTime = curTime;
stuUserAspect.isPause = true;
stuUserAspect.recorderArr.push(tempRecorder);
stuUserAspect.isPause = true;
stuUserAspect.recorderArr.push(tempRecorder);
//保存切片
cw.storeAspect(stuUserAspect);
//保存切片
cw.storeAspect(stuUserAspect);
})
}
......@@ -462,14 +474,38 @@ function bindContinueBtnBtn(){
}
/**
* 确提交事件
* 确提交事件
*/
function bindConfirmBtn(){
const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.click(function(){
confirmBtn.on('click', function(){
$("#submitDialog").modal('hide');
$("#progressModal").modal('show');
setTimeout(() => {
$("#exercise").hide();
$("#result").show();
$("#progressModal").modal('hide');
let recorderArr = stuUserAspect.recorderArr;
let text = "";
for(let i = 0; i < recorderArr.length; ++ i){
let data = JSON.parse(recorderArr[i].data);
text += " " + data.text;
}
cw.greadPapersForText(text, function(data){
console.log(data);
});
}, 3000);
})
}
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