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

  • Select an option

    Learn more about clone URLs
  • Save supertinou/ada5ebaca12dc4f4228f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save supertinou/ada5ebaca12dc4f4228f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. supertinou renamed this gist Sep 2, 2015. 1 changed file with 0 additions and 0 deletions.
    0 README.md → QuestionDisplay React component.md
    View file
    File renamed without changes.
  2. supertinou revised this gist Sep 2, 2015. 1 changed file with 0 additions and 81 deletions.
    81 changes: 0 additions & 81 deletions timeline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,81 +0,0 @@
    /* Inspired from http://bootsnipp.com/snippets/featured/single-column-responsive-timeline */

    .timeline {
    position: relative;
    padding: 21px 0px 10px;
    margin-top: 15px;
    margin-bottom: 30px;
    }

    .timeline .line {
    position: absolute;
    width: 4px;
    display: block;
    background: currentColor;
    top: 0px;
    bottom: 0px;
    margin-left: 30px;
    }

    .timeline .line::before { top: -4px; }
    .timeline .line::after { bottom: -4px; }
    .timeline .line::before,
    .timeline .line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: currentColor;
    }

    .timeline .panel {
    position: relative;
    margin: 10px 0px 21px 70px;
    clear: both;
    }

    .timeline .panel::before {
    position: absolute;
    display: block;
    top: 8px;
    left: -24px;
    content: '';
    width: 0px;
    height: 0px;
    border: inherit;
    border-width: 12px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    }

    .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; }
    .timeline .panel .panel-heading.icon {
    position: absolute;
    left: -59px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
    }

    .timeline .panel-outline {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    }

    .timeline .panel-outline .panel-body {
    padding: 10px 0px;
    }

    .timeline .panel-outline .panel-heading:not(.icon),
    .timeline .panel-outline .panel-footer {
    display: none;
    }
  3. supertinou revised this gist Sep 2, 2015. 1 changed file with 81 additions and 0 deletions.
    81 changes: 81 additions & 0 deletions timeline.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    /* Inspired from http://bootsnipp.com/snippets/featured/single-column-responsive-timeline */

    .timeline {
    position: relative;
    padding: 21px 0px 10px;
    margin-top: 15px;
    margin-bottom: 30px;
    }

    .timeline .line {
    position: absolute;
    width: 4px;
    display: block;
    background: currentColor;
    top: 0px;
    bottom: 0px;
    margin-left: 30px;
    }

    .timeline .line::before { top: -4px; }
    .timeline .line::after { bottom: -4px; }
    .timeline .line::before,
    .timeline .line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: currentColor;
    }

    .timeline .panel {
    position: relative;
    margin: 10px 0px 21px 70px;
    clear: both;
    }

    .timeline .panel::before {
    position: absolute;
    display: block;
    top: 8px;
    left: -24px;
    content: '';
    width: 0px;
    height: 0px;
    border: inherit;
    border-width: 12px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    }

    .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; }
    .timeline .panel .panel-heading.icon {
    position: absolute;
    left: -59px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
    }

    .timeline .panel-outline {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    }

    .timeline .panel-outline .panel-body {
    padding: 10px 0px;
    }

    .timeline .panel-outline .panel-heading:not(.icon),
    .timeline .panel-outline .panel-footer {
    display: none;
    }
  4. supertinou revised this gist Sep 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ question = { question: { title: What is the color of the sky ? ,
    }
    }}

    React.render(<QuestionDisplay question=question />, @mountNode))
    React.render(<QuestionDisplay question=question />, mountNode))
    ```

    ### Dependencies
  5. supertinou revised this gist Sep 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ React.render(<QuestionDisplay question=question />, @mountNode))

    - Twitter Bootsrap 3.3
    - Font awesome 4.4
    - The icons:
    - These icons:
    - http://ic8.link/13286
    - http://ic8.link/13114
    - http://ic8.link/15431
  6. supertinou revised this gist Sep 1, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,3 +22,7 @@ React.render(<QuestionDisplay question=question />, @mountNode))

    - Twitter Bootsrap 3.3
    - Font awesome 4.4
    - The icons:
    - http://ic8.link/13286
    - http://ic8.link/13114
    - http://ic8.link/15431
  7. supertinou revised this gist Sep 1, 2015. No changes.
  8. supertinou renamed this gist Sep 1, 2015. 1 changed file with 0 additions and 0 deletions.
    0 REAME.md → README.md
    View file
    File renamed without changes.
  9. supertinou revised this gist Sep 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion REAME.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ![Component](http://g.recordit.co/EpxrgRvXBv.gif
    ![Component](http://g.recordit.co/EpxrgRvXBv.gif)

    #### Usage

  10. supertinou created this gist Sep 1, 2015.
    24 changes: 24 additions & 0 deletions REAME.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    ![Component](http://g.recordit.co/EpxrgRvXBv.gif

    #### Usage

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

    __Displaying a question:__

    ```js
    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
    10 changes: 10 additions & 0 deletions anwer_line.js.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    @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>
    )
    47 changes: 47 additions & 0 deletions question_display.js.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    @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()

    )