React.js小專案——隨機出題模組

功能簡介：

如下圖，在網頁上出一張試卷，該試卷由簡單題、一般題、難題按比例組成，並且每題是從對應題庫中隨機抽取，且答對的題目不會再出現。

實現思路：

• 確定模組：開始按鈕、試卷元件、題目元件、提交按鈕

• 確定模組結構： 開始按鈕 （呼叫） 試卷元件 （呼叫） 題目元件
  　　　　　　　　　　　　　　　　試卷元件 （呼叫） 提交按鈕 （呼叫） 開始按鈕

具體流程：

1. 首先是建立三個用於測試的題庫，新建三個js檔案，在其中宣告二維陣列，分別用於存放不同難度的題目（easyQuestions, simpleQuestions, hardQuestions），如圖為簡單題的題庫：

let easyQuestions = [
    [ 'easyQuestion1',                      //問題
        'A',                                //選項
        'B',
        'C',
        'D',
        'A' ],                              //答案
    [ 'easyQuestion2',
        'A',
        'B',
        'C',
        'D',
        'A' ],
    [ 'easyQuestion3'
 
,
        'A',
        'B',
        'C',
        'D',
        'A' ],
    [ 'easyQuestion4',
        'A',
        'B',
        'C',
        'D',
        'A' ],
    [ 'easyQuestion5',
        'A',
        'B',
        'C',
        'D',
        'A' ]
];    

2.將題庫引入，接下來的問題就是如何做到隨機出題。在此我新建了一個專門用於生成隨機數陣列的函式，並且生成的隨機數陣列長度不超過題庫中題目的數量，根據隨機數陣列中的數字來索引題庫中的題目，思路如圖：

    /*
       函式功能：生成隨機數陣列,通過該隨機數陣列來獲取題庫中題目
    */
    function setRandomArr(arrIndex) {
        let originalArr = [];
        for (let i = 0; i < arrIndex.length; ++i){
            originalArr[i] = i;
        }
        originalArr.sort(function() {
            return 0.5 - Math.random();
        });
        return originalArr;
    }

    //生成對應不同難度題庫的隨機數陣列
    let randomNumbersOfEasyQuestions = setRandomArr(easyQuestions);
    let randomNumbersOfSimpleQuestions = setRandomArr(simpleQuestions);
    let randomNumbersOfHardQuestions = setRandomArr(hardQuestions);

3.生成題目元件，將題目按照格式展示到網頁上，此處的題目元件只是做出了樣式，並沒有繫結展示的題目，展示的題目在生成試卷模組時決定，程式碼如下：

class Question extends React.Component {
        constructor(props){
            super(props);
        }
        render() {
            return (
                <div className="questions" id = {this.props.id}>
                    <p>({this.props.order}){this.props.questionsType}</p>
                    <form action="">
                        <div className = "option">
                            <input type="radio" name={this.props.name} value="A"/> A
                        </div>
                        <div className = "option">
                            <input type="radio" name={this.props.name} value="B"/> B
                        </div>
                        <div className = "option">
                            <input type="radio" name={this.props.name} value="C"/> C
                        </div>
                        <div className = "option">
                            <input type="radio" name={this.props.name} value="D"/> D
                        </div>
                    </form>
                </div>
            );
        }
    }
    Question.propTypes = {
        id : React.PropTypes.number.isRequired,     //為每一個題目設定一個id
        order: React.PropTypes.number.isRequired,  //設定每個題目的序號
        questionsType : React.PropTypes.string.isRequired, //設定題目型別，簡單題/中等題/難題
        name : React.PropTypes.string.isRequired    //將每題的選項繫結一個name，防止題目選項勾選出問題
    };

4.生成試卷模組，這一個模組的功能比較多，主要有：
(1)對應著隨機陣列中的隨機數序列索引題庫中的題目，實現隨機出題
(2)呼叫上面的Question元件，將索引出的題目按照格式展現在網頁上
(3)生成提交按鈕元件
(4)點選提交按鈕後，將提交的答案與正確答案比較
(5)比較完畢後，將每題的正誤情況返回，展示在網頁上，並呼叫開始測試按鈕，方便使用者進行下一輪測試
(6)在使用者正確答題的情況下，將該題在隨機數陣列中的對應的隨機數索引刪除，保證該題下次不再出現
程式碼如下：

//設定簡單題的數量
const easyQuestionsLength = 2;  
//設定中等題的數量  
const simpleQuestionsLength = 1;
//設定難題的數量   
const hardQuestionsLength = 1;  
//三組題目需要一個共同的計數單位   
let nCount = 0;     
//暫且設定正確答案為A，若想對應到每題具體的答案，可以在submitAnswers()中將其改變成對應題目陣列中的答案                
let correctAnswer = "A";            
class Paper extends React.Component {
    constructor(props){
        super(props);
        this.initialPaper = this.initialPaper.bind(this);
    }
    initialPaper(questionArr, length, questionType, randomNumbersOfQuestionType) {
        for (let i = 0; i < length; ++i) {
           questionArr.push(
               <Question
                       id = {nCount}
                       order = {nCount + 1}
                       questionsType = {questionType[randomNumbersOfQuestionType[i]][0]}
                       name = {"question" + nCount}
                       key = {nCount}
               />);
           ++nCount;
        }
    }
    submitAnswers() {
        nCount = 0; //提交答案的時候將nCount清零，用於下一次生成試卷時計數
        let questionLength = (easyQuestionsLength + simpleQuestionsLength + hardQuestionsLength);
        let answers = [];  //用於儲存使用者選擇的答案
        let resultsArr = [];//用於儲存使用者選擇的答案的正誤
        //向answers陣列中push已經被選中的答案
        for (let i = 0; i < questionLength; ++i) {
            let options = document.getElementsByName("question" + i);
            for (let j = 0; j < options.length; ++j) {
                if (options[j].checked) {
                    answers.push(options[j].value);
                    break;
                }
            }
        }
        //將answers陣列中的答案與正確答案比較，向resultsArr中push最終結果
        let easyCount, simpleCount, hardCount = 0;
        for (let i = 0; i < questionLength; ++i) {
            if (answers[i] == correctAnswer) {
                resultsArr.push(<p key={i} className="results">第{i+1}題：正確</p>);
                //答題正確則刪除相應題庫隨機陣列中的序號，保證下次出題不再出現
                if (i < easyQuestionsLength) {
                    randomNumbersOfEasyQuestions.splice(i - easyCount, 1);
                    ++easyCount;
                }
                else if(easyQuestionsLength <= i && i < (easyQuestionsLength + simpleQuestionsLength)) {
                    randomNumbersOfSimpleQuestions.splice(i - simpleCount - easyQuestionsLength, 1);
                    ++simpleCount;
                }
                else {
                    randomNumbersOfHardQuestions.splice(i - hardCount - easyQuestionsLength - simpleQuestionsLength, 1);
                    ++hardCount;
                }
            }else {
                resultsArr.push(<p key={i} className="results">第{i+1}題：錯誤</p>);
            }
        }
        //將答案渲染到網頁上
        ReactDOM.render(
            <div>
                {resultsArr}
                <StartButton/>
            </div>,
            document.getElementById("container")
        );
    }
    render() {
        let questionArr = [];
        this.initialPaper(questionArr, easyQuestionsLength, easyQuestions, randomNumbersOfEasyQuestions);
        this.initialPaper(questionArr, simpleQuestionsLength, simpleQuestions, randomNumbersOfSimpleQuestions);
        this.initialPaper(questionArr, hardQuestionsLength, hardQuestions, randomNumbersOfHardQuestions);
        return (
            <div>
                {questionArr}
                <button id = "submitButton" onClick = {this.submitAnswers}>提交答案</button>
            </div>
        );
    }
}

5.生成開始按鈕元件，現在主體模組以及完成，接下來就是生成一個開始按鈕元件呼叫試卷元件就行啦，程式碼如下：

class StartButton extends React.Component {
        constructor(props){
            super(props);
            this.showPaper = this.showPaper.bind(this);
        }
        showPaper() {
            ReactDOM.render(
                <Paper/>,
                document.getElementById("container")
            );
        }
        render() {
            return(
                    <button id = "startButton" onClick = {this.showPaper}>開始測試</button>
            );
        }
    }

6.渲染入口，將開始測試按鈕渲染到頁面上，程式碼如下：

ReactDOM.render(
        <StartButton/>,
        document.getElementById("container")
    );