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

[FEAT]: Improve Survey Progress Bar Clarity #6214

Merged
merged 2 commits into from
Feb 25, 2025
+48 −27
Merged

[FEAT]: Improve Survey Progress Bar Clarity #6214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bcf5d6
survey progress bar
JiyaGupta-cs Feb 25, 2025
81d5996
fix survey tests for progress bar
JiyaGupta-cs Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/assets/javascripts/surveys/modules/Survey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,8 @@ const Survey = {
const width = `${progress}%`;
this.surveyProgress.css('width', width);

$('.survey__progress-percentage').text(`${Math.round(progress)}%`);

if (progress === 100 && !this.submittedAll) {
this.submitAllQuestionGroups();
}
Expand Down
60 changes: 39 additions & 21 deletions app/assets/stylesheets/survey_modules/survey_page.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,29 +136,47 @@ ul.list--survey
background white
padding 1rem 0

.survey__progress
background sprout-dark
.survey__progress__container
position relative
float right
width 200px
height 20px
border-radius 5px
overflow hidden

+above(tablet)
margin-left auto
margin-left auto
display flex
align-items center
gap 10px

&-bar
position absolute
left 0
top 0
width 0%
height 30px
.survey__progress
background lighten(sprout, 50%)
transition width 500ms cubic-bezier(0.19, 1, 0.22, 1)
border-right 2px solid darken(sprout-dark, 10%)
width 200px
height 20px
border-radius 5px
overflow hidden

+above(tablet)
margin-left auto

&-bar
position relative
left 0
top 0
width 0%
height 30px
background sprout-dark
transition width 500ms cubic-bezier(0.19, 1, 0.22, 1)

&-percentage
position absolute
right 5px
top 0
line-height 20px
font-size 12px
color #fff
font-weight bold

.progress-label
background #40ad90
width fit-content
color #fff
font-size 75%
padding 2px 6px
border-radius 5px

.label
padding-left 5px
font-size 85%
color $text_dk
9 changes: 5 additions & 4 deletions app/views/surveys/_header.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
%div
%strong= survey_course_title

%div.survey__progress
.survey__progress-bar{data: {survey_progress: true}}
.label
progress
.survey__progress__container
.progress-label Progress
%div.survey__progress
.survey__progress-bar{data: {survey_progress: true}}
.survey__progress-percentage 0%
4 changes: 2 additions & 2 deletions spec/features/surveys_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
visit survey_path(@survey)
# Sets the course automatically
expect(page).to have_content 'Survey for My Active Course'
expect(page).to have_content 'progress'
expect(page).to have_content 'Progress'
end

it 'sets the course and shows the progress bar by going to the course page' do
Expand All @@ -144,7 +144,7 @@
click_link 'Take Survey'
# Sets the course automatically
expect(page).to have_content 'Survey for My Active Course'
expect(page).to have_content 'progress'
expect(page).to have_content 'Progress'
end

it 'renders an optout page' do
Expand Down
Loading