You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/app/templates/shixun_work/shixun_work.html.erb

468 lines
18 KiB

6 years ago
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.CodeMirror{line-height: 1.2; font-size: 14px;height: auto;}
.cm-s-railscasts span.cm-error{background:none;color: #d4cfc9;}
</style>
</head>
<body>
<div class="edu-position" style="width: 1000px">
<p class="mb10">
<a class="color-grey-9"><%= @course.name %></a> &gt;
<a class="color-grey-9"><%= @homework.course_second_category&.name || '实训作业'%></a> &gt;
<% homework_ids = @homework.course.homework_commons.where(homework_type: 4, course_homework_category_id: @homework.course_homework_category_id)
.order(Arel.sql('IF(ISNULL(publish_time),0,1),publish_time DESC, created_at DESC')).pluck(:id) %>
<a>#<%= homework_ids.index(@homework.id) + 1 %></a>&gt;
<%= @user.real_name %>
</p>
<div class="edu-con-top user_bg_shadow bor-grey-e clearfix">
<p class="ml15 fl color-grey3">
<i class="fa fa-lock mr5 color-grey-c"></i>
<%= @shixun.name %>
</p>
</div>
<div class="bor-grey-e mt20">
<p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
<span class="fl font-bd">总体评价</span>
<!-- <span class="fr edu-filter-cir-grey active mt2">优秀</span>-->
</p>
<table class="edu-pop-table head-color edu-txt-center" cellpadding="0" cellspacing="0">
<thead>
<th width="24%">总评</th>
<th width="16%">总经验值</th>
<th width="24%">作业成绩</th>
<th>耗时</th>
<th width="16%">评测次数</th>
</thead>
<tbody>
<tr>
<td><span class="color-orange font-bd"><%= @work.overall_appraisal %></span></td>
<td><span class="color-orange font-bd"><%= @work.myshixun&.total_score %></span> / <%= @shixun.all_score %></td>
<td><span class="color-orange font-bd"><%= ApplicationController.helpers.number_with_precision(@work.work_score, precision: 1) %></span> / 100</td>
<td><span class="color-orange font-bd"><%= @work.myshixun_consume %></span></td>
<td><span class="color-grey3"><%= @user_evaluate_count.to_i %></span></td>
</tr>
</tbody>
</table>
</div>
<% if @work.description.present? %>
<div class="bor-grey-e mt20">
<p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
<span class="fl font-bd">个人总结</span>
</p>
<div class="break_word upload_img table_maxWidth pl30 pr30 a_default_show edu-back-white">
<%= @work.description.html_safe %>
</div>
</div>
<% end %>
<div class="bor-grey-e mt20">
<p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
<span class="fl font-bd">阶段成绩</span>
</p>
<table class="edu-pop-table head-color edu-txt-center" cellpadding="0" cellspacing="0">
<thead>
<th width="6%">关卡</th>
<th width="27%" style="text-align: left;">任务名称</th>
<th width="13%">开启时间</th>
<th>评测次数</th>
<th width="13%">完成时间</th>
<th width="15%">耗时</th>
<th>经验值</th>
</thead>
<tbody>
<% @games.each_with_index do |game, index| %>
<tr>
<td><%= index + 1 %></td>
<td style="text-align: left;">
<span class="task-hide edu-info-dark fl"><%= game.challenge.subject %></span>
<% if ((Time.now > @homework.end_time) && game.end_time.blank?) || (game.end_time.present? && game.end_time > @homework.end_time) %>
<span class="delay ml10">延时</span>
<% end %>
</td>
<td><%= myshixun_open_time(game) %></td>
<td><%= game.evaluate_count %></td>
<td><%= finished_time game.end_time %></td>
<td><%= ApplicationController.helpers.time_consuming game %></td>
<td><%= game.final_score %> / <%= game.challenge.all_score %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<div class="bor-grey-e mt20">
<p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
<span class="fl font-bd">图形统计</span>
</p>
<div class="clearfix padding15 edu-back-white">
<div class="fl with65">
<!--echarts_dev:开发板包含了常见的警告和错误提示上线版echarts.min.js -->
<div class="fl" style="width: 750px;height: 580px" id="shixun_skill_chart">
</div>
<div class="fl" style="width: 750px;height: 580px" id="shixun_overall_ablility_chart">
</div>
</div>
<div class="fr with25">
<div class="bor-grey-e bor-radius4 clearfix mt100">
<div class="fl with25 back-f6-grey" style="text-align: right;padding-right: 5%;">
<li class="mt5 mb5">姓名</li>
<li class="mt5 mb5">学号</li>
<li class="mt5 mb5">工作效率</li>
</div>
<div class="fr with65" style="padding-left: 5%;">
<li class="color-orange03 mt5 mb5"><%= @user.real_name %></li>
<li class="color-orange03 mt5 mb5"><%= @user.student_id %></li>
<li class="mt5 mb5"><span class="color-orange03"><%= @myself_eff[1] %></li>
</div>
</div>
<div class="pr mt20 with100">
<div class="popup_tip_box fontGrey2 with100 disc" style="position: relative;box-sizing: border-box;right: 0px;">
<em></em>
<span></span>
<ol>
<li>1个小圆点代表1个学生</li>
<li>红色水滴表示当前学生的计算结果值</li>
<li>中位值是整个课堂学生表现的平均值</li>
<li>小圆点越高,工作效率越大</li>
<li>横坐标:学生序号</li>
<li>纵坐标:工作效率</li>
<li>红色横向箭头:中位值</li>
</ol>
</div>
<div style="height: 350px"></div>
<div class="bor-grey-e bor-radius4 clearfix">
<div class="fl with25 back-f6-grey" style="text-align: right;padding-right: 5%;">
<li class="mt5 mb5">姓名</li>
<li class="mt5 mb5">学号</li>
<li class="mt5 mb5">能力</li>
</div>
<div class="fr with65" style="padding-left: 5%;">
<li class="color-orange03 mt5 mb5"><%= @user.real_name %></li>
<li class="color-orange03 mt5 mb5"><%= @user.student_id %></li>
<li class="mt5 mb5"><span class="color-orange03"><%= @myself_consume[1] %></li>
</div>
</div>
<div class="popup_tip_box fontGrey2 with100 disc mt20" style="position: relative;box-sizing: border-box;right: 0px;">
<em></em>
<span></span>
<ol>
<li>1个小圆点代表1个学生</li>
<li>红色水滴表示当前学生的计算结果值</li>
<li>小圆圈越大,评测次数越少</li>
<li>横坐标对完成实训的总时间取log</li>
<li>纵坐标:实训总分数/评测次数</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="bor-grey-e mt20">
<p class="pt10 pb10 pl15 pr15 clearfix">
<span class="fl font-bd">实训详情</span>
</p>
<%#= ApplicationController.helpers.javascript_include_tag "/codemirror/lib/codemirror", "/codemirror/mode/javascript/javascript", "/codemirror/addon/hint/show-hint", "/codemirror/addon/hint/javascript-hint", "/codemirror/addon/selection/active-line", "/codemirror/addon/lint/javascript-lint", "/codemirror/addon/lint/css-lint", "/codemirror/addon/lint/lint", "/codemirror/addon/lint/json-lint", "/editormd/lib/codemirror/addon/lint/css-lint" %>
<% @games.each_with_index do |game, index| %>
<div class="shixun_detail_con padding15 bor-top-greyE">
<p class="clearfix">
<span class="panel-inner-icon mr15 fl mt5">
<% if game.challenge.st == 1 %>
<i class="fa fa-th-list font-16 color_white" data-tip-down="选择题任务"></i>
<% else %>
<i class="fa fa-code font-16 color_white" data-tip-down="编程题任务"></i>
<% end %>
</span>
<span class="fl mt3"><span class="font-bd mr15">第<%= index+1 %>关</span><%= game.challenge.subject %></span>
</p>
<div style="margin-left: 32px;" class="mt15">
<% if game.outputs.present? %>
<table class="edu-pop-table edu-txt-center table-line thback" cellpadding="0" cellspacing="0">
<thead>
<th width="10%">评测次数</th>
<th>评测信息</th>
</thead>
<tbody>
<% outputs = game.outputs.group("query_index") %>
<% max_query = outputs.map(&:query_index).max %>
<% outputs.reverse.try(:each) do |output| %>
<tr>
<td><%= max_query == output.query_index ? "最后一次" : "第#{output.query_index}次" %></td>
<td align="left" style="padding-left: 5px"><%= output_detail(game, output) %></td>
</tr>
<% end %>
</tbody>
</table>
<% end %>
<% if game.try(:lastest_code).present? && game.challenge.st == 0 %>
<div class="bor-grey-e mt15">
<p class="clearfix pt5 pb5 pl15 pr15 back-f6-grey">
<span class="fl">最近通过的代码</span>
</p>
<div class="test-code bor-top-greyE">
<li class="clearfix" xmlns="http://www.w3.org/1999/html">
<textarea class="" id="content_show_<%= game.id %>" name="content" style="display: none"><%= game&.lastest_code %></textarea>
</li>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</body>
<%= ApplicationController.helpers.pdf_load_sources(*%w(editormd/lib/codemirror/lib/codemirror.js editormd/lib/codemirror/mode/javascript/javascript.js
editormd/lib/codemirror/addon/hint/show-hint.js editormd/lib/codemirror/addon/hint/javascript-hint.js
editormd/lib/codemirror/addon/selection/active-line.js editormd/lib/codemirror/addon/lint/javascript-lint.js
editormd/lib/codemirror/addon/lint/css-lint.js editormd/lib/codemirror/addon/lint/lint.js
editormd/lib/codemirror/addon/lint/json-lint.js editormd/lib/codemirror/addon/lint/css-lint.js
echart/echarts.min.js))%>
<script>
window.onload = function() {
console.debug("window.onload");
<% @games.map(&:id).each do |game_id| %>
var ele = document.getElementById("content_show_<%= game_id %>");
if (ele) {
var ide = CodeMirror.fromTextArea(ele, {
lineNumbers: true,
theme: "default",
// extraKeys: {"Ctrl-Q": "autocomplete"}, // 快捷键
indentUnit: 4, //代码缩进为一个tab的距离
matchBrackets: true,
autoRefresh: true,
smartIndent: true,//智能换行
styleActiveLine: true,
lint: true,
readOnly: "nocursor"
});
ide.setSize("auto", ide.lineCount() * 18);
}
<% end %>
// 基于准备好的dom初始化echarts实例
var effChart = echarts.init(document.getElementById('shixun_skill_chart'));
// 指定图表的配置项和数据
var option = {
grid: {
left: '3%',
right: '9%',
bottom: '3%',
containLabel: true
},
tooltip : {},
xAxis : [
{
type : 'value',
name: '学生序号',
scale:true,
axisLabel : {
formatter: ' '
},
axisTick:{
show:false
},
splitLine: {
show: false
}
}
],
yAxis : [
{
type : 'value',
name : '工作效率',
scale:true,
axisLabel : {
formatter: '{value} '
},
splitLine: {
show: false
}
}
],
series : [
{
name:'',
type:'scatter',
data: <%= @echart_data[:efficiency_list] %>,
itemStyle:{
normal:{color:'#2e65ad'}
},
markArea: {
silent: true,
itemStyle: {
normal: {
color: 'transparent',
borderWidth: 1,
borderType: 'dashed'
}
}
},
markPoint : {
data : [
{
name: 'daiao',
xAxis:<%= @myself_eff[0] %>,
yAxis:<%= @myself_eff[1] %>
}
],
itemStyle: {
normal:{
color:'#c23531'
}
}
},
markLine : {
lineStyle: {
normal: {
type: 'solid',
color:'#c23531'
}
},
data : [
{type : 'average', name: '中位值'}
]
}
},
{
name:'二班',
type:'scatter',
data: [<%= @myself_eff %>],
itemStyle:{
color:'#c23531'
}
}
]
};
// 使用刚指定的配置项和数据显示图表
effChart.setOption(option);
console.debug(<%= @myself_consume %>);
var ablChart = echarts.init(document.getElementById('shixun_overall_ablility_chart'));
var dataBJ = <%= @echart_data[:consume_list] %>;
var schema = [
{name: 'date', index: 0, text: '日'},
{name: 'AQIindex', index: 1, text: 'AQI指数'},
{name: 'PM25', index: 2, text: 'PM2.5'}
];
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0)',
color:'#2e65ad'
}
};
var itemStyle1 = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0)',
color:'#c23531'
}
};
var option1 = {
backgroundColor: '#fff',
color: [
'#dd4444', '#fec42c', '#80F1BE'
],
grid: {
x: '10%',
x2: 150,
y: '18%',
y2: '10%'
},
tooltip: {},
xAxis: {
type: 'value',
name: 'log(实训的总时间)',
nameGap: 16,
nameTextStyle: {
color: '#000',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#000'
}
}
},
yAxis: {
type: 'value',
name: '总分数/评测次数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#000',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#000'
}
},
splitLine: {
show: false
}
},
series: [
{
name: '能力',
type: 'scatter',
itemStyle: itemStyle,
data: dataBJ,
symbolSize: function (value){
return Math.round(value[2]);
},
markPoint : {
data : [
{
name: 'daiao',
xAxis:<%= @myself_consume[0] %>,
yAxis:<%= @myself_consume[1] %>
}
],
itemStyle: {
normal:{
color:'#c23531'
}
}
}
},
{
name: '能力1',
type: 'scatter',
data:[<%= @myself_consume %>],
itemStyle:itemStyle1,
symbolSize: function (val){
return Math.round(val[2]);
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
ablChart.setOption(option1);
}
</script>
</html>