Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#144 improve visual consistency #146

Closed
wants to merge 4 commits into from
Closed

#144 improve visual consistency #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e470157
Emphasize student reflection in Step 2
jleong-openedx Nov 28, 2017
da3bade
Merge branch 'master' into fix-62-focus-student-engagement
jleong-openedx Feb 6, 2018
8305834
Show rationale area after selecting an option
jleong-openedx Feb 21, 2018
fa5a9de
Improve visual consistency
kitsook Apr 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
102 changes: 88 additions & 14 deletions ubcpi/static/css/ubcpi.css
View file
Open in desktop
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,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;
}
314 changes: 138 additions & 176 deletions ubcpi/static/html/ubcpi.html
View file
Open in desktop

Large diffs are not rendered by default.

93 changes: 93 additions & 0 deletions ubcpi/static/js/spec/d3-pibar_spec.js
View file
Open in desktop
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);
});
});
});