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

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>