Commit 888192a8 authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent e62dd896
......@@ -586,9 +586,18 @@ body {
color: #ffffff;
}
.detail{
position: absolute;
width: 100%;
height: 62%;
top: 38%;
left: 0;
right: 0;
}
#recorder-text{
width: 98%;
height: 60%;
height: 40%;
overflow-x: inherit;
overflow-y: auto;
margin-top: 60px;
......@@ -620,10 +629,10 @@ body {
#evaluation{
width: 90%;
height: 55%;
height: 32%;
overflow-x: inherit;
overflow-y: auto;
margin-top: 60px;
margin-top: 44px;
text-align: left;
padding: 20px 50px;
margin-left: 5%;
......
......@@ -56,7 +56,7 @@
</div>
</div>
<div class="my-btn sent-btn">
Sent
Send
</div>
</div>
......@@ -138,14 +138,15 @@
</thead>
<tbody>
<tr>
<td>80</td>
<td>80</td>
<td>60</td>
<td id='complete'>80</td>
<td id='fluent'>80</td>
<td id='grammar'>60</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="detail">
<div id="recorder-text">
</div>
......@@ -154,6 +155,7 @@
</div>
</div>
</div>
</div>
</div>
......
......@@ -20,7 +20,8 @@ var defaultData = '{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8
// 维护切面数据
var teaUserAspect = {
isSendQuestion: false, // 是否是答题环节
bindData: null
bindData: null,
totalTime : 0
};
var stuUserAspect = {
speed: 1,//播放速度
......@@ -28,8 +29,10 @@ var stuUserAspect = {
recorderScoreObj: null, // 这块只记录一个最好的成绩
recorderArr: [],//录音记录
isPause: true,
firstClickRecorder: true,
firstClickCancel: true,
firstClickRecorder: true, //是否第一次点击录音
firstClickCancel: true,//是否第一次点击撤销按钮
isEnd: false,
isDelTemp:false,//是否删除临时录音
};
//进度条刷新是否启动
......@@ -39,10 +42,8 @@ var tempRecorder;
$(function () {
window.courseware.getData(function (data) {
window.courseware.getData(function (data, aspect) {
//初始化监听事件
initListener();
USERINFO = window.air.airClassInfo.user;
ROLE = USERINFO.classRole;
......@@ -51,6 +52,13 @@ $(function () {
playView.init();
if (aspect) {
recoverPage(aspect);
}
//初始化监听事件
initListener();
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key, this.data);
}, key);
......@@ -94,6 +102,40 @@ class PlayView {
initView() {
if (this.data.video) {
$(".video").attr("src", this.data.video);
const video = $("#video")[0];
let i = setInterval(() => {
if (video.readyState > 0) {
let totalTime = getTimeStr(video.duration);
$(".total-time").empty();
$(".total-time").append(totalTime);
teaUserAspect.totalTime = video.duration;
cw.storeAspect(teaUserAspect);
clearInterval(i);
}
}, 100);
}
if (this.data.stuImage) {
$("#stuimage").attr("src", this.data.stuImage);
}
if (this.data.title) {
$(".title").empty();
$(".title").append(this.data.title);
}
$("#keyWord").val(this.data.keyWord);
if (ROLE == "tea") {
$("[role='tea']").show(); // 老师特定的页面
......@@ -120,33 +162,112 @@ class PlayView {
$("[role='stu']").show();
}
if (this.data.video) {
$(".video").attr("src", this.data.video);
}
}
const video = $("#video")[0];
let i = setInterval(() => {
/**
*
* @param {*} aspect 断线恢复
*/
function recoverPage(aspect) {
if (ROLE == "tea") {
// 解析切面数据
if (!aspect.user_aspect) {
return;
}
teaUserAspect = aspect.user_aspect && JSON.parse(aspect.user_aspect);
if (teaUserAspect.isSendQuestion) {
$(".sent-btn").hide();
}
}
else {
// 解析切面数据
const tea = aspect.all_user.find(item => item.user.classRole == "tea");
if (!tea || !tea.aspect) {
return;
}
const teaAspect = JSON.parse(tea.aspect);
//没有答题,则结束
if (!teaAspect.isSendQuestion) {
return;
}
if (video.readyState > 0) {
let totalTime = getTimeStr(video.duration);
//隐藏欢迎界面
$(".hello-container").hide();
$(".total-time").empty();
$(".total-time").append(totalTime);
}
}, 100);
const stuAspect = aspect.user_aspect && JSON.parse(aspect.user_aspect);
if (stuAspect) {
stuUserAspect = stuAspect;
}
cw.storeAspect(stuUserAspect);
if (this.data.stuImage) {
$("#stuimage").attr("src", this.data.stuImage);
}
//设置速度
setSpeed(stuUserAspect.speed);
if(this.data.title){
$(".title").empty();
$(".title").append(this.data.title);
}
//已经结束,就显示结束画面
if (stuUserAspect.isEnd) {
$("#keyWord").val(this.data.keyWord);
let score = stuUserAspect.recorderScoreObj;
drawResult(score.result, score.text);
}
else {
let recorderArr = stuUserAspect.recorderArr;
let videoCurTime = stuUserAspect.videoCurTime;
$("#curTime").empty();
$("#curTime").append(getTimeStr(videoCurTime));
//已经录制
if(recorderArr.length > 0){
let length = recorderArr.length;
let last = recorderArr[length - 1];
$("#submitBtn").show();
//如果没有删除最后一段,则显示删除按钮
if(stuUserAspect.isDelTemp){
//重新绘画进度条
drawProgress($("#progressbar"), last.endTime);
}
else{
console.log("-----------")
console.log(last.endTime - last.startTime, teaAspect.totalTime)
//重新绘画进度条
drawProgress($("#tempProgressbar"), last.endTime - last.startTime, teaAspect.totalTime);
drawProgress($("#progressbar"), last.startTime - 0, teaAspect.totalTime);
$("#backBtn").show();
if(!stuUserAspect.firstClickCancel){
$(".back-tips").hide();
}
else{
$(".back-tips").show();
}
}
if(!stuUserAspect.firstClickRecorder){
$(".recorder-tips").hide();
}
}
const video = $("#video")[0];
if (video) {
video.currentTime = videoCurTime;
}
$("#exercise").show();
}
}
}
}
......@@ -219,9 +340,9 @@ function bindRecorderBtn() {
let newValue = parseFloat(progressValue) + parseFloat(tempProgressValue);
console.log(newValue);
//绘制滚动条
drawProgress( $("#progressbar"), newValue);
drawProgress($("#progressbar"), newValue);
drawProgress( $("#tempProgressbar"), 0);
drawProgress($("#tempProgressbar"), 0);
control.removeClass("recorder-play");
......@@ -255,7 +376,7 @@ function bindRecorderBtn() {
if (started) {
clearInterval(started);
}
cw.stopRecord(0, function(data){
cw.stopRecord(0, function (data) {
//录完后,显示撤销按钮
if (stuUserAspect.firstClickCancel) {
......@@ -269,15 +390,17 @@ function bindRecorderBtn() {
$("#submitBtn").show();
//将当前时间保存到切片中
stuUserAspect.curTime = curTime;
stuUserAspect.videoCurTime = curTime;
stuUserAspect.isPause = true;
stuUserAspect.recorderArr.push(tempRecorder);
stuUserAspect.isDelTemp = false;
//保存切片
cw.storeAspect(stuUserAspect);
})
}
......@@ -290,7 +413,7 @@ function bindPressAnimation(_dom, cssName = null) {
let css = 'press';
if(cssName){
if (cssName) {
css = cssName;
}
......@@ -326,14 +449,7 @@ function getTimeStr(time) {
function bindSpeedBtn() {
$.each($("#exercise").find(".speed-choice"), function (i, item) {
let speed = $(item).attr("data-speed");
if (speed == stuUserAspect.speed) {
$(item).addClass('speed-active');
return;
}
});
setSpeed(stuUserAspect.speed);
$(".speed-choice").click(function () {
......@@ -356,6 +472,21 @@ function bindSpeedBtn() {
});
}
function setSpeed(speed) {
$.each($("#exercise").find(".speed-choice"), function (i, item) {
let value = $(item).attr("data-speed");
if (value == speed) {
$(item).addClass('speed-active');
const video = $("#video")[0];
if (video) {
video.playbackRate = speed;
}
return;
}
});
}
function bindSentBtn() {
bindPressAnimation($(".sent-btn"));
......@@ -377,11 +508,12 @@ function initListener() {
} else {
stuUserAspect.currentWordIndex = data.currentWordIndex;
const bindData = data.bindData;
$(".hello-container").hide();
$("#exercise").show();
cw.storeAspect(stuUserAspect);
}
next();
});
......@@ -409,19 +541,28 @@ function bindBackBtn() {
$("#curTime").append(getTimeStr(video.currentTime));
//重新绘画进度条
drawProgress($("#tempProgressbar"), 0);
stuUserAspect.isDelTemp = true;
}
if(stuUserAspect.recorderArr.length == 0){
$("#submitBtn").hide();
}
//保存切片
cw.storeAspect(stuUserAspect);
$(this).hide();
})
}
function bindSubmitBtn(){
function bindSubmitBtn() {
const submitBtn = $("#submitBtn");
bindPressAnimation(submitBtn);
submitBtn.click(function(){
submitBtn.click(function () {
$("#submitDialog").modal('show');
});
}
......@@ -449,12 +590,21 @@ function refreshProgress() {
}, 100);
}
function drawProgress(progressbar, duration) {
function drawProgress(progressbar, duration, totalTime) {
const video = $("#video")[0];
let totalTime = video.duration;
let tempTotalTime = totalTime;
//加载成功
if(video && video.readyState > 0 ){
tempTotalTime = video.duration;
}
let progress = 0;
let progress = Math.floor(duration / totalTime * 100 * 100) / 100;
if(tempTotalTime && tempTotalTime != 0){
progress = Math.floor(duration / tempTotalTime * 100 * 100) / 100;
}
progressbar.attr('data-value', progress);
......@@ -464,48 +614,83 @@ function drawProgress(progressbar, duration) {
/**
* 继续录制操作
*/
function bindContinueBtnBtn(){
function bindContinueBtnBtn() {
const continueBtn = $("#continueBtn");
bindPressAnimation(continueBtn, 'submit-press');
continueBtn.click(function(){
continueBtn.click(function () {
$("#submitDialog").modal('hide');
})
}
/**
* 确认提交事件
*/
function bindConfirmBtn(){
function bindConfirmBtn() {
const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.on('click', function(){
confirmBtn.on('click', function () {
$("#submitDialog").modal('hide');
$("#progressModal").modal('show');
setTimeout(() => {
let recorderArr = stuUserAspect.recorderArr;
let text = "";
$("#exercise").hide();
for (let i = 0; i < recorderArr.length; ++i) {
$("#result").show();
let data = JSON.parse(recorderArr[i].data);
text += " " + data.text;
}
$("#progressModal").modal('hide');
cw.greadPapersForText(text, function (data) {
let recorderArr = stuUserAspect.recorderArr;
let text = "";
stuUserAspect.recorderScoreObj = {
result:data,
text: text
};
stuUserAspect.isEnd = true;
for(let i = 0; i < recorderArr.length; ++ i){
//保存切片
cw.storeAspect(stuUserAspect);
let data = JSON.parse(recorderArr[i].data);
text += " " + data.text;
}
cw.greadPapersForText(text, function(data){
console.log(data);
});
//画结束界面
drawResult(data, text);
});
}, 3000);
})
}
function drawResult(data, text) {
$("#exercise").hide();
$("#result").show();
$("#progressModal").modal('hide');
console.log(data);
let temp = JSON.parse(data);
let score = temp.overall;
let imgSrc = "";
if (score >= 80) {
imgSrc = "../lib/images/excellent.png";
}
else if (score >= 60) {
imgSrc = "../lib/images/great.png";
}
else {
imgSrc = "../lib/images/nicetry.png";
}
$(".medal").attr('src', imgSrc);
$("#score").empty().append(score);
$("#recorder-text").empty().append(text);
$("#evaluation").empty().append(temp.evaluate);
}
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