import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel, Tooltip } from 'antd';
import { Link } from 'react-router-dom';
import Fullscreen from 'react-fullscreen-crossbrowser';
import './index.less';
import Page from '@src/containers/Page';
import { formatSeconds, formatPercent, formatDate, sortListWithOrder } from '@src/services/Tools';
import Assets from '@src/components/Assets';
import Navigation from '../../../components/Navigation';
import Tabs from '../../../components/Tabs';
import Icon from '../../../components/Icon';
import Switch from '../../../components/Switch';
import Select from '../../../components/Select';
import AnswerSelect from '../../../components/AnswerSelect';
import AnswerList from '../../../components/AnswerList';
import AnswerButton from '../../../components/AnswerButton';
import AnswerTable from '../../../components/AnswerTable';
import OtherAnswer from '../../../components/OtherAnswer';
import { AskTarget } from '../../../../Constant';
import { Question } from '../../../stores/question';
import { My } from '../../../stores/my';
import Sentence from '../process/sentence';
export default class extends Page {
initState() {
return {
step: 0,
hideAnalysis: true,
analysisTab: 'official',
showAnswer: false,
noteField: AskTarget[0].key,
showIds: false,
// question: {
// content: {
// typeset: 'one',
// },
// // questionType: 'awa',
// answer: {
// subject: [[{ text: 'like', uuid: 'hKyz' }]],
// options: ['parallel'],
// },
// stem: "
I like book
",
// },
// userQuestion: {
// userAnswer: {
// subject: [{ text: 'I', uuid: 'kBJe' }],
// options: ['compare'],
// },
// no: 2,
// },
// paper: {
// title: '长难句练习',
// questionNumber: 20,
// },
// report: {
// paperModule: 'sentence',
// },
};
}
initData() {
const { id } = this.params;
Question.getDetailById(id).then(userQuestion => {
const { question, questionNos, paper, note, report, setting } = userQuestion;
let { questionNo } = userQuestion;
if (!questionNo) ([questionNo] = questionNos);
if (!question.answer) question.answer = { questions: [] };
if (!question.answerDistributed) question.answerDistributed = { questions: [] };
if (!userQuestion.userAnswer) userQuestion.userAnswer = { questions: [] };
if ((report.setting || {}).disorder) {
const { content } = question;
// 还原做题顺序
content.questions.forEach((q, i) => {
q.select = sortListWithOrder(question.select, setting.questions[i]);
});
question.answer.questions.forEach((q, i) => {
Object.keys(q).forEach((k) => {
if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
});
});
question.answerDistributed.questions.forEach((q, i) => {
Object.keys(q).forEach((k) => {
if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
});
});
userQuestion.userAnswer.questions.forEach((q, i) => {
Object.keys(q).forEach((k) => {
if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
});
});
}
this.setState({ userQuestion, question, questionNo, note, paper, questionNos });
});
}
prevQuestion() {
const { userQuestion } = this.state;
if (userQuestion.no === 1) return;
Question.getDetailByNo(userQuestion.reportId, userQuestion.no - 1).then((r) => {
linkTo(`/paper/question/${r.id}`);
});
}
nextQuestion() {
const { userQuestion } = this.state;
if (userQuestion.questionNumber === userQuestion.no) return;
Question.getDetailByNo(userQuestion.reportId, userQuestion.no + 1).then((r) => {
linkTo(`/paper/question/${r.id}`);
});
}
submitAsk() {
const { userQuestion = {}, ask = {} } = this.state;
if (ask.originContent === '' || ask.content === '' || ask.target === '') return;
My.addQuestionAsk(userQuestion.id, ask.target, userQuestion.questionModule, ask.originContent, ask.content).then(() => {
this.setState({ askModal: false, askOkModal: true });
}).catch(err => {
this.setState({ askError: err.message });
});
}
submitFeedbackError() {
const { feedback = {}, question = {}, questionNo = {} } = this.state;
if (feedback.originContent === '' || feedback.content === '' || feedback.target === '') return;
My.addFeedbackErrorQuestion(question.id, questionNo.title, feedback.target, feedback.originContent, feedback.content).then(() => {
this.setState({ feedbackModal: false, feedbackOkModal: true });
}).catch(err => {
this.setState({ feedbackError: err.message });
});
}
submitNote(close) {
const { userQuestion = {}, note = {} } = this.state;
My.updateQuestionNote(userQuestion.questionModule, userQuestion.questionNoId, note).then(() => {
if (close) this.setState({ noteModal: false });
}).catch(err => {
this.setState({ noteError: err.message });
});
}
toggleFullscreen() {
const { isFullscreenEnabled } = this.state;
this.setState({ isFullscreenEnabled: !isFullscreenEnabled });
}
toggleCollect() {
const { userQuestion = {} } = this.state;
if (!userQuestion.collect) {
My.addQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
userQuestion.collect = true;
this.setState({ userQuestion });
});
} else {
My.delQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
userQuestion.collect = false;
this.setState({ userQuestion });
});
}
}
formatStem(text) {
if (!text) return '';
const { showAnswer, question = { content: {} }, userQuestion } = this.state;
const { table = {}, questions = [] } = question.content;
text = text.replace(/#select#/g, "");
text = text.replace(/#table#/g, "");
setTimeout(() => {
const selectList = document.getElementsByClassName('#select#');
const tableList = document.getElementsByClassName('#table#');
for (let i = 0; i < selectList.length; i += 1) {
if (!questions[i]) break;
ReactDOM.render(
,
selectList[i],
);
}
if (table.row && table.col && table.header) {
const columns = table.header.map((title, index) => {
return { title, key: index };
});
for (let i = 0; i < tableList.length; i += 1) {
ReactDOM.render(, tableList[i]);
}
}
}, 1);
return text;
}
renderView() {
return (
this.setState({ isFullscreenEnabled })}
>
{this.renderDetail()}
);
}
renderDetail() {
const { report = {} } = this.state;
switch (report.paperModule) {
case 'sentence':
return ;
default:
return {this.renderBase()}
;
}
}
renderHeader() {
const { report = {} } = this.state;
switch (report.paperModule) {
case 'examination':
return this.renderExaminationHeader();
default:
return this.renderExerciseHeader();
}
}
renderExaminationHeader() {
}
renderExerciseHeader() {
const { userQuestion = {}, questionNo = {}, paper = {}, showIds, questionNos = [] } = this.state;
return
No.{userQuestion.stageNo || userQuestion.no}
ID:{questionNo.title}
{questionNos && questionNos.length > 0 &&
{
this.setState({ showIds: true });
}} />}
{showIds &&
题源汇总
{(questionNos || []).map((row) =>
ID:{row.title}
)}
}
用时:$1$2') }} />
{/* 用时:1m39s */}
全站:$1$2') }} />
{/* 全站:1m39s */}
{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}%
this.toggleCollect()} />
;
}
renderBase() {
const { questionStatus, userQuestion = {}, showIds } = this.state;
return {
if (showIds) this.setState({ showIds: false });
}}>
{this.renderHeader()}
{this.renderBody()}
this.setState({ noteModal: true })}>笔记
{
if (questionStatus) {
this.setState({ askModal: true });
} else {
this.setState({ askFailModal: true });
}
}}>提问
this.setState({ feedbackModal: true })}>纠错
{userQuestion.no !== 1 && this.prevQuestion()} />}
{userQuestion.questionNumber !== userQuestion.no && this.nextQuestion()} />}
{this.state.askModal && this.renderAsk()}
{this.state.askOkModal && this.renderAskOk()}
{this.state.askFailModal && this.renderAskFail()}
{this.state.feedbackModal && this.renderFeedbackError()}
{this.state.feedbackOkModal && this.renderFeedbackErrorOk()}
{this.state.noteModal && this.renderNote()}
;
}
renderBody() {
const { question = { content: {} } } = this.state;
const { typeset = 'one' } = question.content;
const { hideAnalysis } = this.state;
const show = typeset === 'one' ? true : !hideAnalysis;
return (
{this.renderContent()}
{question.questionType !== 'awa' && this.renderAnswer()}
{question.questionType === 'awa' && this.renderAWA()}
{question.questionType !== 'awa' && this.renderAnalysis()}
{typeset === 'two' && question.questionType !== 'awa' && (
this.setState({ hideAnalysis: !hideAnalysis })}>
{show ? '收起解析 >' : '查看解析 <'}
)}
);
}
renderAnalysis() {
const { question = { content: {} }, analysisTab } = this.state;
const { typeset = 'one' } = question.content;
const { hideAnalysis } = this.state;
const show = typeset === 'one' ? true : !hideAnalysis;
return (
{
this.setState({ analysisTab: key });
}}
/>
{typeset === 'two' && this.renderAnswer()}
{this.renderText()}
);
}
renderText() {
const { analysisTab, question = {}, userQuestion = {} } = this.state;
const { asks = [], associations = [] } = userQuestion;
let content;
switch (analysisTab) {
case 'official':
content = ;
break;
case 'qx':
content = ;
break;
case 'association':
content =
{associations.map(association => {
return ;
})}
;
break;
case 'qa':
content =
{asks.map((ask, index) => {
return ;
})}
;
break;
default:
break;
}
return content;
}
renderAnswer() {
const { question = { content: {} }, showAnswer, userQuestion = {} } = this.state;
const { questions = [], type, typeset = 'one' } = question.content;
console.log(userQuestion);
return
{typeset === 'two' ?
{
this.setState({ showAnswer: value });
}}>{showAnswer ? '显示答案' : '关闭答案'} : ''}
{questions.map((item, index) => {
return (
);
})}
;
}
renderContent() {
const { question = { content: {} }, showAnswer, step } = this.state;
const { typeset = 'one' } = question.content;
const { steps = [] } = question.content;
return (
{typeset === 'one' && question.questionType !== 'awa' ?
{
this.setState({ showAnswer: value });
}}>{showAnswer ? '显示答案' : '关闭答案'} : ''}
{question.questionType === 'awa' &&
Analytical Writing Assessment
}
{steps.length > 0 &&
this.setState({ step: v })} />}
0 ? steps[step].stem : question.stem) }} />
);
}
renderAWA() {
const { showAnswer, userQuestion = { detail: {}, userAnswer: {} } } = this.state;
return
{
this.setState({ showAnswer: value });
}}>{showAnswer ? '显示答案' : '关闭答案'}
Your Response
{showAnswer &&
用时:$1$2') }} />
{/* 用时:1m39s */}
单词数:{Number((userQuestion.detail || {}).words || 0)}词
}
{!showAnswer &&
选择「显示答案」查看自己的作文
}
;
}
renderAsk() {
const { ask = {} } = this.state;
return (
提问
我想对
有疑问的具体内容是:
this.setState({ askModal: false })}>
取消
this.submitAsk()}>提交
);
}
renderAskOk() {
return (
提问
已提交成功!
关注公众号,老师回答后会立即收到通知。
我们也会通过站内信的方式通知你。
成为学员享受极速答疑特权。了解更多
{
this.setState({ askOkModal: false });
}}>
好的,知道了
);
}
renderAskFail() {
return (
提问
提问功能正在维护中。
可先查阅“相关问答” 或 成为学员享受极速 答疑特权。
了解更多>
{
this.setState({ askFailModal: false });
}}>
好的,知道了
);
}
renderFeedbackError() {
const { feedback = {} } = this.state;
return (
纠错
我想对
错误内容是:
应该改为:
{
this.setState({ feedbackModal: false });
}}>
取消
{
this.submitFeedbackError();
}}>提交
);
}
renderFeedbackErrorOk() {
return (
纠错
感谢您的耐心反馈,我们会尽快核实并以站内信的方式告知结果。
您也可以关注公众号及时获取结果。
{
this.setState({ feedbackOkModal: false });
}}>
好的,知道了
);
}
renderNote() {
const { noteField, note = {} } = this.state;
return (
笔记
{AskTarget.map(item => {
return (
{
this.setState({ noteField: item.key });
}}>
{item.label}
{note[`${item.key}Time`] ? formatDate(note[`${item.key}Time`]) : ''}
);
})}
);
}
}