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
- Generate and return peer answers on-the-fly if nothing persisted
  • Loading branch information
@kitsook
kitsook committed Oct 17, 2019
1 parent 998a52f commit ffd2dbb
Show file tree
Hide file tree
Showing 9 changed files with 682 additions and 219 deletions.
102 changes: 88 additions & 14 deletions ubcpi/static/css/ubcpi.css
View file
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,20 @@ fieldset .ubcpi-option:last-of-type .ubcpi-label {
float: none;
}

.ubcpi-no-pointer {
cursor: default;
}

.ubcpi-answer img {
display: block;
}

.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 +125,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 +150,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 +191,30 @@ 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-list > :not(:first-child) {
border-top: 1px solid #cfc6c6;
}

div.course-wrapper section.course-content .vert-mod .sample-answer {
margin: 1em;
display: block;
}

div.course-wrapper section.course-content .vert-mod .no-sample-answer {
font-style: italic;
margin: 1em;
display: block;
}

div.course-wrapper section.course-content .vert-mod .sample-answer .other-rationale {
line-height: 140%;
padding-left: 1em;
}

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

.ubcpi-other-answers,
Expand All @@ -198,8 +233,15 @@ 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-size: 0.85em;
font-weight: 900;
}

Expand Down Expand Up @@ -385,7 +427,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,8 +540,26 @@ label.ubcpi-label {
fill: #50c67b;
}

.ubcpibar:hover {
opacity: 1.0;
.ubcpibar.original {
opacity: 0.4;
}

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

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

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

.ubcpi-correct-answer-option {
Expand All @@ -509,6 +568,11 @@ label.ubcpi-label {
}

.ubcpi-show-correct {
font-size: 0.85em;
}

.ubcpi-correct-answer-highlight {
font-weight: bold;
color: #50c67b;
}

Expand All @@ -525,11 +589,13 @@ label.ubcpi-label {
.ubcpi-correct-answer-rationale {
display: block;
margin-bottom: 20px;
font-size: 0.85em;
}

.ubcpi-solution-rationales {
padding-left: 10px;
word-break: break-all;
font-weight: normal;
}

.other-rationale {
Expand Down Expand Up @@ -630,6 +696,12 @@ div.course-wrapper section.course-content .warning-notice p {
font-style: italic;
}

#decision-prompt {
font-weight: normal;
font-size: 120%;
padding-right: 4.8em;
}

.response-text {
padding-left: 22px;
}
Expand Down Expand Up @@ -780,4 +852,6 @@ pi-barchart > svg {
text-transform: capitalize;
}


#not-enough-data {
font-size: 0.85em;
}
312 changes: 137 additions & 175 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
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);
});
});
});

0 comments on commit ffd2dbb

Please sign in to comment.