Skip to content

Instantly share code, notes, and snippets.

@supertinou

supertinou/QuestionDisplay React component.md

Last active November 7, 2015 22:05
Show Gist options
  • Save supertinou/ada5ebaca12dc4f4228f to your computer and use it in GitHub Desktop.
Save supertinou/ada5ebaca12dc4f4228f to your computer and use it in GitHub Desktop.
Download ZIP
React component for displaying and answering questions
Raw
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>
)
Raw
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()
)
Raw
QuestionDisplay React component.md

Component

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment