onepage/tm/template_dir/admin/activity/interactive_question.html

<{include file="./admin/header.html"}>
<{include file="./admin/left.html"}>
<{include file="./admin/nav.html"}>
<{include file="get_kindeditor.html"}>

<style>
.set-nav {
	margin: 0 auto;
}
.set-nav-hr {
	background-color: #ddd;
    height: 1px;
    position: relative;
}
.form-group label {
	font-weight: 600;
}
.checkbox-inline, .radio-inline {
	font-weight: 400!important;
}
.rowlabel {
	font-weight: 300!important;
}
.music_play_hide {
	display:none;
}
</style>


<div id="activity_container">

<form id="activity_form">
<div class="activity_center">
<{include file="./admin/activity/common_nav.html"}>

	<input name="events_id" type="hidden" value="<{$events_Data.events.id}>">
	
	<div  class="panel panel-default">
		<div class="panel-heading"><h3 class="panel-title" id="panel-title">设置问题</h3></div>
		
		<div class="panel-body" style="padding: 10px; display: none;" id="show_div">
				<div style="margin: 10px; display: none;" >排序:  &nbsp; &nbsp; &nbsp; <font id="f_sort"></font></div>
				<input type="hidden"  value="<{$nextSort}>"  id="f_sort_h" name="f_sort_h">
				<div style="margin: 10px;">问题:   &nbsp; &nbsp; &nbsp; <font id="f_question"></font></div>
				<input type="hidden" value="" id="f_question_h" name="f_question_h">
				<div style="margin: 10px;">选项类型:  &nbsp; &nbsp; &nbsp; <font id="f_type"></font></div>
				<div style="margin: 10px;">选项规则:  &nbsp; &nbsp; &nbsp; <font id="f_choice"></font></div>
				<input type="hidden" value="" id="f_type_h" name="f_type_h">
				<input type="hidden" value="" id="f_num_h" name="f_num_h">
				<input type="hidden" value="" id="f_choice_h" name="f_choice_h">
				<div style="clear:both;"></div>
				<div id="show_html">
					
				</div>
				
				<div style="clear:both;"></div>
				<div style="margin: 10px; text-align: left: ;">
						<a href="javascript:;"  id="add_but" class="button button-3d button-primary button-rounded">点击保存</a>
						<div style="text-align: right;"><a href="?c=Admin_Activity_SetInteractive&a=PageShow&events_id=<{$events_Data.events.id}>&typ=question"  style="text-align: right;"><<返回上一级</a></div>
				</div>
				
				
				
		</div>
		
		<div id="img_html" style="display:none;">
				<div class="panel panel-default"  style="padding:10px 10px 0px 10px;">
						<div class="form-group">
							<div>
								<img id="img_url_tag" src="http://placehold.it/200&text=290x(>290)" style="width:100px;" class="img-thumbnail">
								<input id="img_url_input" name="img_url" type="hidden" value="">
								<input id="image_upload" type="button" value="选择图片" >
							</div>
						</div>
						<p>  答案: <input type="text" name="img_url_answer"></p>
					</div>
		</div>
		
		<div id="txt_html" style="display:none;">
				<div class="panel panel-default" style="padding:10px 10px 0px 10px;">
					<p>答案: <input type="text" name="txt" id="txt"></p>
				</div>
		</div>
		
		
		<div class="panel-body" id="add_div" >
			<div class="form-group">
					<p style="display: none;">顺序：<input type="text" id="sort" size="2"  value="<{$nextSort}>" ></p>
					<p>问题：<input type="text"  id="question"  size="50" ></p>
					<p>选项：<input type="text"  id ="num" value="0" size="2" >个</p>
					<p>选项类型：<select name="type" id="type">
										<option value="img">图片</option>
										<option value="txt">文字</option>
								</select>
					</p>
					<p>选项规则：<select name="choice" id="choice">
										<option value="0">单选</option>
										<option value="1">多选</option>
								</select>
					</p>
					<div>
						<p style="margin-top: 20px;"><a href="javascript:;" id="add"><i class="fa fa-plus"></i> 点击创建问题</a></p>
						<div style="text-align: right;"><a href="?c=Admin_Activity_SetInteractive&a=PageShow&events_id=<{$events_Data.events.id}>"  style="text-align: right;"><<返回上一级</a></div>
					</div>
			</div>
		</div>
		
		
	</div>
</div>

<{include file="./admin/activity/common_right.html"}>

<div style="clear:both;"></div>
</form>
</div>



<script>
KISSY.use('node, io, event, jquery', function (S, Node, IO, Event, jQuery) {
	var $ = S.all;
	$("#add").on('click', function () {
		var tyepData = {'img':'图片','txt':'文字'};
		var choiceData = {'1':'多选','0':'单选'};
		var question = $('#question').val();
		var sort = $('#sort').val();
		var num = $('#num').val();
		var type = $('#type').val();
		var choice = $('#choice').val();
		
		$('#f_sort').html(sort);
		$('#f_question').html(question);
		$('#f_type').html(tyepData[type]);
		$('#f_choice').html(choiceData[choice]);
		
		$('#f_sort_h').val(sort);
		$('#f_question_h').val(question);
		$('#f_type_h').val(type);
		$('#f_choice_h').val(choice);
		$('#f_num_h').val(num);
		
		
		$('#add_div').hide();
		$('#show_div').show();
		if(type == 'img'){
			var inHtml = '';
			for (var i=1;i<=num;i++){
				var html = $('#img_html').html();
				html = html.replace("img_url_tag", "img_url_tag_"+i);
				html = html.replace("img_url_input", "img_url_input_"+i);
				html = html.replace("image_upload", "image_upload_"+i);
				html = html.replace("name=\"img_url", "name=\"img_url_"+i);
				html = html.replace("img_url_answer", "img_url_answer_"+i);
				inHtml+=html;
			}
			$('#show_html').html(inHtml);	
			for (var i=1;i<=num;i++){
				runImg('image_upload_'+i,'img_url_input_'+i,'img_url_tag_'+i);
			}
			return ;
		}
		
		if(type=='txt'){
			var inHtml = '';
			for (var i=1;i<=num;i++){
				var html = $('#txt_html').html();
				html = html.replace("\"txt\"", '"txt_'+i+'"');
				html = html.replace("\"txt\"", '"txt_'+i+'"');
				inHtml+=html;
			}
			$('#show_html').html(inHtml);
			return ;
		}
	});
	
	
	$("#add_but").on('click', function () {
		var formData = IO.serialize("#activity_form");
		new IO({
  			type: "post"
  			, url: VG.conf.root_domain + '/?c=Admin_Activity_SetInteractive&a=ReqAddSurveyQuestion'
  			, data: formData
  			, success: function (data) {
  				if (data.ok) { //ok
  					location.href = VG.conf.root_domain + '?c=Admin_Activity_SetInteractive&a=PageShow&events_id=<{$events_Data.events.id}>';
  				} else {
  					alert('操作失败，原因：'+data.msg);
  				}
  				return false;
  			}
  			, error: function (NULL, textStatus) {
  				alert("请求服务器失败，原因:"+textStatus);
  			}
  			, dataType: "json"
  		});
		
		
	});
	
	//图片上传
	function runImg(image_upload,img_url_input,img_url_tag){
			var K = KindEditor;
			var uploadbutton = K.uploadbutton({
				button : K('#'+image_upload)[0],
				fieldName : 'imgFile',
				url : VG.conf.root_domain + '/?c=kindeditor&a=updateJson&dir=image',
				afterUpload : function(data) {
					if (data.error === 0) {
						var url = K.formatUrl(data.url, 'absolute');
						K('#'+img_url_input).val(data.url);
						K('#'+img_url_tag).attr('src', data.url);
					} else {
						alert(data.message);
					}
				},
				afterError : function(str) {
					alert('自定义错误信息: ' + str);
				}
			});
			uploadbutton.fileBox.change(function(e) {
				uploadbutton.submit();
			});
	
	}
	
	
});
</script>

<{include file="./admin/bottom.html"}>