|
|
@@ -6,15 +6,34 @@
|
|
|
<div class="videoBox">
|
|
|
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
|
|
|
:options="playerO" v-if="this.json.video" @timeupdate="onPlayerTimeupdate($event)"></video-player>
|
|
|
+
|
|
|
+ <div class="chooseNodeBox">
|
|
|
+ <div class="chooseNodeItem" v-for="(item,index) in json.setting" @click.stop="chooseNode(item)">
|
|
|
+ <!-- <div v-if="userChooseAnswer.find(i=>i.testJson[0].teststitle==item.tool.toolJson.testJson[0].teststitle)" class="el-icon-circle-check"></div> -->
|
|
|
+ <div v-if="userChooseAnswer[index]" class="el-icon-circle-check"></div>
|
|
|
+ <div v-else>{{ index+1 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="accuracy" v-if="accuracyList.length>0">
|
|
|
+ <span>准确率：</span>
|
|
|
+ <div class="accuracyItem" v-for="(item,index) in accuracyList">
|
|
|
+ <div class="accuracyTitle">第 {{ index+1 }} 题：</div>
|
|
|
+ <div class="accuracyValue">正确率{{item}}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="close">关 闭</el-button>
|
|
|
+ <el-button @click.stop="submitBtn" type="primary">确认</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
<choiceD
|
|
|
+ ref="choiceD"
|
|
|
:dialogVisibleChoice.sync="dialogVisibleChoice"
|
|
|
- :json="toolJson"
|
|
|
+ :json="toolJson"
|
|
|
+ :userChooseAnswer:="userChooseAnswer"
|
|
|
@play="gotoPlay"
|
|
|
:userid="userid"
|
|
|
:id="id"
|
|
|
@@ -22,6 +41,8 @@
|
|
|
:taskCount="taskCount"
|
|
|
:toolindex="toolindex"
|
|
|
:videoTime="stopTime"
|
|
|
+ :videoType="videoType"
|
|
|
+ @success="choiceAnswer"
|
|
|
></choiceD>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -30,6 +51,7 @@
|
|
|
import choiceD from '../Choice/index.vue'
|
|
|
|
|
|
export default {
|
|
|
+ emits:['success'],
|
|
|
props: {
|
|
|
dialogVisibleVideo: {
|
|
|
type: Boolean,
|
|
|
@@ -45,14 +67,18 @@ export default {
|
|
|
type: String,
|
|
|
},
|
|
|
courseType: {
|
|
|
- type: String,
|
|
|
+ type: String || Number,
|
|
|
},
|
|
|
taskCount: {
|
|
|
type: Number,
|
|
|
},
|
|
|
toolindex: {
|
|
|
type: Number,
|
|
|
- }
|
|
|
+ },
|
|
|
+ videoType:{
|
|
|
+ type:Number,
|
|
|
+ default:0
|
|
|
+ }
|
|
|
},
|
|
|
components: {
|
|
|
choiceD,
|
|
|
@@ -60,6 +86,8 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
json: {},
|
|
|
+ userChooseAnswer:[],
|
|
|
+ accuracyList:[],
|
|
|
playerOptions: {
|
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
@@ -98,12 +126,15 @@ export default {
|
|
|
if (this.json.video) {
|
|
|
this.playerO = JSON.parse(JSON.stringify(this.playerOptions));
|
|
|
this.playerO.sources[0].src = this.json.video
|
|
|
+ this.videoType==1?this.userChooseAnswer = this.json.setting.map(i=>i.tool.toolJson):[];
|
|
|
+ this.getAccuracyList();
|
|
|
this.$nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
this.videoTime = Math.round(this.$refs['videoPlayer'].player.cache_.duration)
|
|
|
}, 500)
|
|
|
})
|
|
|
}
|
|
|
+ if(!newValue)this.json = [];
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -124,6 +155,10 @@ export default {
|
|
|
if (this.json.setting[i].tool.tool == 45) {
|
|
|
this.dialogVisibleChoice = true
|
|
|
this.toolJson = this.json.setting[i].tool.toolJson
|
|
|
+ let answerIndex = this.json.setting.findIndex(i=>JSON.stringify(i.tool.toolJson)==JSON.stringify(this.toolJson))
|
|
|
+ if(answerIndex!=-1 && this.userChooseAnswer[answerIndex]){
|
|
|
+ this.$refs['choiceD'].setUserAnswer(this.userChooseAnswer[answerIndex].testJson.map(i=>i.answer2))
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -134,6 +169,92 @@ export default {
|
|
|
this.$refs['videoPlayer'].player.currentTime(this.stopTime + 1)
|
|
|
this.$refs['videoPlayer'].player.play()
|
|
|
},
|
|
|
+ // 点击了节点
|
|
|
+ chooseNode(setting){
|
|
|
+ this.$refs['videoPlayer'].player.currentTime(setting.time)
|
|
|
+ this.stopTime = setting.time;
|
|
|
+ this.$refs['videoPlayer'].player.pause()
|
|
|
+ if (setting.tool.tool == 45) {
|
|
|
+ this.dialogVisibleChoice = true
|
|
|
+ this.toolJson = setting.tool.toolJson
|
|
|
+ let answerIndex = this.json.setting.findIndex(i=>JSON.stringify(i.tool.toolJson)==JSON.stringify(this.toolJson))
|
|
|
+ if(answerIndex!=-1 && this.userChooseAnswer[answerIndex]){
|
|
|
+ this.$refs['choiceD'].setUserAnswer(this.userChooseAnswer[answerIndex].testJson.map(i=>i.answer2))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择答案并且确定
|
|
|
+ choiceAnswer(data){
|
|
|
+ let answer = data.answer;
|
|
|
+ let testJson = data.json;
|
|
|
+ let changeIndex = this.json.setting.findIndex(i=>JSON.stringify(i.tool.toolJson)==JSON.stringify(testJson))
|
|
|
+ if(changeIndex!=-1){
|
|
|
+ testJson.testJson.forEach((i,index)=>{
|
|
|
+ i.answer2 = answer[index];
|
|
|
+ })
|
|
|
+ this.userChooseAnswer[changeIndex] = testJson;
|
|
|
+ }
|
|
|
+ this.getAccuracyList();
|
|
|
+ },
|
|
|
+ getAccuracyList(){
|
|
|
+ if(this.userChooseAnswer.length<0)return;
|
|
|
+ let score = [];
|
|
|
+ this.json.setting.forEach((item,index)=>{
|
|
|
+ if(this.userChooseAnswer[index]){
|
|
|
+ let count = 0;
|
|
|
+ let type = item.tool.toolJson.testJson.map(i=>i.type)
|
|
|
+ let userAnswer = this.userChooseAnswer[index].testJson.map(i=>i.answer2);
|
|
|
+ let rightAnswer = this.userChooseAnswer[index].testJson.map(i=>i.answer);
|
|
|
+ let num = item.tool.toolJson.testJson.length;
|
|
|
+
|
|
|
+ userAnswer.forEach((item2,index2)=>{
|
|
|
+ if(type[index2]=='2'){
|
|
|
+ if(JSON.stringify(userAnswer[index2].sort((a,b)=>a-b))==JSON.stringify(rightAnswer[index2].sort((a,b)=>a-b))){
|
|
|
+ count++
|
|
|
+ }
|
|
|
+ }else if(type[index2]=='1'){
|
|
|
+ if(userAnswer[index2]==rightAnswer[index2]){
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ score.push((count/num).toFixed(2)*100)
|
|
|
+ }else{
|
|
|
+ score.push(0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.accuracyList = score;
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ submitBtn(){
|
|
|
+ if(this.videoType==1)return this.close();
|
|
|
+ if(this.userChooseAnswer<this.json.setting.length)return this.$message.info("请答题");
|
|
|
+ let data = this.json;
|
|
|
+ data.setting.forEach((i,index)=>i.tool.toolJson = this.userChooseAnswer[index])
|
|
|
+ let params = [{
|
|
|
+ uid:this.userid,
|
|
|
+ cid:this.id,
|
|
|
+ stage:this.courseType,
|
|
|
+ task:this.taskCount,
|
|
|
+ tool:this.toolindex,
|
|
|
+ content:encodeURIComponent(JSON.stringify(data)),
|
|
|
+ type:14,
|
|
|
+ atool:62,
|
|
|
+ text:"",
|
|
|
+ }]
|
|
|
+ // return;
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addCourseWorks5", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success("提交成功");
|
|
|
+ this.close();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("提交失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.json = JSON.parse(JSON.stringify(this.videoJson));
|
|
|
@@ -185,6 +306,35 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+.chooseNodeBox{
|
|
|
+ width: auto;
|
|
|
+ height:50px;
|
|
|
+ position:absolute;
|
|
|
+ bottom:45px;
|
|
|
+ left:50%;
|
|
|
+ transform:translateX(-50%);
|
|
|
+ display:flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: none;
|
|
|
+}
|
|
|
+
|
|
|
+.chooseNodeBox>.chooseNodeItem{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: black;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 1.5em;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
.videoBox>.content {
|
|
|
/* position: absolute; */
|
|
|
line-height: 600px;
|
|
|
@@ -202,4 +352,52 @@ export default {
|
|
|
padding: 0 !important;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
+.accuracy{
|
|
|
+ width: 300px;
|
|
|
+ height: auto;
|
|
|
+ background-color: #d4dde1;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.accuracy>span{
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.accuracy>.accuracyItem{
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.accuracyItem>.accuracyTitle{
|
|
|
+ width: 120px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size:1.3em;
|
|
|
+ background-color: #2c2f3b;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.accuracyItem>.accuracyValue{
|
|
|
+ width:120px;
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border:solid 1px #0061FF;
|
|
|
+ color:#0061FF;
|
|
|
+}
|
|
|
</style>
|
SanHQin