| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98 | 2×
2×
2×
2×
2×
2×
2×
2×
| var BS, ChapterSectionMixin, Progress, React, _, classnames;
React = require('react');
_ = require('underscore');
BS = require('react-bootstrap');
classnames = require('classnames');
ChapterSectionMixin = require('openstax-react-components').ChapterSectionMixin;
Progress = React.createClass({
displayName: 'Progress',
propTypes: {
data: React.PropTypes.object.isRequired,
type: React.PropTypes.string.isRequired,
activeSection: React.PropTypes.string
},
mixins: [ChapterSectionMixin],
_calculatePercent: function(num, total) {
return Math.round((num / total) * 100);
},
calculatePercent: function(data, correctOrIncorrect) {
var count, total_count;
if (correctOrIncorrect == null) {
correctOrIncorrect = 'correct';
}
count = correctOrIncorrect + '_count';
total_count = data.correct_count + data.incorrect_count;
if (total_count) {
return this._calculatePercent(data[count], total_count);
} else {
return 0;
}
},
renderPercentBar: function(data, type, percent, correctOrIncorrect) {
var classes, correct, label;
classes = 'reading-progress-bar';
classes += " progress-bar-" + correctOrIncorrect;
if (!percent) {
classes += ' no-progress';
}
label = percent + "%";
if (percent === 100) {
label = label + " " + correctOrIncorrect;
}
return correct = React.createElement(BS.ProgressBar, {
"className": classes,
"label": label,
"now": percent,
"key": "page-progress-" + type + "-" + data.id + "-" + correctOrIncorrect,
"type": "" + correctOrIncorrect,
"alt": percent + "% " + correctOrIncorrect
});
},
renderPercentBars: function() {
var data, percents, ref, type;
ref = this.props, data = ref.data, type = ref.type;
percents = {
correct: this.calculatePercent(data, 'correct'),
incorrect: this.calculatePercent(data, 'incorrect')
};
if (percents.incorrect + percents.correct > 100) {
percents.incorrect = 100 - percents.correct;
}
return _.map(percents, _.partial(this.renderPercentBar, data, type));
},
render: function() {
var active, activeSection, data, index, previous, progressClass, ref, sectionLabel, studentCount, type;
ref = this.props, data = ref.data, type = ref.type, index = ref.index, previous = ref.previous, activeSection = ref.activeSection;
studentCount = React.createElement("span", {
"className": 'reading-progress-student-count'
}, "(", data.student_count, " students)");
sectionLabel = this.sectionFormat(data.chapter_section, this.props.sectionSeparator);
active = activeSection === sectionLabel;
progressClass = classnames('reading-progress', {
'active': active,
'inactive': activeSection && !active
});
return React.createElement("div", {
"key": type + "-bar-" + index,
"className": progressClass
}, React.createElement("div", {
"className": 'reading-progress-heading'
}, React.createElement("strong", null, React.createElement("span", {
"className": 'text-success'
}, sectionLabel), " ", data.title), " ", studentCount), React.createElement("div", {
"className": 'reading-progress-container'
}, React.createElement(BS.ProgressBar, {
"className": 'reading-progress-group'
}, this.renderPercentBars()), previous));
}
});
module.exports = Progress;
|