<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('编辑题目列表-job')"/>
|
<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-edit" th:object="${tExamLevel}">
|
<input name="id" th:field="${tQuestion.id}" type="hidden">
|
<input name="infoTextContentId" th:field="${tQuestion.infoTextContentId}" type="hidden">
|
<input name="uuid" id = "uuid" th:field="${tQuestion.uuid}" type="hidden">
|
<input name="langName" id = "langName" th:field="${tQuestion.langName}" type="hidden">
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{menu.exam.level.view}]]：</label>
|
<div class="col-sm-8">
|
<input name="levelName" class="form-control" th:value="*{levelName}" type="text" readonly>
|
<input name="levelId" class="form-control" th:value="*{id}" type="hidden" readonly>
|
</div>
|
</div>
|
<div class="form-group input-focus">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.product.questionStem}]]：</label>
|
<div class="col-sm-8">
|
<input name="title" class="form-control" type="text" th:value="${tQuestion.title}" required>
|
</div>
|
</div>
|
<div class="form-group permanent">
|
<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" th:value="${tQuestion.permanentId}" readonly 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 th:if="${tQuestion.uuid==null && tQuestion.langName==null}" name="langType" id="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}" th:field="${tQuestion.langType}"></option>
|
</select>
|
<select th:if="${tQuestion.uuid!=null && tQuestion.langName==null }" name="langType" class="form-control m-b"
|
th:with="type=${@examQuestion.getType(tQuestion.id)}">
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
th:value="${dict.dictValue}" th:field="${tQuestion.langType}"></option>
|
</select>
|
<input th:if="${ tQuestion.langName!=null }" name="langName" class="form-control" th:value="${tQuestion.langName}" type="text" readonly>
|
<input th:if="${ tQuestion.langName!=null }" name="langType" class="form-control" th:value="${tQuestion.langType}" type="hidden" readonly>
|
</div>
|
</div>
|
<div class="form-group" hidden>
|
<label class="col-sm-3 control-label">[[#{jsp.level.questionType}]]：</label>
|
<div class="col-sm-8">
|
<div class="radio-box">
|
<input type="radio" name="template" value= "job_title" checked="true" th:field="${tQuestion.template}">
|
<label>[[#{jsp.exam.product.question}]]</label>
|
</div>
|
<div class="radio-box">
|
<input type="radio" name="template" value= "job" th:field="${tQuestion.template}">
|
<label>[[#{jsp.exam.question.dimensionName}]]</label>
|
</div>
|
</div>
|
</div>
|
<div class="form-group option-group option-job">
|
<label class="col-sm-3 control-label">item：</label>
|
<div class="col-sm-8 layui-layer-border input-focus item-must" style="padding-top: 2%" id="optionEdit">
|
<div class="form-group form-inline" th:each="chi,iterStat : ${tQuestion.choiceInput}">
|
<label class="col-sm-1" th:text="${chi}"></label>
|
<input name="choiceInput" class="form-control valid option-input" type="text"
|
style="width: 10%; margin-right: 2%;" th:value="${chi}">
|
<input name="selectInput" class="form-control valid option-input" type="text" style="width: 60%;"
|
th:value="${tQuestion.selectInput[iterStat.index]}">
|
<button type="button" class="btn btn-danger glyphicon glyphicon-trash delet-trash"></button>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group message-item-must form-group" hidden="true">
|
<label class="col-sm-3 control-label"
|
style="color: red">*[[#{jsp.exam.question.pleaseFillInTheOptions}]]</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>
|
</form>
|
|
<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="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 class="modal inmodal" id="modalWindow" tabindex="-1" role="dialog" aria-hidden="true">
|
<div class="modal-dialog modal-lg">
|
<div class="modal-content">
|
<div class="ibox-title">
|
<h5>请输入</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>
|
<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 = 2;
|
// 多语言的uuid
|
var uuid = $("input[name='uuid']").val();
|
var langName = $("input[name='langName']").val();
|
|
$("#form-question-edit").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
if ($.validate.form()) {
|
|
var inputflag = false;
|
$('.item-must').find('input').each(function (i) {
|
if ($(this).val().trim() == "") {
|
inputflag = true;
|
return;
|
}
|
});
|
|
if (inputflag) {
|
$('.message-item-must').removeAttrs('hidden');
|
return;
|
}
|
|
$.operate.saveTab(prefix + "/edit", $('#form-question-edit').serialize());
|
|
}
|
};
|
|
//大写字母数组
|
var createletter = function () {
|
for (var i = 97; i < 123; i++) {
|
option.push(String.fromCharCode(i));
|
}
|
};
|
|
// option 隐藏还是显示
|
var optionDisplay = function () {
|
if ($('input:radio[name="template"]:checked').val() == "job") {
|
$('.option-job').removeAttrs("hidden");
|
$('#optionView').removeAttrs("style");
|
$('.permanent').attr("hidden","true");
|
$('#permanentId').removeAttrs("required");
|
} else {
|
$('.option-job').attr("hidden","true");
|
$('#optionView').css("display","none");
|
$('.permanent').removeAttrs("hidden");
|
$('#permanentId').attr("required","true");
|
}
|
};
|
|
// 多语言的默认选项
|
var defualItem = function () {
|
if (langName != ""){
|
$('#optionAdd').remove();
|
return;
|
}
|
var $selectInput = $('#optionEdit').find('[name="selectInput"]');
|
|
if ($('[name="langType"]').val() == "Chinese") {
|
$selectInput.eq(0).val("不重要/偶尔");
|
$selectInput.eq(1).val("略微重要/时不时");
|
$selectInput.eq(2).val("比较重要/经常");
|
$selectInput.eq(3).val("重要/极高频率");
|
$selectInput.eq(4).val("非常关键");
|
}
|
|
if ($('[name="langType"]').val() == "English") {
|
$selectInput.eq(0).val("Not Important/Rarely");
|
$selectInput.eq(1).val("A little Important/From Time to Time");
|
$selectInput.eq(2).val("Moderately Important/Often");
|
$selectInput.eq(3).val("Important/Extremely Frequently");
|
$selectInput.eq(4).val("Critically Important");
|
|
}
|
|
if ($('[name="langType"]').val() == "Thai") {
|
|
}
|
};
|
|
$(function () {
|
createletter();
|
optionDisplay();
|
//打开富文本编辑器
|
$('[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 || clicknum > 26) {
|
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]);
|
clicknum++;
|
$('#optionEdit').append($content);
|
});
|
|
$('.option-group').on("click", ".glyphicon", function () {
|
var optiontext = $(this).parent().children().eq(0).html();
|
$('.radio-inline').find('[value=' + optiontext + ']').parent().remove();
|
$(this).parent().remove();
|
});
|
|
$('.layui-layer-border').on("focus", "input", function () {
|
$('.question-item-must').attr('hidden', 'true');
|
});
|
|
|
$('#optionView').click(function () {
|
$modal = $('#modalWindow').clone();
|
$modal.attr('id', 'modalView');
|
$modal.find('.modal-footer').html('');
|
$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 style='font-size:15px;font-weight: bold'>" + $('[name="title"]').val() + "</p>" + "<ul><li>");
|
$('#optionEdit').children('div').each(
|
function () {
|
$qution.append($(this).children('input').eq(0).val() + ". " + $(this).children('input').eq(1).val() +" ");
|
}
|
);
|
$qution.append("</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());
|
});
|
});
|
|
|
// 给个语言对应的默认值
|
defualItem();
|
$('[name="langType"]').change(function () {
|
var $selectInput = $('#optionEdit').find('[name="selectInput"]');
|
|
if ($(this).val() == "Chinese") {
|
$selectInput.eq(0).val("不重要/偶尔");
|
$selectInput.eq(1).val("略微重要/时不时");
|
$selectInput.eq(2).val("比较重要/经常");
|
$selectInput.eq(3).val("重要/极高频率");
|
$selectInput.eq(4).val("非常关键");
|
}
|
|
if ($(this).val() == "English") {
|
$selectInput.eq(0).val("Not Important/Rarely");
|
$selectInput.eq(1).val("A little Important/From Time to Time");
|
$selectInput.eq(2).val("Moderately Important/Often");
|
$selectInput.eq(3).val("Important/Extremely Frequently");
|
$selectInput.eq(4).val("Critically Important");
|
}
|
|
|
if ($(this).val() == "Thai") {
|
$selectInput.eq(0).val("");
|
$selectInput.eq(1).val("");
|
}
|
});
|
|
});
|
|
</script>
|
</body>
|
</html>
|
