na

app/assets/stylesheets/application.css

@@ -90,6 +90,7 @@
   --fs-xl: 2.8rem;
   --fs-2xl: 3.2rem;
   --fs-3xl: 5.6rem;
+  --fs-4xl: 9.0rem;
 
   --flip-deg: 0deg;
   --flip-scale: 1;
@@ -313,7 +314,7 @@ main {
 
 .question-result {
   background-color: var(--clr-medium-yellow);    
-  border-radius: 1.6rem;
+  border-radius: 1.2rem;
   font-size: var(--fs-base);
   line-height: 1.4;
   padding: 1.6rem 1.2rem;
@@ -323,6 +324,41 @@ main {
   }
 }
 
+.answers-distribution {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+
+  & > div {
+    padding: 1.6rem 1.2rem;
+    background-color: var(--clr-medium-yellow);  
+    border-radius: 1.2rem;
+    color: var(--clr-dark-yellow);
+    font-size: var(--fs-s);
+    font-weight: 700;
+    line-height: 1.3;    
+
+    &.answered {
+      background-color: var(--clr-white);  
+      color: var(--clr-black);
+    }
+  }
+
+  & .percentage {
+    font-size: var(--fs-4xl);
+    line-height: 1;    
+    
+    &::after {
+      content: '%';
+      font-size: 4rem;
+    }
+  }
+  
+
+}
+
+
+
 
 
 label.question-answer {

app/controllers/concerns/quiz_helper_methods.rb

@@ -9,7 +9,8 @@ module QuizHelperMethods
                   :questions,
                   :question,
                   :questions_size,
-                  :question_index
+                  :question_index,
+                  :player_question_answer
 
   end
 
@@ -27,6 +28,11 @@ private
   end
 
 
+  def player_question_answer
+    @player_question_answer ||= Answer.find_by(player_id: current_player.id, node_id: question.id)&.value
+  end
+
+
   def questions_size
     @questions_size ||= questions.size + 1
   end

app/models/node.rb

@@ -127,7 +127,55 @@ class Node < ApplicationRecord
   end
 
 
+  def answer_percentages
+    # Get all valid answers (non-nil values)
+    valid_answers = answers.where.not(value: nil)
 
+    # Count answers by value
+    value_counts = valid_answers.group(:value).count
+
+    # Calculate total number of answers
+    total_answers = valid_answers.count
+
+    # Initialize with 0 for both expected values
+    percentages = {0 => 0, 1 => 0}
+
+    # Return initial percentages if no answers
+    return percentages if total_answers.zero?
+
+    # Calculate exact percentages first (not rounded)
+    exact_percentages = {}
+    value_counts.each do |value, count|
+      # Only consider values 0 and 1
+      next unless [0, 1].include?(value)
+      exact_percentages[value] = count.to_f / total_answers * 100
+    end
+
+    # First round down all percentages
+    [0, 1].each do |value|
+      percentages[value] = (exact_percentages[value] || 0).floor
+    end
+
+    # Calculate how much we're off by due to rounding
+    remaining = 100 - percentages.values.sum
+
+    # Distribute the remaining percentage points to values with the largest fractional parts
+    if remaining > 0
+      # Filter exact percentages to only include 0 and 1
+      sorted_by_fraction = exact_percentages
+        .select { |k, _| [0, 1].include?(k) }
+        .sort_by { |_, p| p - p.floor }
+        .reverse
+
+      # Add 1 to the values with the largest fractional parts
+      sorted_by_fraction.take(remaining).each do |value, _|
+        percentages[value] += 1
+      end
+    end
+
+    # Return the percentages hash with keys 0 and 1
+    percentages
+   end
 
 private
 

app/views/questions/answer.html.erb

@@ -10,8 +10,17 @@
     <div><%= question_index %>/<%= questions_size %></div>
   </div>
 
+  <div class="answers-distribution">
+  <% question.answer_percentages.each do |k,v| %>
+    <%= tag.div class: (k == player_question_answer ? 'answered' : nil) do %>
+      <%= tag.div v, class: 'percentage' %>
+      <%= t 'of_people_worldwide_think_just_lik_you' if k == player_question_answer %>
+    <% end %>
+  <% end %>
+  </div>
+
   <div class="question-result">
-  <%= @question_answer.last.body.html_safe %>
+    <%= @question_answer.last.body.html_safe %>
   </div>
   
   <%= link_to t('next_question'), url_for(controller: 'questions', action: 'show', id: question_index), class: 'button__base'  %>

config/locales/en.yml

@@ -8,6 +8,7 @@ en:
   please_type_your_name_here: Please type your name here…
   submit: Submit
   next_question: Next question
+  of_people_worldwide_think_just_lik_you: of people worldwide think like you.
 
   
   languages: