<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>试题中心</title>
<%@ include file="../common/top.jsp"%>
<link href="${ctx}/resources/css/main.css" rel="stylesheet"type="text/css" />

<link rel='stylesheet' href='${ctx}/resources/css/user-center-style.css'type='text/css' media='screen' />
<script type="text/javascript" src="${ctx}/resources/js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/swfupload/import.jsp"></script>
<script type="text/javascript" src="${ctx}/resources/ckeditor4.4.7/ckeditor.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery.alerts.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/question/add.jsp"></script>
<script type="text/javascript" src="${ctx}/resources/js/validator.js"></script>
<script language="javascript" type="text/javascript" src="${ctx}/resources/js/My97DatePicker/WdatePicker.js" ></script>
<%@ include file="../common/validation.jsp"%>
<style type="text/css">
.my-dialog .ui-dialog-titlebar-close{display: none;
 }
.select-knowledge{width:auto;}

.row div,label {
	float: left;
}
</style>
<script type="text/javascript">
			var swfu;
			function load() {
				questionChange('${ctx }');
				swfu = new SWFUpload({
					post_params: {"name" : "huliang"},
					 upload_url :"${ctx}/uploadFile",
					 use_query_string : false,
					 
					// File Upload Settings
					file_size_limit : "10 MB",	// 1000MB
					file_types : "*.*",
					file_types_description : "所有文件",
					file_upload_limit : "0",
									
					file_queue_error_handler : fileQueueError,
					file_dialog_complete_handler : fileDialogComplete,//选择好文件后提交
					file_queued_handler : AccessoryFileQueued,
					upload_progress_handler : uploadProgress,
					upload_error_handler : uploadError,
					upload_success_handler : uploadSuccess,
					upload_complete_handler : uploadComplete,
	
					// Button Settings
					button_image_url : '${ctx}/resources/images/SmallSpyGlassWithTransperancy_17x18.png',
					button_placeholder_id : "spanButtonPlaceholder",
					button_width: 180,
					button_height: 18,
					button_text : '<span class="button">添加附件 <span class="buttonSmall">(单个文件最大10 MB)</span></span>',
					button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } .buttonSmall { font-size: 10px; color: #ff0000;}',
					button_text_top_padding: 0,
					button_text_left_padding: 18,
					button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
					button_cursor: SWFUpload.CURSOR.HAND,
					
					// Flash Settings
					flash_url : '${ctx}/resources/js/swfupload/swfupload.swf',
	
					
					custom_settings : {
						upload_target : "divFileProgressContainer"
					},
					// Debug Settings
					debug: false  //是否显示调试窗口
				});
				
				
				
			};

		</script>
</head>

<body onload="load()">
	<%@ include file="../common/header.jsp"%>
	<div id="content">
		<%@ include file="../common/sub_menu.jsp"%>
		<div id="page">
		<div class="page-header">新增试题</div>
		<div class="page-body">
			<form id="questionUpdateFrm" action="${ctx}/question/insert" method="post"  >
			<div class="questions" style="margin:0;padding-top:10px;">
			    <table style="width:30%;float:left;" class="label-table">
						<tr>
							<td class="label-table-label">课程<span style="color:red">*</span></td>
							<td class="qBox label-table-content">
								<select  id="course" name="courseId" style="height: 25px;" onchange="courseChange('${ctx}','${role.id }')" class="validate[groupRequired[courseId]]">
									<option value="">请选择</option>
									<c:forEach items="${courses}" var="course">
										<c:choose>
											<c:when test="${course.id==question.courseId}">
												<option value="${course.id}" selected="selected">${course.code}-${course.name}</option>	
											</c:when>
											<c:otherwise>
												<option value="${course.id}">${course.code}-${course.name}</option>	
											</c:otherwise>
										</c:choose>															
									</c:forEach>
								</select>
								<input id="subjectId" name="subjectId" type="hidden"/>
							</td>
						</tr>
						<tr>
							<td class="label-table-label">题型<span style="color:red">*</span></td>
							<td class="qBox label-table-content">
								<select id="typeId" name="typeId" class="validate[groupRequired[typeId]]" style="height: 25px;" onchange="questionChange('${ctx }')">
									<option value="0">请选择</option>
									<c:forEach items="${ls_questionType}" var="questionType">
										<c:choose>
											<c:when test="${questionType.id==question.typeId}">
												<option value="${questionType.id}" selected="selected">${questionType.name}</option>
											</c:when>
											<c:otherwise>
												<option value="${questionType.id}">${questionType.name}</option>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td class="label-table-label">教材</td>
							<td class="qBox label-table-content">
								<select id="bookId" name="bookId" class="validate[required] text-input" style="height: 25px;">
									<option value="0">请选择</option>
									<c:forEach items="${ls_book}" var="book">
										<c:choose>
											<c:when test="${book.id==question.bookId}">
												<option value="${book.id}" selected="selected">${book.name}</option>
											</c:when>
											<c:otherwise>
												<option value="${book.id}">${book.name}</option>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td class="label-table-label">层次</td>
							<td class="qBox label-table-content">
								<input  type="radio" name="gradeCode" value="0" ${(question.gradeCode=='0')?'checked':'' }/>不限 &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
                                <input  type="radio" name="gradeCode" value="2" ${(question.gradeCode=='2')?'checked':'' }/>本科  &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
                                <input  type="radio" name="gradeCode" value="1" ${(question.gradeCode=='1')?'checked':'' }/>专科 
							</td>
						</tr>
						<tr>
							<td class="label-table-label">预计难度</td>
							<td class="qBox label-table-content">
								<input  type="radio" name="estimateDifficultyCode" id="estimateDifficultyCode" value="10" ${(question.estimateDifficultyCode=='10')?'checked':'' }/>易&nbsp; &nbsp; &nbsp; &nbsp;
                                <input  type="radio" name="estimateDifficultyCode" id="estimateDifficultyCode" value="20" ${(question.estimateDifficultyCode=='20')?'checked':'' }/>中等偏易  &nbsp; &nbsp; &nbsp; &nbsp;
                                <input  type="radio" name="estimateDifficultyCode" id="estimateDifficultyCode" value="30" ${(question.estimateDifficultyCode=='30')?'checked':'' }/>中等偏难&nbsp; &nbsp; &nbsp; &nbsp;
                                <input  type="radio" name="estimateDifficultyCode" id="estimateDifficultyCode" value="40" ${(question.estimateDifficultyCode=='40')?'checked':'' }/>难
							</td>
						</tr>
						<tr>
							<td class="label-table-label">认知层次</td>
							<td class="qBox label-table-content">
								<div>
                                    <input  type="radio" name="abilityCode" value="A" ${(question.abilityCode=='A')?'checked':'' }/>识记&nbsp; &nbsp; &nbsp; 
                                    <input  type="radio" name="abilityCode"  value="B" ${(question.abilityCode=='B')?'checked':'' }/>理解  &nbsp; &nbsp; &nbsp;
                                </div>
                                <div style="margin-top:5px;">
                                    <input  type="radio" name="abilityCode" value="C" ${(question.abilityCode=='C')?'checked':'' }/>简单应用&nbsp; &nbsp; &nbsp;
                                    <input  type="radio" name="abilityCode"  value="D" ${(question.abilityCode=='D')?'checked':'' }/>综合应用
                                </div>
							</td>
						</tr>
						<tr>
							<td class="label-table-label">命题人<span style="color:red">*</span></td>
							<td class="qBox label-table-content">
								<input type="text" id="createdBy" name="createdBy" style="display: none" value="${user.id}"/>
								<select name="setBy" id="setBy" class="text-input" style="height: 25px;">
									<c:choose>
										<c:when test="${role.id=='7' }">
											<option value="${user.id}">${user.name}</option>
										</c:when>
										<c:when test="${role.id=='6' }">
											<option value="${user.id}">${user.name}</option>
										</c:when>
										<c:when test="${role.id=='8' }">
											<c:forEach items="${users}" var="user">
												<c:choose>
													<c:when test="${user.id==question.setBy}">
														<option value="${user.id}" selected="selected">${user.name}</option>
													</c:when>
													<c:otherwise>
														<option value="${user.id}" >${user.name}</option>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</c:when>
									</c:choose>
								</select>
								<!--  <input type="text" style="display: none" name="createdBy" value="${web_session_user.name }"/>-->
							</td>
						</tr>
						<tr>
							<td class="label-table-label">命题时间<span style="color:red">*</span></td>
							<td class="qBox label-table-content">
								<input type="text" id="setTime" name="setTime" class="validate[required] text-input" onclick='WdatePicker()'   readonly="readonly" value="<fmt:formatDate value="${question.setTime}" type="both" />" />
							</td>
						</tr>
			    </table>
				<table style="width:60%;float:left;margin-left:10px;" class="label-table">
					<tbody>
						<tr>
							<td class="label-table-label">满分值<span style="color:red">*</span></td>
							<td class="qBox label-table-content">
								<input type="text" name="score" id="score" class="validate[required,custom[integer],max[150],min[0]] text-input"  value="${question.score}"/>
							</td>
						    <td class="label-table-label">知识点</td>
						    <td class="qBox label-table-content">
                                 <input type="text" id="chapter" name="chapter" class="text-input" style="width:30px;" value="${question.chapter}"/>&nbsp;章&nbsp;&nbsp;&nbsp;
                                 <input type="text" id="section" name="section" class="text-input" style="width:30px;"  value="${question.section}"/>&nbsp;节&nbsp;&nbsp;&nbsp;
                                 <input type="text" id="item" name="item" class="text-input" style="width:30px;"  value="${question.item}"/>&nbsp;目&nbsp;&nbsp;&nbsp;
                                 <input type="text" id="ye" name="page" class="text-input"  style="width:30px;" value="${question.page}"/>&nbsp;页
                            </td>
						</tr>
						<tr>
							<td class="label-table-label">题干<span style="color:red">*</span></td>
							<td colspan="3" class="qBox label-table-content">
								<div id="body-content" class="box-content" field="body" name="题干" title="点击输入内容" >
								</div>
							</td>
						</tr>
						<tr id="answer-tr">
							<td class="label-table-label">选项及答案<span style="color:red">*</span></td>
							<td colspan="3" class="qBox label-table-content">
								<div id="answer-content" class="box-content" field="answer" name="选项及答案" title="点击输入内容"></div>
								<div class="container" id="container">
									<div id="Choose" class="row" style="display: none">
										<div class="panel-body">
											<div class="row">
												<div class="col-sm-2 col-lg-2">
													<input type="button" class="btn btn-default" id="Add" onclick="add()" value="添加"/>
													<input type="button" class="btn btn-default" id="Clean" onclick="clean()" value="清空"/>
												</div>
											</div>
												<div class="row RadioContent" style="padding: 15px 35px;">
												<div class="row">
													<label class="col-lg-1 col-sm-1"> 
													<input	type="radio" name="optionsRadios" value="A" class="validate[required] radio"/>A.</label>
													<div class="col-lg-5 col-sm-5">
														<input id="A_radio_input" class="validate[required] text-input listInput" style="width: 350px;" readonly="readonly"/>
													</div>
													<div id="A_radio_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="A_radio_hidden"/></div>										
												</div>
												<div class="row">
													<label class="col-lg-1 col-sm-1"> 
													<input type="radio" name="optionsRadios" id="optionsRadios2" value="B" class="validate[required] radio"/>B.</label>
													<div class="col-lg-5 col-sm-5">
														<input class="validate[required] text-input listInput" id="B_radio_input" style="width: 350px;" readonly="readonly"/>
													</div>
													<div id="B_radio_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="B_radio_hidden"/></div>
												</div>
												<div class="row">
													<label class="col-lg-1 col-sm-1"> 
													<input	type="radio" name="optionsRadios" id="optionsRadios3" value="C" class="validate[required] radio"/>C.</label>
													<div class="col-lg-5 col-sm-5">
														<input class="validate[required] text-input listInput" id="C_radio_input" style="width: 350px;" readonly="readonly"/>
													</div>
													<div id="C_radio_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="C_radio_hidden"/></div>
												</div>
												<div class="row">
													<label class="col-lg-1 col-sm-1"> 
													<input	type="radio" name="optionsRadios" value="D" class="validate[required] radio"/>D.</label>
													<div class="col-lg-5 col-sm-5">
														<input class="validate[required] text-input listInput" id="D_radio_input" style="width: 350px;" readonly="readonly"/>
													</div>
													<div id="D_radio_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="D_radio_hidden"/></div>
												</div>
											</div>
										</div>
										<div class="row CheckboxContent" style="padding: 15px 35px;">
											<div class="row">
												<label class="col-lg-1 col-sm-1 checkbox-inline">
													<input type="checkbox" name="optionsCKs"value="A" class="validate[required] checkbox "/>A. 
												</label>

												<div class="col-lg-5 col-sm-5">
													<input class="validate[required] text-input listInput" id="A_checkbox_input" style="width: 350px;" readonly="readonly"/>
												</div>
												<div id="A_checkbox_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="A_checkbox_hidden"/></div>
											</div>
											<div class="row">
												<label class="col-lg-1 col-sm-1 checkbox-inline">
													<input type="checkbox" name="optionsCKs" value="B" class="validate[required] checkbox " />B.
												</label>
												<div class="col-lg-5 col-sm-5">
													<input class="validate[required] text-input listInput" id="B_checkbox_input" style="width: 350px;" readonly="readonly"/>
												</div>
												<div id="B_checkbox_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="B_checkbox_hidden"/></div>
											</div>
											<div class="row">
												<label class="col-lg-1 col-sm-1 checkbox-inline">
													<input type="checkbox" name="optionsCKs" value="C" class="validate[required] checkbox "/>C.
												</label>
												<div class="col-lg-5 col-sm-5">
													<input class="validate[required] text-input listInput" id="C_checkbox_input" style="width: 350px;" readonly="readonly"/>
												</div>
												<div id="C_checkbox_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="C_checkbox_hidden"/></div>
											</div>
											<div class="row">
												<label class="col-lg-1 col-sm-1 checkbox-inline">
													<input type="checkbox" name="optionsCKs" value="D" class="validate[required] checkbox " readonly="readonly"/>D.
												</label>
												<div class="col-lg-5 col-sm-5">
													<input class="validate[required] text-input listInput" id="D_checkbox_input" style="width: 350px;"/>
												</div>
												<div id="D_checkbox_div" class="list" field="answer" name="答案" title="点击输入内容"><a href="#">点击编辑答案</a><input type="hidden" id="D_checkbox_hidden"/></div>
											</div>
										</div>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td class="label-table-label" >题卡</td>
							<td colspan="3" class="qBox label-table-content">
								<div id="answerSheet" class="box-content " field="answerSheet" name="题卡" title="点击输入内容"></div>
							</td>
						</tr>
	                    <tr>
                           <td class="label-table-label">备注</td>
                           <td colspan="3" class="qBox label-table-content">
                            <textarea style="height: 38px; width: 500px;" name="remark" id="remark" class="validate[maxSize[250]]"></textarea>
                           </td>
                        </tr>
						<tr id="answer-tr">
						  <td class="label-table-label" >附件</td>
						  <td colspan="5" class="qBox label-table-content">
						  	 	<div id="content">
									<div style="display: inline;   padding: 2px;">
										<span id="spanButtonPlaceholder"></span>
										<!--  <input id="btnCancel" type="button" value="取消所有上传"
											onclick="cancelUpload('infoTable');" disabled="disabled" class="btn3_mouseout" />-->
									</div>
									<div id="divFileProgressContainer" style="height: 20px;"></div>
									<div id="thumbnails">
									<table id="infoTable" border="0" width="530" style="display: inline;  padding: 2px;margin-top:8px;">
										<tr bgcolor="CCCCCC" align="center">
											<td width="150PX;">文件名</td>
											<td width="150PX;">文件大小(字节)</td>
											<td width="150PX;">文件状态</td>
											<td width="150PX;">操作</td>
										</tr>
									</table>
									</div>
								</div>
						  </td>
						</tr>
					</tbody>
				</table>
			</div>
			</form>
			</div>
			<div class="page-footer">
				<input type="button" class="btn" onclick="goSave('${ctx }','save')" value="保存" />
				<input type="button" class="btn" onclick="goSave('${ctx }','saveAdd')" value="保存并新增" />
			</div>
		</div>
	</div>
	
	<div id="editor-dialog" class="dialog hd">
		<div class="dialog-header" id="dialog-header">内容编辑</div>
		<div class="dialog-body">
		<textarea id="textarea"></textarea></div>
		<div class="dialog-footer">
			<input type="button" class="btn" id="save-button" value="保存" />
			<input type="button" class="btn close" value="关闭" />
		</div>
	</div>
	
	<script type="text/javascript">
	var editor = CKEDITOR.replace("textarea");
	var current_edit_dom;
	var option_count = 0;
		$(function() {
			//表单验证
		    $("#questionUpdateFrm").validationEngine(); 
			$("#editor-dialog").overlay({
			      mask: {
			        loadSpeed: 200,
			        opacity: 0.5
			     },
			      closeOnClick: false
			});
			
			
			$('.box-content').click(function(){
				var self = $(this);
				$('#dialog-header').html(self.attr('name'));
				CKEDITOR.instances.textarea.setData(self.html(),function(){
					$("#editor-dialog").overlay().load();
					current_edit_dom = self.attr("id");
				});
			});
			
			$('.list').live('click',function(){
				var self = $(this);
				$('#dialog-header').html(self.attr('name'));
				var id=self.find(":input").attr("id");
				CKEDITOR.instances.textarea.setData($("#"+id).val(),function(){
					$("#editor-dialog").overlay().load();
					current_edit_dom = id;
				});
			});
			
			$('.listInput').live('click',function(){
				var self = $(this);
				var inputId=self.attr("id");
				
				var arr=inputId.split("_");
				var divId=arr[0]+"_"+arr[1]+"_div";
				self=$("#"+divId);
				
				$('#dialog-header').html(self.attr('name'));
				var id=self.find(":input").attr("id");
				CKEDITOR.instances.textarea.setData($("#"+id).val(),function(){
					$("#editor-dialog").overlay().load();
					current_edit_dom = id;
				});
			});
			
			$('#save-button').live('click',function(){
				var field;
				if((current_edit_dom=="body-content")||(current_edit_dom=="answer-content")||(current_edit_dom=="answerSheet")){
					$("#"+current_edit_dom).html(CKEDITOR.instances.textarea.getData());
				}else{
					field = current_edit_dom;
					var arr=current_edit_dom.split("_");
					$("#"+arr[0]+"_"+arr[1]+"_input").val(editor.document.getBody().getText());
				}
				$('#'+field).val(CKEDITOR.instances.textarea.getData());
				$("#editor-dialog").overlay().close();
			});
		});
	</script>
</body>
</html>