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}%"}