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

feat:完成模板开发

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