324 lines
17 KiB
Plaintext
324 lines
17 KiB
Plaintext
<%= stylesheet_link_tag '/editormd/css/editormd','/editormd/css/editormd.min.css' %>
|
||
<%= javascript_include_tag '/editormd/editormd','/editormd/examples/js/jquery.min.js' %>
|
||
<style>
|
||
.CodeMirror-scroll{
|
||
overflow: auto !important;
|
||
margin-bottom: -30px;
|
||
margin-right: -30px;
|
||
padding-bottom: 30px;
|
||
height: 100%;
|
||
outline: none;
|
||
position: relative;
|
||
}
|
||
</style>
|
||
<script id="t:set-option-list" type="text/html">
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">A</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
</script>
|
||
<div id="shixun_form">
|
||
<li class="clearfix">
|
||
<label class="panel-form-label fl"><span class="c_red mr5">*</span>名称：</label>
|
||
<%= f.text_field :subject, :class => "panel-form-width-690 fl panel-box-sizing", :no_label => true, :placeholder => "请输入当前任务的名称（此信息将提前泄露给学员）" %>
|
||
<span style="display: none;margin-left: 10%;" class="c_red" id="new_shixun_name">任务名称不能为空</span>
|
||
</li>
|
||
<li class="clearfix">
|
||
<label class="panel-form-label fl"><span class="c_red mr5">*</span>过关任务：</label>
|
||
<div id="challenge_task_pass" class="new_li">
|
||
<textarea name="challenge[task_pass]"><%= @challenge.task_pass %></textarea>
|
||
</div>
|
||
<p id="e_tip_in" style="margin-left: 10%" class="c_grey"></p>
|
||
<p id="e_tips_in" style="margin-left: 10%" class="c_grey"></p>
|
||
<span style="display: none;margin-left: 10%;" class="c_red" id="new_shixun_pass">过关任务不能为空</span>
|
||
</li>
|
||
<% if @st != 0 %>
|
||
<% if params[:action] == "edit" && @challenge.challenge_questions.count > 0 %>
|
||
<% @challenge.challenge_questions.each_with_index do |question, index| %>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice <%= question.right_key ? "check-option-bg" : "" %>" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案"><%= (question.position+ 65).chr %></span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"><%= question.option_name %></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<% end %>
|
||
<% elsif @st == 2 %>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">A</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">B</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<% else %>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">A</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">B</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">C</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<li class="clearfix pr">
|
||
<label class="panel-form-label fl"><span class="option-item fr mr10 color-grey select-choice" onclick="selectchoice(this, <%= @st %>);" name="option_span" title="点击设置答案">D</span></label>
|
||
<input type="hidden" name="choice[answer][]">
|
||
<textarea class="panel-form-width2-690 fl panel-box-sizing" name="question[cnt][]" placeholder="请输入选项内容"></textarea>
|
||
<a title="移除" class="position-delete option_icon_remove"><i class="fa fa-times-circle color-orange font-16 fl"></i></a>
|
||
</li>
|
||
<% end %>
|
||
<ul>
|
||
<li class="clearfix mb10" >
|
||
<label class="panel-form-label fl"><span class="add-option-item fr mr10 color-grey border-dash-orange" name="option_span"><%= params[:action] == "edit" ? (@challenge.challenge_questions.count + 65).chr : (@st == 1 ? "E" : "C") %></span></label>
|
||
<div class="fl panel-box-sizing add-option-input border-dash-orange"><a title="新增" class="option_icon_add">新增选项</a></div>
|
||
</li>
|
||
<span style="display: none" class="c_red ml95" id="choice_error_tip"></span>
|
||
<li class="clearfix" ><label class="fl" style="margin-left: 46px">温馨提示：点击选项，可以直接设置答案</label><label class="fr">标准答案：<span id="current-option" class="color-orange"><%= @challenge.right_answers.blank? ? "请点击正确选项" : @challenge.right_answers %></span></label></li>
|
||
</ul>
|
||
<% end %>
|
||
<li class="clearfix">
|
||
<a href="javascript:void(0);" class="task-btn task-btn-green fr" onclick="challenge_update(<%= @st %>)">保存</a>
|
||
<% if params[:action] == "new" %>
|
||
<a href="<%= shixun_challenges_url(@shixun) %>" class="task-btn fr mr10" id="task_pass_cancel">取消</a>
|
||
<% else %>
|
||
<a href="<%= edit_shixun_challenge_path(@challenge, :shixun_id => @shixun) %>" class="task-btn fr mr10" >取消</a>
|
||
<% end %>
|
||
</li>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
$(function() {
|
||
taskpass_editormd = editormd("challenge_task_pass", {
|
||
width : "89.6%",
|
||
height : 600,
|
||
syncScrolling : "single",
|
||
//你的lib目录的路径，我这边用JSP做测试的
|
||
path : "/editormd/lib/",
|
||
tex : true,
|
||
autoFocus: false,
|
||
toolbarIcons : function() {
|
||
// Or return editormd.toolbarModes[name]; // full, simple, mini
|
||
// Using "||" set icons align right.
|
||
return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear" ]
|
||
},
|
||
toolbarCustomIcons : {
|
||
testIcon : "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
|
||
testIcon1 : "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
|
||
},
|
||
//这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
|
||
saveHTMLToTextarea : true,
|
||
// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
|
||
dialogMaskOpacity : 0.6,
|
||
placeholder: "<%= @st == 0 ? "请输入完成当前任务依赖的知识点或者其它相关信息" : "请输入选择题的题干内容" %>",
|
||
imageUpload : true,
|
||
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
|
||
imageUploadURL : "<%= upload_with_markdown_path(:container_id => @shixun.id, :container_type => @shixun.class) %>"//url
|
||
});
|
||
|
||
var bt = baidu.template;
|
||
bt.LEFT_DELIMITER = '<!';
|
||
bt.RIGHT_DELIMITER = '!>';
|
||
|
||
$("#shixun_form").on('click', 'a.option_icon_add', function () {
|
||
var html = bt('t:set-option-list', null);
|
||
$(this).parent().parent('.clearfix').before(html);
|
||
var inputs = document.getElementsByName("question[cnt][]");
|
||
var inputs_spans = document.getElementsByName("option_span");
|
||
for (var j = 0; j < inputs_spans.length; j++) {
|
||
if(j >= 0 && j <= 26){
|
||
$(inputs_spans[j]).html(String.fromCharCode(65 + j));
|
||
}
|
||
}
|
||
for (var i = 0; i < inputs.length; i++) {
|
||
autoTextarea(inputs[i], 0, 140);
|
||
}
|
||
$(inputs[inputs.length - 1]).focus();
|
||
});
|
||
$("#shixun_form").on('click', 'a.option_icon_remove', function () {
|
||
$(this).parent('.clearfix').remove();
|
||
var inputs_spans = document.getElementsByName("option_span");
|
||
for (var j = 0; j < inputs_spans.length; j++) {
|
||
if(j >= 0 && j <= 26){
|
||
if(j >= 0 && j <= 26){
|
||
$(inputs_spans[j]).html(String.fromCharCode(65 + j));
|
||
}
|
||
}
|
||
}
|
||
$("#current-option").html("");
|
||
if($(".check-option-bg").length>0){
|
||
for(var i=0;i<$(".check-option-bg").length;i++){
|
||
$("#current-option").html($("#current-option").html()+$(".check-option-bg").eq(i).html());
|
||
}
|
||
}else{
|
||
$("#current-option").html("请点击正确选项");
|
||
}
|
||
});
|
||
|
||
// 实训简介自动保存
|
||
md_elocalStorage(taskpass_editormd, "challenge_in_<%= User.current.id %>", "in");
|
||
});
|
||
// md恢复上次数据
|
||
function md_rec_data(k,mdu,id){
|
||
console.log(k);
|
||
if(window.sessionStorage.getItem(k+mdu) !== null){
|
||
taskpass_editormd.setValue(window.sessionStorage.getItem(k+mdu));
|
||
md_clear_data(k,mdu,id);
|
||
}
|
||
}
|
||
//设置选项答案
|
||
function selectchoice(item, st){
|
||
//判断是否选中，如果选中，再次点击的时候取消选中
|
||
if($(item).hasClass('check-option-bg')){
|
||
$(item).removeClass('check-option-bg');
|
||
}else{
|
||
if(st == 2){
|
||
//单选
|
||
$(".select-choice").removeClass('check-option-bg');
|
||
$(item).addClass('check-option-bg');
|
||
}else{
|
||
//多选
|
||
$(item).addClass('check-option-bg');
|
||
}
|
||
}
|
||
$("#current-option").html("");
|
||
if($(".check-option-bg").length>0){
|
||
for(var i=0;i<$(".check-option-bg").length;i++){
|
||
$("#current-option").html($("#current-option").html()+$(".check-option-bg").eq(i).html());
|
||
}
|
||
}else{
|
||
$("#current-option").html("请点击正确选项");
|
||
}
|
||
}
|
||
// 判断选择题的答案
|
||
function set_choice_answer(){
|
||
var answer = document.getElementsByName("choice[answer][]");
|
||
var choice = document.getElementsByName("option_span");
|
||
for(var o = 0; o < choice.length; o++){
|
||
if($(choice[o]).hasClass("check-option-bg")){
|
||
$(answer[o]).val(String.fromCharCode(65 + o));
|
||
}else{
|
||
$(answer[o]).val(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 判断选择题内容是否为空
|
||
function judge_choice_contents(){
|
||
var answer = document.getElementsByName("choice[answer][]");
|
||
var contents = document.getElementsByName("question[cnt][]");
|
||
var lens = contents.length;
|
||
for(var i = 0; i < lens; i++){
|
||
if($(contents[i]).val().trim() == ""){
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 判断选择题选择答案的个数
|
||
function judge_choice_answer(){
|
||
var answer = document.getElementsByName("choice[answer][]");
|
||
var lens = answer.length;
|
||
var num = 0;
|
||
for(var i= 0; i < lens; i++){
|
||
if($(answer[i]).val() != "0"){
|
||
num += 1;
|
||
}
|
||
}
|
||
return num;
|
||
}
|
||
|
||
// 选择题选项的个数
|
||
function choice_num(){
|
||
var answer = document.getElementsByName("choice[answer][]");
|
||
var lens = answer.length;
|
||
return lens;
|
||
}
|
||
|
||
window.onload = function(){
|
||
$("#challenge_task_pass [type=\"latex\"]").bind("click", function(){
|
||
taskpass_editormd.cm.replaceSelection("```latex");
|
||
taskpass_editormd.cm.replaceSelection("\n");
|
||
taskpass_editormd.cm.replaceSelection("\n");
|
||
taskpass_editormd.cm.replaceSelection("```");
|
||
var __Cursor = taskpass_editormd.cm.getDoc().getCursor();
|
||
taskpass_editormd.cm.setCursor(__Cursor.line-1, 0);
|
||
});
|
||
|
||
$("#challenge_task_pass [type=\"inline\"]").bind("click", function(){
|
||
taskpass_editormd.cm.replaceSelection("$$$$");
|
||
var __Cursor = taskpass_editormd.cm.getDoc().getCursor();
|
||
taskpass_editormd.cm.setCursor(__Cursor.line, __Cursor.ch-2);
|
||
taskpass_editormd.cm.focus();
|
||
});
|
||
$("[type=\"inline\"]").attr("title", "行内公式");
|
||
$("[type=\"latex\"]").attr("title", "多行公式");
|
||
|
||
};
|
||
$("#challenge_subject").keydown(function(){
|
||
$("#new_shixun_name").hide();
|
||
});
|
||
$("#challenge_subject").keydown(function(){
|
||
$("#new_shixun_pass").hide();
|
||
});
|
||
|
||
$("#task_pass_cancel").click(function(){
|
||
$("#task_pass_show").show();
|
||
$("#task_pass_edit").hide();
|
||
});
|
||
function challenge_update(st){
|
||
set_choice_answer();
|
||
var error = $("#choice_error_tip");
|
||
if($('#challenge_subject').val().trim() == ""){
|
||
$("#challenge_subject").focus();
|
||
$("#new_shixun_name").show();
|
||
}else if($("#challenge_task_pass textarea").val().trim() == ""){
|
||
$("#challenge_task_pass textarea").focus();
|
||
$("#new_shixun_pass").show();
|
||
}else if(judge_choice_contents()){
|
||
error.html("选项不能为空").show();
|
||
}else{
|
||
if(st == "2"){
|
||
if(judge_choice_contents()) {
|
||
error.html("选项内容不能为空").show();
|
||
}else if(choice_num() < 2){
|
||
error.html("单选题选项不能少于2个").show();
|
||
}else if(judge_choice_answer() == 0){
|
||
error.html("请设置答案").show();
|
||
}else{
|
||
$('#challenge_shixun_update').submit();
|
||
}
|
||
}else if(st == "1"){
|
||
if(judge_choice_contents()) {
|
||
error.html("选项内容不能为空").show();
|
||
}else if(choice_num() < 3){
|
||
error.html("多选题选项不能少于3个").show();
|
||
}else if(judge_choice_answer() < 2){
|
||
error.html("答案不能少于2个").show();
|
||
}else{
|
||
$('#challenge_shixun_update').submit();
|
||
}
|
||
}else{
|
||
$('#challenge_shixun_update').submit();
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|