       </div>
       <div className="reading-progress-container">
         <BS.ProgressBar className="reading-progress-group">
-          {@renderPercentCorrectBar(data, type)}
+          {@renderPercentBar(data, type, 'correct')}
+          {@renderPercentBar(data, type, 'incorrect')}
         </BS.ProgressBar>
         {previous}
       </div>

      op = '-'
    op + ' ' + Math.round((change / b) * 100)

  percentCorrect: (data) ->
    total_count = data.correct_count+data.incorrect_count
    if total_count then @percent(data.correct_count, total_count) else 0

  renderPercentCorrectBar: (data, type) ->
    percentCorrect = @percentCorrect(data)
    classes = 'reading-progress-bar'
    classes += ' no-progress' unless percentCorrect
    correct = <BS.ProgressBar className={classes} bsStyle="success" label="%(percent)s%" now={percentCorrect} key="page-progress-#{type}-#{data.page.id}" />

  renderProgressBar: (data, type, index, previous) ->
    studentCount = if type is 'practice' then <span className='reading-progress-student-count'>({data.student_count} students)</span>

    chapters = _.map(plan.stats.course.current_pages, @renderChapterBars)
    practice = _.map(plan.stats.course.spaced_pages, @renderPracticeBars)

    unless _.isEmpty(chapters)
      chapters = <section>{chapters}</section>
      practiceLabel = <label>Space Practice Performance</label>

    unless _.isEmpty(practice)
      practice = <section>
        {practiceLabel}
        {practice}
      </section>

    <BS.Panel className="reading-stats">
      <section>
        {course}
      </section>
      {chapters}
      {practice}
    </BS.Panel>

StatsShell = React.createClass
