diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index a19b53ad..95065602 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,3 +2,4 @@ @import "scaffolds"; @import "recipients"; @import "school_categories"; +@import "questions"; diff --git a/app/assets/stylesheets/questions.scss b/app/assets/stylesheets/questions.scss index a7cd45c1..f8afbd65 100644 --- a/app/assets/stylesheets/questions.scss +++ b/app/assets/stylesheets/questions.scss @@ -1,3 +1,40 @@ // Place all the styles related to the Questions controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ + +.answers { + width: 100%; + border-bottom: 1px solid #ccc; + + .answer { + border-top: 1px solid #ccc; + + .text { + width: 50%; + } + + td { + line-height: 2em; + div { + margin: 0.25em 0; + height: 1.5em; + } + } + + .bar0 { + background-color: red; + } + .bar1 { + background-color: orange; + } + .bar2 { + background-color: lightgreen; + } + .bar3 { + background-color: green; + } + .bar4 { + background-color: gray; + } + } +} diff --git a/app/models/question.rb b/app/models/question.rb index e234a9b7..748b1c00 100644 --- a/app/models/question.rb +++ b/app/models/question.rb @@ -23,11 +23,11 @@ class Question < ApplicationRecord scope :for_category, -> (category) { where(category: category) } def options - [option1, option2, option3, option4, option5].map(&:downcase).map(&:strip) + [option1, option2, option3, option4, option5] end def option_index(answer) - options.index(answer.downcase.strip) + options.map(&:downcase).map(&:strip).index(answer.downcase.strip) end def aggregated_responses_for_school(school) diff --git a/app/views/questions/_question.html.haml b/app/views/questions/_question.html.haml index ca3c9513..ea19f542 100644 --- a/app/views/questions/_question.html.haml +++ b/app/views/questions/_question.html.haml @@ -24,13 +24,13 @@ .clearfix - .show-hide + .show-hide.px-2 %p %a{"aria-controls" => "histogram#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#histogram#{question.id}"} - = "Show Histogram".html_safe -   |   + Histogram +   |   %a{"aria-controls" => "raw-data#{question.id}", "aria-expanded" => "false", "data-toggle" => "collapse", :href => "#raw-data#{question.id}"} - = "Show Raw Data".html_safe + Raw Data .collapse{id: "histogram#{question.id}"} = render 'shared/histogram', data: aggregated_responses diff --git a/app/views/shared/_histogram.html.haml b/app/views/shared/_histogram.html.haml index 70a94878..16a94f57 100644 --- a/app/views/shared/_histogram.html.haml +++ b/app/views/shared/_histogram.html.haml @@ -1,2 +1,12 @@ -%p - =# data.inspect +- histogram = data.responses.map(&:answer_index).group_by { |a| a.to_s } +%table.answers + %tbody + - data.question.options.each_with_index do |option, index| + %tr.answer + - group = histogram[(index + 1).to_s] + - width = (100 * (group.blank? ? 0 : group.length)) / histogram.values.flatten.length + %td.text + = "#{option}:" + = group.blank? ? 0 : group.length + %td.count + %div{class: "bar#{index}", style: "width: #{width}%"}