react-interactive-quiz-component/src/Quiz.js

Simple Interactive Quiz component

import React, { Component } from 'react';
import $ from 'jquery';

class Quiz extends Component {
    constructor(props) {
        super(props);
        this.divStyle = {
            background: "#eee",
            padding: "20px",
            margin: "20px",
            textAlign:"left"
            
          };
          this.AnsweredQuestion=[];
          this.state = {score:0 ,isDisable:'',bgColor:'blue'};          
          this.Validate = this.Validate.bind(this);          
          this.Next = this.Next.bind(this);
          this.question = this.props.question;
          this.ResetColor = this.ResetColor.bind(this);
          this.HighlightColorAnswer = this.HighlightColorAnswer.bind(this);
    }

    HighlightColorAnswer(answer){
        $( ".optBtn" ).each(function() {
            if($(this).text() == answer){
                $(this).css('background','green');
            }
          });
    }

    Next() {
        this.props.onNext(this.AnsweredQuestion);
    }
    Validate(e){
        var isCorrectAnswer = false;
        if(this.question.choices.answer == e.target.innerText){
            isCorrectAnswer = true;
            this.state.score++;
            e.target.style.background="Green";
        }
        else{
            e.target.style.background="Red";
            this.HighlightColorAnswer(this.question.choices.answer);
        }
        this.state.isDisable='disabled';
        this.AnsweredQuestion = {question:this.question.question, selectedoption:e.target.innerText, answer:this.question.choices.answer, status:isCorrectAnswer};
        this.setState(this.state);   
        this.forceUpdate();
    }
    componentWillReceiveProps(newProps){
        this.question = newProps.question;
        this.state.isDisable='';       
        this.ResetColor();
    }
    ResetColor(){
        $('.optBtn').css('background','blue');
    }
    render() {
        return (
            <div>
                <div className="container" style={this.divStyle}>                    
                    <div className="row" >
                        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            {this.question.question}
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <button type="button"  className="btn btn-primary btn-lg btn-block optBtn" style={{backgroundColor:this.state.bgColor}} onClick={this.Validate} disabled={this.state.isDisable}>{this.question.choices.options[0]}</button>
                        </div>
                        <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <button type="button"  className="btn btn-primary btn-lg btn-block optBtn" style={{backgroundColor:this.state.bgColor}} onClick={this.Validate} disabled={this.state.isDisable}>{this.question.choices.options[1]}</button>
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <button type="button"  className="btn btn-primary btn-lg btn-block optBtn" style={{backgroundColor:this.state.bgColor}} onClick={this.Validate} disabled={this.state.isDisable}>{this.question.choices.options[2]}</button>
                        </div>
                        <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <button type="button"  className="btn btn-primary btn-lg btn-block optBtn" style={{backgroundColor:this.state.bgColor}} onClick={this.Validate} disabled={this.state.isDisable}>{this.question.choices.options[3]}</button>
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                            Score : {this.state.score}
                        </div>
                        
                        <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <button type="button" className="btn btn-primary btn-lg btn-block" onClick={this.Next}>Next</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Quiz;