React component for displaying and answering questions

anwer_line.js.coffee

@AnswerLine = React.createClass(
  sendAnswer: ->
      liveQuiz.answerQuestion(this.props.answer.id)

  render: ->
  	  <div>
      	<button type="button" onClick={this.sendAnswer} className="btn btn-default btn-lgt btn-block">{this.props.answer.title}</button>
      	<br />
      </div>
)

question_display.js.coffee

@QuestionDisplay = React.createClass(
  renderQuestion:  ->
    <div>
      <div className="list-group-item">
        <div className="row">
          <div className="col-md-2">
            <img className='media-object' src="/images/question.png" />
          </div>
          <div className="col-md-9">
            <h1>{ this.props.question.title }</h1>
          </div>
        </div>
      </div>
      <br />
      <br />
      <div className="list-group-item">
      <br />
        <ul>
          {
              this.props.question.answers.map( ( answer )->
                  <AnswerLine key={answer.id} answer={answer} />
              )
          }
        </ul>
      </div>
    </div>
  renderWaitingScreen: ->
    <div className="list-group-item">
            <div className="row">
              <div className="col-md-3">
                <img className='media-object' src="/images/cafe.png" />
              </div>
              <div className="col-md-8">
                  <br />
                  <h2 className="media-heading">Quiz not yet started</h2>
                  <h4 className='text-muted'>Take your time to get a coffee <i className="fa fa-circle-o-notch fa-spin"></i></h4>
              </div>
            </div>
        </div>

  render: ->
    if this.props.question?
      @renderQuestion()  
    else 
      @renderWaitingScreen()
        
)

QuestionDisplay React component.md

Usage

You can display a question by passing to the questions property a representing a question See the example below:

Displaying a question:

question = { question: { title: What is the color of the sky ? ,
                         answers: [{id:162,title:Blue},
                                   {id:163,title:Red},
                                   {id:164,title:Yellow},
                                   {id:165,title:Purple}]
                                  }
                        }}
                        
React.render(<QuestionDisplay question=question />, mountNode))

Dependencies

• Twitter Bootsrap 3.3
• Font awesome 4.4
• These icons:
  • http://ic8.link/13286
  • http://ic8.link/13114
  • http://ic8.link/15431