jacknudt
/
socialforge
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

单选题增加操作栏；多选题增加选项上下限；数字随选项数实时变化js实现

This commit is contained in:
Tim 2016-10-27 09:02:56 +08:00
parent d44744cfd7
commit acda8ca15c
6 changed files with 86 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/views/poll/_new_MCQ.html.erb
View File

@ -9,6 +9,18 @@
</div>
<div class="ur_editor_content">
<ul>
<li class='ur_item'>
<div class="fl mr30">
<label>下限<span class='ur_index'></span>：&nbsp;&nbsp;&nbsp;</label>
<select class="poll-multiple-limit"></select>
<span>（可选）答题时最少选几项</span>
</div>
<div class="fl">
<label>上限<span class='ur_index'></span>：&nbsp;&nbsp;&nbsp;</label>
<select class="poll-multiple-limit"></select>
<span>（可选）答题时最多选几项</span>
</div>
</li>
<li class='ur_item new_answer'>
<label>选项<span class='ur_index'></span>：&nbsp;&nbsp;&nbsp;</label>
<input maxlength="200" type='text' name='question_answer[0]' placeholder='新建选项'/>
@ -56,4 +68,16 @@
add_poll_question_new($(this));
});
});
var multiLimit = function(){
var upperLimit = $(".new_answer").size();
for(var i = 1; i <= upperLimit; i++){
$(".poll-multiple-limit").append("<option>" + i + "</option>");
}
}
multiLimit();
$(".new-question").click(function(){
$(".poll-multiple-limit option").remove();
multiLimit();
});
</script>

53
app/views/poll/_poll_content.html.erb
View File

@ -2,18 +2,36 @@
<% mcq_question_list = poll.poll_questions.where("question_type=2") %>
<% single_question_list = poll.poll_questions.where("question_type=3") %>
<% multi_question_list = poll.poll_questions.where("question_type=4") %>
<div class="testStatus" id="mc_question_list" style="display: <%=mc_question_list.count > 0 ? "" : "none" %>">
<h3 class="fontGrey3">单选题</h3>
<% mc_question_list.each do |poll_question| %>
<div id="poll_questions_<%= poll_question.id%>">
<div id="show_poll_questions_<%= poll_question.id %>">
<%= render :partial => 'show_MC', :locals => {:poll_question => poll_question} %>
</div>
<div id="edit_poll_questions_<%= poll_question.id %>" style="display: none;">
<%= render :partial => 'edit_MC', :locals => {:poll_question => poll_question} %>
</div>
</div>
<% end %>
<div class="poll-container" id="mc_question_list" style="display: <%=mc_question_list.count > 0 ? "" : "none" %>">
<div class="pool-tool-bar">
<p class="mt10 mb10">
<span class="questionLabel">1</span>
<span class="c_red questionLabel ml5" title="必答">*</span>
</p>
<a class="poll-up mb8" title="上移"></a>
<a class="poll-down mb8" title="下移"></a>
<a href="javascript:void(0);" class="poll-add pr mb8">
<ul class="poll-add-menu fontGrey3">
<li>单选题</li>
<li>多选题</li>
<li>单行主观</li>
</ul>
</a>
<a class="poll-delete" title="删除"></a>
</div>
<div class="poll-content">
<h3 class="fontGrey3">单选题</h3>
<% mc_question_list.each do |poll_question| %>
<div id="poll_questions_<%= poll_question.id%>">
<div id="show_poll_questions_<%= poll_question.id %>">
<%= render :partial => 'show_MC', :locals => {:poll_question => poll_question} %>
</div>
<div id="edit_poll_questions_<%= poll_question.id %>" style="display: none;">
<%= render :partial => 'edit_MC', :locals => {:poll_question => poll_question} %>
</div>
</div>
<% end %>
</div>
</div>
<div class="testStatus" id="mcq_question_list" style="display: <%=mcq_question_list.count > 0 ? "" : "none" %>">
<h3 class="fontGrey3">多选题</h3>
@ -53,4 +71,13 @@
</div>
</div>
<% end %>
</div>
</div>
<script>
$(".poll-add").mouseover(function(){
$(this).children().show();
});
$(".poll-add").mouseout(function(){
$(this).children().hide();
});
</script>

6
app/views/poll/_poll_form.html.erb
View File

@ -474,6 +474,12 @@ function insert_MCQ(quest_type,quest_num,quest_id){
{
doc.parent().remove();
}
$(".poll-multiple-limit option").remove();
var upperLimit = $(".new_answer").size();
for(var i = 1; i <= upperLimit; i++){
$(".poll-multiple-limit").append("<option>" + i + "</option>");
}
}
//其他选项
function add_other_answer(doc)

2
app/views/poll/_show_MC.html.erb
View File

@ -13,7 +13,7 @@
<a class='ur_icon_add' title='向下插入' id="add_mc_<%=poll_question.id%>" onclick="dismiss('mc',<%=poll_question.id%>);insert_MC('mc',<%=poll_question.question_number%>,<%=poll_question.id%>);"></a>
<div class="cl"></div>
<div class="ur_inputs">
<table class="ur_table" style="width:675px;">
<table class="ur_table" style="width:647px;">
<tbody>
<% poll_question.poll_answers.reorder("answer_position").each do |poll_answer| %>
<tr>

BIN
public/images/course/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

15
public/stylesheets/css/courses.css
View File

@ -559,3 +559,18 @@ a:hover.blueCir{ background:#3598db; color:#fff;}
.new-question {width:324px; height:30px; color:#888; background-color:#fff; padding-left:5px; margin-left:46px; cursor:pointer;}
.new-subjective {width:550px; height:30px; color:#888; background-color:#fff; padding-left:5px; margin-left:96px; cursor:pointer;}
.questionnaire-input {height:30px; border:1px solid #cbcbcb; padding-left:5px;}
/*20161026问卷调查增加toolbar*/
.poll-container {width:718px; border:1px solid #ddd; margin-bottom:10px; background-color:#fff; position:relative; color:#767676; border:1px solid #ddd;}
.pool-tool-bar {width:50px; position:absolute; top:0; left:0; text-align:center;}
.poll-content {margin-left:50px; padding:10px; border-left:1px solid #ddd;}
.poll-up{ background:url(/images/course/icons.png) 0px -479px no-repeat; width:16px; height:20px; display:block; margin-left:auto; margin-right:auto;}
.poll-up:hover{background:url(/images/course/icons.png) -23px -479px no-repeat;}
.poll-down{ background:url(/images/course/icons.png) 0px -502px no-repeat; width:16px; height:20px; display:block; margin-left:auto; margin-right:auto;}
.poll-down:hover{background:url(/images/course/icons.png) -23px -502px no-repeat;}
.poll-add{ background:url(/images/course/icons.png) 2px -317px no-repeat; width:16px; height:20px; display:block; margin-left:auto; margin-right:auto;}
.poll-add:hover{background:url(/images/course/icons.png) -18px -317px no-repeat;}
.poll-delete{ background:url(/images/course/icons.png) 3px -343px no-repeat; width:16px; height:20px; display:block; margin-left:auto; margin-right:auto;}
.poll-delete:hover{ background:url(/images/course/icons.png) -17px -343px no-repeat;}
.poll-add-menu {border:1px solid #eaeaea; background:#fff; padding:5px 10px; width:60px; left:0; top:16px; position:absolute; z-index:9999; line-height:2; box-shadow: 0px 2px 8px rgba(146, 153, 169, 0.5); display:none;}
.poll-multiple-limit {width:70px; outline: none;}