Skip to content

X
xiaomai-cloud-class-web
Commit 0e339b5e by yuananting
Options

Merge branch 'feature/yuananting/20210221/question-bank-tools' into dev

parents 46c7272a e2c2d3c7
Showing with 166 additions and 149 deletions
src/modules/teach-tool/components/NewQuestionTab.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-02-25 14:34:29
* @LastEditors: yuananting
* @LastEditTime: 2021-03-22 09:45:05
* @LastEditTime: 2021-03-22 13:22:50
* @Description: 助学工具-题库-题目管理-新建题目Tab
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -100,8 +100,8 @@ class NewQuestionTab extends Component {
if (this.props.questionInfo !== questionInfo) {
if (questionInfo.gapFillingAnswerList !== this.state.gapFillingAnswer) {
this.setState({
gapFillingAnswer: questionInfo.gapFillingAnswerList
})
gapFillingAnswer: questionInfo.gapFillingAnswerList,
});
}
this.setState(
{
......@@ -111,11 +111,13 @@ class NewQuestionTab extends Component {
},
() => {
const con = questionInfo.questionStemList[0].content;
const input = con.match(/<input([^<>]*)>/g)
let _blanksList = input && input.map(item => {
return this.transferStemDocument(item).firstChild
})
this.setState({ blanksList: _blanksList || [] })
const input = con.match(/<input([^<>]*)>/g);
let _blanksList =
input &&
input.map((item) => {
return this.transferStemDocument(item).firstChild;
});
this.setState({ blanksList: _blanksList || [] });
}
); // 题干内容
this.setState({
......@@ -417,7 +419,7 @@ class NewQuestionTab extends Component {
}
break;
}
var that = this
var that = this;
function change() {
that.setState({ contentType });
that.setState({ mediaType: key });
......@@ -449,8 +451,8 @@ class NewQuestionTab extends Component {
this.setState({
onAudioFinish: function () {
change();
}
})
},
});
} else {
change();
}
......@@ -543,19 +545,17 @@ class NewQuestionTab extends Component {
changeBlankCount = (data, idx) => {
const { gapFillingAnswer } = this.state;
let _gap = [...gapFillingAnswer];
if (data.length === 0) {
_gap = []
}
else {
if (data.length <= idx) {
_gap.splice(idx, 1);
} else {
data.forEach((item, index) => {
if (index === idx) {
if (_gap.length < data.length) {
_gap.splice(idx, 0, { correctAnswerList: [] })
_gap.splice(idx, 0, { correctAnswerList: [] });
} else if (_gap.length > data.length) {
_gap.splice(idx, 1)
_gap.splice(idx, 1);
} else {
_gap.splice(idx, 1, { correctAnswerList: [] })
_gap.splice(idx, 1, { correctAnswerList: [] });
}
}
if (!item.correctAnswerList) {
......@@ -568,10 +568,13 @@ class NewQuestionTab extends Component {
});
}
this.setState({
blanksList: data,
gapFillingAnswer: _gap
}, () => this._onSetState());
this.setState(
{
blanksList: data,
gapFillingAnswer: _gap,
},
() => this._onSetState()
);
};
addAnswerTag = (optionItem) => {
......@@ -602,9 +605,11 @@ class NewQuestionTab extends Component {
optionItem.errorHold = true;
}
}
})
});
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState());
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList });
};
......@@ -614,12 +619,14 @@ class NewQuestionTab extends Component {
let _gapFillingAnswer = [...gapFillingAnswer];
_blanksList.forEach((item, index) => {
if (item.id === optionItem.id) {
_gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[index].correctAnswerList.filter(
(tag) => tag !== removedTag
)
_gapFillingAnswer[index].correctAnswerList = _gapFillingAnswer[
index
].correctAnswerList.filter((tag) => tag !== removedTag);
}
});
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () => this._onSetState());
this.setState({ gapFillingAnswer: _gapFillingAnswer }, () =>
this._onSetState()
);
this.setState({ blanksList: _blanksList });
};
......@@ -633,7 +640,7 @@ class NewQuestionTab extends Component {
}
});
this.setState({ blanksList: _blanksList });
}
};
handleInputEdit = (optionItem, index) => {
const _blanksList = this.state.blanksList;
......@@ -647,7 +654,9 @@ class NewQuestionTab extends Component {
renderGapFillingAnswer = (optionItem, optionIndex) => {
const { gapFillingAnswer } = this.state;
const list = gapFillingAnswer[optionIndex] && gapFillingAnswer[optionIndex].correctAnswerList;
const list =
gapFillingAnswer[optionIndex] &&
gapFillingAnswer[optionIndex].correctAnswerList;
return (
<div className="gap-answer-box" key={optionIndex}>
<span className="gap-answer-label">
......@@ -655,18 +664,19 @@ class NewQuestionTab extends Component {
{optionIndex + 1}.
</span>
<div className="gap-answer-content">
{list && list.map((tag, index) => {
return (
<Tag
className="edit-tag"
visible
closable
onClose={() => this.handleTagClose(optionItem, tag)}
>
{tag}
</Tag>
);
})}
{list &&
list.map((tag, index) => {
return (
<Tag
className="edit-tag"
visible
closable
onClose={() => this.handleTagClose(optionItem, tag)}
>
{tag}
</Tag>
);
})}
{optionItem.inputVisible && (
<Input
placeholder={optionItem.errorHold && "请输入"}
......@@ -675,7 +685,12 @@ class NewQuestionTab extends Component {
}}
maxLength={60}
size="small"
suffix={<CloseOutlined onClick={() => this.handleInputClose(optionItem)} style={{ color: "#999999" }} />}
suffix={
<CloseOutlined
onClick={() => this.handleInputClose(optionItem)}
style={{ color: "#999999" }}
/>
}
onBlur={(e) =>
this.handleInputConfirm(optionItem, e.target.value, "save")
}
......@@ -1292,30 +1307,30 @@ class NewQuestionTab extends Component {
{["SINGLE_CHOICE", "JUDGE"].includes(
this.props.questionTypeKey
) && (
<Radio
checked={isCorrectAnswer}
onClick={() => {
_.each(chooseOptions, (o) => {
o.isCorrectAnswer = 0;
});
optionItem.isCorrectAnswer = 1;
this._onSetState();
}}
/>
)}
<Radio
checked={isCorrectAnswer}
onClick={() => {
_.each(chooseOptions, (o) => {
o.isCorrectAnswer = 0;
});
optionItem.isCorrectAnswer = 1;
this._onSetState();
}}
/>
)}
{/* 多选 or 不定项 */}
{["INDEFINITE_CHOICE", "MULTI_CHOICE"].includes(
this.props.questionTypeKey
) && (
<Checkbox
checked={isCorrectAnswer === 1}
onChange={(e) => {
const checked = e.target.checked ? 1 : 0;
optionItem.isCorrectAnswer = checked;
this._onSetState();
}}
/>
)}
<Checkbox
checked={isCorrectAnswer === 1}
onChange={(e) => {
const checked = e.target.checked ? 1 : 0;
optionItem.isCorrectAnswer = checked;
this._onSetState();
}}
/>
)}
</Form.Item>
</div>
<div className="question-item_options__sort mr12">
......@@ -1331,12 +1346,12 @@ class NewQuestionTab extends Component {
{isJudge
? this.renderJudgeOption(questionOptionContentList)
: this.renderContent(
questionOptionContentList,
placeHold,
mediaBtn,
"QUESTION_OPTION",
this.state[`optionsValidate_${optionIndex}`]
)}
questionOptionContentList,
placeHold,
mediaBtn,
"QUESTION_OPTION",
this.state[`optionsValidate_${optionIndex}`]
)}
</Form.Item>
</div>
{[
......@@ -1344,41 +1359,41 @@ class NewQuestionTab extends Component {
"MULTI_CHOICE",
"SINGLE_CHOICE",
].includes(this.props.questionTypeKey) && (
<div className="question-item_options__extra">
<React.Fragment>
<div className="question-item_options__extra">
<React.Fragment>
<span
className="option-operate_item__icon icon iconfont"
onClick={() => this.handleDelOption(optionIndex)}
>
&#xe81a;
</span>
{optionIndex > 0 && (
<span
className="option-operate_item__icon icon iconfont"
onClick={() => this.handleDelOption(optionIndex)}
onClick={() =>
this.handleMoveOption(optionIndex, -1)
}
>
&#xe81a;
</span>
{optionIndex > 0 && (
<span
className="option-operate_item__icon icon iconfont"
onClick={() =>
this.handleMoveOption(optionIndex, -1)
}
>
&#xe74a;
</span>
)}
{optionIndex < chooseOptions.length - 1 && (
<span
className="option-operate_item__icon icon iconfont"
style={{
transform: "rotate(180deg)",
display: "inline-block",
}}
onClick={() =>
this.handleMoveOption(optionIndex, 1)
}
>
&#xe74a;
</span>
)}
</React.Fragment>
</div>
)}
&#xe74a;
</span>
)}
{optionIndex < chooseOptions.length - 1 && (
<span
className="option-operate_item__icon icon iconfont"
style={{
transform: "rotate(180deg)",
display: "inline-block",
}}
onClick={() =>
this.handleMoveOption(optionIndex, 1)
}
>
&#xe74a;
</span>
)}
</React.Fragment>
</div>
)}
</div>
);
})}
......@@ -1401,7 +1416,7 @@ class NewQuestionTab extends Component {
questionAnswerDesc,
"1000字以内，可粘贴小图",
["VOICE", "AUDIO", "PICTURE", "VIDEO"],
"QUESTION_ANSWER_DESC",
"QUESTION_ANSWER_DESC"
)}
</div>
</Form.Item>
......
src/modules/teach-tool/components/QuestionEditor.jsx
......@@ -50,8 +50,8 @@ class QuestionEditor extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
return {
detailInfo: nextProps.detailInfo
}
detailInfo: nextProps.detailInfo,
};
}
shouldComponentUpdate(nextProps, nextState) {
......@@ -62,10 +62,9 @@ class QuestionEditor extends Component {
});
}
if (blanksList !== this.state.blanksList) {
console.log("+++++++", blanksList)
this.setState({
blanksList
})
blanksList,
});
}
return true;
}
......@@ -118,6 +117,7 @@ class QuestionEditor extends Component {
);
};
editorRoot.config.zIndex = 999;
editorRoot.config.placeholder = "";
editorRoot.config.pasteFilterStyle = false;
// 自定义处理粘贴的文本内容
editorRoot.config.pasteTextHandle = function (content) {
......@@ -136,27 +136,29 @@ class QuestionEditor extends Component {
return str;
};
let prevList = []
let prevList = [];
let counter = 0;
const isEdit = getParameterByName('id');
const isEdit = getParameterByName("id");
if (isEdit) {
const stemDom = document.getElementsByClassName("add-fill-line");
prevList = [...stemDom].map(item => item.id)
localStorage.setItem('gap_ques_prevList', JSON.stringify(prevList));
prevList = [...stemDom].map((item) => item.id);
localStorage.setItem("gap_ques_prevList", JSON.stringify(prevList));
setTimeout(function () {
const divHeight = document.getElementById(`editor${editorId}_content`)
.firstChild.offsetHeight;
if (divHeight > 30) {
this.setState({ isShowSingleInput: false });
} else {
this.setState({ isShowSingleInput: true });
}
}.bind(this))
setTimeout(
function () {
const divHeight = document.getElementById(`editor${editorId}_content`)
.firstChild.offsetHeight;
if (divHeight > 30) {
this.setState({ isShowSingleInput: false });
} else {
this.setState({ isShowSingleInput: true });
}
}.bind(this)
);
if (counter === 0) {
this.props.changeBlankCount(stemDom)
this.props.changeBlankCount(stemDom);
}
}
......@@ -177,14 +179,17 @@ class QuestionEditor extends Component {
} else {
this.setState({ isShowSingleInput: true });
}
if (this.state.isGapFilling && this.state.contentType === "QUESTION_STEM") {
if (
this.state.isGapFilling &&
this.state.contentType === "QUESTION_STEM"
) {
const stemHtml = this.transferStemDocument(html);
var _blanksList = stemHtml.getElementsByClassName("add-fill-line")
const ids = [..._blanksList].map(item => item.id);
var _blanksList = stemHtml.getElementsByClassName("add-fill-line");
const ids = [..._blanksList].map((item) => item.id);
const isEdit = getParameterByName('id');
const isEdit = getParameterByName("id");
if (isEdit && counter === 1) {
const prev = localStorage.getItem('gap_ques_prevList');
const prev = localStorage.getItem("gap_ques_prevList");
prevList = prev && JSON.parse(prev);
}
......@@ -192,16 +197,21 @@ class QuestionEditor extends Component {
if (prevList && ids) {
idx = this.getNewArr(prevList, ids);
const oldLen = prevList.length;
idx = idx >= oldLen ? idx - oldLen : idx
idx = idx >= oldLen ? idx - oldLen : idx;
}
prevList = [...ids];
this.setState({ blanksList: _blanksList }, () => this.props.changeBlankCount(_blanksList, idx))
this.setState({ blanksList: _blanksList }, () =>
this.props.changeBlankCount(_blanksList, idx)
);
}
this.setState(
{ contentLength, visiblePlacehold: conLen === 0 && !focusFlag },
{
contentLength,
visiblePlacehold:
(conLen === 0 || (conLen === 1 && html === " ")) && !focusFlag,
},
() => {
onChange && onChange(html, this.state.contentLength);
}
......@@ -218,24 +228,14 @@ class QuestionEditor extends Component {
});
};
editorRoot.config.onfocus = () => {
this.setState({
focusFlag: true,
visibleMediaBox: true,
visiblePlacehold: false,
});
};
editorRoot.create();
this.editorRoot = editorRoot;
// if (detailInfo && detailInfo.content) {
const contentHtml = /^\<p/.test(detailInfo.content)
? detailInfo.content
: `<p>${detailInfo.content}</p>`;
editorRoot.txt.html(detailInfo.content);
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ")
.length;
const textLength = editorRoot.txt.text().replace(/\&nbsp\;/gi, " ").length;
const imgLength = contentHtml.match(/<img/g)
? contentHtml.match(/<img/g).length * 2
: 0;
......@@ -249,13 +249,12 @@ class QuestionEditor extends Component {
onChange && onChange(contentHtml, this.state.contentLength);
}
);
// }
bindChangeContent && bindChangeContent(this.handleChangeContent);
}
getNewArr(a, b) {
const arr = [...a, ...b];
const idx = arr.findIndex(item => {
const idx = arr.findIndex((item) => {
return !(a.includes(item) && b.includes(item));
});
return idx;
......@@ -358,8 +357,9 @@ class QuestionEditor extends Component {
</div>
)}
<div
className={`editor-limit-tip${contentLength > limitLength ? " mt6" : ""
}`}
className={`editor-limit-tip${
contentLength > limitLength ? " mt6" : ""
}`}
style={{ height: contentLength > limitLength ? 20 : 0 }}
>
最多只能输入1000字
......
src/modules/teach-tool/components/QuestionEditor.less
......@@ -18,9 +18,9 @@
color: #999999;
margin-top: 8px;
.editor-fill-info_icon {
color: #5289fa;
color: #5289fa !important;
font-size: 14px;
padding-left: 9px;
padding-left: 9px !important;
cursor: pointer;
}
}
......@@ -94,7 +94,7 @@
.editor-placehold {
position: absolute;
top: 0;
top: 0px;
left: 0;
right: 0;
font-size: 14px;
......@@ -104,6 +104,8 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
z-index: 999;
pointer-events: none;
}
.edtior-media_box {
......
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