m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

试卷新增编辑器选择项

Browse Source
dev_chen
harry 5 years ago
parent 5cba3eda8a
commit a51f499f01
4 changed files with 333 additions and 286 deletions
Show Stats Download Patch File Download Diff File

3
public/react/src/modules/courses/exercise/ExerciseNew.js
Unescape View File

@ -53,5 +53,4 @@ class ExerciceNew extends Component {
)
}
}
// RouteHOC()
export default (ExerciceNew);
export default ExerciceNew;

468
public/react/src/modules/courses/exercise/ExerciseNewCommon.js
Unescape View File

@ -1,19 +1,10 @@
import React,{ Component } from "react";
import React, { Component } from "react";
import {
Form, Input, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate, Checkbox, message,
Row, Col, Select, Modal, Tooltip
} from 'antd';
import { Q_TYPE_SINGLE, Q_TYPE_MULTI, Q_TYPE_JUDGE, Q_TYPE_NULL, Q_TYPE_MAIN, Q_TYPE_SHIXUN } from './new/common'
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
import { Tooltip } from 'antd'
import { Q_TYPE_SINGLE, Q_TYPE_MULTI, Q_TYPE_JUDGE, Q_TYPE_NULL, Q_TYPE_MAIN, Q_TYPE_SHIXUN } from './new/common'
import axios from 'axios'
// import './board.css'
import "../common/formCommon.css"
// import { RouteHOC } from './common.js'
import CBreadcrumb from '../common/CBreadcrumb'
import {getUrl, ActionBtn} from 'educoder';
import { ActionBtn } from 'educoder';
import SingleEditor from './new/SingleEditor'
import SingleDisplay from './new/SingleDisplay'
@ -27,22 +18,20 @@ import ShixunEditor from './new/ShixunEditor'
import ShixunDisplay from './new/ShixunDisplay'
import ShixunChooseModal from '../coursesPublic/ShixunChooseModal'
import ExerciseForm from './exercise-new-form'
import update from 'immutability-helper'
import './new/common.css'
import '../css/Courses.css'
const { TextArea } = Input;
const confirm = Modal.confirm;
const $ = window.$
const { Option } = Select;
const TITLE_MAX_LENGTH = 60;
class ExerciseNewCommon extends Component{
constructor(props){
class ExerciseNewCommon extends Component {
constructor(props) {
super(props);
this.state = {
exercise_questions: [],
exercise_name: '',
is_md: false,
exercise_description: '',
exercise_types: {},
editMode: !this.props.match.params.Id,
@ -50,30 +39,30 @@ class ExerciseNewCommon extends Component{
}
// 已发布试卷编辑保存的确认弹框
changeScore = (question_id,answerArray) =>{
changeScore = (question_id, answerArray) => {
this.props.confirm({
content:'修改了标准答案',
subContent:"是否重新计算学生答题的成绩？",
onOk:()=>{
this.sureChangeScore(question_id,answerArray)
content: '修改了标准答案',
subContent: "是否重新计算学生答题的成绩？",
onOk: () => {
this.sureChangeScore(question_id, answerArray)
},
onCancel:()=>{
onCancel: () => {
this.addSuccess();
}
})
}
// 已发布试卷修改答案确认修改分数
sureChangeScore = (question_id,answerArray) =>{
let url=`/exercise_questions/${question_id}/update_scores.json`
axios.post((url),{
standard_answers:answerArray
}).then((result)=>{
if(result){
sureChangeScore = (question_id, answerArray) => {
let url = `/exercise_questions/${question_id}/update_scores.json`
axios.post((url), {
standard_answers: answerArray
}).then((result) => {
if (result) {
this.props.showNotification(`${result.data.message}`);
this.addSuccess();
}
}).catch((error)=>{
}).catch((error) => {
console.log(error);
})
}
@ -82,7 +71,7 @@ class ExerciseNewCommon extends Component{
const Id = this.props.match.params.Id
this.isEdit = this.props.isEdit || !!Id
if (this.isEdit) {
const url = this.props.exercise_url ? `/${this.props.exercise_url }/${Id}.json` : `/exercises/${Id}/edit.json`
const url = this.props.exercise_url ? `/${this.props.exercise_url}/${Id}.json` : `/exercises/${Id}/edit.json`
axios.get(url)
.then((response) => {
if (response.data.exercise) {
@ -101,7 +90,7 @@ class ExerciseNewCommon extends Component{
console.log(error);
});
} else {
const courseId=this.props.match.params.coursesId;
const courseId = this.props.match.params.coursesId;
const newUrl = `/courses/${courseId}/exercises/new.json`
axios.get(newUrl)
@ -120,63 +109,54 @@ class ExerciseNewCommon extends Component{
componentDidMount = () => {
this.fetchExercise()
}
// handleSubmit = (e) => {
//
// }
onSaveExercise = () => {
const { exercise_name, exercise_description } = this.state;
onSaveExercise = (data) => {
const exercise_id = this.props.match.params.Id
const courseId = this.props.match.params.coursesId
if (this.isEdit) {
// /exercise_banks/:id.json
const editUrl = `/${this.props.exercise_url ? this.props.exercise_url : 'exercises'}/${exercise_id}.json`
axios.put(editUrl, {
exercise_name,
exercise_description
})
axios.put(editUrl, { ...data })
.then((response) => {
if (response.data.status == 0) {
this.setState({editMode: false})
this.setState({ ...data, editMode: false })
this.props.showNotification('试卷编辑成功')
}
})
.catch(function (error) {
console.log(error);
console.log(error);
});
} else {
const url = `/courses/${courseId}/exercises.json`
axios.post(url, {
exercise_name,
exercise_description
...data
})
.then((response) => {
if (response.data.status == 0) {
this.setState({editMode: false})
this.props.showNotification('试卷新建成功')
const exercise_id = response.data.data.exercise_id;
this.isEdit = true;
this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`);
this.setState({ ...data, editMode: false })
this.props.showNotification('试卷新建成功')
const exercise_id = response.data.data.exercise_id;
this.isEdit = true;
this.props.history.replace(`/classrooms/${courseId}/exercises/${exercise_id}/edit`);
}
})
.catch(function (error) {
console.log(error);
console.log(error);
});
}
}
exercise_name_change = (e) => {
this.setState({exercise_name: e.target.value})
this.setState({ exercise_name: e.target.value })
}
exercise_description_change = (e) => {
this.setState({exercise_description: e.target.value})
this.setState({ exercise_description: e.target.value })
}
// #问题的类型，0为单选题，1为多选题，2为判断题，3为填空题，4为主观题，5为实训题
_checkIsEditing = () => {
if (this.editingId && $(this.editingId).length ) {
if (this.editingId && $(this.editingId).length) {
this.props.showNotification('请先保存或取消当前正在编辑的问题。')
$("html").animate({ scrollTop: $(this.editingId).offset().top - 100})
$("html").animate({ scrollTop: $(this.editingId).offset().top - 100 })
return true
}
return false
@ -186,7 +166,7 @@ class ExerciseNewCommon extends Component{
// 找到编辑或新建的item，新建就删掉item，编辑就isNew改为false
const { exercise_questions } = this.state
let index = -1;
for(let i = 0; i < exercise_questions.length; i++) {
for (let i = 0; i < exercise_questions.length; i++) {
if (exercise_questions[i].isNew == true) {
index = i;
break;
@ -195,14 +175,14 @@ class ExerciseNewCommon extends Component{
if (exercise_questions[index].question_id) { // 编辑
this.setState(
(prevState) => ({
exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: false}}})
exercise_questions: update(prevState.exercise_questions, { [index]: { isNew: { $set: false } } })
// update(prevState.exercise_questions, {$splice: [[index, 1]]})
})
)
} else { // 新建
this.setState(
(prevState) => ({
exercise_questions : update(prevState.exercise_questions, {$splice: [[index, 1]]})
exercise_questions: update(prevState.exercise_questions, { $splice: [[index, 1]] })
})
)
}
@ -241,10 +221,6 @@ class ExerciseNewCommon extends Component{
this.refs.shixunChooseModal.setVisible(true)
this.question_id_to_insert_after = question_id_to_insert_after;
return;
// 拉取实训items
this.addEditingQuestion(Q_TYPE_SHIXUN, question_id_to_insert_after, {
shixun_id: 50
})
}
editQestion = (index) => {
if (this._checkIsEditing()) {
@ -254,7 +230,7 @@ class ExerciseNewCommon extends Component{
this.setState(
(prevState) => ({
exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: true}}})
exercise_questions: update(prevState.exercise_questions, { [index]: { isNew: { $set: true } } })
})
)
}
@ -264,16 +240,16 @@ class ExerciseNewCommon extends Component{
}
const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}/up_down.json`
axios.post(url, { opr: isUp ? 'up' : 'down'})
.then((response) => {
if (response.data.status == 0) {
// this.props.showNotification('移动成功')
this.fetchExercise()
}
})
.catch(function (error) {
console.log(error);
});
axios.post(url, { opr: isUp ? 'up' : 'down' })
.then((response) => {
if (response.data.status == 0) {
// this.props.showNotification('移动成功')
this.fetchExercise()
}
})
.catch(function (error) {
console.log(error);
});
}
onSortDown = (index, question_id) => {
this.onSort(index, question_id, false)
@ -304,7 +280,7 @@ class ExerciseNewCommon extends Component{
}
const _indexBefore = question_id_to_insert_after ? this.findIndexById(question_id_to_insert_after) : this.state.exercise_questions.length - 1
for (let i = _indexBefore; i >= 0; i--) {
if(this.state.exercise_questions[i].question_type == question_type) {
if (this.state.exercise_questions[i].question_type == question_type) {
init_question_score = this.state.exercise_questions[i].question_score
break;
}
@ -315,7 +291,7 @@ class ExerciseNewCommon extends Component{
let init_question_score = this.getInitScore(question_type, question_id_to_insert_after)
let questionObj = {
let questionObj = {
question_type: question_type, // 需要这个通过类型判断
init_question_score: init_question_score,
isNew: true, // 新建或编辑，用是否有id区分是新建还是编辑
@ -336,13 +312,13 @@ class ExerciseNewCommon extends Component{
this.editingId = `#question_${newIndex}`
this.setState({ exercise_questions: new_exercise_questions }, () => {
setTimeout(() => {
$(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100})
$(this.editingId).length && $("html").animate({ scrollTop: $(this.editingId).offset().top - 100 })
}, 500)
})
}
findIndexById = (id) => {
const { exercise_questions } = this.state
for(let i = 0; i < exercise_questions.length; i++) {
for (let i = 0; i < exercise_questions.length; i++) {
if (exercise_questions[i].question_id == id) {
return i;
}
@ -354,24 +330,15 @@ class ExerciseNewCommon extends Component{
onOk: () => {
const url = `/${this.props.exercise_url_questions || 'exercise_questions'}/${question_id}.json`
axios.delete(url)
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification('删除成功')
this.fetchExercise()
// const { exercise_questions } = this.state
// const index = this.findIndexById(question_id)
// this.setState(
// (prevState) => ({
// exercise_questions : update(prevState.exercise_questions, {$splice: [[index, 1]]})
// })
// )
}
})
.catch(function (error) {
console.log(error);
});
.then((response) => {
if (response.data.status == 0) {
this.props.showNotification('删除成功')
this.fetchExercise()
}
})
.catch(function (error) {
console.log(error);
});
}
})
}
@ -393,40 +360,33 @@ class ExerciseNewCommon extends Component{
const editUrl = this.props.exercise_url_questions ? `/${this.props.exercise_url_questions}/${question_id}.json` : `/exercise_questions/${question_id}.json`
return editUrl;
}
onCancel = () => {
this.setState({
editMode: false
})
}
render() {
let { exercise_name, exercise_description, course_id, exercise_types,
exercise_questions, left_banner_id } = this.state;
// if (this.isEdit && !exercise_types) {
// return ''
// }
// const { getFieldDecorator } = this.props.form;
let { exercise_name, exercise_description, exercise_types, exercise_questions, is_md } = this.state;
const { q_counts, q_scores, q_doubles, q_doubles_scores, q_judges, q_judges_scores,
q_mains, q_mains_scores, q_nulls, q_nulls_scores, q_shixuns, q_shixuns_scores, q_singles, q_singles_scores} = exercise_types;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
// sm: { span: 8 },
sm: { span: 24 },
},
wrapperCol: {
xs: { span: 24 },
// sm: { span: 16 },
sm: { span: 24 },
},
};
q_mains, q_mains_scores, q_nulls, q_nulls_scores, q_shixuns, q_shixuns_scores, q_singles, q_singles_scores } = exercise_types;
const exerciseFormOpt = {
exercise_name,
exercise_description,
is_md,
onCancel: this.onCancel,
isEdit: this.isEdit,
onSaveHandler: this.onSaveExercise
}
const { current_user } = this.props
const isAdmin = this.props.isAdmin()
const courseId=this.props.match.params.coursesId;
const exercise_id = this.props.match.params.Id
const isEdit = this.isEdit
const commonHandler = {
onQestionDelete: this.onQestionDelete,
addSuccess: this.addSuccess,
addQuestion: this.addQuestion,
onEditorCancel: this.onEditorCancel,
changeScore:this.changeScore,
changeScore: this.changeScore,
editQestion: this.editQestion,
onSortDown: this.onSortDown,
onSortUp: this.onSortUp,
@ -438,16 +398,16 @@ class ExerciseNewCommon extends Component{
getEditQuestionUrl: this.getEditQuestionUrl,
exercise_url: this.props.exercise_url,
}
return(
<React.Fragment>
<ShixunChooseModal
ref="shixunChooseModal"
chooseShixun={this.chooseShixun}
{...this.props}
singleChoose={true}
shixunsUrl={this.props.shixunsUrl}
></ShixunChooseModal>
<style>{`
return (
<React.Fragment>
<ShixunChooseModal
ref="shixunChooseModal"
chooseShixun={this.chooseShixun}
{...this.props}
singleChoose={true}
shixunsUrl={this.props.shixunsUrl}
></ShixunChooseModal>
<style>{`
.courseForm .formBlock {
padding: 20px 30px 30px 30px;
border-bottom: 1px solid #EDEDED;
@ -460,166 +420,106 @@ class ExerciseNewCommon extends Component{
`}</style>
{!this.state.editMode && <div className="padding20-30" style={{ background: '#fff'}}>
<div className="displayTitle font-16">
<span>{exercise_name}</span>
<a className="fr mr6" onClick={() => { this.setState({editMode: true}) }} style={{ lineHeight: '32px'}}>
<Tooltip title="编辑"><i className="iconfont icon-bianjidaibeijing font-20 color-green"></i></Tooltip>
</a>
</div>
<div className="displayDescription color-grey-9" dangerouslySetInnerHTML={{__html: exercise_description}}
style={{whiteSpace: 'pre-wrap'}}
></div>
</div>}
{this.state.editMode && <Form {...formItemLayout}
// onSubmit={this.handleSubmit}
>
<div className="formBlock" style={{paddingBottom: '2px',borderBottom:"none"}}>
<Form.Item
label="试卷标题"
required
className="topicTitle "
>
{/* {getFieldDecorator('subject', {
rules: [{
required: true, message: '请输入标题',
}, {
max: 20, message: '最大限制为20个字符',
}],
})( */}
<style>
{
`
.exercicenewinputysl .ant-input{
border-right: none !important;
height: 40px !important;
}
`
}
</style>
<Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={exercise_name}
onChange={this.exercise_name_change} addonAfter={`${exercise_name ? exercise_name.length : 0}/${TITLE_MAX_LENGTH}`}
/>
{/* )} */}
</Form.Item>
<Form.Item
label="&nbsp;&nbsp;试卷须知"
>
{/* {getFieldDecorator('select_board_id', {
// initialValue: '3779',
})( */}
<TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{height:"120px"}} value={exercise_description}
onChange={this.exercise_description_change}
/>
{/* )} */}
</Form.Item>
<Form.Item>
{/* defalutSubmitbtn */}
<a className="task-btn task-btn-orange fr mt4" style={{height: '30px', width: '70px'}}
onClick={this.onSaveExercise}
>保存</a>
{ this.isEdit && <a onClick={() => this.setState({editMode: false})} className="defalutCancelbtn fr mt4"
style={{height: '30px', width: '70px', fontSize: '14px', lineHeight: '30px', marginRight: '16px'}}>取消</a>}
{/* <Button type="primary" onClick={this.onSaveExercise} className="fr">保存</Button> */}
</Form.Item>
</div>
{/* <div className="clearfix mt30 mb30">
<a className="defalutCancelbtn fl" onClick={() => {}}>取消</ a>
</div> */}
</Form>}
<p className="clearfix padding20-30 color-grey-9">
<span className="fl">
{ !!q_singles && <span className="mr20">单选题{q_singles}题，共{q_singles_scores}分</span>}
{ !!q_doubles && <span className="mr20">多选题{q_doubles}题，共{q_doubles_scores}分</span>}
{ !!q_judges && <span className="mr20">判断题{q_judges}题，共{q_judges_scores}分</span>}
{ !!q_nulls && <span className="mr20">填空题{q_nulls}题，共{q_nulls_scores}分</span>}
{ !!q_mains && <span className="mr20">简答题{q_mains}题，共{q_mains_scores}分</span>}
{ !!q_shixuns && <span className="mr20">实训题{q_shixuns}题，共{q_shixuns_scores}分</span> }
</span>
<span className="fr">
{ !!q_counts &&
<span>
合计 <span className="color-blue">{q_counts}</span> 题，
{!this.state.editMode && <div className="padding20-30" style={{ background: '#fff' }}>
<div className="displayTitle font-16">
<span>{exercise_name}</span>
<a className="fr mr6" onClick={() => { this.setState({ editMode: true }) }} style={{ lineHeight: '32px' }}>
<Tooltip title="编辑"><i className="iconfont icon-bianjidaibeijing font-20 color-green"></i></Tooltip>
</a>
</div>
<div className="displayDescription color-grey-9" dangerouslySetInnerHTML={{ __html: exercise_description }}
style={{ whiteSpace: 'pre-wrap' }}
></div>
</div>}
{this.state.editMode && <ExerciseForm {...exerciseFormOpt} />}
<p className="clearfix padding20-30 color-grey-9">
<span className="fl">
{!!q_singles && <span className="mr20">单选题{q_singles}题，共{q_singles_scores}分</span>}
{!!q_doubles && <span className="mr20">多选题{q_doubles}题，共{q_doubles_scores}分</span>}
{!!q_judges && <span className="mr20">判断题{q_judges}题，共{q_judges_scores}分</span>}
{!!q_nulls && <span className="mr20">填空题{q_nulls}题，共{q_nulls_scores}分</span>}
{!!q_mains && <span className="mr20">简答题{q_mains}题，共{q_mains_scores}分</span>}
{!!q_shixuns && <span className="mr20">实训题{q_shixuns}题，共{q_shixuns_scores}分</span>}
</span>
<span className="fr">
{!!q_counts &&
<span>
合计 <span className="color-blue">{q_counts}</span> 题，
共 <span className={`${q_scores > 100 ? 'color-red font-bd' : 'color-orange'}`}>{q_scores}</span> 分
</span>
}
</span>
</p>
<div className="edu-back-white">
{ exercise_questions.map((item, index) => {
if (item.question_type == 0 || item.question_type == 1) {
if (item.isNew) {
return <SingleEditor {...this.props} {...item} index={index} {...commonHandler}></SingleEditor>
} else {
return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler}
displayCount={exercise_questions.length}
></SingleDisplay>
}
} else if (item.question_type == 2) {
if (item.isNew) {
return <JudgeEditor {...this.props} {...item} index={index} {...commonHandler}></JudgeEditor>
} else {
return <JudgeDisplay {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay>
}
} else if (item.question_type == 3) {
if (item.isNew) {
return <NullEditor {...this.props} {...item} index={index} {...commonHandler}></NullEditor>
} else {
return <NullDisplay {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay>
}
} else if (item.question_type == 4) {
if (item.isNew) {
return <MainEditor {...this.props} {...item} index={index} {...commonHandler} ></MainEditor>
} else {
return <MainDisplay {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay>
}
} else if (item.question_type == 5) {
if (item.isNew) {
return <ShixunEditor {...this.props} {...item} index={index} {...commonHandler}
chooseShixunSuccess={this.chooseShixunSuccess}
></ShixunEditor>
} else {
return <ShixunDisplay {...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay>
}
}
return <div></div>
})}
}
</span>
</p>
<div className="edu-back-white">
{exercise_questions.map((item, index) => {
if (item.question_type == 0 || item.question_type == 1) {
if (item.isNew) {
return <SingleEditor {...this.props} {...item} index={index} {...commonHandler}></SingleEditor>
} else {
return <SingleDisplay {...this.props} {...item} index={index} {...commonHandler}
displayCount={exercise_questions.length}
></SingleDisplay>
}
} else if (item.question_type == 2) {
if (item.isNew) {
return <JudgeEditor {...this.props} {...item} index={index} {...commonHandler}></JudgeEditor>
} else {
return <JudgeDisplay {...this.props} {...item} index={index} {...commonHandler} ></JudgeDisplay>
}
} else if (item.question_type == 3) {
if (item.isNew) {
return <NullEditor {...this.props} {...item} index={index} {...commonHandler}></NullEditor>
} else {
return <NullDisplay {...this.props} {...item} index={index} {...commonHandler} ></NullDisplay>
}
} else if (item.question_type == 4) {
if (item.isNew) {
return <MainEditor {...this.props} {...item} index={index} {...commonHandler} ></MainEditor>
} else {
return <MainDisplay {...this.props} {...item} index={index} {...commonHandler} ></MainDisplay>
}
} else if (item.question_type == 5) {
if (item.isNew) {
return <ShixunEditor {...this.props} {...item} index={index} {...commonHandler}
chooseShixunSuccess={this.chooseShixunSuccess}
></ShixunEditor>
} else {
return <ShixunDisplay {...this.props} {...item} index={index} {...commonHandler} ></ShixunDisplay>
}
}
return <div></div>
})}
{!commonHandler.exerciseIsPublish && <div className="problemShow padding30">
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>选择题
{!commonHandler.exerciseIsPublish && <div className="problemShow padding30">
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_SINGLE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>选择题
</ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_JUDGE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>判断题
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_JUDGE)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>判断题
</ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_NULL)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>填空题
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_NULL)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>填空题
</ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_MAIN)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>简答题
<ActionBtn style="green" className="mr20" onClick={() => this.addQuestion(null, Q_TYPE_MAIN)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>简答题
</ActionBtn>
<ActionBtn style="green" className="mr20" onClick={() => this.addShixun(null)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i>实训题
<ActionBtn style="green" className="mr20" onClick={() => this.addShixun(null)}>
<i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block' }}></i>实训题
</ActionBtn>
{exercise_id && !this.props.hidePreviewButton && <ActionBtn style="blue" className="fr" onClick={() => this.goToPreview()}>
{/* <i className="iconfont icon-tianjiafangda color-white font-14 mr5" style={{ marginTop: '-1px', display: 'inline-block'}}></i> */}
试卷预览
{exercise_id && !this.props.hidePreviewButton && <ActionBtn style="blue" className="fr" onClick={() => this.goToPreview()}>
试卷预览
</ActionBtn>}
{this.props.bottomSection && this.props.bottomSection}
</div>}
</div>
</React.Fragment>
)
}
{this.props.bottomSection && this.props.bottomSection}
</div>}
</div>
</React.Fragment>
)
}
}
// RouteHOC()
export default (ExerciseNewCommon);

101
public/react/src/modules/courses/exercise/exercise-new-form/index.jsx
Unescape View File

@ -0,0 +1,101 @@
import React, { useState } from 'react'
import { Input, Form, Radio } from 'antd'
import './index.scss'
import { QuillForEditor } from 'educoder'
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 24 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 },
},
}
const { TextArea } = Input
const TITLE_MAX_LENGTH = 60
function EditorTip() {
return <p className='editor-tip'>编辑器选择：<span> (请在下方选择一个您想使用的编辑器) </span></p>
}
const quillOpt = [
'bold',
'italic',
'underline', // 下划线
{ align: [] }, // 对齐方式
{ list: 'ordered' }, // 有序列表
{ list: 'bullet' }, // 无序列表
{ script: 'sub' }, // 下标 x2
{ script: 'super' }, // 上标 平方 (x2)
{ 'color': [] }, // 字体颜色
{ 'background': [] }, // 背景色
'blockquote', // 文件左边加一个边框样式
'image', // 图片
'formula', // 数学公式
'clean' // 清除
]
export default ({ exercise_name = '', exercise_description, is_md, onSaveHandler, isEdit, onCancel }) => {
const [data, setData] = useState({
exercise_name,
exercise_description,
is_md
})
function onChange(prop, value) {
setData({ ...data, [prop]: value })
}
function onNameChange(e) {
onChange('exercise_name', e.target.value)
}
function onDescChange(e) {
onChange('exercise_description', e.target.value)
}
function onEditorChange(e) {
onChange('is_md', e.target.value)
}
function onSave() {
onSaveHandler(data)
}
return (
<Form {...formItemLayout}>
<div className='exercise-new-form'>
<Form.Item label="试卷标题" required className="topicTitle " >
<Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={data.exercise_name}
onChange={onNameChange} addonAfter={`${data.exercise_name.length}/${TITLE_MAX_LENGTH}`}
/>
</Form.Item>
<Form.Item label="&nbsp;&nbsp;试卷须知" >
<TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{ height: "120px" }} value={data.exercise_description} onChange={onDescChange} />
</Form.Item>
<Form.Item label={<EditorTip />} colon={false}>
<Radio.Group onChange={onEditorChange} value={data.is_md}>
<Radio value={true}>Markdown 编辑器</Radio>
<Radio value={false}>富文本编辑器</Radio>
</Radio.Group>
</Form.Item>
<Form.Item>
{data.is_md ? <TPMMDEditor height={183} placeholder="体验过程输入的内容不会保存" refreshTimeout={1500} className="courseMessageMD" />
: <QuillForEditor placeholder='体验过程输入的内容不会保存' options={quillOpt} style={{ height: 123 }} />}
</Form.Item>
<Form.Item>
<a className="task-btn task-btn-orange fr mt4" onClick={onSave} >保存</a>
{isEdit && <a onClick={onCancel} className="defalutCancelbtn fr mt4">取消</a>}
</Form.Item>
</div>
</Form >
)
}

47
public/react/src/modules/courses/exercise/exercise-new-form/index.scss
Unescape View File

@ -0,0 +1,47 @@
.exercise-new-form {
padding: 20px 30px 2px 30px;
background: #fff;
.ant-input {
border-right: none;
height: 40px;
}
.task-btn-orange {
height: 30px;
width: 70px;
}
.defalutCancelbtn {
height: '30px';
width: '70px';
font-size: '14px';
line-height: '30px';
margin-right: '16px';
}
.editor-tip {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(51, 51, 51, 1);
padding-left: 12px;
line-height: 22px;
span {
font-size: 14px;
font-weight: normal;
font-family: MicrosoftYaHei;
color: rgba(136, 136, 136, 1);
line-height: 19px;
}
}
.ant-form-item label {
overflow: hidden;
}
.ant-form-item-label {
height: 40px;
}
}
Write Preview
Loading…
Cancel
Save