Skip to content

E
eduline
Commit b5d74ba8 by 陈超
Options

A

parent be7a4f52
Showing with 248 additions and 530 deletions
apps/exams/Tpl/default/Index/examsroom_w3g.html
<include file="__THEME__/public_header_w3g" /> <include file="__THEME__/public_header_w3g"/>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="__APP__/css/public.css">
/*比较多用到的*/ <link rel="stylesheet" type="text/css" href="__APP__/icon/iconfont.css">
.box { <link rel="stylesheet" type="text/css" href="__APP__/css/public_header_footer_media.css">
display: flex; <link rel="stylesheet" type="text/css" href="__APP__/css/exam_2.0.css">
display: -webkit-flex; <div class="cover"></div>
align-items: center; <div class="min-height-wrap">
} <div class="exam-header">
<div class="back-date">
.boxCn { <i class="icon icon-fanhui1" style="display: none;"></i>
display: flex !important; <small>
display: -webkit-flex; <php>if($paper['reply_time']){</php>
align-items: center; <span id="time_hh">-</span>:<span id="time_mm">-</span>:<span id="time_ss">-</span>
justify-content: center !important; <php>}else{</php>
} <span>不限时</span>
<php>}</php>
.flex1 { </small>
flex: 1; </div>
} <div class="view-stop">
<neq name="Think.get.joinType" value="2"><i class="icon icon-zanting"></i></neq>
/*遮罩层*/ <a href="javascript:;" id="show-answer-card"><i class="icon icon-datiqia"></i></a>
.mask { </div>
position: fixed !important; <neq name="Think.get.joinType" value="2">
top: 0; <ul class="the-stop">
left: 0; <li>继续</li>
right: 0; <if condition="$paper['assembly_type'] neq 1"><li id="progressExams">下次再做</li></if>
bottom: 0; </ul>
background: rgba(0, 0, 0, 0.5); </neq>
transition: all .3s ease-in-out; </div>
z-index: 8; <div class="answer-card">
} <php>$question_num = 1;</php>
<volist name="paper_options.options_type" id="options_type">
.popUp { <php>
background-color: #FFFFFF; if(!$paper_options['options_questions_data'][$options_type['question_type']]){
z-index: 10; break;
width: 16.875rem; }
border-radius: 0.5rem; </php>
overflow: hidden; <dl>
position: fixed; <dt><h6>{$options_type.type_info.question_type_title}</h6></dt>
top: 50%; <dd>
left: 50%; <volist name="paper_options['options_questions_data'][$options_type['question_type']]" id="question">
-webkit-transform: translate(-50%, -50%); <a id="card{$question_num}" <php>if(isset($tempData['content'][$question['exams_question_id']])){ echo "class='on go_question'";}</php> href="javascript:;" data-question_num="{$question_num}" class="go_question">{$question_num}</a>
-moz-transform: translate(-50%, -50%); <php>$question_num++;</php>
transform: translate(-50%, -50%); </volist>
} </dd>
</dl>
.popUp_title { </volist>
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; <div class="btns-complete">
font-size: 1.125rem; <a href="javascript:void(0)" style="color:#fff;" class="assignment">交卷</a>
height: 1.5625rem; </div>
line-height: 1.5625rem; </div>
margin-top: 0.9375rem; <input type="hidden" name="reply_time" value="{$paper.reply_time|default='0'}" />
padding: 0 1rem; <form name="answers" method="POST" action="{:U('exams/Index/doHaddleExams')}">
box-sizing: border-box; <input type="hidden" name="anser_time" id="anser_time" value="{$tempData.anser_time|default='0'}">
text-align: center; <input type="hidden" name="exams_mode" value="{$Think.get.joinType|default=1}">
} <input type="hidden" name="paper_id" value="{$paper.exams_paper_id}">
<input type="hidden" name="ch_id" value="{$_GET['s_id']}">
.popUp_content { <input type="hidden" name="view_url" value="{$_GET['view']}">
padding: 1rem 1rem; <input type="hidden" name="is_timeout" value="0">
box-sizing: border-box; <php>if($tempData){</php>
text-align: center; <input type="hidden" name="exams_users_id" value="{$tempData.exams_users_id}">
font-size: 0.875rem; <php>}</php>
color: #333333; <input type="hidden" name="paper_options_id" value="{$paper_options.exams_paper_options_id}">
} <div class="static-exam">
<php>$question_num = 1;</php>
.popUp_btns { <volist name="paper_options.options_type" id="options_type">
border-top: 1px solid #eeeeee; <switch name="options_type.question_type_key">
} <case value="radio|judge|multiselect">
<!-- 单选题 -->
.popUp_btn { <volist name="paper_options['options_questions_data'][$options_type['question_type']]" id="question">
flex: 1; <dl id="ex{$question_num}" data-type="{$options_type.question_type_key}" data-question_num="{$question_num}">
text-align: center; <dt>
line-height: 3.125rem; <h5><small>{$question_num}</small>/{$paper_options.questions_count}<strong>{$options_type.type_info.question_type_title}</strong></h5>
height: 3.125rem; <h3>{$question.content}</h3>
font-family: PingFangSC-Semibold, PingFang SC; </dt>
font-weight: 600; <dd>
font-size: 1rem; <php>
box-sizing: border-box; if($tempData){
background-color: #FFFFFF; $content = isset($tempData['content'][$question['exams_question_id']]) ? $tempData['content'][$question['exams_question_id']] : [];
} }else{
$content = [];
.popUp_btn0 { }
color: #999999; </php>
border-right: 1px solid #eeeeee; <volist name="question.answer_options" id="answer">
} <div class="answer_box">
<p class="answer_p<php>if(in_array($key,$content)){</php> on<php>}</php>" data-answer="{$key}"><em>{$key}</em>{$answer}</p>
.popUp_btn1 { </div>
color: #65C000; </volist>
} <div class="user_answer_hidden">
<input type="hidden" name="user_answer[{$question.exams_question_id}]" value="{:implode(',',$content)}">
/*jixu*/ </div>
.stopBox { </dd>
width: 100%; <a href="javascript:;" data-question_num="{$question_num}" class="next next_question">下一题</a>
position: fixed; <div class="operation">
top: 50%; <div class="operation-tit">
left: 50%; <eq name="isPractice" value="1"><strong><small>查看解析</small><i class="icon icon-arrowDown"></i></strong></eq>
z-index: 10; <php>if($question['is_collect'] == 1){</php>
-webkit-transform: translate(-50%, -50%); <b data-question_id="{$question.exams_question_id}" data-action="0">
-moz-transform: translate(-50%, -50%); <i class="icon icon-shoucang2" style="color:#F7B659;"></i><small>已收藏</small>
transform: translate(-50%, -50%); </b>
} <php>}else{</php>
<b data-question_id="{$question.exams_question_id}" data-action="1">
.stopBtn { <i class="icon icon-area1"></i><span>考点:{$question.exams_point_title}</span>
width: 10rem; <i class="icon icon-shoucang2"></i><small>收藏习题</small>
height: 3rem; </b>
line-height: 3rem; <php>}</php>
display: block; </div>
margin: 2rem auto; <eq name="isPractice" value="1">
color: #FFFFFF; <!--答案解析-->
font-size: 1rem; <div class="analysis">
font-family: PingFangSC-Semibold, PingFang SC; <div class="analysis-pic">
font-weight: 600; <h6>正确答案</h6><abbr><volist name="question.answer_true_option" id="answer_true">{$answer_true}</volist></abbr>
box-sizing: border-box; </div>
text-align: center; <div class="analysis-txt">
border-radius: 1.5rem; <h6>解析</h6>
} <p>{$question.analyze}</p>
</div>
.stopBtn_on { </div>
background-color: #A3E460; </eq>
} </div>
</dl>
.stopBtn_out { <php>$question_num++;</php>
border: 1px solid rgba(204, 204, 204, 1); </volist>
} </case>
<case value="completion">
<!-- 填空题 -->
<volist name="paper_options['options_questions_data'][$options_type['question_type']]" id="question">
<dl id="ex{$question_num}" data-type="{$options_type.question_type_key}" data-question_num="{$question_num}">
<dt>
body { <h5><small>{$question_num}</small>/{$paper_options.questions_count}<strong>{$options_type.type_info.question_type_title}</strong></h5>
background-color: #fff; <h3>{$question.content}</h3>
} </dt>
<dd>
.testPaperTop { <php>
height: 2.25rem; if($tempData){
padding: 0 0.75rem; $content = isset($tempData['content'][$question['exams_question_id']]) ? $tempData['content'][$question['exams_question_id']] : [];
box-sizing: border-box; }else{
border-bottom: 1px solid #F5F5F5; $content = [];
width: 100%; }
position: fixed; </php>
top: 0; <volist name="question.answer_true_option" id="answer">
left: 0; <label>{$i}、<input type="text" class="anserItem" <php>if($content){</php>value="{$content[$i-1]}"<php>}</php> name="user_answer[{$question.exams_question_id}][]"></label>
z-index: 1; </volist>
background-color: #FFFFFF; </dd>
} <a href="javascript:;" data-question_num="{$question_num}" class="next next_question">下一题</a>
<div class="operation">
.testPaperTop_time { <div class="operation-tit">
font-size: 0.75rem <eq name="isPractice" value="1"><strong><small>查看解析</small><i class="icon icon-arrowDown"></i></strong></eq>
} <php>if($question['is_collect'] == 1){</php>
<b data-question_id="{$question.exams_question_id}" data-action="0"><i class="icon icon-shoucang2" style="color:#F7B659;"></i><small>已收藏</small></b>
.testPaperTop_da { <php>}else{</php>
font-size: 0.75rem; <b data-question_id="{$question.exams_question_id}" data-action="1">
color: #999999; <i class="icon icon-area1"></i><span>考点:{$question.exams_point_title}</span>
} <i class="icon icon-shoucang2"></i><small>收藏习题</small>
</b>
.testPaperTop_pau { <php>}</php>
margin-left: 1.875rem; </div>
width: 0.75rem; <eq name="isPractice" value="1">
height: 0.75rem; <!--答案解析-->
} <div class="analysis">
<div class="analysis-pic">
.testPaperBotm { <h5>正确答案</h5>
padding: 0.75rem 0.75rem 0.75rem; <ul>
box-sizing: border-box; <volist name="question.answer_true_option" id="answer_true">
margin-top: 2.25rem; <li>{$i}、{$answer_true}</li>
} </volist>
</ul>
.testPaperNum {
margin-right: 0.75rem; </div>
color: #999999; <div class="analysis-txt">
font-size: 0.75rem; <h6>解析</h6>
} <p>{$question.analyze}</p>
</div>
.testPaperLei { </div>
font-size: 0.75rem; </eq>
color: #333333; </div>
} </dl>
<php>$question_num++;</php>
.testPaperColl { </volist>
width: 1rem; </case>
height: 1rem; <case value="essays">
} <!-- 简述题-->
<volist name="paper_options['options_questions_data'][$options_type['question_type']]" id="question">
.testPaperInfo { <dl id="ex{$question_num}" data-type="{$options_type.question_type_key}" data-question_num="{$question_num}">
margin-top: 0.5rem; <dt>
font-size: 1rem; <h5><small>{$question_num}</small>/{$paper_options.questions_count}<strong>{$options_type.type_info.question_type_title}</strong></h5>
line-height: 1.875rem; <h3>{$question.content}</h3>
color: #333333; </dt>
} <dd>
<php>
.testPaperAnswer { if($tempData){
margin-top: 1rem; $content = isset($tempData['content'][$question['exams_question_id']]) ? $tempData['content'][$question['exams_question_id']] : [];
align-items: flex-start; }else{
} $content = [];
}
.testPaperAnswer_num { </php>
display: inline-block; <textarea class="anserItem" name="user_answer[{$question.exams_question_id}]">{$content[0]|default=''}</textarea>
width: 2.25rem; </dd>
height: 2.25rem; <a href="javascript:;" data-question_num="{$question_num}" class="next next_question">下一题</a>
border-radius: 100%; <div class="operation">
border: 1px solid rgba(163, 228, 96, 1); <div class="operation-tit">
text-align: center; <eq name="isPractice" value="1"><strong><small>查看解析</small><i class="icon icon-arrowDown"></i></strong></eq>
line-height: 2.25rem; <php>if($question['is_collect'] == 1){</php>
color: #65C000; <b data-question_id="{$question.exams_question_id}" data-action="0"><i class="icon icon-shoucang2" style="color:#F7B659;"></i><small>已收藏</small></b>
font-family: PingFangSC-Semibold, PingFang SC; <php>}else{</php>
font-weight: 600; <b data-question_id="{$question.exams_question_id}" data-action="1">
font-size: 0.875rem; <i class="icon icon-area1"></i><span>考点:{$question.exams_point_title}</span>
margin-right: 0.75rem; <i class="icon icon-shoucang2"></i><small>收藏习题</small>
} </b>
<php>}</php>
.testPaperAnswer_numAt { </div>
background-color: #A3E460; <eq name="isPractice" value="1">
color: #FFFFFF; <!--答案解析-->
} <div class="analysis">
<div class="analysis-txt">
.testPaperAnswer_desc { <h6>解析</h6>
line-height: 1.25rem; <p>{$question.analyze}</p>
margin: 0; </div>
} </div>
</eq>
.testPaperBtns { </div>
justify-content: space-between; </dl>
padding: 3rem 0.75rem 1rem; <php>$question_num++;</php>
box-sizing: border-box; </volist>
width: 100%; </case>
</switch>
} </volist>
</div>
.testPaperBtn { </form>
width: 10rem; </div>
height: 3rem; <include file="__THEME__/public_footer_w3g"/>
line-height: 3rem; <script src="__APP__/js/public_header_footer_media.js"></script>
text-align: center; <script src="__APP__/js/public_exam_3g.js"></script>
border: 1px solid rgba(163, 228, 96, 1); <script type="text/javascript">
border-radius: 1.5rem; if("{$_GET['examsresult']}"){
box-sizing: border-box; var re = "{:jiemi($_GET['examsresult'])}",
font-size: 1rem; ve = "{:jiemi($_GET['view'])}";
font-family: PingFangSC-Semibold, PingFang SC; layer.open({
font-weight: 600; content:'课时考试',
color: #65C000; btn: ['查看结果', '返回课程'],
} yes:function(){
window.location.href = re;
.testPaperBtn1 {
color: #FFFFFF;
background: rgba(163, 228, 96, 1);
}
.testPaperJiedaPage {
padding: 0 0.75rem;
box-sizing: border-box;
}
.testPaperJiedaBox {
padding: 1rem 0;
}
.testPaperJiedaBtn {
color: #65C000;
font-size: 0.875rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
}
.testPaperJiedaBtn_icon {
margin-left: 0.5rem;
width: 0.75rem;
height: 0.75rem;
}
.testPaperAnswers {
padding: 0.5rem 0 0.25rem;
}
.testPaperAnswer {
padding: 0.5rem 0;
color: #333333;
font-size: 1rem;
margin: 0;
}
.testPaperAnswer_n {
color: #65C000;
}
.testPaperAnswer_e {
color: red;
}
.testPaperAnswer_infoBox {
padding: 0.1875rem 0.75rem 0.75rem;
box-sizing: border-box;
border-top: 1px solid #f5f5f5;
}
.testPaperAnswer_infoTitle {
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
font-size: 1rem;
padding: 0.75rem 0 0.75rem 0.75rem;
box-sizing: border-box;
position: relative;
margin: 0;
}
.testPaperAnswer_infoTitle::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #A3E460;
margin-top: -2px;
}
.testPaperAnswer_info {
color: #333333;
font-size: 1rem;
line-height: 1.875rem;
}
</style>
<div id="app">
<div class="testPaperTop box">
<p class="testPaperTop_time flex1">00：09：54</p>
<span class="testPaperTop_da">答题卡</span>
<img class="testPaperTop_pau" src="__THEME__/img/pau.png">
</div>
<div class="testPaperBotm">
<div class="box">
<span class="testPaperNum">{{current}}/{{totalQuestion}}</span>
<p class="testPaperLei flex1">（{{currentQuestionTypeName}}）</p>
<img v-if="currentQuestion.is_collect == 0" @click="onCollect(1)" class="testPaperColl" src="__THEME__/img/share_unstar.png">
<img v-if="currentQuestion.is_collect == 1" @click="onCollect(0)" class="testPaperColl" src="__THEME__/img/share_star.png">
</div>
<template v-if="showChoiceQuestion">
<div v-html="currentQuestion.content" class="testPaperInfo"></div>
<ul>
<li v-for="(opt, index) in currentOptions" :key="index" class="testPaperAnswer box">
<span @click="onChoose(opt)" class="testPaperAnswer_num" :class="opt.selected ? 'testPaperAnswer_numAt' : ''">{{opt.key}}</span>
<div v-html="opt.value" class="testPaperAnswer_desc flex1" style="margin-top: 0.625rem;"></div>
</li>
</ul>
</template>
</div>
<div v-if="current == 1" class="testPaperBtns boxCn">
<p class="testPaperBtn testPaperBtn1" style="width: 15rem;">下一题</p>
</div>
<div v-if="current > 1" class="testPaperBtns box">
<p class="testPaperBtn">上一题</p>
<p class="testPaperBtn testPaperBtn1">下一题 / 交卷</p>
</div>
<!-- 解析 -->
<div class="testPaperJiedaPage">
<div class="box testPaperJiedaBox">
<span @click="expand = !expand" class="testPaperJiedaBtn box">{{expand ? '收起解析' : '查看解析'}}<img class="testPaperJiedaBtn_icon" src="__THEME__/img/openBtn.png"></span>
</div>
<ul v-if="expand" class="testPaperAnswers">
<li class="testPaperAnswer">正确答案：<span v-for="(answer, index) in currentRightOptions" :key="index" class="testPaperAnswer_n">{{answer}}</span></li>
<li class="testPaperAnswer">我的答案：<span v-for="(answer, index) in currentMyOptions" :key="index" :class="answer.right ? 'testPaperAnswer_n' : 'testPaperAnswer_e'">{{answer.key}}</span></li>
</ul>
<div v-if="expand" class="testPaperAnswer_infoBox">
<p class="testPaperAnswer_infoTitle">解析</p>
<div v-html="currentAnalyze" class="testPaperAnswer_info">
</div>
</div>
</div>
<!-- 交卷 -->
<div class="mask" style="display: none;">
<div class="popUp">
<p class="popUp_title">提示</p>
<div class="popUp_content">是否交卷并退出考试？</div>
<div class="popUp_btns box">
<span class="popUp_btn popUp_btn0 flex1">取消</span>
<span class="popUp_btn popUp_btn1 flex1">确定</span>
</div>
</div>
</div>
<!-- 暂停 -->
<div class="mask" style="display: none;">
<div class="stopBox">
<span class="stopBtn stopBtn_on">继续</span>
<span class="stopBtn stopBtn_out">退出</span>
</div>
</div>
</div>
<include file="__THEME__/public_footer_w3g" />
<script type="text/javascript">
new Vue({
el: "#app",
data: function() {
return {
info: {},
temp: {},
current: 1,
paperOptions: {},
countDown: "00:00:00",
expand: false,
//选项
currentOptions: []
}
},
computed: {
totalQuestion: function() {
let count = 0
let data = this.paperOptions.options_questions_data
this.paperOptions.options_type.forEach( r => {
count += data[r.question_type].length
})
return count
},
currentTypeIndex: function() {
let count = 0
let data = this.paperOptions.options_questions_data
let current = this.current
for(let i = 0; i < this.paperOptions.options_type.length; i++) {
let r = this.paperOptions.options_type[i]
let next = count + data[r.question_type].length
if(current > count && current <= next) {
return i
} else {
count = next
}
}
},
currentQuestions: function() {
let optionType = this.currentQuestionType
let questionType = optionType.question_type
let questionData = this.paperOptions.options_questions_data
let questions = questionData[questionType]
return questions
},
currentQuestionType: function() {
return this.paperOptions.options_type[this.currentTypeIndex]
},
currentQuestionTypeName: function() {
return this.currentQuestionType.type_info.question_type_title
},
currentQuestionTypeKey: function() {
return this.currentQuestionType.question_type_key
},
currentQuestion: function() {
let count = 0
let data = this.paperOptions.options_questions_data
let current = this.current
for(let i = 0; i < this.paperOptions.options_type.length; i++) {
let r = this.paperOptions.options_type[i]
let next = count + data[r.question_type].length
if(current > count && current <= next) {
return data[r.question_type][current - count - 1]
} else {
count = next
}
}
}, },
//选择题答案 no:function(){
currentRightOptions: function() { window.location.href = ve;
return this.currentQuestion.answer_true_option
},
//我的答案
currentMyOptions: function() {
let cur = this.currentRightOptions
return this.currentOptions.filter( r => { return r.selected }).map( r => {
console.log(r)
console.log(cur.hx_indexOf( k => { return k == r.key }))
return {
right: cur.hx_indexOf( k => { return k == r.key }) != -1,
key: r.key
}
})
},
//解析
currentAnalyze: function() {
return this.currentQuestion.analyze
},
//Helper
showChoiceQuestion: function() {
let key = this.currentQuestionTypeKey
return key == 'radio' || key == 'multiselect' || key == 'judge'
} }
}, });
created: function() {
this.info = {:json_encode($paper)}; }
this.temp = {:json_encode($tempData)};
this.paperOptions = {:json_encode($paper_options)};
for(let k in this.currentQuestion.answer_options) {
let value = this.currentQuestion.answer_options[k]
this.currentOptions.push({
key: k,
value: value,
selected: false
})
}
console.log(this.info)
console.log(this.temp)
console.log(this.paperOptions)
},
methods: {
countDown: function() {
let time = 1
let hours = Math.floor(time / 3600)
let minutes = Math.floor((time % 3600) / 60)
let seconds = Math.round(time % 60)
},
onCollect: function(collect) {
let that = this
$.post(U('exams/Index/collect'), {
action: collect,
source_id: that.currentQuestion.exams_question_id
}, function(res) {
let r = JSON.parse(res)
if(r.status == 1) {
that.currentQuestion.is_collect = collect
}
})
},
onChoose: function(opt) {
if(this.currentQuestionTypeKey == 'radio') {
this.currentOptions.forEach( r => {
r.selected = opt.key == r.key
})
}
}
}
})
</script> </script>
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