1. Components

Points Progress Bar Legacy

The progress bar visualises how many points a student currently has as a proportion of the total available.

The student currently has no points.

Open example in new tab 


<div class="well">
  <p>questionnaire</p>
  <p>
    <strong class="h2">
      0
      <small>/ 30</small>
    </strong>
  </p>
  <div class="progress" data-toggle="tooltip" data-html="true" data-placement="bottom"
    title="Points: &lt;span class='text-nowrap'&gt;0 / 30&lt;/span&gt;">
    <div class="progress-bar progress-bar-striped progress-bar-warning"
        rel="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="30"
        style="width:0%;"></div>
  </div>
</div>

The student has some points.

Open example in new tab 


<div class="well">
  <p>questionnaire</p>
  <p>
    <strong class="h2">
      15
      <small>/ 30</small>
    </strong>
  </p>
  <div class="progress" data-toggle="tooltip" data-html="true" data-placement="bottom"
    title="Points: &lt;span class='text-nowrap'&gt;15 / 30&lt;/span&gt;">
    <div class="progress-bar progress-bar-striped progress-bar-warning"
        rel="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="30"
        style="width:50%;"></div>
  </div>
</div>

The student has achieved all of the available points in this course.

Open example in new tab 


<div class="well">
  <p>questionnaire</p>
  <p>
    <strong class="h2">
      30
      <small>/ 30</small>
    </strong>
  </p>
  <div class="progress" data-toggle="tooltip" data-html="true" data-placement="bottom"
    title="Points: &lt;span class='text-nowrap'&gt;30 / 30&lt;/span&gt;">
    <div class="progress-bar progress-bar-striped progress-bar-success"
        rel="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="30"
        style="width:100%;"></div>
  </div>
</div>

Known Issues

There are no known issues at this time.

Legacy Component

This component has known issues and is in need of work.

Use it with caution.

If you need to use it, consider addressing some of the known issues at the same time as you're creating something new with it.

Discuss this

If you have questions, ideas for improvements or feedback on using these guidelines, you can join the disucssion in this GitHub issue.