每日一题

package.json

@@ -136,6 +136,7 @@
   },
   "devDependencies": {
     "babel-plugin-import": "^1.11.0",
+    "classnames": "^2.2.6",
     "sass-resources-loader": "^2.0.0"
   },
   "theme": "./src/assets/theme/config.js"

src/components/examination/OpenApp/index.js

+import React from 'react'
+import './index.scss'
+
+const OpenApp = () => {
+    return (
+        <div className='open-app'>
+            <p className='left'>更多试题请前往App查看</p>
+            <button className='right'>在APP打开</button>
+        </div>
+    )
+}
+
+export default OpenApp
\ No newline at end of file

src/components/examination/OpenApp/index.scss

+.open-app {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    height: 44px;
+    padding: 0 15px;
+    border-top: 1px solid $border_ddd;
+    background: $white;
+
+    .left {
+        font-size: $font_12;
+        color: $color_555;
+    }
+
+    .right {
+        width: 88px;
+        height: 22px;
+        border: 1px solid $active;
+        border-radius: 11px;
+        color: $active;
+        font-size: $font_12;
+        background: transparent;
+    }
+}
\ No newline at end of file

src/components/examination/examination.scss

+@mixin padding {
+    padding: 14px 12px;
+}
+
+.examination {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 44px);
+
+    .topic {
+        @include padding;
+        font-size: $font_16;
+    }
+
+    .category-tag {
+        padding: 4px;
+        margin-right: 10px;
+        font-size: $font_12;
+        background-color: $E0B97B;
+        color: $white;
+    }
+
+    .show-answer {
+        @include padding;
+        text-align: right;
+
+        span {
+            color: $active;
+            font-size: $font_14;
+            line-height: $font_14;
+
+            i {
+                transform: translateY(30%);
+                display: inline-block;
+            }
+        }
+    }
+
+
+    .options {
+        list-style: none;
+
+        li {
+            @include padding;
+            $padding: 7px;
+            font-size: $font_16;
+            margin-bottom: 7px;
+            padding-top: $padding;
+            padding-bottom: $padding;
+        }
+
+        .alphabet {
+            $size: 30px;
+            width: $size;
+            height: $size;
+            margin-right: 16px;
+            display: inline-block;
+
+            border: 1px solid $color_999;
+            border-radius: 50%;
+            text-align: center;
+            font-size: $font_14;
+            line-height: $size;
+        }
+
+        .active {
+            color: $active;
+            background: #F8F8Fb;
+
+            .alphabet {
+                border-color: $active;
+            }
+        }
+    }
+
+    .answer {
+        @include padding;
+        background-color: $bg_f5f5f5;
+        visibility: hidden;
+        overflow: auto;
+        flex: 1;
+
+
+        .legend {
+            font-size: $font_14;
+            color: $color_999;
+        }
+
+        .content {
+            font-size: $font_16;
+        }
+
+        &.scale {
+            animation: slideInDown .3s both;
+        }
+    }
+
+    .saq-content {
+        @include padding;
+    }
+}
+
+@keyframes slideInDown {
+    from {
+        transform: translate3d(0, -10%, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+        visibility: visible;
+    }
+}
+
+.slideInDown {
+    animation-name: slideInDown;
+}
\ No newline at end of file

src/components/examination/index.js

+import React from 'react'
+import './examination.scss'
+import classnames from 'classnames'
+
+import { Tag } from '../../common'
+import OpenApp from './OpenApp'
+
+const mockData = {
+    id: 2,
+    type: 1,
+    options: [
+        {
+            ans: '频繁模式挖掘',
+            id: 1,
+        },
+        {
+            ans: '分类和预测',
+            id: 2
+        },
+        {
+            ans: '数据预处理',
+            id: 3
+        },
+        {
+            ans: '数据流挖掘',
+            id: 4
+        },
+    ],
+    ans: 2,
+    question: '将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务（）'
+}
+
+const answer = '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
+    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
+    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
+    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
+    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
+    '另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
+    '                        '
+
+const saq = '例子：\n' +
+    ' >>>find_string(\'hello\\nworld\\n\',\'wor\')\n' +
+    '[\'wor\']\n' +
+    '>>>find_string(\'hello\\nworld\\n\',\'l*d\')\n' +
+    '[\'ld\']\n' +
+    '>>>find_string(\'hello\\nworld\\n\',\'o.\')\n' +
+    '[\'or\']\n'
+
+export default class Examination extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            isShowAnswer: false
+        }
+    }
+
+    componentDidMount() {
+        document.getElementsByClassName('tabbar')[0].style.display = 'none';
+    }
+
+    showAnswer = () => {
+        this.setState({isShowAnswer: !this.state.isShowAnswer})
+    }
+
+    render() {
+        return (
+            <div className='examination'>
+                <div className="question-container">
+                    <div className="topic">
+                        <Tag className='category-tag'>深度学习</Tag>
+                        {mockData.question}
+                    </div>
+                    {
+                        mockData.type === 1 ? (
+                            <MultipleChoice className='options' options={mockData.options}
+                                            correct={mockData.ans}
+                                            showCorrect={this.state.isShowAnswer}
+                            />
+                        ) : <SAQ content={saq}/>
+
+                    }
+                    {
+                        !this.state.isShowAnswer &&
+                        (
+                            <div className="show-answer" onClick={this.showAnswer}>
+                                <span>查看解析<i className='iconfont iconiconfront-69'></i></span>
+                            </div>
+                        )
+                    }
+                </div>
+                {
+                    this.state.isShowAnswer && <Answer content={answer} isShowAnswer></Answer>
+                }
+                <OpenApp></OpenApp>
+            </div>
+        )
+    }
+}
+
+function MultipleChoice({options, correct, showCorrect}) {
+    return (
+        <ul className='options'>
+            {
+                options.map((item, index) => (
+                    <li key={index} className={classnames('option', {'active': correct === item.id && showCorrect})}>
+                        <span className="alphabet">{String.fromCharCode(65 + index)}</span>
+                        {item.ans}
+                    </li>
+                ))
+            }
+        </ul>
+    )
+}
+
+function SAQ({content}) {
+    return (
+        <p className={'saq-content'}>
+            {content}
+        </p>
+    )
+}
+
+function Answer({content, isShowAnswer}) {
+    return (
+        <div className={classnames('answer', {scale: isShowAnswer})}>
+            <p className='legend'>解析</p>
+            <p className='content'>
+                {content}
+            </p>
+        </div>
+
+    )
+}
+

src/router.js

@@ -7,8 +7,7 @@ import Classify from './components/classify';
 import Study from './components/study';
 import My from './components/my';
 import CourseList from './components/classify/courselist';
-
-
+import Examination from './components/examination'
 
 
 const router = () => (
@@ -20,8 +19,9 @@ const router = () => (
             <Route path='/study' component={Study}></Route>
             <Route path='/my' component={My}></Route>
             <Route path='/courselist' component={CourseList}></Route>
+            <Route path='/examination' component={Examination}></Route>
         </Switch>
-        <Menu />
+        <Menu/>
     </Router>
 )
 

src/styles/variable.scss

@@ -49,3 +49,10 @@ $sp_e7eaf1: #e7eaf1;
 /*
  *  @ 边框颜色
  */
+$border_ddd: #ddd;
+
+
+/*
+ *  @ 标签颜色
+ */
+$E0B97B: #E0B97B;
\ No newline at end of file