React.js Learning Random Quiz module __js

react.js Small Project--Random quiz module

Function Introduction :

The following figure, a paper on the Web page, the paper by simple questions, general questions, problems by proportional composition, and each question is from the corresponding test questions randomly selected, and correct the topic will not appear again.

realize the idea:

OK module: Start button, quiz module, topic Component, submit button

Determine module structure: Start button (Invoke) quiz module (invoke) Topic component
Quiz paper Component (Invoke) Submit button (call) Start button

Specific process:

1. First of all, the establishment of three test questions for testing, new three JS file, in which the declaration of two-dimensional arrays, respectively, for the storage of different difficult topics (Easyquestions, Simplequestions, hardquestions), such as the picture of a simple question:

Let easyquestions = [
    [' easyQuestion1 ',//                      question
        ' a ',/                                /Option
        ' B ',
        ' C ',
        ' D ', '
        a '],                              / /Answer
    [' 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. The question is how to do the random quiz. Here I created a special function to generate a random number array, and the number of random numbers generated by the array length does not exceed the problem in the question, according to the number in the array of random numbers to index the questions in the question, such as figure:

The code is as follows:

    
       /* Function function: Generate random number array, through the random number array to get the title
    /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;
    }

    A random number array let
    randomnumbersofeasyquestions = Setrandomarr (easyquestions) corresponding to different difficulty questions is generated.
    Let randomnumbersofsimplequestions = Setrandomarr (simplequestions);
    Let randomnumbersofhardquestions = Setrandomarr (hardquestions);

3. Generate the topic component, will the topic according to the format to display on the webpage, here the topic component only has made the style, and does not have the binding display topic, the display topic in produces the examination paper module to decide, the code is as follows:

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&gt
                        ; <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,//set an ID for each topic order:react .
        PropTypes.number.isRequired,//Set serial number of each topic questionsType:React.PropTypes.string.isRequired,//Set topic type, simple question/medium problem/problem name:React.PropTypes.string.isRequired//The option of each question is bound to a name, to prevent the topic option to check the problem};

4. Generate quiz module, this module has more functions, mainly:
(1) corresponding to the random number of random numbers in the sequence index questions in the bank, to achieve a random question
(2) Call the above question component, the index of the topic in accordance with the format displayed on the page
(3 To generate the Submit button component
(4) After clicking the Submit button, compare the answer with the correct answer
(5) After the comparison, the right and wrong of each question returned, displayed on the Web page, and invoke the Start Test button to facilitate the next round of testing for users
(6) in the user correct answer to the case, Delete the corresponding random number index in the random number array to ensure that the problem will not appear again
code as follows:

Set the number of simple questions const EASYQUESTIONSLENGTH = 2;
Set the number of medium titles const SIMPLEQUESTIONSLENGTH = 1;  
Set the number of challenges const HARDQUESTIONSLENGTH = 1;     
Three groups of topics need a common count unit let ncount = 0;            
Set the correct answer for a, if you want to correspond to the specific answer to each question, you can change it in submitanswers () to the corresponding question array in the answer 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;//When submitting the answer, the NCOunt Zero, for the next generation of test paper count let Questionlength = (easyquestionslength + simplequestionslength + hardquestionslength);  Let answers = []; Used to store user-selected answers let Resultsarr = [];//to store user-selected answers in the correct//to answers array push has been selected for the answer (let i = 0; ; Questionlength;
            ++i) {Let options = Document.getelementsbyname ("question" + i); for (Let j = 0; j < options.length; ++j) {if (options[j].checked) {Answers.push (O)
                    Ptions[j].value);
                Break Compare the answer in the answers array with the correct answer, push the final result to the Resultsarr let Easycount, Simplecount, Hardcou
        NT = 0; for (Let i = 0; i < questionlength ++i) {if (answers[i] = = correctanswer) {Resultsarr.pu
                SH (<p Key={i} classname= "Results" > {i+1} title: Correct </p>); Correct answer is to delete the corresponding item in the random array of the serial number, to ensure that the next question no longer appear 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-sim
                    Plequestionslength, 1);
                ++hardcount;
            }}else {Resultsarr.push (<p key={i} classname= "Results" > {i+1} title: Error </p>);
                ///Render answer to page Reactdom.render (<div> {Resultsarr}
    <StartButton/> </div&gt, 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 = {T
    His.submitanswers}> Submit answers </button> </div>); }
}

5. Generate the Start button component, now the main module and completion, the next is to generate a Start button component to invoke the test paper component, the code is as follows:

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}> start Test </button>
            ); c14/>}
    }

6. Rendering the entrance, will start the test button rendering to the page, the code is as follows:

Reactdom.render (
        <startbutton/>,
        document.getElementById ("container")
    );

To view the complete code, please click this GitHub warehouse link