Skip to content

Commit

Permalink
Merge pull request #4105 from radinamatic/student-report-sr
Browse files Browse the repository at this point in the history 
Optimizing Student Progress Report page for screen readers
  • Loading branch information
@rtibbles
rtibbles committed Aug 14, 2015
2 parents fed1174 + 224087b commit 28849e1
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 8 deletions.
48 changes: 42 additions & 6 deletions ...tatic/js/coachreports/student_progress/hbtemplates/playlist-progress-container.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,44 @@
<div class="well">
<div class="row">
<div class="col-xs-12">
<h3 class="playlist-title center-block">
<h2 class="h3 playlist-title center-block">
<a href="{{this.url}}">{{title}}</a>
</h3>
</h2>
<div class="sr-only">{{_ "In this topic " }}</div>
</div>
</div>
{{!-- Videos --}}
<div class="row progress-block">
<div class="col-xs-2">
<div class="progress-indicator progress-indicator-lg center-block {{vid_status}}">
<div class="sidebar-icon icon-Video icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary">{{#if n_pl_videos}}{{n_pl_videos}}{{/if}}</span></div>
<span class="sr-only">{{_ "there are " }}</span>
<div class="sidebar-icon icon-Video icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary"><div class="sr-only">{{#unless n_pl_videos}}no{{/unless}}</div>{{#if n_pl_videos}}{{n_pl_videos}}{{/if}}</span></div>
<span class="sr-only">{{_ " videos." }}</span>
</div>
</div>
<div class="col-xs-10">
<div class="progress playlist-progress-bar">
{{#if n_pl_videos}}
{{#unless vid_pct_started}}
<span class="sr-only">{{_ "You haven't started to watch videos! " }}</span>
{{/unless}}
{{/if}}
{{#if vid_pct_complete}}
<div class="progress-bar progress-bar-success" title="% Completed" style="width: {{vid_pct_complete}}%">
<span class="sr-only">{{_ "Of those you have completed " }}</span>
<span>{{vid_pct_complete}}%</span>
</div>
{{/if}}
{{#if vid_pct_started}}
<div class="progress-bar inprogress" title="% In-Progress" style="width: {{vid_pct_started}}%">
{{#ifcond vid_pct_started "<" 100}}
<span class="sr-only">{{_ "You are still working on " }}</span>
<span>{{vid_pct_started}}%</span>
{{/ifcond}}
{{#ifcond vid_pct_started "===" 100}}
<span class="sr-only">{{_ "You are still working on all of them." }}</span>
<span aria-hidden="true" role="presentation">{{vid_pct_started}}%</span>
{{/ifcond}}
</div>
{{/if}}
</div>
Expand All @@ -32,23 +48,39 @@
<div class="row progress-block">
<div class="col-xs-2">
<div class="progress-indicator progress-indicator-lg center-block {{ex_status}}">
<div class="sidebar-icon icon-Exercise icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary">{{#if n_pl_exercises}}{{n_pl_exercises}}{{/if}}</span></div>
<span class="sr-only">{{_ "There are " }}</span>
<div class="sidebar-icon icon-Exercise icon-label icon-label-lg"><span class="progress-indicator content-counter label label-primary"><div class="sr-only">{{#unless n_pl_exercises}}no{{/unless}}</div>{{#if n_pl_exercises}}{{n_pl_exercises}}{{/if}}</span></div>
<span class="sr-only">{{_ " exercises." }}</span>
</div>
</div>
<div class="col-xs-10">
<div class="progress playlist-progress-bar">
{{#if n_pl_exercises}}
{{#if ex_status.notstarted}}
<span class="sr-only">{{_ "You haven't started to work on exercises! " }}</span>
{{/if}}
{{/if}}
{{#if ex_pct_mastered}}
<div class="progress-bar progress-bar-success" title="% Mastered" style="width: {{ex_pct_mastered}}%">
<span class="sr-only">{{_ "Of those you have mastered " }}</span>
<span>{{ex_pct_mastered}}%</span>
</div>
{{/if}}
{{#if ex_pct_incomplete}}
<div class="progress-bar inprogress" title="% In-Progress" style="width: {{ex_pct_incomplete}}%">
{{#ifcond ex_pct_incomplete "<" 100}}
<span class="sr-only">{{_ "You are still working on " }}</span>
<span>{{ex_pct_incomplete}}%</span>
{{/ifcond}}
{{#ifcond ex_pct_incomplete "===" 100}}
<span class="sr-only">{{_ "You are still working on all of them." }}</span>
<span aria-hidden="true" role="presentation">{{ex_pct_incomplete}}%</span>
{{/ifcond}}
</div>
{{/if}}
{{#if ex_pct_struggling}}
<div class="progress-bar struggling" title="% Struggling" style="width: {{ex_pct_struggling}}%">
<span class="sr-only">{{_ "And seem to be struggling with " }}</span>
<span>{{ex_pct_struggling}}%</span>
</div>
{{/if}}
Expand All @@ -60,13 +92,17 @@
<div class="row progress-block">
<div class="col-xs-2">
<div class="progress-indicator progress-indicator-lg center-block {{quiz_status}}">
<span class="sr-only">{{_ "There are " }}</span>
<span class="sidebar-icon icon-Quiz icon-label icon-label-lg"></span>
<span class="sr-only">{{_ " quizzes." }}</span>
</div>
</div>
<div class="col-xs-10">
<div class="progress playlist-progress-bar">
{{#if quiz_pct_score}}
<div class="progress-bar {{quiz_status}}" title="% Score" style="width: {{quiz_pct_score}}%">
{{!-- Radina: TODO - revise once quizzes are operational --}}
<span class="sr-only">{{_ "And your score is " }}</span>
<span>{{quiz_pct_score}}%</span>
</div>
{{/if}}
Expand All @@ -76,12 +112,12 @@
{{/if}}
<div class="row">
<div class="col-xs-12">
<button class="btn btn-sm btn-primary center-block toggle-details"><span class="expand-collapse glyphicon glyphicon-chevron-down"></span></button>
<button class="btn btn-sm btn-primary center-block toggle-details" aria-label="Press to open detailed view"><span class="expand-collapse glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<div class="row playlist-progress-details">
<div class="col-xs-12">
<img class="center-block" src="/static/images/loading.gif"/>
<img class="center-block" src="/static/images/loading.gif" aria-hidden="true" role="presentation"/>
</div>
</div>
</div>
42 changes: 41 additions & 1 deletion .../static/js/coachreports/student_progress/hbtemplates/playlist-progress-details.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,45 @@
{{#each data}}
<div class="col-xs-1 progress-block">
{{!-- Whole section is only for screen readers --}}
<div class="sr-only">
<a href="/learn/{{attributes.path}}"><h3>{{attributes.title}}</h3></a>
<div>{{!-- Status info for sr-user. --}}
{{_ " Status: " }}
{{#ifcond attributes.status "===" "complete"}}
{{_ " Completed. " }}
{{/ifcond}}

{{#ifcond attributes.status "===" "inprogress"}}
{{_ " In progress. " }}
{{/ifcond}}

{{#ifcond attributes.status "===" "struggling"}}
{{_ " Struggling. " }}
{{/ifcond}}

{{#ifcond attributes.status "===" "notstarted"}}
{{_ " Not started. " }}
{{/ifcond}}
</div>
<div>
{{!-- Score info for sr-user. --}}
{{!-- Video --}}
{{#ifcond attributes.kind "===" "Video"}}
<span>{{_ " For this video you completed " }}{{attributes.score}}%.</span>
{{/ifcond}}

{{!-- Exercise --}}
{{#ifcond attributes.kind "===" "Exercise"}}
<span>{{_ " For this exercise your streak is " }}{{attributes.score}}%.</span>
{{/ifcond}}

{{!-- Quiz --}}
{{#ifcond attributes.kind "===" "Quiz"}}
<span>{{_ " For this quiz your score is " }}{{attributes.score}}%.</span>
{{/ifcond}}
</div>
</div>
{{!-- Whole section is rendered invisible to screen readers --}}
<div class="col-xs-1 progress-block" aria-hidden="true" role="presentation">
<a href="/learn/{{attributes.path}}">
<div
class="progress-indicator progress-indicator-sm {{attributes.status}}"
Expand Down
2 changes: 1 addition & 1 deletion ...static/js/coachreports/student_progress/hbtemplates/student-progress-container.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<h2>{{_ "Progress report" }}</h2>
<h1 class="h2">{{_ "Progress report" }}</h1>
<div id="playlists-container"></div>

0 comments on commit 28849e1

Please sign in to comment.