首页
import React, { Component } from 'react';
import router from 'umi/router';
import { Button, Icon, List, message, Spin } from "antd";
import InfiniteScroll from 'react-infinite-scroller';
import back from '../assets/left_arrow.png';
import exam from '../assets/exam.png';
import examActive from '../assets/exam_active.png';
import wrongQuestion from '../assets/wrong_question.png';
import wrongQuestionActive from '../assets/wrong_question_active.png';
import styles from './index.css';
export default class index extends Component {
constructor() {
super()
this.state = {
data: [],
loading: false,
hasMore: true,
currentIndex: 0,
}
}
componentDidMount() {
// const { dispatch } = this.props;
this.setState({
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
});
}
handleInfiniteOnLoad = () => {
let data = this.state.data;
this.setState({
loading: true,
});
if (data.length > 14) {
message.warning('暂无更多数据');
this.setState({
hasMore: false,
loading: false,
});
return;
}
data = data.concat(this.state.data);
this.setState({
data,
loading: false
})
}
goToExamPage(startTime, endTime) {
startTime = new Date(startTime).getTime();
endTime = new Date(endTime).getTime();
router.push({
pathname: '/examPage/examPage',
query: {
endTime: endTime,
startTime: startTime
},
});
}
goToWrongPage() {
router.push('/wrongQuestions/wrongQuestions')
}
hideLongWords(txt) {
var word;
if (txt.length > 10) {
word = txt.substr(0, 10) + '...';
} else {
word = txt
}
return word
}
render() {
return (
<React.Fragment>
<header className={styles.header}>
<div className={styles.headerLeft} >
<img src={back} className={styles.headerLeftImg} alt={back} />
</div>
<div className={styles.headerTitle}>
{this.state.currentIndex === 0 ? <span>考试列表</span> : <span>错题集</span>}
</div>
<div className={styles.headerRight}></div>
</header>
<section style={{ height: document.documentElement.offsetHeight - 100 + 'px' }} className={styles.auto}>
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!this.state.loading && this.state.hasMore}
useWindow={false}
>
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item key={item.id}>
<article className={styles.eaxmBoxWrapper}>
<p className={styles.eaxmBox}>
<Icon className={styles.examTitleTag} type="file-text" />
<span className={styles.examTitle} title="考试标题考试标题考试标题考试标题考试标题">{this.hideLongWords('考试标题考试标题考试标题考试标题考试标题')}</span>
<span className={styles.examTitleRightTag}>未考试</span>
</p>
<p className={styles.sbBox}>
<span>总分：130分</span>
<span>及格分数：60分</span>
</p>
<p className={styles.sbBox}>
<span>限时：3分钟</span>
<span>2018-12-19 08:34 ~ 2019-01-22 19:34</span>
</p>
<div className={styles.centerButtonWrap}>
{
this.state.currentIndex === 0 ?
<Button type="primary" onClick={() => { this.goToExamPage('2019-05-09 11:00', '2019-05-09 15:00') }}>开始考试</Button> :
<Button type="primary" onClick={() => { this.goToWrongPage() }}>开始考试</Button>
}
</div>
</article>
</List.Item>
)}
>
{this.state.loading && this.state.hasMore && (
<div className="demo-loading-container">
<Spin />
</div>
)}
</List>
</InfiniteScroll>
</section>
<footer className={styles.halfFooter}>
<div
onClick={() => {
this.setState({
currentIndex: 0
})
}}
>
{this.state.currentIndex === 0 ? <img src={examActive} alt="" /> : <img src={exam} alt="" />}
<p style={{ color: this.state.currentIndex === 0 ? '#459DFF' : '#999' }}>考试</p>
</div>
<div
onClick={() => {
this.setState({
currentIndex: 1
})
}}
>
<img src={this.state.currentIndex === 1 ? wrongQuestionActive : wrongQuestion} alt="" />
<p style={{ color: this.state.currentIndex === 1 ? '#459DFF' : '#999' }}>错题集</p>
</div>
</footer>
</React.Fragment>
);
}
}
p {
margin: 0;
font-size: 12px;
}
.header {
display: flex;
justify-content: flex-start;
line-height: 50px;
background-color: #459DFF;
color: #fff
}
.headerLeft {
width: 50px;
padding-left: 10px;
}
.headerLeftImg {
height: 25px;
}
.headerRight {
width: 50px;
}
.headerTitle {
flex: 1;
text-align: center;
font-size: 16px;
letter-spacing: 6px;
}
.eaxmBoxWrapper {
flex: 1;
padding: 10px 20px;
/*box-shadow: 0 0 5px rgba(0,0,0,.3);*/
}
.eaxmBox {
position: relative;
line-height: 30px;
text-align: left;
}
.examTitleTag {
/*position: absolute;
top: 5px;
left: -10px;
width: 5px;
height: 20px;
background-color: #459DFF;*/
font-size: 16px;
color: #459DFF;
}
.examTitle {
padding-left: 5px;
font-weight: 500;
font-size: 14px;
}
.examTitleRightTag {
position: absolute;
top: 5px;
right: 0;
height: 20px;
padding: 0 5px;
background-color: #e44414;
line-height: 20px;
border-radius: 4px;
font-size: 12px;
color: #fff;
}
.eaxmBoxWrapper p:not(:first-of-type) {
line-height: 25px;
}
.halfBox {
display: flex;
}
.halfBox > span {
flex: 1;
}
.centerButtonWrap {
display: flex;
justify-content: center;
padding-top: 5px;
}
.halfFooter {
display: flex;
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 50px;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100;
}
.halfFooter > div{
display: flex;
width: 50%;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.halfFooter > div > img {
height: 25px;
width: 25px;
}
.sbBox {
display: flex;
justify-content: space-between;
}
.auto {
overflow-y: auto;
}
试卷页面
import React, { Component } from 'react';
import { Icon } from 'antd';
import router from 'umi/router';
import more from '../../assets/more.png';
import time from '../../assets/time.png';
import styles from './examPage.css';
const array = [
{
title: '测试题目测试题目____。',
type: '单选题',
anwser: [
'加入',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
},
{
title: '测试题目____。',
type: '多选题',
anwser: [
'localhost:8000/',
'localhost:8000/400',
'localhost:8000/500',
'localhost:8000/300'
]
},
{
title: '测试题目____测试题目。',
type: '判断题',
anwser: [
'gfadfasdfasdfasdfasddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfasdf',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
},
{
title: '测试测试题目____。',
type: '单选题',
anwser: [
'gfadfasdfasdfasdfasddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfasdf',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
}
];
const letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let anwserArray = ['A', ['A', 'D'], 'C', 'A'];
let checkArray = [];
let minutes, seconds, msg, times;
let examType = '随到随考';
let timer;
export default class examPage extends Component {
constructor(props) {
super(props);
this.state = {
time: "1",
msg: '',
showHeaderChild: false,
currentQuestion: 0,
totalQuestion: 4,
checkArray: [],
currentIndex: 0,
};
}
tenToZero(str) {
if (str < 10) {
return '0' + str;
}
return str;
}
showTime(time) {
// 时间戳转换成 m
time = time / (60 * 1000);
var showTime;
if (time > 60) {
showTime = this.tenToZero(Math.floor(time / 60)) + ':' + this.tenToZero(time % 60)
} else {
showTime = this.tenToZero(showTime);
}
return showTime;
}
intervalTime() {
// 获取当前时间的时间戳
var startTime = new Date().getTime();
var times = this.state.time * 60 * 1000;
// 根据限时计算截止时间时间戳
var endTime = startTime + times;
// 初始化showTime
var showTime;
if (this.state.time > 60) {
showTime = this.tenToZero(Math.floor(this.state.time / 60)) + ':' + this.tenToZero((this.state.time % 60)) + ':00'
} else {
showTime = this.tenToZero(showTime) + ":00";
}
// 开启定时器 开始计时
var that = this;
var showTimeInterval = setInterval(function () {
var currentTime = new Date().getTime();
console.log(endTime - currentTime);
var lessTime = endTime - currentTime;
if (lessTime >= times) {
console.log('結束⏲');
// this.showTime(lessTime);
clearInterval(showTimeInterval);
} else {
that.setState({
showTime: that.showTime(lessTime)
})
console.log("正在⏲");
}
}, 1000)
}
changeQuestion(i) {
this.setState({
currentQuestion: i
})
}
checkAnwser(i) {
checkArray[this.state.currentQuestion][0] = letter[i];
this.setState({
checkArray
});
}
checkMoreAnwser(i) {
// type="多选题"
if (!checkArray[this.state.currentQuestion][0]) {
checkArray[this.state.currentQuestion][0] = [letter[i]]
} else {
if (checkArray[this.state.currentQuestion][0].indexOf(letter[i]) >= 0) {
checkArray[this.state.currentQuestion][0].splice(checkArray[this.state.currentQuestion][0].indexOf(letter[i]), 1)
} else {
checkArray[this.state.currentQuestion][0] = [...checkArray[this.state.currentQuestion][0], ...[letter[i]]];
}
}
this.setState({
checkArray
});
}
checkJudgeAnwser(i) {
// type = '判断题'
console.log('判断题');
checkArray[this.state.currentQuestion][0] = letter[i];
this.setState({
checkArray
});
}
countGrade() {
// 单选、多选、判断、简答四种类型题目
var grade = 0;
console.log('总分数：' + grade);
router.push('/grade/' + grade);
}
componentWillMount() {
var obj = window.location.search.substr(1);
var queryArray = obj.split('&');
for (var i = 0; i < queryArray.length; i++) {
var timeArray = queryArray[i].split('=');
if (timeArray[0].indexOf('endTime') > -1) {
this.setState({
endTime: timeArray[1]
}, () => {
console.log(this.state.endTime)
})
} else if (timeArray[0].indexOf('startTime') > -1) {
this.setState({
startTime: timeArray[1]
}, () => {
console.log(this.state.startTime)
})
}
}
}
componentDidMount() {
var that = this;
if (localStorage.checkArray) {
this.setState({
checkArray: localStorage.checkArray,
currentQuestion: localStorage.currentQuestion / 1,
})
console.log('localstorage-checkArray', checkArray)
} else {
array.forEach((item, i) => {
checkArray.push([false, item.type])
return;
})
this.setState({
checkArray
})
}
// ⏲长度
if (examType === '随到随考') {
if (localStorage.times) {
times = localStorage.times;
} else {
// 随到随考
times = this.state.time * 60;
}
} else if (examType === '集中考试') {
console.log('结束时间', this.state.endTime);
let now = new Date().getTime();
let endTime = this.state.endTime;
let showLessTime = (endTime - now) / 1000;
console.log('剩余时间', showLessTime, endTime, now);
times = showLessTime;
}
function cutDown() {
if (times >= 0) {
minutes = that.tenToZero(Math.floor(times / 60));
seconds = that.tenToZero(Math.floor(times % 60));
// console.log(times, minutes, seconds)
msg = minutes + ':' + seconds;
that.setState({
msg
})
--times;
} else {
msg = '00 : 00';
that.setState({
msg
})
clearInterval(timer);
that.countGrade();
}
}
timer = setInterval(() => { cutDown() }, 1000)
}
componentWillUnmount() {
localStorage.setItem('checkArray', this.state.checkArray);
localStorage.setItem('currentQuestion', this.state.currentQuestion);
if (examType === '随到随考') {
localStorage.setItem('times', times);
}
clearInterval(timer);
}
goBack() {
router.goBack();
}
render() {
return (
<React.Fragment>
<nav className={styles.navHeader}>
<div onClick={() => {
this.setState({
showHeaderChild: !this.state.showHeaderChild
})
}}>
<img src={more} alt="" />
<span>答题卡</span>
</div>
<div>
<img src={time} alt="" />
<span>{this.state.msg}</span>
</div>
<div className={styles.hederChild} style={{ display: this.state.showHeaderChild ? 'flex' : 'none' }}>
{
array.map((item, i) => {
return (
<span key={'check' + i}
className={`${styles.checkInput} ${this.state.checkArray.length > 0 ? (checkArray[i][0] ? styles.active : '') : ''}`}
onClick={() => { this.changeQuestion(i) }}>
{i + 1}
</span>)
})
}
</div>
</nav>
<section style={{ height: document.documentElement.offsetHeight - 80 + 'px' }}>
<div>
<span className={styles.questionTag}>{array[this.state.currentQuestion].type}</span>
<span className={styles.questionTag}>{this.state.currentQuestion + 1}/{this.state.totalQuestion}</span>
<span>{array[this.state.currentQuestion].title}</span>
</div>
{array[this.state.currentQuestion].anwser.map((anwser, i) => {
if (array[this.state.currentQuestion].type === '单选题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] === letter[i] ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
else if (array[this.state.currentQuestion].type === '多选题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] && checkArray[this.state.currentQuestion][0].indexOf(letter[i]) >= 0 ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkMoreAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
else if (array[this.state.currentQuestion].type === '判断题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] === letter[i] ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkJudgeAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
})}
<span onClick={() => { this.goBack() }}>返回</span>
</section>
<footer className={styles.halfFooter}>
<div
onClick={() => {
this.setState({
currentIndex: 0,
currentQuestion: this.state.currentQuestion - 1 >= 0 ? this.state.currentQuestion - 1 : this.state.currentQuestion
})
}}
>
<p style={{ color: this.state.currentIndex === 0 ? '#459DFF' : '#999' }}><Icon type="left" />上一题</p>
</div>
<div
onClick={() => {
this.setState({
currentIndex: 1,
currentQuestion: this.state.currentQuestion + 1 < this.state.totalQuestion ? this.state.currentQuestion + 1 : this.state.currentQuestion
})
if (this.state.currentQuestion === (this.state.totalQuestion - 1)) {
console.log('交卷判断')
for (let i = 0; i < checkArray.length; i++) {
console.log(checkArray[i][0])
if(!checkArray[i][0]) {
this.setState({
currentQuestion: i
})
console.log('第'+(i+1)+'题没有做');
return;
}
}
this.countGrade();
}
}}
>
<p style={{ color: this.state.currentIndex === 1 ? '#459DFF' : '#999' }}>{this.state.currentQuestion === (this.state.totalQuestion - 1) ? '交卷' : '下一题'}<Icon type="right" /></p>
</div>
</footer>
</React.Fragment>
)
}
}
.navHeader {
position: relative;
display: flex;
justify-content: space-between;
height: 40px;
box-shadow: 0 0 5px rgba(0,0,0,0.3)
}
.navHeader > div {
padding: 0 10px;
line-height: 40px;
}
.navHeader > div > img {
width: 30px;
height: 30px;
}
.navHeader > div > span {
vertical-align: middle;
}
.navHeader .hederChild {
display: flex;
flex-direction: row;
position: absolute;
top: 40px;
width: 100%;
padding: 10px;
line-height: 20px;
color: #999;
background-color: #fff;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.15);
}
section {
padding: 10px;
overflow-y: auto;
}
.questionTag {
margin-right: 5px;
font-size: 12px;
color: #1890ff;
border: 1px solid #1890ff;
padding: 0 2px;
border-radius: 2px;
}
.anwser {
margin-top: 10px;
padding: 5px;
line-height: 30px;
border: 1px solid #EEE;
border-radius: 6px;
word-break: break-all;
}
.anwser.active {
border: 1px solid #1890ff;
}
.checkInput {
width: 20px;
height: 20px;
margin-right: 5px;
font-size: 12px;
color: #1890ff;
border-radius: 50%;
border: 1px solid #1890ff;
background-color: #fff;
text-align: center;
}
.checkInput.active {
background-color: #1890ff;
color: #fff;
}
.halfFooter {
display: flex;
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 40px;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100;
}
.halfFooter > div{
display: flex;
width: 50%;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.halfFooter > div > img {
height: 25px;
width: 25px;
}
评分页面
import React, { Component } from 'react';
import { Icon } from 'antd';
import router from 'umi/router';
import back from '../../assets/left_arrow.png';
import styles from './grade.css';
export default class grade extends Component {
constructor(props) {
super(props)
this.state = ({
grade: 0,
msg: '考试结果'
})
}
componentDidMount() {
// console.log(location.query)
console.log(this.leftContent, this.rightContent)
var obj = window.location.search.substr(1);
var array = obj.split('=');
this.setState({
grade: array[1]
})
let grade = 80;
let fullGrade = 100;
this.rightContent.setAttribute('title', 'title');
this.leftContent.setAttribute('title', 'title');
//先是leftContent旋转角度从0增加到180度，
//然后是rightContent旋转角度从0增加到180度
var angle = 0;
var lastAngle = 360 * grade / fullGrade;
var that = this;
var timerId = setInterval(function () {
angle += 2;
if (angle > lastAngle) {
clearInterval(timerId);
} else {
if (angle > 180) {
that.rightContent.setAttribute('style', 'transform: rotate(' + (angle - 180) + 'deg)');
} else {
that.leftContent.setAttribute('style', 'transform: rotate(' + angle + 'deg)');
}
}
}, 100);
}
render() {
return (
<div>
<header className={styles.header}>
<div className={styles.headerLeft} >
<img src={back} className={styles.headerLeftImg} alt={back} />
</div>
<div className={styles.headerTitle}>
<span>考试结果</span>
</div>
<div className={styles.headerRight}></div>
</header>
<div className={styles.con}>
<div className={`${styles.percentCircle} ${styles.percentCircleLeft}`}>
<div className={styles.leftContent} ref={(ele) => { this.leftContent = ele }}></div>
</div>
<div className={`${styles.percentCircle} ${styles.percentCircleRight}`}>
<div className={styles.rightContent} ref={(ele) => { this.rightContent = ele }}></div>
</div>
<div className={styles.textCircle}>分数：{this.state.grade}</div>
</div>
</div>
)
}
}
.header {
display: flex;
justify-content: flex-start;
line-height: 50px;
background-color: #459DFF;
color: #fff
}
.headerLeft {
width: 50px;
padding-left: 10px;
}
.headerLeftImg {
height: 25px;
}
.headerRight {
width: 50px;
}
.headerTitle {
flex: 1;
text-align: center;
font-size: 16px;
letter-spacing: 6px;
}
.con {
position: relative;
display: inline-block;
height: 200px;
width: 200px;
}
.percentCircle {
position: absolute;
height: 100%;
background: #6feb5a;
overflow: hidden;
}
.percentCircleRight {
right: 0;
width: 100px;
border-radius: 0 100px 100px 0/0 100px 100px 0;
}
.percentCircleRight .rightContent {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: left center;
transform: rotate(0deg);
border-radius: 0 100px 100px 0/0 100px 100px 0;
background: #bbb;
}
.percentCircleLeft {
width: 100px;
border-radius: 100px 0 0 100px/100px 0 0 100px;
}
.percentCircleLeft .leftContent {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: right center;
transform: rotate(0deg);
border-radius: 100px 0 0 100px/100px 0 0 100px;
background: #bbb;
}
.textCircle {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 80%;
width: 80%;
left: 10%;
top: 10%;
border-radius: 100%;
background: #fff;
color: #4ab054;
}
错题集
import React, { Component } from 'react';
import { Icon } from 'antd';
import router from 'umi/router';
import more from '../../assets/more.png';
import styles from './wrongQuestions.css';
const array = [
{
title: '测试题目测试题目____。',
type: '单选题',
anwser: [
'加入',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
},
{
title: '测试题目____。',
type: '多选题',
anwser: [
'localhost:8000/',
'localhost:8000/400',
'localhost:8000/500',
'localhost:8000/300'
]
},
{
title: '测试题目____测试题目。',
type: '判断题',
anwser: [
'gfadfasdfasdfasdfasddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfasdf',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
},
{
title: '测试测试题目____。',
type: '单选题',
anwser: [
'gfadfasdfasdfasdfasddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfasdf',
'sdfasdfasfasd',
'dfasdfedfdrhytrg',
'dfayyhgjuuyuhyuh'
]
}
];
const letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let anwserArray = ['A', ['A', 'D'], 'C', 'A'];
let wrongAnwser = ['B', ['B', 'C'], 'A', 'D']
let checkArray = [];
export default class wrongQuestions extends Component {
constructor(props) {
super(props);
this.state = {
howHeaderChild: false,
currentQuestion: 0,
totalQuestion: array.length,
checkArray: [],
currentIndex: 0,
}
}
changeQuestion(i) {
this.setState({
currentQuestion: i
})
}
renderAnwser(array, txt) {
var msg = array[this.state.currentQuestion];
return <p>{txt}：{msg.join('、')}</p>
}
goBack() {
router.goBack();
}
render() {
return (
<React.Fragment>
<nav className={styles.navHeader}>
<div onClick={() => {
this.setState({
showHeaderChild: !this.state.showHeaderChild,
})
}}>
<img src={more} alt="" />
<span>错题集</span>
</div>
<div className={styles.hederChild} style={{ display: this.state.showHeaderChild ? 'flex' : 'none' }}>
{
array.map((item, i) => {
return (
<span key={'check' + i}
className={`${styles.checkInput} ${this.state.currentQuestion === i ? styles.active : ''}`}
onClick={() => { this.changeQuestion(i) }}
>
{i + 1}
</span>)
})
}
</div>
</nav>
<section style={{ height: document.documentElement.offsetHeight - 80 + 'px' }}>
<div>
<span className={styles.questionTag}>{array[this.state.currentQuestion].type}</span>
<span className={styles.questionTag}>{this.state.currentQuestion + 1}/{this.state.totalQuestion}</span>
<span>{array[this.state.currentQuestion].title}</span>
</div>
{array[this.state.currentQuestion].anwser.map((anwser, i) => {
if (array[this.state.currentQuestion].type === '单选题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] === letter[i] ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
else if (array[this.state.currentQuestion].type === '多选题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] && checkArray[this.state.currentQuestion][0].indexOf(letter[i]) >= 0 ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkMoreAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
else if (array[this.state.currentQuestion].type === '判断题') {
return (<div key={'anwser' + i} className={`${styles.anwser} ${this.state.checkArray.length > 0 ? (checkArray[this.state.currentQuestion][0] === letter[i] ? styles.active : '') : ''}`} >
<p onClick={() => { this.checkJudgeAnwser(i) }}>{letter[i]}: {anwser}</p>
</div>)
}
})}
{wrongAnwser[this.state.currentQuestion] instanceof Array ? this.renderAnwser(wrongAnwser, '你的答案') : <p>你的答案：{wrongAnwser[this.state.currentQuestion]}</p>}
{anwserArray[this.state.currentQuestion] instanceof Array ? this.renderAnwser(anwserArray, '正确答案') : <p>正确答案：{anwserArray[this.state.currentQuestion]}</p>}
{/*<span onClick={() => { this.goBack() }}>返回</span>*/}
</section>
<footer className={styles.halfFooter}>
<div
onClick={() => {
this.setState({
currentIndex: 0,
currentQuestion: this.state.currentQuestion - 1 >= 0 ? this.state.currentQuestion - 1 : this.state.currentQuestion
})
}}
>
<p style={{ color: this.state.currentIndex === 0 ? '#459DFF' : '#999' }}><Icon type="left" />上一题</p>
</div>
<div
onClick={() => {
this.setState({
currentIndex: 1,
currentQuestion: this.state.currentQuestion + 1 < this.state.totalQuestion ? this.state.currentQuestion + 1 : this.state.currentQuestion
})
if (this.state.currentQuestion === (this.state.totalQuestion - 1)) {
this.goBack();
}
}}
>
<p style={{ color: this.state.currentIndex === 1 ? '#459DFF' : '#999' }}>{this.state.currentQuestion === (this.state.totalQuestion - 1) ? '返回' : '下一题'}<Icon type="right" /></p>
</div>
</footer>
</React.Fragment>
)
}
}
.navHeader {
position: relative;
display: flex;
justify-content: space-between;
height: 40px;
box-shadow: 0 0 5px rgba(0,0,0,0.3)
}
.navHeader > div {
padding: 0 10px;
line-height: 40px;
}
.navHeader > div > img {
width: 30px;
height: 30px;
}
.navHeader > div > span {
vertical-align: middle;
}
.navHeader .hederChild {
display: flex;
flex-direction: row;
position: absolute;
top: 40px;
width: 100%;
padding: 10px;
line-height: 20px;
color: #999;
background-color: #fff;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.15);
}
section {
padding: 10px;
overflow-y: auto;
}
.questionTag {
margin-right: 5px;
font-size: 12px;
color: #1890ff;
border: 1px solid #1890ff;
padding: 0 2px;
border-radius: 2px;
}
.anwser {
margin-top: 10px;
padding: 5px;
line-height: 30px;
border: 1px solid #EEE;
border-radius: 6px;
word-break: break-all;
}
.anwser.active {
border: 1px solid #1890ff;
}
.checkInput {
width: 20px;
height: 20px;
margin-right: 5px;
font-size: 12px;
color: #1890ff;
border-radius: 50%;
border: 1px solid #1890ff;
background-color: #fff;
text-align: center;
}
.checkInput.active {
background-color: #1890ff;
color: #fff;
}
.halfFooter {
display: flex;
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 40px;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100;
}
.halfFooter > div{
display: flex;
width: 50%;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.halfFooter > div > img {
height: 25px;
width: 25px;
}
打开App，阅读手记
随时随地看视频
