Skip to content

Commit

Permalink
Improve visual consistency
Browse files Browse the repository at this point in the history 
- Revise UI to improve visual consistency
- Fix problem of response missing when switching between units
- Add test cases for new chart format
  • Loading branch information
@kitsook
kitsook committed Apr 25, 2018
1 parent 8305834 commit d7cd89a
Show file tree
Hide file tree
Showing 8 changed files with 603 additions and 241 deletions.
53 changes: 42 additions & 11 deletions ubcpi/static/css/ubcpi.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,6 @@ h2.question-text {
padding: 0;
}

.choicegroup fieldset .ubcpi-possible-options {
padding-left: 20px;
border-left: 2px solid #e5e5e5;
}

div.course-wrapper section.course-content fieldset .ubcpi-option {
margin: 0;
}
Expand Down Expand Up @@ -77,6 +72,12 @@ fieldset .ubcpi-option:last-of-type .ubcpi-label {
float: none;
}

.ubcpi-label.ubcpi-explain-label {
border: none;
margin-bottom: 0;
padding: 0px;
}

.results-container .ubcpi-label {
margin-bottom: 15px;
}
Expand Down Expand Up @@ -116,7 +117,8 @@ textarea.ubcpi-field {
-webkit-font-smoothing: antialiased;
}

.choicegroup .ubcpi_submit {
.choicegroup .ubcpi_submit,
.others-responses .ubcpi_submit {
padding: 10px 40px;
border: 1px solid #2b8dbb;
color: #fff;
Expand All @@ -140,7 +142,10 @@ textarea.ubcpi-field {

.ubcpi_block .choicegroup .ubcpi_submit:hover,
.ubcpi_block .choicegroup .ubcpi_submit:active,
.ubcpi_block .choicegroup .ubcpi_submit:focus {
.ubcpi_block .choicegroup .ubcpi_submit:focus,
.others-responses .ubcpi_submit:hover,
.others-responses .ubcpi_submit:active,
.others-responses .ubcpi_submit:focus {
border-color: #00a7f6;
box-shadow: none;
background: #00a7f6 none;
Expand Down Expand Up @@ -178,8 +183,15 @@ div.course-wrapper section.course-content .vert-mod > div ul.ubcpi-other-answers
border-bottom: 1px solid #cfc6c6;
}

div.course-wrapper section.course-content .vert-mod > div ul.ubcpi-other-answers li:last-of-type {
border-bottom: none;
div.course-wrapper section.course-content .vert-mod .sample-answer {
margin: 1em;
}

div.course-wrapper section.course-content .vert-mod .own-answer {
margin: 1em;
border-top: 1px solid #cfc6c6;
padding-top: 15px;
font-weight: bold;
}

.ubcpi-other-answers,
Expand All @@ -198,8 +210,14 @@ div.course-wrapper section.course-content .vert-mod > div ul.ubcpi-other-answers
}

.ubcpi-other-answers h4,
.ubcpi-solution-your-initial-answer,
.ubcpi-solution-your-initial-answer {
font-weight: 900;
}

.ubcpi-solution-your-final-answer {
border-top: 1px solid #ddd;
margin-top: 10px;
padding-top: 5px;
font-weight: 900;
}

Expand Down Expand Up @@ -385,7 +403,6 @@ textarea.pi-options {
position: relative;
margin: 20px 0;
border: 1px solid #d7dbdf;
border-left: 10px solid #b9c1c8;
box-shadow: inset 0 1px 2px 1px rgba(2, 2, 3, 0.1);
padding: 20px;
background: #fdfdfd;
Expand Down Expand Up @@ -499,6 +516,18 @@ label.ubcpi-label {
fill: #50c67b;
}

text.ubcpibar {
font-size: 11px;
font-weight: 600;
fill: #000000;
}

text.ubcpibar.correct-answer {
font-size: 11px;
font-weight: 600;
fill: #000000;
}

.ubcpibar:hover {
opacity: 1.0;
}
Expand All @@ -509,6 +538,7 @@ label.ubcpi-label {
}

.ubcpi-show-correct {
font-size: 0.85em;
color: #50c67b;
}

Expand All @@ -530,6 +560,7 @@ label.ubcpi-label {
.ubcpi-solution-rationales {
padding-left: 10px;
word-break: break-all;
font-weight: normal;
}

.other-rationale {
Expand Down
317 changes: 131 additions & 186 deletions ubcpi/static/html/ubcpi.html
View file

Large diffs are not rendered by default.

93 changes: 93 additions & 0 deletions ubcpi/static/js/spec/d3-pibar_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,96 @@ describe('D3 bar chart', function () {
// expect(line.empty()).not.toBe(true);
//});
});


describe('D3 per answer chart', function () {
var chart;
var chartContainer;

describe('instructor view', function(){

beforeEach(function() {
var scope = {role:'instructor'};
chart = d3.custom.perAnswerChart(scope);
chartContainer = d3.select('body')
.append('div')
.attr('class', 'testContainer');
});

afterEach(function() {
// clean up
chartContainer.remove();
});

it('should provide getters and setters', function() {
var defaultChartWidth = chart.width();
var defaultChartHeight = chart.height();
var defaultMinTotalFrequency = chart.minTotalFrequency();

chart.width(100)
.height(50)
.minTotalFrequency(20);

var newChartWidth = chart.width();
var newChartHeight = chart.height();
var newMinTotalFrequency = chart.minTotalFrequency();


expect(defaultChartWidth).not.toBe(100);
expect(defaultChartHeight).not.toBe(50);
expect(defaultMinTotalFrequency).not.toBe(20);
expect(newChartWidth).toBe(100);
expect(newChartHeight).toBe(50);
expect(newMinTotalFrequency).toBe(20);
});


it('should have a minTotalFrequency of 1', function(){
var defaultMinTotalFrequency = chart.minTotalFrequency();
expect(defaultMinTotalFrequency).toBe(1);
});
});

describe('student view', function(){

beforeEach(function() {
var scope = {role:'student'};
chart = d3.custom.barChart(scope);
chartContainer = d3.select('body')
.append('div')
.attr('class', 'testContainer');
});

afterEach(function() {
// clean up
chartContainer.remove();
});

it('should provide getters and setters', function() {
var defaultChartWidth = chart.width();
var defaultChartHeight = chart.height();
var defaultMinTotalFrequency = chart.minTotalFrequency();

chart.width(100)
.height(50)
.minTotalFrequency(20);

var newChartWidth = chart.width();
var newChartHeight = chart.height();
var newMinTotalFrequency = chart.minTotalFrequency();


expect(defaultChartWidth).not.toBe(100);
expect(defaultChartHeight).not.toBe(50);
expect(defaultMinTotalFrequency).not.toBe(20);
expect(newChartWidth).toBe(100);
expect(newChartHeight).toBe(50);
expect(newMinTotalFrequency).toBe(20);
});

it('should have a minTotalFrequency of 10', function(){
var defaultMinTotalFrequency = chart.minTotalFrequency();
expect(defaultMinTotalFrequency).toBe(10);
});
});
});
147 changes: 147 additions & 0 deletions ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,4 +115,151 @@ describe('UBCPI', function () {
})
})
});


describe('pi-per-answer-chart', function () {
var element, scope;

beforeEach(inject(function ($compile, $rootScope) {
scope = $rootScope;

element = angular.element(
'<pi-per-answer-chart options="options" stats="stats" answers="answers" correct="correct" per-answer-stats="per_answer_stats"></pi-per-answer-chart>'
);
$compile(element)(scope);
scope.$digest();
}));

it('should not render anything when stats is empty', function () {
expect(element.find('svg').length).toBe(0);
expect(element.find('g').length).toBe(0);
});

describe('directive', function () {
var options = [{
"text": "21",
"image_alt": "",
"image_url": "",
"image_position": "below",
"image_show_fields": 0
}, {
"text": "42",
"image_alt": "",
"image_url": "",
"image_position": "below",
"image_show_fields": 0
}, {
"text": "63",
"image_alt": "",
"image_url": "",
"image_position": "below",
"image_show_fields": 0
}];
var answers = {"original": 2, "revised": 1};
var correct = 0;

describe('with enough submissions', function() {
var stats = {
"original": {0: 4, 1: 5, 2: 1},
"revised": {0: 1, 1: 8, 2: 1},
};
beforeEach(function() {
scope.$apply(function () {
scope.options = options;
scope.stats = stats;
scope.answers = answers;
scope.correct = correct;
scope.per_answer_stats = 1;
});
});

it('should render the template with given data', function() {
// one graph for given answer per_answer_stats. two bars: one for initial choice, one for revision
expect(element.find('> svg').length).toBe(1);
expect(element.find('> svg > g').length).toBe(2);
});

it('should calculate percentage correctly for incorrect answer', function() {
expect(element.find('> svg > g').eq(0).find('> rect').length).toBe(2);
expect(
element.find('> svg > g').eq(0).find('> rect.ubcpibar').attr('width') /
element.find('> svg > g').eq(0).find('> rect:not(.ubcpibar)').attr('width')).toBe(0.5);
expect(element.find('> svg > g').eq(0).find('> svg > text').text()).toContain('50%');
expect(
element.find('> svg > g').eq(1).find('> rect.ubcpibar').attr('width') /
element.find('> svg > g').eq(1).find('> rect:not(.ubcpibar)').attr('width')).toBe(0.8);
expect(element.find('> svg > g').eq(1).find('> svg > text').text()).toContain('80%');
});
});

describe('with enough submissions', function() {
var stats = {
"original": {0: 4, 1: 5, 2: 1},
"revised": {0: 1, 1: 8, 2: 1},
};
beforeEach(function() {
scope.$apply(function () {
scope.options = options;
scope.stats = stats;
scope.answers = answers;
scope.correct = correct;
scope.per_answer_stats = correct;
});
});

it('should calculate percentage correctly for correct answer', function() {
expect(element.find('> svg > g').eq(0).find('> rect').length).toBe(2);
expect(
element.find('> svg > g').eq(0).find('> rect.correct-answer').attr('width') /
element.find('> svg > g').eq(0).find('> rect:not(.correct-answer)').attr('width')).toBe(0.4);
expect(element.find('> svg > g').eq(0).find('> svg > text').text()).toContain('40%');
expect(
element.find('> svg > g').eq(1).find('> rect.correct-answer').attr('width') /
element.find('> svg > g').eq(1).find('> rect:not(.correct-answer)').attr('width')).toBe(0.1);
expect(element.find('> svg > g').eq(1).find('> svg > text').text()).toContain('10%');
});

it('should update when stats changed', function() {
scope.$apply(function() {
scope.stats = {
"original": {0: 10, 1: 6, 2: 4},
"revised": {0: 4, 1: 14, 2: 2},
};
});
expect(element.find('> svg > g').eq(0).find('> rect').length).toBe(2);
expect(
element.find('> svg > g').eq(0).find('> rect.correct-answer').attr('width') /
element.find('> svg > g').eq(0).find('> rect:not(.correct-answer)').attr('width')).toBe(0.5);
expect(element.find('> svg > g').eq(0).find('> svg > text').text()).toContain('50%');
expect(
element.find('> svg > g').eq(1).find('> rect.correct-answer').attr('width') /
element.find('> svg > g').eq(1).find('> rect:not(.correct-answer)').attr('width')).toBe(0.2);
expect(element.find('> svg > g').eq(1).find('> svg > text').text()).toContain('20%');
});
});

describe('with enough submissions and showing stats for user\'s revision', function() {
var stats = {
"original": {0: 4, 1: 5, 2: 1},
"revised": {0: 1, 1: 8, 2: 1},
};
beforeEach(function() {
scope.$apply(function () {
scope.options = options;
scope.stats = stats;
scope.answers = answers;
scope.correct = correct;
scope.per_answer_stats = answers['revised'];
});
});

it('should not indicate it as user\'s initial answer', function() {
expect(element.find('> svg > g').eq(0).find('> svg > text').text()).not.toContain('including you');
});
it('should indicate it as user\'s revision', function() {
expect(element.find('> svg > g').eq(1).find('> svg > text').text()).toContain('including you');
});
});
})
});
});
1 change: 0 additions & 1 deletion ubcpi/static/js/spec/ubcpi_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,6 @@ describe('UBCPI module', function () {
});
controller.getStats();
expect(controller.stats).toEqual(response);
expect(controller.calc(0)).toBe(" Initial Answer Selection: 100% Final Answer Selection: 0%");
});

it('should call notify with error when backend errors', function() {
Expand Down

0 comments on commit d7cd89a

Please sign in to comment.