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/views/exercises/blank_exercise.html.erb

579 lines
20 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 charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style class="text/css">
body{
font-size:14px;}
p{
margin:0;
}
.fs13{
font-size:13px;
}
.fs16{
font-size:16px;
}
.position-relative{
position:relative;
}
.text-center{
text-align:center;
}
.bdc{
border-bottom:1px solid #eee;
}
.plr15{
padding:0 15px;
}
.pd10{
padding:10px;
}
.pbt10{
padding:10px 0;
}
.pbt5{
padding:5px 0;
}
.mbt20{
margin: 20px 0;
}
.mt8{
margin-top:8px;
}
.mbt10{
margin: 10px 0;
}
.pull-right{
float:right;
}
.line-34{
line-height:34px;
}
.pull-left{
float:left;
}
.text-orange{
color: #FC7033;
}
.text-green{
color: #29BD8B;
}
.bgc{
background-color:rgb(250, 250, 250);
}
.text-black{color:#333;}
.flex-nowrap{
display:flex;
white-space: nowrap;
}
.text-blue{
color:#1890ff;
}
.text-gray{
color:#999 !important;
}
.mlr5{
margin:0 5px;
}
.ml20{
margin-left:20px;
}
.mr15{
margin-right:15px;
}
.main-height{
min-height:60px !important;
}
.null-answer{
background: #eee;
width: 100%;
display: inline-block;
padding: 8px 10px;
border-radius: 2px;
white-space: normal;
}
.choose-radio{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #d9d9d9;
background-color: #fff;
vertical-align: middle;
margin: 0 5px 5px 0 ;
}
.choose-checkbox{
display: inline-block;
width: 12px;
height: 12px;
border-radius:2px;
border: 1px solid #d9d9d9;
background-color: #fff;
vertical-align: middle;
margin: 0 5px 5px 0 ;
}
.ques-title p:first-child{
display:inline-block;
margin-bottom:10px;
}
.choose-answer{
position: relative;
border-color: #1890ff;
}
.choose-answer:after{
position: absolute;
width: 6px;
height: 6px;
left: 3px;
top: 3px;
border-radius: 8px;
display: table;
border-top: 0;
border-left: 0;
content: " ";
background-color: #1890ff;
}
.choose-answer-multi{
background-color: #1890ff;
border-color: #1890ff;
position: relative;
width:12px !important;
height: 12px !important;
}
.choose-answer-multi:after{
content: "\2713";
color:#fff;
height: 9px;
/*width: 7px;*/
font-size:0.6em;
position: absolute;
display: inline-block;
bottom: 6px;
left: 1px;
}
.line-line {
width:15px;
height: 7px;
border-radius:6px;
margin-right:5px;
display:inline-block;
}
.bd-ee{
border:1px solid #eee;
padding:5px;
}
.bg-orange{
background-color:#FC7033;
}
.bg-green{
background-color:#29BD8B;
}
.bg-gray{
background-color: #ccc;
}
.right-status{
width:28px;
height:28px;
border-radius: 50%;
text-align:center;
margin:5px 3px;
}
.right-status span{
color:#fff;
font-size:13px;
line-height: 28px;
}
.inline-block{
display:inline-block;
}
.circle-review{
width:12px;
height:12px;
border-radius: 50%;
border:1px solid #ccc;
margin-right:5px;
display:inline-block;
}
.bd-radius{
border:1px solid #ccc
}
.user-score{
position: absolute;
right:0;
top:0;
}
.circle-score{
width:14px;
height:14px;
border-radius:50%;
position: relative;
display:inline-block;
vertical-align: middle;
margin-bottom: 2px;
}
.circle-wrong:after{
color:#fff;
content: "x";
height: 7px;
width: 7px;
position: absolute;
display: inline-block;
bottom: 10px;
left: 4px;
}
.circle-right:after{
color:#fff;
content: "✔";
height: 7px;
width: 7px;
position: absolute;
display: inline-block;
bottom: 8px;
left: 2px;
}
table{
width:100%;
text-align:center;
}
table, tr, td, th, tbody, thead{
page-break-inside: avoid;
}
table th{
padding:10px 0;
}
table td{
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.shixun-detail td{
border:1px solid #eee;
}
.code_content_show{
width:95%;
height:100%;
line-height:1.8;
border:none;
padding-left:10px;
resize:none;
overflow: hidden;
}
.test-code{
position: relative;
width:100%;
display:inline-block;
}
.line-no{
width: 28px;
display: inline-block;
position: absolute;
}
.line-no p{
line-height:1.8;
text-align: center;
color:#999;
}
.pull-left{
float:left;
}
.shixun-detail{
max-height:100%;
}
</style>
</head>
<body>
<div class="container" style="background-color:#fff;">
<div>
<div class="ex-title text-center mbt20">
<div class="mbt10">
<h3><%= @exercise.try(:exercise_name) %></h3>
</div>
<div class="plr15">
<p class="text-gray">
<%= @exercise.try(:exercise_description).nil? ? "" : @exercise.try(:exercise_description).html_safe %>
</p>
</div>
</div>
<div class="mbt20 bgc">
<div class="ex-scores pd10 text-gray fs13">
<div class="inline-block pull-left">
<% if @exercise_single_ques_count > 0 %>
<span class="mr15">单选题<span class="mlr5"><%= @exercise_single_ques_count %></span>题,
共<span class="mlr5"><%= @exercise_single_ques_scores %></span>分</span>
<% end %>
<% if @exercise_double_ques_count > 0 %>
<span class="mr15">多选题<span class="mlr5"><%= @exercise_double_ques_count %></span>题,
共<span class="mlr5"><%= @exercise_double_ques_scores %></span>分</span>
<% end %>
<% if @exercise_ques_judge_count > 0 %>
<span class="mr15">判断题<span class="mlr5"><%= @exercise_ques_judge_count %></span>题,
共<span class="mlr5"><%= @exercise_ques_judge_scores %></span>分</span>
<% end %>
<% if @exercise_ques_null_count > 0 %>
<span class="mr15">填空题<span class="mlr5"><%= @exercise_ques_null_count %></span>题,
共<span class="mlr5"><%= @exercise_ques_null_scores %></span>分</span>
<% end %>
<% if @exercise_ques_main_count > 0 %>
<span class="mr15">主观题<span class="mlr5"><%= @exercise_ques_main_count %></span>题,
共<span class="mlr5"><%= @exercise_ques_main_scores %></span>分</span>
<% end %>
<% if @exercise_ques_shixun_count > 0 %>
<span class="mr15">实训题<span class="mlr5"><%= @exercise_ques_shixun_count %></span>题,
共<span class="mlr5"><%= @exercise_ques_shixun_scores %></span>分</span>
<% end %>
</div>
<div style="text-align:right;word-break:keep-all;">合计<span class="text-blue mlr5"><%= @exercise_ques_count %></span>题,
共<span class="text-orange mlr5"><%= @exercise_ques_scores %></span>分</div>
</div>
</div>
<div class="mbt10">
<div>
<p class="pbt10">
<span class="mr15">客观题</span>
<span class="mlr5"><span class="line-line bg-green"></span>正确</span>
<span class="mlr5"><span class="line-line bg-orange"></span>错误</span>
<span class="pull-right">总分:<span class="text-orange"><%= @exercise.exercise_users.where(user_id:31798).first.score %>分</span></span>
</p>
</div>
<div class="pbt5">
<% @ex_obj_array.each do |s| %>
<% if s[:stand_status] == 1 %>
<div class="inline-block right-status bg-green">
<span><%= s[:q_position] %></span>
</div>
<% else %>
<div class="inline-block right-status bg-orange">
<span><%= s[:q_position] %></span>
</div>
<% end %>
<% end %>
</div>
<% if @ex_sub_array.size > 0 %>
<div>
<p class="pbt10">
<span class="mr15">主观题</span>
<span class="mlr5"><span class="circle-review bg-gray"></span>已评</span>
<span class="mlr5"><span class="circle-review"></span>未评</span>
<span class="pull-right text-gray">开始答题时间:<%= @exercise_user.start_at.present? ? @exercise_user.start_at.strftime("%Y-%m-%d %H:%M") : "--" %></span>
</p>
</div>
<div class="pbt5">
<% @ex_sub_array.each do |s| %>
<% if s[:stand_status] == 1 %>
<div class="inline-block right-status bg-gray">
<span><%= s[:q_position] %></span>
</div>
<% else %>
<div class="inline-block right-status bd-radius">
<span class="text-gray"><%= s[:q_position] %></span>
</div>
<% end %>
<% end %>
</div>
<% end %>
</div>
<div class="mbt10">
<% @exercise_questions.each do |q| %>
<% user_answer = q.exercise_answers.where(user_id: 31798) %>
<% this_ques_status = @ex_obj_array.detect{|f| f[:q_id] == q.id} %>
<div class="bdc">
<div class="pbt10">
<div class="mbt10 position-relative">
<span class="text-blue">
<%= q.question_type_name %>
</span>
<span class="text-gray mlr5">(<%= q.question_score %>分)</span>
<span class="mr5">Q<%= q.question_number %>:&nbsp;</span>
<% if q.question_type == 5 %>
<span class="ques-title"><%= q.shixun_name.html_safe %></span>
<span class="user-score">
<% if this_ques_status.present? && this_ques_status[:stand_status] == 1 %>
<span class="circle-score circle-right bg-green mr15"></span>
<span class="text-green"><%= this_ques_status[:user_score] %></span>分
<% else %>
<span class="circle-score circle-wrong bg-orange mr15"></span>
<span class="text-orange">0</span>分
<% end %>
</span>
<div class="mt8 text-gray">
<span><%= q.question_title.html_safe %></span>
</div>
<% else %>
<span class="ques-title"><%= q.question_title.html_safe %></span>
<span class="user-score">
<% if this_ques_status.present? && this_ques_status[:stand_status] == 1 %>
<span class="circle-score circle-right bg-green mr15"></span>
<span class="text-green"><%= this_ques_status[:user_score] %></span>分
<% else %>
<span class="circle-score circle-wrong bg-orange mr15"></span>
<span class="text-orange">0</span>分
<% end %>
</span>
<% end %>
</div>
<div class="pbt5">
<% if q.question_type == 0 %>
<% q.exercise_choices.each_with_index do |s,index| %>
<% check_answer = (user_answer.present? && (s.id == user_answer.first.exercise_choice_id)) ? "choose-answer" : '' %>
<p class="pbt5">
<span class="choose-radio <%= check_answer %>"></span>
<span class="mr15"><%= convert_to_char((index+1).to_s)%></span><%= s.choice_text%>
</p>
<% end %>
<% elsif q.question_type == 1 %>
<% q.exercise_choices.each_with_index do |s,index| %>
<% check_answer = (user_answer.present? && (user_answer.pluck(:exercise_choice_id).include?(s.id))) ? true : false %>
<p class="pbt5">
<% if check_answer %>
<span class="choose-checkbox choose-answer-multi" ></span>
<% else %>
<span class="choose-checkbox"></span>
<% end %>
<span class="mr15"><%= convert_to_char((index+1).to_s)%></span><%= s.choice_text%>
</p>
<% end %>
<% elsif q.question_type == 2 %>
<p class="pbt5">
<% q.exercise_choices.each_with_index do |s,index| %>
<% check_answer = (user_answer.present? && (s.id == user_answer.first.exercise_choice_id)) ? "choose-answer" : '' %>
<span class="mr15">
<span class="choose-radio <%= check_answer %>"></span>
<span class="mlr5"><%= s.choice_text %></span>
</span>
<% end %>
</p>
<% elsif q.question_type == 3 %>
<% st_counts = q.exercise_standard_answers.pluck(:exercise_choice_id).uniq %>
<% st_counts.each_with_index do |s,index| %>
<% if user_answer.present? && user_answer.where(exercise_choice_id:s).present? %>
<% check_answer = user_answer.where(exercise_choice_id:s).first.answer_text %>
<% else %>
<% check_answer = "--" %>
<% end %>
<p class="pbt10 flex-nowrap">
<span class="pull-left line-34">答案(填空<%= index+1 %></span>
<span class="null-answer"><%= check_answer.html_safe %></span>
</p>
<% end %>
<% elsif q.question_type == 4 %>
<% check_answer = user_answer.present? ? user_answer.first.answer_text : '--' %>
<p class="flex-nowrap">
<span class="null-answer main-height"><%= check_answer.html_safe %></span>
</p>
<% else %>
<div class="mbt10">
<p class="text-gray mbt10">
<span>阶段成绩</span>
</p>
<table style="width:100%;" cellpadding="0" cellspacing="0" >
<thead class="bgc">
<th width="6%">关卡</th>
<th width="29%" style="text-align: left;">任务名称</th>
<th width="10%">评测次数</th>
<th width="13%">完成时间</th>
<th width="16%">耗时</th>
<th width="13%">经验值</th>
<th width="13%">得分/满分</th>
</thead>
<tbody>
<% if @games.size > 0 %>
<% @games.each_with_index do |game, index| %>
<% user_score = q.exercise_shixun_answers.where(exercise_shixun_challenge_id:game.challenge.id,user_id:31798) %>
<% game_score = q.exercise_shixun_challenges.where(challenge_id:game.challenge.id) %>
<tr>
<td><%= index + 1 %></td>
<td style="text-align: left;">
<span class="task-hide edu-info-dark fl"><%= game.challenge.subject %></span>
</td>
<td><%= game.evaluate_count %></td>
<td><%= game.end_time.present? ? game.end_time.strftime("%Y-%m-%d %H:%M") : "--" %></td>
<td><%= ApplicationController.helpers.time_consuming game %></td>
<td><span class="text-green"><%= game.final_score %></span> / <%= game.challenge.all_score %></td>
<td><span class="text-orange"><%= user_score.present? ? user_score.first.score : 0.0 %> /</span> <%= game_score.first.question_score %></td>
</tr>
<% end %>
<% else %>
<% q.exercise_shixun_challenges.each_with_index do |game, index| %>
<% game_score = q.exercise_shixun_challenges.where(challenge_id:game.challenge.id) %>
<tr>
<td><%= index + 1 %></td>
<td style="text-align: left;">
<span class="task-hide edu-info-dark fl"><%= game.challenge.subject %></span>
</td>
<td>0</td>
<td>--</td>
<td>--</td>
<td><span class="text-green">0.0</span> / <%= game.challenge.all_score %></td>
<td><span class="text-orange">0.0 /</span> <%= game_score.first.question_score %></td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
</div>
<div class="mbt10">
<% @games.each_with_index do |game, index| %>
<p class="text-gray mbt10">
<span class="fl font-bd">实训详情</span>
</p>
<div class="mbt10">
<p class="clearfix">
<span class="fl mt3"><span class="font-bd mr15">第<%= index+1 %>关</span><%= game.challenge.subject %></span>
</p>
<div style="margin-left: 32px;width:100%;" class="mt8 shixun-detail">
<% if game.outputs.present? %>
<table style="width:100%;" cellpadding="0" cellspacing="0">
<thead class="bgc">
<th width="10%">评测次数</th>
<th>评测信息</th>
</thead>
<tbody>
<% outputs = game.outputs.group("query_index") %>
<% outputs.reverse.try(:each) do |output| %>
<tr>
<td><%= "第#{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="mbt20 inline-block" style="height:auto;width:100%;">
<p class="bgc">
<span class="pd10" style="display:inherit;">
<span class="fl">最近通过的代码</span>
<span class="pull-right"><%= game.challenge.path %></span>
</span>
</p>
<div class="test-code bor-top-greyE">
<div class="bgc line-no" style="width:28px;">
<% code_len = content_line(game.try(:lastest_code).html_safe) %>
<% (1..code_len).each do |c| %>
<p><%= c %></p>
<% end %>
</div>
<textarea class="code_content_show pull-left ml30" rows = "<%= code_len %>" ><%= game.try(:lastest_code).html_safe %></textarea>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</body>
</html>