Commit 4336663d authored by 李维's avatar 李维

添加文字选项多选配置

暂未实现
parent 33886bcf
{
"ver": "1.1.2",
"uuid": "c80efd20-2776-462d-b9db-888d112cde94",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.2.9",
"uuid": "cd0aa97a-eede-42a5-a8a9-30201fa30f98",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property({displayName: "标题内容", })
titleName: string = "请选择答案";
@property({type: cc.Float, displayName: "窗口宽度", })
width: number = 1000;
@property({type: cc.Float, displayName: "标题高度", })
headerHeight: number = 150;
@property({type: cc.Float, displayName: "选项高度", })
optionHeight: number = 120;
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
this.node.active = false;
this.initSize();
this.initTitle(this.titleName);
this.initEventListener();
}
initTitle(title) {
cc.find("center/header/title", this.node).getComponent(cc.Label).string = title;
}
initSize() {
const center = cc.find("center", this.node);
const header = cc.find("center/header", this.node);
const list = cc.find("center/list", this.node);
center.width = this.width;
header.width = this.width;
list.width = this.width;
this.node.x = 0;
this.node.y = 0;
const itemTemplate = cc.find("center/list/layout_options/item_tempate", this.node);
itemTemplate.x = this.width / 2;
itemTemplate.width = this.width;
itemTemplate.height = this.optionHeight;
}
initEventListener() {
const closeBtn = cc.find("center/header/close", this.node);
closeBtn.on("click", ()=>{
this.node.emit("onCancel");
this.hide();
})
this.node.on("show", (option, type="textList") => {
this.show(option, type);
})
const rightWrongLayout = cc.find("center/list/layout_right_wrong", this.node);
const rightBtn = cc.find("right", rightWrongLayout);
const wrongBtn = cc.find("wrong", rightWrongLayout);
rightBtn.on("click", ()=>{
this.node.emit("onSelected", true);
this.hide();
})
wrongBtn.on("click", ()=>{
this.node.emit("onSelected", false);
this.hide();
})
}
show(option, type) {
this.node.opacity = 0;
this.node.active = true;
cc.tween(this.node).to(0.1, {
opacity: 255
}).start();
const center = cc.find("center", this.node);
const list = cc.find("center/list", this.node);
if(type == "textList") {
this.initTitle("请选择答案");
const listLayout = cc.find("center/list/layout_options", this.node);
const itemTemplate = cc.find("center/list/layout_options/item_tempate", this.node);
listLayout.active = true;
option.forEach((item, index) => {
const optionNode = cc.instantiate(itemTemplate);
// 第一个选项不显示顶部分隔条
if(index == 0) {
cc.find("line_top", optionNode).active = false;
}
optionNode.name = `option_${index}`
const text = cc.find("text", optionNode);
text.getComponent(cc.Label).string = item.label;
optionNode.on("click", ()=>{
this.node.emit("onSelected", item);
this.hide();
})
optionNode.active = true;
listLayout.addChild(optionNode);
});
center.height = option.length * this.optionHeight + this.headerHeight;
list.height = option.length * this.optionHeight;
listLayout.height = option.length * this.optionHeight;
} else {
const rightWrongLayout = cc.find("center/list/layout_right_wrong", this.node);
const rightIcon = cc.find("right/icon_right", rightWrongLayout);
const laughIcon = cc.find("right/icon_laugh", rightWrongLayout);
const textTrue = cc.find("right/text_true", rightWrongLayout);
const textYes = cc.find("right/text_yes", rightWrongLayout);
const wrongIcon = cc.find("wrong/icon_wrong", rightWrongLayout);
const cryIcon = cc.find("wrong/icon_cry", rightWrongLayout);
const textFalse = cc.find("wrong/text_false", rightWrongLayout);
const textNo = cc.find("wrong/text_no", rightWrongLayout);
if(type == "rightWrong_icon") {
this.initTitle("请选择答案");
rightIcon.active = true;
laughIcon.active = false;
textTrue.active = false;
textYes.active = false;
wrongIcon.active = true;
cryIcon.active = false;
textFalse.active = false;
textNo.active = false;
} else if(type == "rightWrong_face") {
this.initTitle("请选择表情");
rightIcon.active = false;
laughIcon.active = true;
textTrue.active = false;
textYes.active = false;
wrongIcon.active = false;
cryIcon.active = true;
textFalse.active = false;
textNo.active = false;
} else if(type == "rightWrong_T_F") {
this.initTitle("请选择答案");
rightIcon.active = false;
laughIcon.active = false;
textTrue.active = true;
textYes.active = false;
wrongIcon.active = false;
cryIcon.active = false;
textFalse.active = true;
textNo.active = false;
} else if(type == "rightWrong_Yes_No") {
this.initTitle("请选择答案");
rightIcon.active = false;
laughIcon.active = false;
textTrue.active = false;
textYes.active = true;
wrongIcon.active = false;
cryIcon.active = false;
textFalse.active = false;
textNo.active = true;
}
rightWrongLayout.active = true;
center.height = 350 + this.headerHeight;
list.height = 350;
}
}
hide() {
cc.tween(this.node).to(0.1, {
opacity: 0
}).call(()=>{
const listLayout = cc.find("center/list/layout_options", this.node);
const rightWrongLayout = cc.find("center/list/layout_right_wrong", this.node);
listLayout.active = false;
rightWrongLayout.active = false;
this.node.active = false;
// 销毁非模板节点的所有子节点
listLayout.children.forEach(child=>{
if(child.name != "item_tempate") {
child.destroy();
}
})
}).start();
}
// update (dt) {}
}
{
"ver": "1.0.8",
"uuid": "74ec90f6-ff89-44fc-b00d-c2982d2d5605",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
{
"ver": "1.1.2",
"uuid": "54f0382d-04af-47e6-9874-a35dcd7c320f",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "0f10dcd9-e79d-4a9f-99dc-480c4630333c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 500,
"height": 500,
"platformSettings": {},
"subMetas": {
"blank_500_500": {
"ver": "1.0.4",
"uuid": "5e096c0d-4f03-40c3-951c-92d7c1077f7a",
"rawTextureUuid": "0f10dcd9-e79d-4a9f-99dc-480c4630333c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 500,
"height": 500,
"rawWidth": 500,
"rawHeight": 500,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "4478e862-ab9c-4b87-804f-37d6f7c00096",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 100,
"height": 100,
"platformSettings": {},
"subMetas": {
"btn_close": {
"ver": "1.0.4",
"uuid": "2ff74e4d-8f7e-4618-91d4-cd1e10b393a9",
"rawTextureUuid": "4478e862-ab9c-4b87-804f-37d6f7c00096",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": -0.5,
"trimX": 20,
"trimY": 20,
"width": 61,
"height": 61,
"rawWidth": 100,
"rawHeight": 100,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "f6c644f9-7686-4fdb-b368-4ead96eb4d7c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 150,
"height": 150,
"platformSettings": {},
"subMetas": {
"icon_cry": {
"ver": "1.0.4",
"uuid": "6fb4fb5d-471c-4064-a6aa-6a27f9a68a68",
"rawTextureUuid": "f6c644f9-7686-4fdb-b368-4ead96eb4d7c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": -0.5,
"trimX": 6,
"trimY": 6,
"width": 139,
"height": 139,
"rawWidth": 150,
"rawHeight": 150,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "e34d25bb-c100-4773-95f1-65d994bf2f0b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 150,
"height": 150,
"platformSettings": {},
"subMetas": {
"icon_laugh": {
"ver": "1.0.4",
"uuid": "5509643b-5487-459a-8f0a-514c24f4d179",
"rawTextureUuid": "e34d25bb-c100-4773-95f1-65d994bf2f0b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 6,
"trimY": 6,
"width": 138,
"height": 138,
"rawWidth": 150,
"rawHeight": 150,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "bcdb534a-edf7-4522-ab10-507b87b0f031",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 90,
"height": 90,
"platformSettings": {},
"subMetas": {
"icon_right": {
"ver": "1.0.4",
"uuid": "98b9f92a-4178-4964-a474-abca17c91f96",
"rawTextureUuid": "bcdb534a-edf7-4522-ab10-507b87b0f031",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": -0.5,
"trimX": 11,
"trimY": 17,
"width": 69,
"height": 57,
"rawWidth": 90,
"rawHeight": 90,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "9243fd4b-0db5-47bb-95f7-581d09f6168e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 90,
"height": 90,
"platformSettings": {},
"subMetas": {
"icon_wrong": {
"ver": "1.0.4",
"uuid": "330cf702-6caf-4944-8765-df0d7b9580f3",
"rawTextureUuid": "9243fd4b-0db5-47bb-95f7-581d09f6168e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": 0.5,
"trimX": 18,
"trimY": 10,
"width": 55,
"height": 69,
"rawWidth": 90,
"rawHeight": 90,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "ead8d632-934d-4793-9ebd-51b4147815fa",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 3840,
"height": 2160,
"platformSettings": {},
"subMetas": {
"mask_bg": {
"ver": "1.0.4",
"uuid": "f1e0527b-25da-4e85-9194-a92491467f73",
"rawTextureUuid": "ead8d632-934d-4793-9ebd-51b4147815fa",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 3840,
"height": 2160,
"rawWidth": 3840,
"rawHeight": 2160,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
This diff is collapsed.
...@@ -31,6 +31,7 @@ const VIDEO_PLAY = "13"; ...@@ -31,6 +31,7 @@ const VIDEO_PLAY = "13";
const DRAWING = "14"; const DRAWING = "14";
const DRAWING_CHECK = "15"; const DRAWING_CHECK = "15";
const CONNECTION_2LEVEL = "16"; const CONNECTION_2LEVEL = "16";
const MULTIPLE_TEXT_SELECT = "17";
// 评分体系 // 评分体系
const RS_15_5L_FAF = "0"; const RS_15_5L_FAF = "0";
...@@ -59,6 +60,9 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -59,6 +60,9 @@ export default class SceneComponent extends MyCocosSceneComponent {
@property({type: cc.Node, displayName: "选择窗"}) @property({type: cc.Node, displayName: "选择窗"})
selectModal: cc.Node = null; selectModal: cc.Node = null;
@property({type: cc.Node, displayName: "多选窗"})
multipleSelectModal: cc.Node = null;
@property({type: cc.Node, displayName: "音频播放动画"}) @property({type: cc.Node, displayName: "音频播放动画"})
aniSpeaker: cc.Node = null; aniSpeaker: cc.Node = null;
...@@ -153,6 +157,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -153,6 +157,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
currentInputTarget = null; currentInputTarget = null;
onSelectedCallback = null; onSelectedCallback = null;
onMultipleSelectedCallback = null;
onKeyboardEnterCallback = null; onKeyboardEnterCallback = null;
onSortWordsEndCallback = null; onSortWordsEndCallback = null;
onPronunciationAssessmentCallback = null; onPronunciationAssessmentCallback = null;
...@@ -186,6 +191,22 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -186,6 +191,22 @@ export default class SceneComponent extends MyCocosSceneComponent {
} }
}) })
this.multipleSelectModal.on("onSelected", (e)=>{
this.onMultipleSelectedCallback && this.onMultipleSelectedCallback(this.currentInputTarget, e)
if(this.currentInputTarget) {
this.currentInputTarget = null;
}
})
this.multipleSelectModal.on("onCancel", (e)=>{
this.onMultipleSelectedCallback && this.onMultipleSelectedCallback(this.currentInputTarget, e)
if(this.currentInputTarget) {
this.currentInputTarget = null;
}
})
this.sortWords.on("onEnter", (e)=>{ this.sortWords.on("onEnter", (e)=>{
this.onSortWordsEndCallback && this.onSortWordsEndCallback(this.currentInputTarget, e) this.onSortWordsEndCallback && this.onSortWordsEndCallback(this.currentInputTarget, e)
if(this.currentInputTarget) { if(this.currentInputTarget) {
...@@ -603,6 +624,11 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -603,6 +624,11 @@ export default class SceneComponent extends MyCocosSceneComponent {
validater = this.setTextOptionList(configItem, isDebug); validater = this.setTextOptionList(configItem, isDebug);
this.scoreValidater.push(validater); this.scoreValidater.push(validater);
break; break;
// 文字选择题(多选)
case MULTIPLE_TEXT_SELECT:
validater = this.setTextOptionListMultiple(configItem, isDebug);
this.scoreValidater.push(validater);
break;
// 判断对错 // 判断对错
case RIGHT_OR_WRONG: case RIGHT_OR_WRONG:
validater = this.setRightOrWrongGroup(configItem, isDebug); validater = this.setRightOrWrongGroup(configItem, isDebug);
...@@ -2847,6 +2873,157 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -2847,6 +2873,157 @@ export default class SceneComponent extends MyCocosSceneComponent {
return validater return validater
} }
setTextOptionListMultiple(contentData, debugMode=false) {
// 存放子校验器
const subValidater = [];
const resultRects = [];
// 正确校验方法 - 默认返null
let validater = () => {
let results = [];
let valid = true;
subValidater.forEach((validaterItem, index) => {
if(valid) {
const validResult = validaterItem();
if(validResult == null) {
// 用户没有选择 使用默认结果
results.push(resultRects[index]);
} else {
results.push(...validResult);
}
}
})
if(valid) {
return results;
} else {
return null;
}
};
// 把所有的选项放进数组
const optionList = [];
if(contentData.useSelectOptionList) {
contentData.selectOptionList.forEach((option, index) => {
optionList.push({
index: index,
label: option.optionShowText ? option.optionShowText : option.text,
value: option.text,
strikeOutNode: null
})
});
}
contentData.contentList.forEach((option, index) => {
const hotZoneItemData = this.data.hotZoneItemArr[option.selectHotZoneIndex];
const resultRect = this.newRectNode(hotZoneItemData, layer_2, debugMode);
this.newDecorativeFrame(hotZoneItemData, layer_1, "#FFFFFF", "#6dbef6", debugMode);
const rect = this.newRectNode(hotZoneItemData, layer_4, debugMode);
resultRects.push({
detail: {
contentType: TEXT_SELECT,
configIndex: contentData.index,
contentIndex: index,
currentSelectIndex: null,
currentSelectText: "",
correctSelectIndex: index,
correctSelectText: option.text,
right: false
},
configIndex: contentData.index,
rect: resultRect,
allRight: false,
score: 0
});
subValidater.push(()=>null)
rect.on("click", async () => {
if(this.submitted) {
return;
}
this.currentInputTarget = rect;
// 取得上次输入文字 - 清空当前文字节点
let lastText = "";
if(rect.cleanLast) {
lastText = rect.cleanLast()
}
let selectData = await this.asyncShowMultipleSelectModal(optionList, "textList");
// 如果点击了取消 则还原上次显示
// TODO:selectData.label 为显示的文本,比如用户选择了A、B、D三个选项,那么selectData.label的值就是 A/B/D
const inputLabel = this.newInputTextNode(selectData?selectData.label:lastText, 0);
inputLabel.x = rect.width / 2;
inputLabel.y = rect.height / 2;
// 更新清除方法
rect.cleanLast = () => {
inputLabel.destroy();
if(selectData) {
return selectData.label;
} else {
return lastText
}
}
// 如果选择了选项 则覆盖校验方法
if(selectData) {
subValidater[index] = () => {
// configIndex - 标记当前的内容索引 用于在最后计算分组得分时使用
// rect - 用于放置正确和错误的符号
const result = {
detail: {
contentType: TEXT_SELECT,
configIndex: contentData.index,
contentIndex: index,
currentSelectIndex: selectData.indexArr,
currentSelectText: selectData.label,
correctSelectIndex: index,
correctSelectText: option.text,
right: true
},
configIndex: contentData.index,
rect: resultRect,
allRight: true,
score: 0
}
let right = false;
if(contentData.useSelectOptionList) {
// TODO:
// option.selectOptionListIndexArr - 在表单中设定的正确序号数组
// selectData.indexArr - 当前用户选择的序号数组
// 需要修改线面的这行代码的逻辑,判断两个数组的元素完全相同 right = true
// right = selectData.indexArr == option.selectOptionListIndexArr;
} else {
right = selectData.index == index
}
// 选择数据的索引 和 当前索引是否相等 判断是否选择正确
if(right) {
// 正确 返回分数
result.score = option.score && !isNaN(Number(option.score)) ? Number(option.score) : 0;
return [result]
} else {
// 错误
result.allRight = false;
result.detail.right = false;
return [result]
}
}
}
// 校验必须在上面更新了校验器之后进行 否则本次选择不会生效
// this.checkCanSubmit();
rect.addChild(inputLabel);
});
});
// 返回分数校验器
return validater
}
// 设置音频热区 // 设置音频热区
// 全局只能有一个音频播放 - 保存音乐id 用于停止 // 全局只能有一个音频播放 - 保存音乐id 用于停止
currentAudioPlay = null; currentAudioPlay = null;
...@@ -3547,6 +3724,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -3547,6 +3724,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.scoreValidater = []; this.scoreValidater = [];
this.currentInputTarget = null; this.currentInputTarget = null;
this.onSelectedCallback = null; this.onSelectedCallback = null;
this.onMultipleSelectedCallback = null;
this.onKeyboardEnterCallback = null; this.onKeyboardEnterCallback = null;
this.submitted = false; this.submitted = false;
this.subScorePanels = []; this.subScorePanels = [];
...@@ -4107,6 +4285,21 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -4107,6 +4285,21 @@ export default class SceneComponent extends MyCocosSceneComponent {
}) })
} }
// 同步方式显示选择模态框(多选)
asyncShowMultipleSelectModal(option, type) {
return new Promise((resovle, reject) => {
this.multipleSelectModal.emit("show", option, type);
this.onMultipleSelectedCallback = (target, e) => {
if(e == undefined) {
// 点击了取消
resovle(null)
} else {
resovle(e);
}
}
})
}
// 同步方式显示输入模态框 // 同步方式显示输入模态框
asyncShowKeyboardModal(defaultText) { asyncShowKeyboardModal(defaultText) {
return new Promise((resovle, reject) => { return new Promise((resovle, reject) => {
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
<span style="display: inline-block; text-align: right; width: 150px;">热区内容类型:</span> <span style="display: inline-block; text-align: right; width: 150px;">热区内容类型:</span>
<nz-select [(ngModel)]="it.hotZoneType" style="width: 300px;" (ngModelChange)="save()"> <nz-select [(ngModel)]="it.hotZoneType" style="width: 300px;" (ngModelChange)="save()">
<nz-option [nzValue]="TEXT_SELECT" nzLabel="文字选项"></nz-option> <nz-option [nzValue]="TEXT_SELECT" nzLabel="文字选项"></nz-option>
<nz-option [nzValue]="MULTIPLE_TEXT_SELECT" nzLabel="文字选项(多选)"></nz-option>
<nz-option [nzValue]="AUDIO_PLAY" nzLabel="播放音频"></nz-option> <nz-option [nzValue]="AUDIO_PLAY" nzLabel="播放音频"></nz-option>
<nz-option [nzValue]="VIDEO_PLAY" nzLabel="播放视频"></nz-option> <nz-option [nzValue]="VIDEO_PLAY" nzLabel="播放视频"></nz-option>
<nz-option [nzValue]="HOT_ZONE_RADIO" nzLabel="热区选项(单选)"></nz-option> <nz-option [nzValue]="HOT_ZONE_RADIO" nzLabel="热区选项(单选)"></nz-option>
...@@ -98,9 +99,9 @@ ...@@ -98,9 +99,9 @@
<nz-option [nzValue]="CONNECTION_2LEVEL" nzLabel="2级连线题"></nz-option> <nz-option [nzValue]="CONNECTION_2LEVEL" nzLabel="2级连线题"></nz-option>
<nz-option [nzValue]="IMAGE_SELECT" nzLabel="图片选项" nzDisabled></nz-option> <nz-option [nzValue]="IMAGE_SELECT" nzLabel="图片选项" nzDisabled></nz-option>
</nz-select> </nz-select>
<label *ngIf="it.hotZoneType == TEXT_SELECT" nz-checkbox [(ngModel)]="it.useSelectOptionList" (ngModelChange)="handleUserSelectOptionListChange(it)" style="margin-left: 10px;">使用独立选项清单</label> <label *ngIf="it.hotZoneType == TEXT_SELECT || it.hotZoneType == MULTIPLE_TEXT_SELECT" nz-checkbox [(ngModel)]="it.useSelectOptionList" (ngModelChange)="handleUserSelectOptionListChange(it)" style="margin-left: 10px;">使用独立选项清单</label>
<div *ngIf="it.hotZoneType == TEXT_SELECT && it.useSelectOptionList" style="padding: 10px 0 10px 150px;"> <div *ngIf="(it.hotZoneType == TEXT_SELECT || it.hotZoneType == MULTIPLE_TEXT_SELECT) && it.useSelectOptionList" style="padding: 10px 0 10px 150px;">
<div style="margin-bottom: 16px;"> <div style="margin-bottom: 16px;">
<span style="font-size: 14px; color: #000000d9;">选项清单</span> <span style="font-size: 14px; color: #000000d9;">选项清单</span>
<button nz-button nzSize="small" nzType="primary" style="float: right;" (click)="addHotzoneSelectOption(it)"> <button nz-button nzSize="small" nzType="primary" style="float: right;" (click)="addHotzoneSelectOption(it)">
...@@ -114,7 +115,7 @@ ...@@ -114,7 +115,7 @@
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
<th nzAlign="center">文字</th> <th nzAlign="center">文字</th>
<th nzAlign="center">展示文字</th> <th nzAlign="center">展示文字</th>
<th nzAlign="center">选择后划掉热区(可选)</th> <th *ngIf="it.hotZoneType != MULTIPLE_TEXT_SELECT" nzAlign="center">选择后划掉热区(可选)</th>
<th nzWidth="150px" nzAlign="center">操作</th> <th nzWidth="150px" nzAlign="center">操作</th>
</tr> </tr>
</thead> </thead>
...@@ -127,7 +128,7 @@ ...@@ -127,7 +128,7 @@
<td nzAlign="center"> <td nzAlign="center">
<input type="text" nz-input [(ngModel)]="data.optionShowText" (blur)="save()"/> <input type="text" nz-input [(ngModel)]="data.optionShowText" (blur)="save()"/>
</td> </td>
<td nzAlign="center"> <td *ngIf="it.hotZoneType != MULTIPLE_TEXT_SELECT" nzAlign="center">
<nz-select nzShowSearch nzAllowClear [(ngModel)]="data.selectStrikeOutHotZoneIndex" style="width: 180px;" (ngModelChange)="save()"> <nz-select nzShowSearch nzAllowClear [(ngModel)]="data.selectStrikeOutHotZoneIndex" style="width: 180px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.itemName"></nz-option> <nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.itemName"></nz-option>
</nz-select> </nz-select>
...@@ -150,12 +151,12 @@ ...@@ -150,12 +151,12 @@
</div> </div>
<!-- 文字选项 --> <!-- 文字选项 -->
<nz-table *ngIf="it.hotZoneType == TEXT_SELECT" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false"> <nz-table *ngIf="it.hotZoneType == TEXT_SELECT || it.hotZoneType == MULTIPLE_TEXT_SELECT" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
<th nzWidth="100px" nzAlign="center">分数</th> <th nzWidth="100px" nzAlign="center">分数</th>
<th *ngIf="it.useSelectOptionList" nzAlign="center">所属组</th> <th *ngIf="it.useSelectOptionList && it.hotZoneType != MULTIPLE_TEXT_SELECT" nzAlign="center">所属组</th>
<th *ngIf="it.useSelectOptionList" nzAlign="center">正确选项</th> <th *ngIf="it.useSelectOptionList" nzAlign="center">正确选项</th>
<th *ngIf="!it.useSelectOptionList" nzAlign="center">文字</th> <th *ngIf="!it.useSelectOptionList" nzAlign="center">文字</th>
<th *ngIf="!it.useSelectOptionList" nzAlign="center">展示文字</th> <th *ngIf="!it.useSelectOptionList" nzAlign="center">展示文字</th>
...@@ -170,13 +171,13 @@ ...@@ -170,13 +171,13 @@
<td nzWidth="100px" nzAlign="center"> <td nzWidth="100px" nzAlign="center">
<input type="text" nz-input [(ngModel)]="data.score" (blur)="save()"/> <input type="text" nz-input [(ngModel)]="data.score" (blur)="save()"/>
</td> </td>
<td *ngIf="it.useSelectOptionList" nzWidth="100px" nzAlign="center"> <td *ngIf="it.useSelectOptionList && it.hotZoneType != MULTIPLE_TEXT_SELECT" nzWidth="100px" nzAlign="center">
<nz-select nzShowSearch nzAllowClear [(ngModel)]="data.optionGroupsIndex" style="width: 180px;" (ngModelChange)="save()"> <nz-select nzShowSearch nzAllowClear [(ngModel)]="data.optionGroupsIndex" style="width: 180px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of contentTable.data; let i = index;" [nzValue]="i" [nzLabel]="i+1"></nz-option> <nz-option *ngFor="let itOption of contentTable.data; let i = index;" [nzValue]="i" [nzLabel]="i+1"></nz-option>
</nz-select> </nz-select>
</td> </td>
<td *ngIf="it.useSelectOptionList" nzAlign="center"> <td *ngIf="it.useSelectOptionList" nzAlign="center">
<nz-select nzShowSearch nzAllowClear [(ngModel)]="data.selectOptionListIndex" style="width: 180px;" (ngModelChange)="save()"> <nz-select nzShowSearch nzAllowClear [nzMode]="it.hotZoneType == TEXT_SELECT ? 'default' : 'multiple'" [(ngModel)]="it.hotZoneType == TEXT_SELECT ? data.selectOptionListIndex : data.selectOptionListIndexArr" style="width: 180px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of it.selectOptionList; let i = index;" [nzValue]="i" [nzLabel]="itOption.text"></nz-option> <nz-option *ngFor="let itOption of it.selectOptionList; let i = index;" [nzValue]="i" [nzLabel]="itOption.text"></nz-option>
</nz-select> </nz-select>
</td> </td>
...@@ -609,7 +610,7 @@ ...@@ -609,7 +610,7 @@
<label nz-checkbox [(ngModel)]="it.drawingCheckStrictEqual" (ngModelChange)="save()" style="margin-left: 10px;">颜色严格相等</label> <label nz-checkbox [(ngModel)]="it.drawingCheckStrictEqual" (ngModelChange)="save()" style="margin-left: 10px;">颜色严格相等</label>
</div> </div>
<div *ngIf="it.hotZoneType != '' && it.hotZoneType != CROSSWORD_PUZZLE && it.hotZoneType != HOT_ZONE_RADIO && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != CONNECTION_2LEVEL && it.hotZoneType != TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;"> <div *ngIf="it.hotZoneType != '' && it.hotZoneType != CROSSWORD_PUZZLE && it.hotZoneType != HOT_ZONE_RADIO && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != CONNECTION_2LEVEL && it.hotZoneType != TEXT_SELECT && it.hotZoneType != MULTIPLE_TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 150px;">关联热区:</span> <span style="display: inline-block; text-align: right; width: 150px;">关联热区:</span>
<nz-select nzShowSearch nzAllowClear [(ngModel)]="it.linkHotZoneIndex" style="width: 300px;" (ngModelChange)="save()"> <nz-select nzShowSearch nzAllowClear [(ngModel)]="it.linkHotZoneIndex" style="width: 300px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.itemName"></nz-option> <nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.itemName"></nz-option>
...@@ -630,7 +631,7 @@ ...@@ -630,7 +631,7 @@
</nz-select> </nz-select>
</div> </div>
<div *ngIf="it.hotZoneType != ''&& it.hotZoneType != AUDIO_PLAY && it.hotZoneType != VIDEO_PLAY && it.hotZoneType != DRAWING && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != CONNECTION_2LEVEL && it.hotZoneType != TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;"> <div *ngIf="it.hotZoneType != ''&& it.hotZoneType != AUDIO_PLAY && it.hotZoneType != VIDEO_PLAY && it.hotZoneType != DRAWING && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != CONNECTION_2LEVEL && it.hotZoneType != TEXT_SELECT && it.hotZoneType != MULTIPLE_TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 150px;">分数:</span> <span style="display: inline-block; text-align: right; width: 150px;">分数:</span>
<input type="text" nz-input [(ngModel)]="it.score" (blur)="save()" style="display: inline-block; width: 300px;"> <input type="text" nz-input [(ngModel)]="it.score" (blur)="save()" style="display: inline-block; width: 300px;">
</div> </div>
......
...@@ -59,6 +59,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -59,6 +59,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
DRAWING = "14"; DRAWING = "14";
DRAWING_CHECK = "15"; DRAWING_CHECK = "15";
CONNECTION_2LEVEL = "16"; CONNECTION_2LEVEL = "16";
MULTIPLE_TEXT_SELECT = "17";
// 评分体系 // 评分体系
RS_15_5L_FAF = "0"; RS_15_5L_FAF = "0";
...@@ -246,6 +247,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -246,6 +247,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
return { return {
uuid: uuidv4(), uuid: uuidv4(),
text: "", // 文字选项(值) text: "", // 文字选项(值)
selectOptionListIndex: "", // 正确的选项 [文字选项-独立选项清单]
selectOptionListIndexArr: [], // 正确的选项 [文字选项(多选)-独立选项清单]
optionShowText: "", // 选项展示值 optionShowText: "", // 选项展示值
image_url: "", // 图片选项 image_url: "", // 图片选项
hotZoneIndex: null, // 关联热区 hotZoneIndex: null, // 关联热区
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment