Skip to content

M
mr-julyedu
Commit 03ca1ffd by zhanghaozhe
Options

ai测试

parent 5e276db1
Showing with 877 additions and 113 deletions
src/components/ai-test/analysis/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { HeaderBar } from "@common/index"
import Question from "@components/ai-test/common/question"
import Navigation from "@components/ai-test/common/navigation"
import { withRouter, Link } from "react-router-dom";
import { html, http } from "@/utils"
import { Toast } from "antd-mobile";
import Recommends from '@/components/ai-test/common/recommends'
class Analysis extends Component {
state = {
questions: [],
activeIndex: 0,
userSelect: '',
rightAnswer: '',
recommends: [],
}
componentDidMount() {
this.getAnalysis()
}
getAnalysis = () => {
http.post(`${API.home}/sys/get_analysis`, {
record_id: this.props.match.params.recordId,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.getRecommends(data[0].type_id)
this.setState({
questions: data,
}, () => {
this.getAnswerInfo()
});
} else {
Toast.fail(msg, 2, null, false)
}
})
}
getAnswerInfo = () => {
const {questions, activeIndex} = this.state
const question = questions[activeIndex]
const userAnswerIndex = question.options.findIndex(item => item.user_select)
const rightAnswerIndex = question.options.findIndex(item => item.is_ans)
this.setState({
userSelect: String.fromCharCode(65 + userAnswerIndex),
rightAnswer: String.fromCharCode(65 + rightAnswerIndex),
});
}
componentDidUpdate(prevProps, prevState) {
if (prevState.activeIndex !== this.state.activeIndex) {
this.getAnswerInfo()
}
}
getRecommends = (typeId) => {
http.post(`${API.home}/sys/get_commend_course`, {
type_id: typeId,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
recommends: data,
})
} else {
Toast.fail(msg, 2, null, msg)
}
})
}
render() {
const {questions, activeIndex, userSelect, rightAnswer, recommends} = this.state
return (
<div className={'analysis-container'}>
<HeaderBar title={'AI水平测试'} arrow={true}/>
{
!!questions.length && <Question activeIndex={activeIndex} question={questions[activeIndex]}/>
}
<div style={{height: '8px', backgroundColor: '#f5f5f5'}}></div>
<Navigation questions={questions} isAnalysis={true} handleClick={(index) => {
this.setState({
activeIndex: index,
});
}}/>
<div className="analysis">
<div className="info">您选择的是{userSelect}，正确答案是{rightAnswer} 回答{userSelect === rightAnswer ? '正确' : '错误'}</div>
<div className="content">
<div className="head">
<i className="icon"></i>
<span>解析</span>
</div>
{
!!questions.length &&
<div className="analysis-content" dangerouslySetInnerHTML={html(questions[activeIndex].analysis)}></div>
}
</div>
</div>
{
!!questions.length && questions[activeIndex].type_id && <Recommends typeId={questions[activeIndex].type_id}/>
}
</div>
);
}
}
export default withRouter(Analysis);
\ No newline at end of file
src/components/ai-test/analysis/index.scss 0 → 100644
.analysis-container {
padding-bottom: 55px;
padding-top: 64px;
.detail-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #DDD;
}
.analysis {
padding: 15px 17px 0;
.info {
margin-bottom: 22px;
color: #333;
font-size: 14px;
}
.head {
display: flex;
align-items: center;
margin-bottom: 15px;
.icon {
display: block;
width: 16px;
height: 16px;
margin-right: 5px;
background: url("./analysis.png") no-repeat;
background-size: contain;
}
span {
font-size: 14px;
color: #09f;
}
}
&-content {
font-size: 14px;
color: #666;
}
}
}
\ No newline at end of file
src/components/ai-test/assist/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { HeaderBar } from "@common/index"
import Question from "@components/ai-test/common/question"
import { html, http } from "@/utils"
import { Toast } from "antd-mobile";
import { withRouter, Link } from "react-router-dom";
import { connect } from "react-redux";
import { compose } from "redux";
import Recommends from "@components/ai-test/common/recommends"
import classnames from 'classnames'
class Assist extends Component {
state = {
question: null,
answer: {},
result: null,
rightAnswer: '',
userAnswer: '',
}
componentDidMount() {
this.getData()
}
getData = () => {
http.get(`${API.home}/sys/aitest/assist`)
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
const answer = {
[data.id]: undefined,
}
this.setState({
question: data,
answer,
});
} else {
Toast.fail(msg, 2, null, false)
}
})
}
selectAnswer = (question, optionId) => {
this.setState({
answer: {
[question.id]: optionId,
},
});
}
submit = () => {
const {question, answer} = this.state
if (!answer[question.id]) {
Toast.info('请选择后进提交', 2, null, false)
return
}
http.post(`${API.home}/sys/aitest/assistSubmit`, {
code: this.props.match.params.assistCode,
question_id: question.id,
answer_id: answer[question.id],
}).then(res => {
const {code, msg, data} = res.data
this.setAnswer(data.correct_answer)
if (code === 200) {
this.setState({
result: data,
});
} else {
Toast.fail(msg, 2, null, false)
}
})
}
setAnswer = (rightAnswerId) => {
this.setState(state => {
let rightAnswer = '', userAnswer = ''
const question = {
...state.question, ...{
options: state.question.options.map((item, index) => {
if (item.id === rightAnswerId) {
item.is_ans = 1
rightAnswer = String.fromCharCode(65 + index)
}
if (item.id === state.answer[state.question.id]) {
userAnswer = String.fromCharCode(65 + index)
item.user_select = 1
}
return item
}),
},
}
return {
question,
rightAnswer,
userAnswer,
}
});
}
render() {
const {question, answer, result, rightAnswer, userAnswer} = this.state
return (
<div className={'assist'}>
<HeaderBar title={'AI水平测试'} arrow={true}/>
{
question &&
<Question question={question} category={'机器学习'} answer={answer} selectAnswer={!result && this.selectAnswer}/>
}
<div style={{height: '8px', backgroundColor: '#f5f5f5'}}></div>
{
result && <div className="content">
<div class={'info'}>您的选择是{userAnswer}，正确答案是{rightAnswer} 回答{userAnswer === rightAnswer ? '正确' : '错误'}</div>
<div className="head">
<i className="icon"></i>
<span>解析</span>
</div>
<div className="analysis-content" dangerouslySetInnerHTML={html(result.analysis)}></div>
</div>
}
{
result && <>
<Recommends typeId={question.type_id}/>
<div className={classnames(['status', {
end: result.status === 6,
success: result.status === 1,
error: result.status === 2 || result.status === 3 || result.status === 4 || result.status === 5,
}])}>
{result.desc}
</div>
</>
}
<div className="btns">
{
!result && <button className={'submit'} onClick={this.submit}>提交</button>
}
{
result && (result.status === 6
? <Link to={'/'} class={'home'}>返回首页</Link>
: <Link to={'/ai-test/scores'} class={'test'}>我也要测试</Link>)
}
</div>
</div>
);
}
}
export default compose(
connect(
state => state.user,
null,
),
withRouter,
)(Assist);
\ No newline at end of file
src/components/ai-test/assist/index.scss 0 → 100644
.assist {
padding-top: 59px;
padding-bottom: 60px;
.detail-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #DDD;
}
.btns {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
.submit {
background-color: #09f;
color: #fff;
font-size: 18px;
width: 100%;
height: 100%;
border: 0;
outline: 0;
-webkit-appearance: none;
}
a {
display: block;
width: 100%;
height: 100%;
font-size: 18px;
line-height: 40px;
color: #fff;
text-align: center;
&.home {
background-color: #09f;
}
&.test {
background-color: #FFAE00;
}
}
}
.head {
display: flex;
align-items: center;
margin-bottom: 15px;
.icon {
display: block;
width: 16px;
height: 16px;
margin-right: 5px;
background: url("../analysis/analysis.png") no-repeat;
background-size: contain;
}
span {
font-size: 14px;
color: #09f;
}
}
.content {
padding: 15px 17px;
.info {
color: #333;
font-size: 14px;
margin-bottom: 15px;
}
.analysis-content{
font-size: 14px;
}
}
.status {
font-size: 14px;
text-align: center;
color: #333;
&.success {
color: #29C8A0;
}
&.error {
color: #FF5A5A;
}
&.end {
color: #666;
}
}
}
\ No newline at end of file
src/components/ai-test/common/navigation/index.js 0 → 100644
import React from 'react';
import './index.scss'
import classnames from 'classnames'
const Navigation = ({questions, answer, handleClick, isAnalysis}) => {
return (
<div className="navigation">
<ul>
{
!!questions.length && questions.map((item, index) => {
return <li key={index} onClick={handleClick.bind(this, index)}
className={classnames({
active: answer && answer[item.id],
correct: isAnalysis && item.options.some(item => item.is_ans && item.user_select),
error: isAnalysis && item.options.some(item => item.user_select && !item.is_ans),
})}>{index + 1}</li>
})
}
</ul>
</div>
);
};
export default Navigation;
\ No newline at end of file
src/components/ai-test/common/navigation/index.scss 0 → 100644
.navigation {
position: fixed;
bottom: 0;
left: 0;
width: 374px;
height: 55px;
padding: 0 15px;
background: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
ul {
height: 55px;
padding-top: 11px;
overflow-x: auto;
white-space: nowrap;
}
li {
display: inline-block;
width: 34px;
height: 34px;
border: 1px solid #09f;
border-radius: 50%;
margin-right: 20px;
color: #09f;
font-size: 18px;
text-align: center;
line-height: 34px;
&.active {
color: #fff;
background-color: #09f;
}
&.correct {
background-color: #2CDBAF;
border-color: #2CDBAF;
color: #fff;
}
&.error {
border-color: #E64949;
color: #E64949;
//background-color: #E64949;
}
}
}
src/components/ai-test/common/question/index.js
import React, { Component } from 'react';
import './index.scss'
import { html } from "@/utils"
import classnames from 'classnames'
class Question extends Component {
state = {
selectedId: 0,
}
componentDidMount() {
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.question.id !== this.props.question.id) {
this.setSelectedId()
}
}
setSelectedId = () => {
const {question} = this.props
if (question.selected) {
handleSelect = option => {
const {selectAnswer} = this.props
if (selectAnswer) {
selectAnswer(this.props.question, option.id)
this.setState({
selectedId: question.selected,
selectedId: option.id,
})
}
}
handleSelect = option => {
this.props.selectAnswer(this.props.question, option.id)
this.setState({
selectedId: option.id,
})
}
render() {
const {selectedId} = this.state
const {question} = this.props
const {question, answer, activeIndex, category} = this.props
return (
<div className={'question-container'}>
<div className="question">{question.ques}</div>
{
<div className="question">
{activeIndex !== undefined && `${activeIndex + 1}.`}
{category && <span className={'category'}>{category}</span>}&nbsp;
<span dangerouslySetInnerHTML={html(question.ques)}></span>
</div>
}
<ul className={'options'}>
{
!!question.options.length && question.options.map((item, index) => {
return <li key={item.id} className={item.id === selectedId ? 'active' : ''}
return <li key={item.id}
className={classnames({
active: answer && answer[question.id] === item.id,
error: item.user_select && !item.is_ans,
correct: item.is_ans,
})}
onClick={this.handleSelect.bind(this, item)}>
<div className={'letter'}>{String.fromCharCode(65 + index)}</div>
<div>{item.des}</div>
......
src/components/ai-test/common/question/index.scss
.question-container {
padding-bottom: 20px;
.question {
font-size: 16px;
color: #222;
margin-bottom: 21px;
padding: 0 17px;
white-space: pre-line;
.category {
padding: 2px 5px 3px;
border: 1px solid #09f;
border-radius: 3px;
font-size: 12px;
color: #09f;
}
}
.options {
......@@ -25,6 +35,22 @@
border-color: #09f;
}
}
&.correct {
.letter {
background-color: #29C8A0;
color: #fff;
border: 1px solid #29C8A0;
}
}
&.error {
.letter {
background-color: #FF5A5A;
color: #fff;
border: 1px solid #FF5A5A;
}
}
}
}
......
src/components/ai-test/common/recommends/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { http } from "@/utils"
import { Toast } from "antd-mobile";
import { Link } from "react-router-dom";
class Recommends extends Component {
state = {
recommends: [],
}
componentDidMount() {
this.props.typeId && this.getRecommends(this.props.typeId)
}
getRecommends = (typeId) => {
http.post(`${API.home}/sys/get_commend_course`, {
type_id: typeId,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.setState({
recommends: data,
})
} else {
Toast.fail(msg, 2, null, msg)
}
})
}
render() {
const {recommends} = this.state
return (
<div className="recommends">
<div>相关课程</div>
<ul>
{
!!recommends.length && recommends.map(item => {
return <li key={item.course_id}>
<Link to={`/detail?id=${item.course_id}`}><img src={item.image_name} alt=""/></Link>
</li>
})
}
</ul>
</div>
);
}
}
export default Recommends;
\ No newline at end of file
src/components/ai-test/common/recommends/index.scss 0 → 100644
.recommends {
margin-top: 24px;
padding: 0 16px;
div:nth-child(1) {
font-size: 14px;
color: #09f;
margin-bottom: 15px;
}
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 13px;
margin-bottom: 10px;
font-size: 0;
&:nth-child(2n) {
margin-right: 0;
}
}
img {
width: 165px;
height: 119px;
}
}
\ No newline at end of file
src/components/ai-test/exam/index.js
......@@ -6,10 +6,13 @@ import { browser, getParam, http } from "@/utils"
import { Toast } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import storage from 'store2'
import Navigation from "@components/ai-test/common/navigation"
class Exam extends Component {
store = storage.namespace('aiTestExam')
timer = null
unlisten = null
state = {
questions: [],
......@@ -19,15 +22,22 @@ class Exam extends Component {
m: 0,
s: 0,
},
answer: {},
recordId: undefined,
}
componentDidMount() {
this.getQuestions()
this.setCounter()
this.unlisten = this.props.history.listen((location, action) => {
if (action === 'POP' && location.pathname === '/ai-test/scores') {
this.unlisten()
this.store.clearAll()
}
})
}
setCounter = () => {
setInterval(() => {
this.timer = setInterval(() => {
this.setState(state => {
const time = state.time
......@@ -68,9 +78,26 @@ class Exam extends Component {
.then(res => {
const {code, msg, data} = res.data
if (code === 200) {
let answer = this.store.get('answer') || {}, time = this.store.get('time')
if (!answer) {
data.forEach(item => {
answer[item.id] = undefined
})
}
if (!time) {
time = {h: 0, m: 0, s: 0}
}
this.setState({
questions: data,
answer,
time,
recordId: data[0].record_id,
})
this.setCounter()
} else if (code === 23007) {
this.props.history.replace('/ai-test/scores')
} else {
Toast.fail(msg, 2, null, false)
}
......@@ -79,20 +106,27 @@ class Exam extends Component {
selectAnswer = (question, optionId) => {
this.setState(state => {
const questions = state.questions.slice()
const answer = state.answer
answer[question.id] = optionId
return {
questions: questions.map(item => {
if (item.id === question.id) {
item.selected = optionId
}
return item
}),
answer,
}
}, () => {
const {answer, questions} = this.state
const keys = Object.keys(answer)
const values = Object.values(answer)
if (keys.length === questions.length && values.every(item => item)) {
const {history} = this.props
clearInterval(this.timer)
const {time, answer, recordId} = this.state
this.store.setAll({time, answer, recordId})
history.push('/ai-test/submit')
}
})
}
render() {
const {questions, activeQuestion, time} = this.state
const {questions, activeQuestion, time, answer} = this.state
return (
<div className={'exam'}>
<header>
......@@ -109,7 +143,7 @@ class Exam extends Component {
{time.s.toString().padStart(2, '0')}
</span>
</div>
<div className="count">{questions.filter(item => item.selected).length}/{questions.length}</div>
<div className="count">{Object.values(answer).filter(item => item).length}/{questions.length}</div>
</header>
<div className="banner">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/scores/exam-banner.png" alt=""/>
......@@ -117,22 +151,14 @@ class Exam extends Component {
<div className="question-section">
{
!!questions.length &&
<Question question={questions[activeQuestion]} selectAnswer={this.selectAnswer}></Question>
<Question activeIndex={activeQuestion} question={questions[activeQuestion]} selectAnswer={this.selectAnswer} answer={answer}></Question>
}
</div>
<div className="navigation">
<ul>
{
!!questions.length && questions.map((item, index) => {
return <li key={index} onClick={() => {
this.setState({
activeQuestion: index,
})
}} className={item.selected ? 'active' : ''}>{index + 1}</li>
})
}
</ul>
</div>
<Navigation questions={questions} answer={answer} handleClick={(index) => {
this.setState({
activeQuestion: index,
});
}}/>
</div>
);
}
......
src/components/ai-test/exam/index.scss
......@@ -8,6 +8,7 @@ body {
.exam {
background-color: #fff;
padding-bottom: 55px;
header {
display: flex;
......@@ -50,40 +51,4 @@ body {
height: 100%;
}
}
.navigation {
position: fixed;
bottom: 0;
left: 0;
width: 374px;
height: 55px;
padding: 0 15px;
background: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
ul {
height: 55px;
padding-top: 11px;
overflow-x: auto;
white-space: nowrap;
}
li {
display: inline-block;
width: 34px;
height: 34px;
border: 1px solid #09f;
border-radius: 50%;
margin-right: 20px;
color: #09f;
font-size: 18px;
text-align: center;
line-height: 34px;
&.active {
color: #fff;
background-color: #09f;
}
}
}
}
\ No newline at end of file
src/components/ai-test/index.js
import React, { Component } from 'react';
import './index.scss'
import {Switch, Route} from 'react-router-dom'
import { Switch, Route } from 'react-router-dom'
import Scores from './scores'
import Exam from './exam'
import SubmitAnswer from "@components/ai-test/submit-answer"
import Parse from "@components/ai-test/analysis"
import Assist from "@components/ai-test/assist"
class AiTest extends Component {
render() {
......@@ -16,6 +18,15 @@ class AiTest extends Component {
<Route path={`${match.path}/exam`}>
<Exam/>
</Route>
<Route path={`${match.path}/submit`}>
<SubmitAnswer/>
</Route>
<Route path={`${match.path}/parse/:recordId`}>
<Parse/>
</Route>
<Route path={`${match.path}/assist/:assistCode`}>
<Assist/>
</Route>
</Switch>
);
}
......
src/components/ai-test/scores/index.js
......@@ -4,7 +4,8 @@ import { Tabs, Toast } from "antd-mobile";
import { http } from "@/utils"
import storage from 'store2'
import { html } from '@/utils'
import { compareDesc, lightFormat } from "date-fns";
import { compareDesc } from "date-fns";
import { withRouter, Link } from "react-router-dom";
class Scores extends Component {
......@@ -26,7 +27,7 @@ class Scores extends Component {
require('./rank-3.png'),
],
isShowRule: false,
isNeverShow: false,
isNeverShow: this.store.get('isNeverShow'),
pageState: {},
availableTestNum: 0,
userScore: {},
......@@ -43,9 +44,6 @@ class Scores extends Component {
this.getRankList()
this.getUserScores(0)
this.getUserAddress()
this.setState({
isNeverShow: this.store.get('isNeverShow'),
})
}
handleChange = (e) => {
......@@ -53,11 +51,11 @@ class Scores extends Component {
this.setState({
isNeverSHow,
})
this.store('isNeverShow', isNeverSHow)
this.store.set('isNeverShow', isNeverSHow)
}
neverShow = () => {
startTest = () => {
this.props.history.push('/ai-test/exam')
}
getInitialData = () => {
......@@ -196,7 +194,7 @@ class Scores extends Component {
</thead>
<tbody>
<tr>
<td>{userScore.score} <a href="javascript:void(0);">解析</a></td>
<td>{userScore.score} <Link to={`/ai-test/parse/${userScore.r_id}`}>解析</Link></td>
<td>{userScore.cost_time}</td>
<td>{userScore.rank}名</td>
</tr>
......@@ -291,18 +289,23 @@ class Scores extends Component {
{
compareDesc(new Date(), pageState.stop_time * 1000) > 0 ?
pageState.daily_test_num > 0
? <button className={'available'}>开始测试<span>（今日可测试{pageState.daily_test_num}次）</span></button>
? <button className={'available'} onClick={() => {
isNeverShow ? this.startTest() : this.setState({
isShowRule: true,
})
}}>开始测试<span>（今日可测试{pageState.daily_test_num}次）</span></button>
: <button className={'get-chance'}>获取测试机会<span>（今日可测试0次）</span></button>
: <button className={'unavailable'}>活动已结束</button>
}
</div>
{
isShowRule &&
<Rule rule={pageState.rule} neverShow={this.handleChange} isNeverShow={isNeverShow} close={() => {
this.setState({
isShowRule: false,
})
}}/>
<Rule rule={pageState.rule} startTest={this.startTest} neverShow={this.handleChange} isNeverShow={isNeverShow}
close={() => {
this.setState({
isShowRule: false,
})
}}/>
}
{
isShowUserAddress &&
......@@ -334,7 +337,7 @@ class Scores extends Component {
}
}
function Rule({neverShow, isNeverShow, rule, close}) {
function Rule({neverShow, isNeverShow, rule, close, startTest}) {
return <div className="rule-mask">
<div className="rule">
<div>测试规则</div>
......@@ -343,11 +346,11 @@ function Rule({neverShow, isNeverShow, rule, close}) {
<input id={'never-show'} type="checkbox" onChange={neverShow} checked={isNeverShow}/>
<label htmlFor="never-show">不再提示</label>
</div>
<button>进入测试</button>
<button onClick={startTest}>进入测试</button>
<i className={'close iconfont iconiconfront-2'} onClick={close}/>
</div>
</div>
}
export default Scores;
\ No newline at end of file
export default withRouter(Scores);
\ No newline at end of file
src/components/ai-test/scores/index.scss
......@@ -300,7 +300,7 @@
}
.rule-mask {
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
......
src/components/ai-test/submit-answer/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss'
import { HeaderBar } from "@common/index"
import storage from 'store2'
import { Toast } from "antd-mobile";
import { http } from "@/utils"
class SubmitAnswer extends Component {
store = storage.namespace('aiTestExam')
state = {
time: this.store.get('time') || {h: 0, m: 0, s: 0},
answer: this.store.get('answer'),
recordId: this.store.get('recordId'),
}
submit = () => {
const {answer, recordId} = this.state
http.post(`${API.home}/sys/submit_answer`, {
answer: answer,
cost_time: this.getCostTime(),
record_id: recordId,
}).then(res => {
const {code, msg, data} = res.data
if (code === 200) {
this.store.clearAll()
} else {
Toast.fail(msg, 2, null, false)
}
})
}
getCostTime = () => {
const {time} = this.state
return parseInt(time.h) * 60 * 60 * 1000 + parseInt(time.m) * 60 * 1000 + parseInt(time.s) * 1000
}
render() {
const {time, answer} = this.state
return (
<div className={'submit-answer'}>
<HeaderBar title={'提交试卷'} arrow={true}/>
<div className="content">
<div className="cost">用时：
<span>
{
!!time.h && <>{time.h && time.h.toString().padStart(2, '0')}:</>
}
{time.m.toString().padStart(2, '0')}:
{time.s.toString().padStart(2, '0')}
</span>
</div>
<ul className={'answers'}>
{
answer && !!Object.keys(answer).length && Object.keys(answer).map((item, index) => {
return <li key={item} className={answer[item] ? 'selected' : ''}>{index + 1}</li>
})
}
</ul>
<button onClick={this.submit}>提交</button>
</div>
</div>
);
}
}
export default SubmitAnswer;
\ No newline at end of file
src/components/ai-test/submit-answer/index.scss 0 → 100644
html, body {
height: 100%;
background-color: #fff;
}
.submit-answer {
.detail-header {
background-color: #fff;
border-bottom: 1px solid #DDD;
}
.content {
padding: 32px 16px;
}
.cost {
position: relative;
font-size: 18px;
color: #333;
text-align: center;
margin-bottom: 30px;
@mixin pseudo {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 16px;
height: 11px;
background: url("./line.png") no-repeat;
background-size: contain;
}
$dis: 25%;
&::before {
@include pseudo;
left: $dis;
}
&::after {
@include pseudo;
transform: scale(-1, 1) translateY(-50%);
right: $dis;
}
}
.answers {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto 60px;
li {
$size: 34px;
width: $size;
height: $size;
margin-right: 25px;
margin-bottom: 16px;
line-height: $size;
border-radius: 50%;
border: 1px solid #09f;
color: #09f;
text-align: center;
font-size: 18px;
&:nth-of-type(5n) {
margin-right: 0;
}
&.selected {
background-color: #09f;
color: #fff;
}
}
}
button {
width: 343px;
height: 44px;
background: #09f;
border-radius: 22px;
-webkit-appearance: none;
outline: 0;
border: 0;
color: #fff;
font-size: 18px;
}
}
\ No newline at end of file
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