<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('新增题目列表')"/>
|
<th:block th:include="include :: summernote-css"/>
|
<th:block th:include="include :: select2-css"/>
|
<th:block th:include="include :: bootstrap-select-css"/>
|
</head>
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<form class="form-horizontal m" id="form-question-add">
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.question.questionNumberPermanent}]]：</label>
|
<div class="col-sm-8">
|
<input name="permanentId" class="form-control" type="text" required>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.question.dimension}]]：</label>
|
<div class="col-sm-8">
|
<select class="form-control" name="subjectId" required>
|
<option value="">--select--</option>
|
<optgroup th:with="subjects=${@subject.selectTSubjectList()}">
|
<option th:each="subject : ${subjects}" th:text="${subject.name}"
|
th:value="${subject.id}"></option>
|
</optgroup>
|
</select>
|
<div class="select-must" style="color: red" hidden="true">*[[#{jsp.exam.question.pleaseSelectADimension}]]</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.question.totalScore}]]：</label>
|
<div class="col-sm-8">
|
<input name="score" class="form-control" type="text" required>
|
</div>
|
</div>
|
<div class="form-group input-focus">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.question.questionStem}]]：</label>
|
<div class="col-sm-8">
|
<input name="title" class="form-control" type="text" required>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.demographyParam.languagetype}]]：</label>
|
<div class="col-sm-8">
|
<select name="langType" class="form-control m-b"
|
th:with="type=${@dict.getType('lang_type')}">
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
th:value="${dict.dictValue}"></option>
|
</select>
|
</div>
|
</div>
|
<div class="form-group option-group">
|
<label class="col-sm-3 control-label">item：</label>
|
<div class="col-sm-8 layui-layer-border input-focus" style="padding-top: 2%" id="optionEdit">
|
<div class="form-group form-inline">
|
<label class="col-sm-1">A</label>
|
<input name="choiceInput" class="form-control valid option-input" type="text"
|
style="width: 10%; margin-right: 2%;" value="A">
|
<input name="selectInput" class="form-control valid option-input" type="text" style="width: 60%;"
|
>
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash delet-trash"></button>
|
</div>
|
<div class="form-group form-inline">
|
<label class="col-sm-1">B</label>
|
<input name="choiceInput" class="form-control valid" type="text"
|
style="width: 10%; margin-right: 2%;" value="B">
|
<input name="selectInput" class="form-control valid" type="text" style="width: 60%;">
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash"></button>
|
</div>
|
<div class="form-group form-inline">
|
<label class="col-sm-1">C</label>
|
<input name="choiceInput" class="form-control valid" type="text"
|
style="width: 10%; margin-right: 2%;" value="C" required>
|
<input name="selectInput" class="form-control valid" type="text" style="width: 60%;">
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash"></button>
|
</div>
|
<div class="form-group form-inline">
|
<label class="col-sm-1">D</label>
|
<input name="choiceInput" class="form-control valid" type="text"
|
style="width: 10%; margin-right: 2%;" value="D">
|
<input name="selectInput" class="form-control valid" type="text" style="width: 60%;">
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash"></button>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group question-item-must form-group" hidden="true">
|
<label class="col-sm-3 control-label" style="color: red">*[[#{jsp.exam.question.pleaseComplete}]]</label>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label"></label>
|
<div class="col-sm-8">
|
<button type="button" class="btn btn-w-m btn-success" id="optionAdd">[[#{jsp.exam.question.addOption}]]</button>
|
<button type="button" class="btn btn-w-m btn-primary" id="optionView">[[#{jsp.exam.question.preview}]]</button>
|
</div>
|
</div>
|
<div class="form-group" id="answer">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.question.correctAnswer}]]：</label>
|
<label class="radio-inline">
|
<input type="radio" name="correct" value="A">A
|
</label>
|
<label class="radio-inline">
|
<input type="radio" name="correct" value="B">B
|
</label>
|
<label class="radio-inline">
|
<input type="radio" name="correct" value="C">C
|
</label>
|
<label class="radio-inline">
|
<input type="radio" name="correct" value="D">D
|
</label>
|
</div>
|
<div class="form-group select-radio-must form-group" hidden="true">
|
<label class="col-sm-3 control-label" style="color: red">*[[#{basis.pleasechoose}]]</label>
|
</div>
|
</form>
|
|
<div hidden="true">
|
<label class="radio-inline" id="answerOption">
|
<input type="radio" name="correct" value="">
|
</label>
|
</div>
|
|
<div class="form-group form-inline" id="optionTemplte" hidden="true">
|
<label class="col-sm-1">E</label>
|
<input name="choiceInput" class="form-control valid" type="text"
|
style="width: 10%; margin-right: 2%;">
|
<input name="selectInput" class="form-control valid" type="text" style="width: 60%;">
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash" value="trashButton"></button>
|
</div>
|
<!--模态窗口-->
|
<div class="modal inmodal" id="modalWindow" tabindex="-1" role="dialog" aria-hidden="true">
|
<div class="modal-dialog modal-lg">
|
<div class="modal-content">
|
<div class="modal-title">
|
<h5>input</h5>
|
</div>
|
<div class="modal-body" id="eg">
|
<div class="click2edit wrapper">
|
<p>[[#{jsp.exam.product.pleaseEnterQuestions}]]...</p>
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button id="save" class="btn btn-primary btn-xs" onclick="save()" type="button">save</button>
|
<button id="edit" class="btn btn-danger btn-xs m-l-sm" onclick="cancel()" type="button">cancel
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="modalhidden">
|
</div>
|
<div class="col-sm-offset-5 col-sm-10">
|
<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>save
|
</button>
|
<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>close
|
</button>
|
</div>
|
</div>
|
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: summernote-js"/>
|
<th:block th:include="include :: select2-js"/>
|
<th:block th:include="include :: bootstrap-select-js"/>
|
<script type="text/javascript">
|
var prefix = ctx + "exam/question";
|
var option = [];
|
var clicknum = 4;
|
$("#form-question-add").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
if ($('select').val().trim() === "") {
|
$('.select-must').removeAttrs('hidden');
|
}
|
|
if ($("input[name='correct']:checked").val() == undefined) {
|
$('.select-radio-must').removeAttrs('hidden');
|
}
|
|
if ($.validate.form()) {
|
if ($("input[name='correct']:checked").val() == undefined) {
|
return;
|
}
|
|
var inputflag = false;
|
$('.layui-layer-border').find('input').each(function (i) {
|
if ($(this).val().trim() == "") {
|
inputflag = true;
|
return;
|
}
|
});
|
|
if (inputflag) {
|
$('.question-item-must').removeAttrs('hidden');
|
return;
|
}
|
|
$.operate.saveTab(prefix + "/add", $('#form-question-add').serialize());
|
|
}
|
};
|
|
var edit = function (htmlValue) {
|
$("#eg").addClass("no-padding");
|
$('.click2edit').summernote({
|
lang: 'zh-CN',
|
focus: true,
|
height: 100,//结合高度和disableResizeEditor的使用可以固定窗口
|
followingToolbar: false,
|
//disableResizeEditor: true,
|
callbacks: {
|
onImageUpload: function (files) {
|
sendFile(files[0], this);
|
}
|
}
|
});
|
//给富文本编辑器赋值
|
$('.click2edit').summernote('code', htmlValue);
|
};
|
|
// 上传文件
|
function sendFile(file, obj) {
|
var data = new FormData();
|
data.append("file", file);
|
$.ajax({
|
type: "POST",
|
url: ctx + "common/images",
|
data: data,
|
cache: false,
|
contentType: false,
|
processData: false,
|
dataType: 'json',
|
success: function (result) {
|
if (result.code == web_status.SUCCESS) {
|
$(obj).summernote('editor.insertImage', result.url, result.fileName);
|
} else {
|
$.modal.alertError(result.msg);
|
}
|
},
|
error: function (error) {
|
$.modal.alertWarning("图片上传失败。");
|
}
|
});
|
}
|
|
var save = function () {
|
$("#eg").removeClass("no-padding");
|
var aHTML = $('.click2edit').summernote('code');
|
$('#modalWindow').modal('hide');
|
var $focusInput = $('.input-focus').find('[edit="true"]');
|
$focusInput.val($.trim(aHTML));
|
$focusInput.removeAttrs("edit");
|
$('.click2edit').summernote('destroy');
|
};
|
|
var cancel = function () {
|
$('.input-focus').find('[edit="true"]').removeAttrs("edit");
|
$('#modalWindow').modal('hide');
|
};
|
|
//大写字母数组
|
var createletter = function () {
|
for (var i = 65; i < 91; i++) {
|
option.push(String.fromCharCode(i));
|
}
|
};
|
|
$(function () {
|
createletter();
|
//打开富文本编辑器
|
$('[name="selectInput"],[name="title"]').focus(function () {
|
$(this).attr('edit', 'true');
|
edit($(this).val());
|
$('#modalWindow').modal('show');
|
});
|
|
|
$('.option-group').on("focus", '[name="selectInput"]', function () {
|
$(this).attr('edit', 'true');
|
edit($(this).val());
|
$('#modalWindow').modal('show');
|
});
|
|
$('#modalWindow').on('shown.bs.modal', function () {
|
var $this = $(this);
|
var dialog = $this.find('.modal-dialog');
|
|
// 用这种方式保持富文本编辑器的窗口向下滚动
|
var scrollTop = $(document).scrollTop();
|
dialog.css({
|
marginTop: scrollTop
|
});
|
});
|
|
$('#modalhidden').on('shown.bs.modal', '.modal', function () {
|
var $this = $(this);
|
var dialog = $this.find('.modal-dialog');
|
|
// 用这种方式保持富文本编辑器的窗口向下滚动
|
var scrollTop = $(document).scrollTop();
|
dialog.css({
|
marginTop: scrollTop
|
});
|
});
|
|
// add questionItems
|
$('#optionAdd').click(function () {
|
if (clicknum < 0) {
|
return;
|
}
|
|
//添加答案项
|
var $content = $('#optionTemplte').clone();
|
$content.removeAttrs('id');
|
$content.removeAttrs('hidden');
|
$content.removeAttrs('style');
|
var $contenChildren = $content.children();
|
$contenChildren.eq(0).html(option[clicknum]);
|
$contenChildren.eq(1).val(option[clicknum]);
|
$('#optionEdit').append($content);
|
|
//添加正确答案项
|
var $answer = $('#answerOption').clone();
|
$answer.removeAttrs('id');
|
var $answerChildren = $answer.children();
|
$answerChildren.eq(0).val(option[clicknum]);
|
$answer.append(option[clicknum]);
|
$('#answer').append($answer);
|
clicknum++;
|
});
|
|
$('.option-group').on("click", ".glyphicon", function () {
|
var optiontext = $(this).parent().children().eq(0).html();
|
$('.radio-inline').find('[value=' + optiontext + ']').parent().remove();
|
$(this).parent().remove();
|
});
|
|
$('#answer').on("click", "[name='correct']", function () {
|
$('.select-radio-must').attr('hidden', 'true');
|
});
|
|
$('.layui-layer-border').on("focus", "input", function () {
|
$('.question-item-must').attr('hidden', 'true');
|
});
|
|
$('select').on('change', function () {
|
$(this).nextAll('.select-must').attr('hidden', 'true');
|
});
|
|
|
$('#optionView').click(function () {
|
$modal = $('#modalWindow').clone();
|
$modal.attr('id', 'modalView');
|
$modal.find('.modal-footer').html('<button class="btn btn-primary btn-xs" type="button">关闭</button>');
|
$modal.find('H5').html("view");
|
$('#modalhidden').append($modal);
|
$modal.modal('show');
|
$modal.find('.modal-body').html('<div class="click2edit wrapper"></div>');
|
$qution = $modal.find('.click2edit');
|
$qution.html("<p>" + $('[name="title"]').val() + "</p>");
|
$('#optionEdit').children('div').each(
|
function () {
|
$qution.append("<ul><li>" + $(this).children('input').eq(0).val() + "</li><li>" + $(this).children('input').eq(1).val() + "</li></ul>");
|
}
|
);
|
});
|
|
$('#modalhidden').on('click', 'button', function () {
|
$(this).parents('.modal').modal('hide');
|
$('#modalhidden').html("");
|
});
|
|
$('.input-focus').on('blur', '[name="choiceInput"]', function () {
|
var $choiceInputs = $('.input-focus').find('[name="choiceInput"]');
|
$(this).prev().html($(this).val());
|
$('#answer').find('input').each(function (i) {
|
$(this).val($choiceInputs.eq(i).val());
|
var $input = $(this).clone();
|
var $parent = $(this).parent();
|
$parent.empty();
|
$parent.append($input);
|
$parent.append($choiceInputs.eq(i).val());
|
});
|
});
|
});
|
|
</script>
|
</body>
|
</html>
|
