Commit 3d8c0773 authored by liujiangnan's avatar liujiangnan

Merge branch 'master' of http://vcs.ireadabc.com/template/JM-07

parents a60035dd 7469a2e0
...@@ -199,22 +199,6 @@ ...@@ -199,22 +199,6 @@
</div> </div>
</div> </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> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
<script src="./util.js"></script> <script src="./util.js"></script>
......
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
(function (doc, win) { (function (doc, win) {
window.base = document.documentElement.clientWidth / 1920; window.base = document.documentElement.clientWidth / 1920;
var docEl = doc.documentElement, var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () { recalc = function () {
window.clientWidth = docEl.clientWidth; window.clientWidth = docEl.clientWidth;
window.clientHeight = docEl.clientHeight; window.clientHeight = docEl.clientHeight;
var aspectRatio = window.clientWidth/window.clientHeight; var aspectRatio = window.clientWidth / window.clientHeight;
if(aspectRatio > 1920 / 1080){ if (aspectRatio > 1920 / 1080) {
docEl.style.fontSize = 100 * (window.clientHeight / 1080) + 'px'; docEl.style.fontSize = 100 * (window.clientHeight / 1080) + 'px';
window.base = 100 * (window.clientHeight / 1080); window.base = 100 * (window.clientHeight / 1080);
}else{ } else {
docEl.style.fontSize = 100 * (window.clientWidth / 1920) + 'px'; docEl.style.fontSize = 100 * (window.clientWidth / 1920) + 'px';
window.base = 100 * (window.clientWidth / 1920); window.base = 100 * (window.clientWidth / 1920);
// 判断是否为移动设备,提示旋转屏幕 // 判断是否为移动设备,提示旋转屏幕
} }
}; };
recalc(); recalc();
win.addEventListener(resizeEvt, recalc, false); win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);
...@@ -176,7 +176,7 @@ function addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = ...@@ -176,7 +176,7 @@ function addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback =
function playAudio(key, now = false, callback = null) { function playAudio(key, now = false, callback = null) {
const audio = audioObj[key];console.log(audio); const audio = audioObj[key]; console.log(audio);
if (audio) { if (audio) {
if (now) { if (now) {
...@@ -254,12 +254,12 @@ class PlayView { ...@@ -254,12 +254,12 @@ class PlayView {
$(".total-time").empty(); $(".total-time").empty();
$(".total-time").append(totalTime); $(".total-time").append(totalTime);
if(ROLE == 'tea'){ if (ROLE == 'tea') {
teaUserAspect.totalTime = video.duration; teaUserAspect.totalTime = video.duration;
cw.storeAspect(teaUserAspect); cw.storeAspect(teaUserAspect);
} }
clearInterval(i); clearInterval(i);
} }
}, 100); }, 100);
...@@ -298,10 +298,10 @@ class PlayView { ...@@ -298,10 +298,10 @@ class PlayView {
bindConfirmBtn(); bindConfirmBtn();
//$(".hello-container").show(); $(".hello-container").show();
$("#submitBtn").show(); //$("#submitBtn").show();
$("#exercise").show(); //$("#exercise").show();
// 学生特定的页面 // 学生特定的页面
$("[role='stu']").show(); $("[role='stu']").show();
} }
...@@ -379,11 +379,10 @@ function recoverPage(aspect) { ...@@ -379,11 +379,10 @@ function recoverPage(aspect) {
//如果没有删除最后一段,则显示删除按钮 //如果没有删除最后一段,则显示删除按钮
if (stuUserAspect.isDelTemp) { if (stuUserAspect.isDelTemp) {
//重新绘画进度条 //重新绘画进度条
drawProgress($("#progressbar"), last.endTime); drawProgress($("#progressbar"), last.endTime, teaAspect.totalTime);
} }
else { else {
console.log("-----------")
console.log(last.endTime - last.startTime, teaAspect.totalTime)
//重新绘画进度条 //重新绘画进度条
drawProgress($("#tempProgressbar"), last.endTime - last.startTime, teaAspect.totalTime); drawProgress($("#tempProgressbar"), last.endTime - last.startTime, teaAspect.totalTime);
drawProgress($("#progressbar"), last.startTime - 0, teaAspect.totalTime); drawProgress($("#progressbar"), last.startTime - 0, teaAspect.totalTime);
...@@ -426,7 +425,7 @@ function bindVideoPlayBtn() { ...@@ -426,7 +425,7 @@ function bindVideoPlayBtn() {
// 监听视频播放结束 // 监听视频播放结束
$(".video-play-icon .control").removeClass("pause").addClass("play"); $(".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 video = $("#video")[0];
const control = $(".video-play-icon .control"); const control = $(".video-play-icon .control");
const status_ = control.hasClass("play"); const status_ = control.hasClass("play");
...@@ -445,16 +444,52 @@ let tempTimeLen = 0; ...@@ -445,16 +444,52 @@ let tempTimeLen = 0;
function bindRecorderBtn() { function bindRecorderBtn() {
bindPressAnimation($(".recorder-play-icon")); 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 .recorder-pause").hide();
$(".recorder-play-icon .control").addClass("recorder-play"); control.addClass("recorder-play");
stuUserAspect.isPause = true;
let curTime = $("#video")[0].currentTime;
tempRecorder.endTime = curTime;
if (started) { if (started) {
//直接绘制结束
drawProgress($("#tempProgressbar"), curTime - tempRecorder.startTime, $("#video")[0].duration);
clearInterval(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);
})
}
$("#video")[0].addEventListener('ended', function () {
// 监听视频播放结束
$(".video-play-bg").hide();
endRecord();
}); });
$(".recorder-play-icon").on('click touchend', function () { $(".recorder-play-icon").on('click touchend', function () {
...@@ -484,12 +519,12 @@ function bindRecorderBtn() { ...@@ -484,12 +519,12 @@ function bindRecorderBtn() {
let progressValue = $("#progressbar").attr("data-value"); let progressValue = $("#progressbar").attr("data-value");
let newValue = parseFloat(progressValue) + parseFloat(tempProgressValue); let newValue = (parseFloat(progressValue) + parseFloat(tempProgressValue)) * $("#video")[0].duration / 100;
// console.log(newValue); 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"); control.removeClass("recorder-play");
...@@ -514,48 +549,16 @@ function bindRecorderBtn() { ...@@ -514,48 +549,16 @@ function bindRecorderBtn() {
cw.startRecord(keyWord); cw.startRecord(keyWord);
} else { } else {
$("#ani").hide();
$(".recorder-play-icon .recorder-pause").hide();
control.addClass("recorder-play");
$("#video")[0].pause(); $("#video")[0].pause();
let curTime = $("#video")[0].currentTime; endRecord();
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);
})
} }
}); });
} }
// 绑定点击效果 // 绑定点击效果
...@@ -644,7 +647,7 @@ function bindSentBtn() { ...@@ -644,7 +647,7 @@ function bindSentBtn() {
bindPressAnimation($(".sent-btn")); bindPressAnimation($(".sent-btn"));
$(".sent-btn").on('click touchend',function () { $(".sent-btn").on('click touchend', function () {
playAudio('click', true); playAudio('click', true);
...@@ -680,7 +683,10 @@ function bindBackBtn() { ...@@ -680,7 +683,10 @@ function bindBackBtn() {
bindPressAnimation(backBtn); bindPressAnimation(backBtn);
backBtn.on('click touchend',function () { backBtn.on('click touchend', function () {
$(".video-play-bg").show();
playAudio('click', true); playAudio('click', true);
if (stuUserAspect.firstClickCancel) { if (stuUserAspect.firstClickCancel) {
$(".back-tips").hide(); $(".back-tips").hide();
...@@ -697,9 +703,11 @@ function bindBackBtn() { ...@@ -697,9 +703,11 @@ function bindBackBtn() {
$("#curTime").empty(); $("#curTime").empty();
$("#curTime").append(getTimeStr(video.currentTime)); $("#curTime").append(getTimeStr(video.currentTime));
//重新绘画进度条 //重新绘画进度条
drawProgress($("#tempProgressbar"), 0); drawProgress($("#tempProgressbar"), 0, video.duration);
stuUserAspect.isDelTemp = true; stuUserAspect.isDelTemp = true;
stuUserAspect.videoCurTime = video.currentTime;
} }
if (stuUserAspect.recorderArr.length == 0) { if (stuUserAspect.recorderArr.length == 0) {
...@@ -719,7 +727,7 @@ function bindSubmitBtn() { ...@@ -719,7 +727,7 @@ function bindSubmitBtn() {
bindPressAnimation(submitBtn); bindPressAnimation(submitBtn);
submitBtn.on('click touchend',function () { submitBtn.on('click touchend', function () {
playAudio('submit', true); playAudio('submit', true);
$("#submitDialog").modal('show'); $("#submitDialog").modal('show');
}); });
...@@ -744,24 +752,16 @@ function refreshProgress() { ...@@ -744,24 +752,16 @@ function refreshProgress() {
$("#curTime").empty(); $("#curTime").empty();
$("#curTime").append(getTimeStr(curTime)) $("#curTime").append(getTimeStr(curTime))
drawProgress($("#tempProgressbar"), duration); drawProgress($("#tempProgressbar"), duration, video.duration);
}, 100); }, 100);
} }
function drawProgress(progressbar, duration, totalTime) { function drawProgress(progressbar, duration, totalTime) {
const video = $("#video")[0];
let tempTotalTime = totalTime;
//加载成功
if (video && video.readyState > 0) {
tempTotalTime = video.duration;
}
let progress = 0; let progress = 0;
if (tempTotalTime && tempTotalTime != 0) { if (totalTime && totalTime != 0) {
progress = Math.floor(duration / tempTotalTime * 100 * 100) / 100; progress = Math.floor(duration / totalTime * 100 * 100) / 100;
} }
progressbar.attr('data-value', progress); progressbar.attr('data-value', progress);
...@@ -780,7 +780,7 @@ function bindContinueBtnBtn() { ...@@ -780,7 +780,7 @@ function bindContinueBtnBtn() {
const continueBtn = $("#continueBtn"); const continueBtn = $("#continueBtn");
bindPressAnimation(continueBtn, 'submit-press'); bindPressAnimation(continueBtn, 'submit-press');
continueBtn.on('click touchend',function () { continueBtn.on('click touchend', function () {
playAudio('click', true); playAudio('click', true);
$("#submitDialog").modal('hide'); $("#submitDialog").modal('hide');
}) })
...@@ -794,13 +794,11 @@ function bindConfirmBtn() { ...@@ -794,13 +794,11 @@ function bindConfirmBtn() {
const confirmBtn = $("#confirmBtn"); const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press'); bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.on('click touchend', function () { confirmBtn.on('click touchend', function () {
playAudio('click', true); playAudio('click', true);
$("#submitDialog").modal('hide'); $("#submitDialog").modal('hide');
$("#progressModal").modal('show');
let recorderArr = stuUserAspect.recorderArr; let recorderArr = stuUserAspect.recorderArr;
let text = ""; let text = "";
...@@ -834,23 +832,22 @@ function drawResult(data, text) { ...@@ -834,23 +832,22 @@ function drawResult(data, text) {
$("#exercise").hide(); $("#exercise").hide();
$("#result").show(); $("#result").show();
$("#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 ); const timeLen = stuUserAspect.recorderTimeLenArr.reduce((a, b) => a + b, 0);
let {integrity, fluency} = scoreByText(text, $("#keyWord").val(), timeLen); let { integrity, fluency } = scoreByText(text, $("#keyWord").val(), timeLen);
$("#complete").text(Math.floor(integrity * 100)); $("#complete").text(Math.floor(integrity * 100));
$("#fluent").text(Math.floor(fluency * 100)); $("#fluent").text(Math.floor(fluency * 100));
$("#grammar").text(temp.overall); $("#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 imgSrc = "";
let tips = ""; let tips = "";
let fontColor =''; let fontColor = '';
if (score >= 80) { if (score >= 80) {
imgSrc = "../lib/images/excellent.png"; imgSrc = "../lib/images/excellent.png";
...@@ -907,11 +904,11 @@ function scoreByText(text, keyWords, timeLen) { ...@@ -907,11 +904,11 @@ function scoreByText(text, keyWords, timeLen) {
const speakedDetailWordArr = []; const speakedDetailWordArr = [];
let detailLastIndex = -1; 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]); const index = smallText.indexOf(detailArr[i]);
if (index != -1) { if (index != -1) {
speakedDetailWordArr.push({index, text: detailArr[i]}); speakedDetailWordArr.push({ index, text: detailArr[i] });
if (detailLastIndex == -1 || index > detailLastIndex) { if (detailLastIndex == -1 || index > detailLastIndex) {
detailLastIndex = index; detailLastIndex = index;
} }
...@@ -920,11 +917,11 @@ function scoreByText(text, keyWords, timeLen) { ...@@ -920,11 +917,11 @@ function scoreByText(text, keyWords, timeLen) {
const speakedMainWordArr = []; const speakedMainWordArr = [];
let mainFirstIndex = -1; 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]); const index = smallText.indexOf(mainArr[i]);
if (index != -1) { if (index != -1) {
speakedMainWordArr.push({index, text: mainArr[i]}); speakedMainWordArr.push({ index, text: mainArr[i] });
if (mainFirstIndex == -1 || index < speakedMainWordArr) { if (mainFirstIndex == -1 || index < speakedMainWordArr) {
mainFirstIndex = index; mainFirstIndex = index;
} }
...@@ -935,7 +932,7 @@ function scoreByText(text, keyWords, timeLen) { ...@@ -935,7 +932,7 @@ function scoreByText(text, keyWords, timeLen) {
const targetSpeakCount = detailArr.length + mainArr.length; const targetSpeakCount = detailArr.length + mainArr.length;
const rate1 = speakedCount / targetSpeakCount; const rate1 = speakedCount / targetSpeakCount;
const integrity = Math.round( rate1 * 100 ) / 100; // 完整度 const integrity = Math.round(rate1 * 100) / 100; // 完整度
const time = timeLen / 1000; const time = timeLen / 1000;
...@@ -947,7 +944,7 @@ function scoreByText(text, keyWords, timeLen) { ...@@ -947,7 +944,7 @@ function scoreByText(text, keyWords, timeLen) {
rate2 = 1; rate2 = 1;
} }
const fluency = Math.round( rate2 * 100) / 100; // 流利度 const fluency = Math.round(rate2 * 100) / 100; // 流利度
return { return {
integrity: integrity || 0, integrity: integrity || 0,
......
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