EBook/EBook.Web/Scripts/book.js

//播放音频图片地址
var PicInfo = {
    yaoshiImgUrl: "yaoshi.png",
    recordPlayImgUrl: "play.png",
    recordPauseImgUrl: "pause.png",
    audioPlayImgUrl: "dynaiselaba.gif",
    audioPauseImgUrl: "dynaiselaba.png"
}

//显示、隐藏答案
function showHideAnswer(flag) {
    if (flag) {
        $(".underlineContent").show();
    }
    else {
        $(".underlineContent").hide();
    }
}

//显示、隐藏钥匙及答案 isShowYX:显示和隐藏钥匙，isShowAS：显示和隐藏答案
function showHideAnswerEx(isShowYX, isShowAS) {
    if (isShowYX) {
        $(".yaoshi").show();
    }
    else {
        $(".yaoshi").hide();
    }

    if (isShowAS) {
        $.each($(".underlineContent"), function (index, item) {
            $(item).html($(item).attr("data-text"));
        });
    }
    else {
        $.each($(".underlineContent"), function (index, item) {
            var count = 0;
            var text = $(item).attr("data-text");
            $(item).html(text.toString().replace(/./g, function (match, group) {
                //最多替换30个
                if (count < 30) {
                    count++;
                    return "&nbsp;";
                }
            }));
        });
    }
}

//原文 页面加载完，绑定事件
function bindBookTextEvent() {
    //显示/隐藏习题答案
    $(".yaoshi").on("click", function () {
        var curDisplay = $(this).nextUntil(".yaoshi").find(".underlineContent").eq(0).css("display");
        if (curDisplay == "undefined" || curDisplay == undefined) return;
        if (curDisplay == "none") {
            $(this).nextUntil(".yaoshi").find(".underlineContent").show()
        } else {
            $(this).nextUntil(".yaoshi").find(".underlineContent").hide();
        }
    });
    //处理答题点
    $.each($(".underlineContent"), function (index, item) {
        $(item).attr("data-text", $(item).html());
    });
    //给音频绑定一个ID
    $.each($(".audioImg"), function (index, item) {
        $(item).attr('audio-id', index);
    });
    //点击喇叭事件,音频播放
    $(".audioImg").on("click", function () {
        audioPlayClick(this);
    });
    //点击播放事件,视频播放
    $(".videoImg").on("click", function () {
        var curHtml = $(this).parent().find(".videoUrl").html();
        var curAlt = $(this).attr("alt");//播放视频地址
        //移动端添加外部处理
    });
    //处理表格样式
    $("td").attr("style", "");
    //处理文章标题的样式
    $("p").eq(2).addClass("p-title-top");
}

//主体课文 页面加载完，绑定事件
function bindCoursewareEvent() {
    //给每个答题点加上ID
    $.each($(".yaoshi"), function (index, item) {
        $(item).attr('answer-id', index);
        $(item).attr("src", PicInfo.yaoshiImgUrl);//移动端要根据本地 喇叭 路径替换
    });
    //给音频绑定一个ID
    $.each($(".audioImg"), function (index, item) {
        $(item).attr('audio-id', index);
        $(item).attr("src", PicInfo.audioPauseImgUrl);//移动端要根据本地 喇叭 路径替换
    });
    //显示/隐藏习题答案
    $(".yaoshi").on("click", function () {
        if ($(this).data("status") == "0") {
            $(this).data("status", "1");
            $(this).nextUntil(".yaoshi").filter(".underlineContent").show();
        }
        else {
            $(this).data("status", "0");
            $(this).nextUntil(".yaoshi").filter(".underlineContent").hide();
        }
    });
    //点击喇叭事件,音频播放
    $(".audioImg").on("click", function () {
        audioPlayClick(this);
    });
    //点击播放事件,视频播放
    $(".videoImg").on("click", function () {
        var curHtml = $(this).parent().find(".videoUrl").html();
        var curAlt = $(this).attr("alt");//播放视频地址
        //移动端添加外部处理
    });
    //处理表格样式
    $("td").attr("style", "");
    //处理文章标题的样式
    $("p").eq(2).addClass("p-title-top");
}

//学生端 处理作答区域
var answerData = new Array();
function handleAnswerRange() {
    //规范文本格式
    var answerId = "";
    var tempJson = new Array();
    $.each($(".yaoshi").nextUntil(".yaoshi").filter(".underline"), function (index, item) {
        tempId = $(item).prevAll(".yaoshi").attr("answer-id");
        //记录上一次的ID
        if (tempId == undefined) {
            tempId = answerId;
        }
        else {
            answerId = tempId;
        }

        var prev = $(item).prev();
        if (prev.length == 0 || $(prev).attr("class") != "tag-span") {
            if ($("span[answer-id='" + tempId + "']").length == 0) {
                $(item).prop("outerHTML", "<span answer-id='" + tempId + "' class='tag-span'>_</span>");
            }
        }
        $(item).remove();
    });

    //提取参考答案并规范文本格式
    answerId = "";
    $.each($(".yaoshi").nextUntil(".yaoshi").filter(".underlineContent"), function (index, item) {
        var info = new Object();
        info.answerId = $(item).prevAll(".yaoshi").attr("answer-id");
        //记录上一次的ID
        if (info.answerId == undefined) {
            info.answerId = answerId;
        }
        else {
            answerId = info.answerId;
        }
        
        info.answerText = $(item).text();
        tempJson.push(info);

        var prev = $(item).prev();
        if (prev.length == 0 || $(prev).attr("class") != "tag-span") {
            //替换答案
            $(item).prop("outerHTML", "<span answer-id='" + info.answerId + "' class='tag-span'>_</span>");
        }
        else {
            $(item).remove();
        }
    });

    //合并参考答案数据
    var tempid = "";
    var temptext = "";
    for (var i = 0; i < tempJson.length; i++) {
        if (tempid == tempJson[i].answerId) {
            temptext = temptext + tempJson[i].answerText;
        }
        else {
            if (tempid != "") {
                var info = new Object();
                info.answerId = tempid;
                info.answerText = temptext;
                answerData.push(info);
                //重置
                tempid = "";
                temptext = "";
            }

            tempid = tempJson[i].answerId;
            temptext = tempJson[i].answerText;
            //最后一个存入
            if (i == tempJson.length - 1) {
                var info = new Object();
                info.answerId = tempid;
                info.answerText = temptext;
                answerData.push(info);
            }
        }
    }

    //补全答题点
    var Num = 0;
    if (answerData.length > 0) {
        Num = Number.parseInt(answerData[answerData.length-1].answerId);
        for (var i = 0; i < Num; i++) {
            var index = Number(answerData[i].answerId) - i;
            for (var j = 0; j < index; j++) {
                var info = new Object();
                info.answerId = (i+j).toString();
                info.answerText = "";
                answerData.splice(i, 0, info);
            }
        }
    }

    //添加答题点的点击UI及交互
    $.each($(".tag-span"), function (index, item) {
        var answerText = "";
        var answerid = $(item).attr('answer-id');
        
        for (var i = 0; i < answerData.length; i++) {
            if (answerid == answerData[i].answerId) {
                answerText = answerData[i].answerText;
                break;
            }
        }
        $(item).prop("outerHTML", "<buttom answer-id='" + answerid + "' answer-text='" + answerText + "' class='answertext'>点击此处作答</buttom>");
        //删除钥匙节点
        var prev = $("img[answer-id='" + answerid + "']");
        if (prev.length > 0) {
            $(prev).remove();
        }
    });

    //添加点击事件
    $(".answertext").on("click", function () {
        var curObj = new Object();
        curObj.Id = $(this).attr("answer-id");//答题点ID
        curObj.Text = $(this).attr("answer-text");//用户作答内容
        curObj.Score = $(this).attr("answer-score");//作答评分
        curObj.AnsText = $(this).attr("answer-anstext");//参考答案
        curObj.Comment = $(this).attr("answer-comment");//评语

        //已作答，弹出作答答案
        if ($(this).data("ans-status") == "1") {
            //移动端添加外部处理
            alert($(this).text());
        }
        else {
            //移动端添加外部处理，弹出作答操作

        }
    });
}

//接收学生的作答
function reviewAnswer(answerJson) {
    //测试数据
    //answerJson = "{\"AudioLength\":0,\"Id\":\"2\",\"Text\":\"i am how i know\",\"Type\":1}";
    //answerJson = "{\"AudioLength\":3,\"AudioUrl\":\"http://172.16.41.241:10103/http_TBookEditor51/exerciseAnswerAudio/2020-11-06_09-31-19.wav\",\"Id\":\"4\",\"Text\":\"i know how i know \",\"Type\":3}";
    //answerJson = "{\"AudioLength\":0,\"AudioUrl\":\"\",\"Id\":\"15\",\"Text\":\"llll\",\"Type\":1}";
    
    if (answerJson != "" && answerJson) {
        var answerObj = JSON.parse(answerJson);
        var selectElement = $(".answertext[answer-id='" + answerObj.Id + "']");
        var audioElement = $(".btn-play[answer-id='" + answerObj.Id + "']>span");
        //是否是音频作答
        if ((answerObj.Type == 3 || answerObj.Type == 4) && answerObj.AudioUrl != "") {
            answerObj.Text = answerObj.Text == "" ? "" : "(" + answerObj.Text + ")";
            $(selectElement).text(answerObj.Text);

            //是否之前存在作答音频
            if (audioElement.length > 0) {
                $(audioElement).text("作答音频（" + answerObj.AudioLength + "s）");
                $(audioElement).parent().attr("answer-url", answerObj.AudioUrl);
            }
            else {
                var divHtml = document.createElement("div");
                divHtml.className = "btn-play";
                divHtml.innerHTML = "<img src='" + PicInfo.recordPlayImgUrl + "'/><span>作答音频（" + answerObj.AudioLength + "s）</span>";
                divHtml.setAttribute("answer-id", answerObj.Id);
                divHtml.setAttribute("answer-url", answerObj.AudioUrl);
                divHtml.setAttribute("play-status", "0");

                //增加节点
                $(selectElement).before(divHtml);
                //独立绑定事件
                $(selectElement).prev().children("img").on("click", function () {
                    recordAudioClick(this, answerObj.Id, answerObj.AudioUrl);
                });
                $(selectElement).prev().children("span").on("click", function () {
                    //移动端的修改
                    alert(answerObj.AudioUrl);
                });
            }
        }
        else {
            answerObj.Text = answerObj.Text == "" ? "点击此处作答" : answerObj.Text;
            $(selectElement).text(answerObj.Text);
            //之前作答存在音频，但是现在没有音频传入，要删除音频节点
            if (audioElement.length > 0) {
                $(".btn-play[answer-id='" + answerObj.Id + "']").unbind('click');
                $(".btn-play[answer-id='" + answerObj.Id + "']").remove();
            }
        }
    }
}

//提交，获取所有作答答案及参考答案
function getAllAnswer() {
    //alert(JSON.stringify(answerData));
    //处理作答及参考答案回显
    $.each($(".answertext"), function (index, item) {
        //$(item).unbind('click');//取消点击绑定事件
        //var answerid = $(item).attr('answer-id');//答题点ID
        var mytext = $(item).text();//我的答案
        //var answertext = $(item).attr("answer-text");//参考答案

        if (mytext == "点击此处作答") {
            mytext = "未作答";
            $(item).text(mytext);
        }

        //var ansDiv = document.createElement("label");
        //ansDiv.className = "my-answer";
        //ansDiv.innerHTML = "<span>【我的答案】</span>";

        //var prev = $(item).prev();
        //if (prev.length > 0 && $(prev).attr("class") == "btn-play") {
        //    $(prev).before(ansDiv);

        //    var ansText = document.createElement("label");
        //    ansText.className = "my-answer";
        //    ansText.innerHTML = "<span>" + mytext + "</span>";
        //    $(item).after(ansText);
        //}
        //else {
        //    ansDiv.innerHTML = ansDiv.innerHTML + mytext;
        //    $(item).before(ansDiv);
        //}

        //var textDiv = document.createElement("label");
        //textDiv.className = "text-answer";
        //textDiv.innerHTML = "【参考答案】" + answertext;

        //$(item).remove();
    });

    $(".answertext").unbind('click');//取消点击绑定事件
    $(".btn-play>span").unbind('click');//取消点击绑定事件

    return answerData;
}

//回填所有答案，answerJson：所有作答及参考答案List，statusType：0-可作答，1-已提交，2-查看评阅
function backupAllAnswer(answerJson, statusType) {
    //测试数据
    //isSubmit = true;
    //answerJson = "[{\"AudioLength\":11,\"AudioUrl\":\"http://172.16.41.241:10103/http_TBookEditor51/exerciseAnswerAudio/2020-11-10_11-18-54.mp3\",\"Id\":\"2\",\"Text\":\"\",\"Type\":3}]";

    if (answerJson != "" && answerJson) {
        var answerList = JSON.parse(answerJson);
        answerList = JSON.parse(answerList);
        //获取Dom一个个回填
        $.each($(".answertext"), function (index, item) {
            //提交直接还原作答现场
            var mytext = answerList[index].Text;//我的答案

            //可作答状态，作答还原
            if (statusType == 0) {
                //已作答过，还原作答，增加作答后的UI节点
                if ((answerList[index].Type == 3 || answerList[index].Type == 4) && answerList[index].AudioUrl != "") {
                    mytext = mytext == "" ? mytext : "(" + mytext + ")";
                    $(item).text(mytext);

                    //添加音频节点
                    var divHtml = document.createElement("div");
                    divHtml.className = "btn-play";
                    divHtml.innerHTML = "<img src='" + PicInfo.recordPlayImgUrl + "'/><span>作答音频（" + answerList[index].AudioLength + "s）</span>";
                    divHtml.setAttribute("answer-id", answerList[index].Id);
                    divHtml.setAttribute("answer-url", answerList[index].AudioUrl);
                    divHtml.setAttribute("play-status", "0");
                    //增加节点
                    $(item).before(divHtml);
                    //独立绑定事件
                    $(item).prev().children("img").on("click", function () {
                        recordAudioClick(this, answerList[index].Id, answerList[index].AudioUrl);
                    });
                    $(item).prev().children("span").on("click", function () {
                        //移动端的修改
                    });
                }
                else {
                    //文本作答
                    mytext = mytext == "" ? "点击此处作答" : mytext;//我的答案
                    $(item).text(mytext);
                }
            }
            //已提交，作答还原
            if (statusType == 1) {
                $(item).unbind('click');//取消点击绑定事件
                //添加音频控制
                if ((answerList[index].Type == 3 || answerList[index].Type == 4) && answerList[index].AudioUrl != "") {
                    mytext = mytext == "" ? mytext : "(" + mytext + ")";
                    $(item).text(mytext);

                    //添加音频节点
                    var divHtml = document.createElement("div");
                    divHtml.className = "btn-play";
                    divHtml.innerHTML = "<img src='" + PicInfo.recordPlayImgUrl + "'/><span>作答音频（" + answerList[index].AudioLength + "s）</span>";
                    divHtml.setAttribute("answer-id", answerList[index].Id);
                    divHtml.setAttribute("answer-url", answerList[index].AudioUrl);
                    divHtml.setAttribute("play-status", "0");
                    //增加节点
                    $(item).before(divHtml);
                    //独立绑定事件
                    $(item).prev().children("img").on("click", function () {
                        recordAudioClick(this, answerList[index].Id, answerList[index].AudioUrl);
                    });
                }
                else {
                    //文本作答
                    if (mytext == "") {
                        mytext = "未作答";
                        $(item).addClass("no-answer");
                    }
                    $(item).text(mytext);
                }
            }
            //已评阅，查看评阅详情
            if (statusType == 2) {
                //添加音频控制
                if ((answerList[index].Type == 3 || answerList[index].Type == 4) && answerList[index].AudioUrl != "") {
                    mytext = mytext == "" ? mytext : "(" + mytext + ")";
                    $(item).text(mytext);

                    //添加音频节点
                    var divHtml = document.createElement("div");
                    divHtml.className = "btn-play";
                    divHtml.innerHTML = "<img src='" + PicInfo.recordPlayImgUrl + "'/><span>作答音频（" + answerList[index].AudioLength + "s）</span>";
                    divHtml.setAttribute("answer-id", answerList[index].Id);
                    divHtml.setAttribute("answer-url", answerList[index].AudioUrl);
                    divHtml.setAttribute("play-status", "0");
                    //增加节点
                    $(item).before(divHtml);
                    //独立绑定事件
                    $(item).prev().children("img").on("click", function () {
                        recordAudioClick(this, answerList[index].Id, answerList[index].AudioUrl);
                    });
                    $(item).prev().children("span").on("click", function () {
                        //移动端的修改
                    });
                }
                else {
                    //文本作答
                    if (mytext == "") {
                        mytext = "未作答";
                        $(item).addClass("no-answer");
                    }
                    $(item).text(mytext);
                }
            }
        });
    }
}

//老师评阅学生作答
function reviewStuAnswer(answerJson) {
    if (answerJson != "" && answerJson) {
        var answerObj = JSON.parse(answerJson);
        var selectElement = $(".answertext[answer-id='" + answerObj.Id + "']");

        $(selectElement).attr("answer-text", answerObj.Text);//用户作答内容
        $(selectElement).attr("answer-score", answerObj.Score);//作答评分
        $(selectElement).attr("answer-anstext ", answerObj.AnsText);//参考答案
        $(selectElement).attr("answer-comment", answerObj.Comment);//评语
    }
}

//回填所有评阅信息，answerJson：所有作答及参考答案评阅信息List
function backupAllReview(answerJson) {
    //测试数据
    //answerJson = "[{\"AudioLength\":11,\"AudioUrl\":\"http://172.16.41.241:10103/http_TBookEditor51/exerciseAnswerAudio/2020-11-10_11-18-54.mp3\",\"Id\":\"2\",\"Text\":\"\",\"Type\":3}]";

    if (answerJson != "" && answerJson) {
        var answerList = JSON.parse(answerJson);
        answerList = JSON.parse(answerList);
        //获取Dom一个个回填
        $.each($(".answertext"), function (index, item) {
            //$(item).attr("answer-id", answerList[index].Id);//答题点ID
            $(item).attr("answer-text", answerList[index].Text);//用户作答内容
            $(item).attr("answer-score", answerList[index].Score);//作答评分
            $(item).attr("answer-anstext ", answerList[index].AnsText);//参考答案
            $(item).attr("answer-comment", answerList[index].Comment);//评语

            //提交直接还原作答现场
            var mytext = answerList[index].Text;//我的答案
            if ((answerList[index].Type == 3 || answerList[index].Type == 4) && answerList[index].AudioUrl != "") {
                mytext = mytext == "" ? mytext : "(" + mytext + ")";
                $(item).text(mytext);

                //添加音频节点
                var divHtml = document.createElement("div");
                divHtml.className = "btn-play";
                divHtml.innerHTML = "<img src='" + PicInfo.recordPlayImgUrl + "'/><span>作答音频（" + answerList[index].AudioLength + "s）</span>";
                divHtml.setAttribute("answer-id", answerList[index].Id);
                divHtml.setAttribute("answer-url", answerList[index].AudioUrl);
                divHtml.setAttribute("play-status", "0");
                //增加节点
                $(item).before(divHtml);
                //独立绑定事件
                $(item).prev().children("img").on("click", function () {
                    recordAudioClick(this, answerList[index].Id, answerList[index].AudioUrl);
                });
                $(item).prev().children("span").on("click", function () {
                    //移动端的修改
                    alert(JSON.stringify(answerList[index]));
                });
            }
            else {
                if (mytext == "") {
                    mytext = "未作答";
                    $(item).addClass("no-answer");
                }
                $(item).text(mytext);
            }
        });
    }
}

//处理播放录音，answerid：答题点ID，isPlay：是否播放（0-暂停，1-播放）
function playRecordAudio(answerid, isPlay) {
    //获取其他正在播放的音频
    var playing = $(".btn-play[answer-id='" + answerid + "']");
    if (playing.length > 0) {
        if (isPlay == "1") {
            $(playing).attr("play-status", "1");
            $(playing).find("img").attr("src", PicInfo.recordPauseImgUrl);//移动端要根据本地路径替换
        }
        else {
            $(playing).attr("play-status", "0");
            $(playing).find("img").attr("src", PicInfo.recordPlayImgUrl);//移动端要根据本地路径替换
        }
    }
}

//暂停播放原文音频
function pauseTextAudio(audioid) {
    //获取其他正在播放的音频
    var playing = $(".audioImg[audio-id='" + audioid + "']");
    if (playing.length > 0) {
        $(playing).attr("play-status", "0");
        $(playing).attr("src", PicInfo.audioPauseImgUrl);//移动端要根据本地 喇叭 路径替换
    }
}

//原文音频播放按钮点击事件
function audioPlayClick(myobj) {
    var curHtml = $(myobj).parent().find(".audioUrl").html();
    var curAlt = $(myobj).attr("alt");
    //处理当前按钮的状
    if ($(myobj).attr("play-status") == "1") {
        $(myobj).attr("play-status", "0");
        $(myobj).attr("src", PicInfo.audioPauseImgUrl);//移动端要根据本地 喇叭 路径替换
    }
    else {
        //停止其他作答音频播放
        var isRecordPlaying = $(".btn-play[play-status='1']");
        if (isRecordPlaying.length > 0) {
            $(isRecordPlaying).attr("play-status", "0");
            $(isRecordPlaying).find("img").attr("src", PicInfo.recordPlayImgUrl);//移动端要根据本地路径替换
        }
        //停止其他原文音频播放
        var audioPlaying = $(".audioImg[play-status='1']");
        if (audioPlaying.length > 0) {
            $(audioPlaying).attr("play-status", "0");
            $(audioPlaying).attr("src", PicInfo.audioPauseImgUrl);//移动端要根据本地 喇叭 路径替换
        }
        //设置播放状态
        $(myobj).attr("play-status", "1");
        $(myobj).attr("src", PicInfo.audioPlayImgUrl);//移动端要根据本地 喇叭 路径替换
    }

    var info = new Object();
    info.Id = $(myobj).attr("audio-id");
    info.AudioUrl = curAlt;
    //移动端添加外部处理
    alert(JSON.stringify(info));
}

//作答录音播放按钮点击事件
function recordAudioClick(myobj, id, url) {
    //处理当前按钮的状态
    if ($(myobj).parent().attr("play-status") == "0") {
        //停止其他作答音频播放
        var isRecordPlaying = $(".btn-play[play-status='1']");
        if (isRecordPlaying.length > 0) {
            $(isRecordPlaying).attr("play-status", "0");
            $(isRecordPlaying).find("img").attr("src", PicInfo.recordPauseImgUrl);//移动端要根据本地路径替换
        }
        //停止其他原文音频播放
        var audioPlaying = $(".audioImg[play-status='1']");
        if (audioPlaying.length > 0) {
            $(audioPlaying).attr("play-status", "0");
            $(audioPlaying).attr("src", PicInfo.audioPauseImgUrl);//移动端要根据本地 喇叭 路径替换
        }
        //设置播放状态
        $(myobj).parent().attr("play-status", "1");
        $(myobj).attr("src", PicInfo.recordPauseImgUrl);//移动端要根据本地路径替换
    }
    else {
        $(myobj).parent().attr("play-status", "0");
        $(myobj).attr("src", PicInfo.recordPlayImgUrl);//移动端要根据本地路径替换
    }

    //移动端添加外部处理，播放录音
    var info = new Object();
    info.Id = id;
    info.AudioUrl = url;
    //移动端添加外部处理，播放录音
    alert(JSON.stringify(info));
}