为了账号安全,请及时绑定邮箱和手机立即绑定

考试项目代码

2019.05.10 17:07 388浏览

首页

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;
}
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消