Custom Components

Single-choice question with answers

Single-choice question with answers and additional evidence

    
<%
  donut_chart = question[:answers].all? { |answer| !answer[:has_nested_questions] }
%>

<% if question[:question] %>
  <div class="d-flex align-items-center p-2 border-top border-bottom page-break-inside justify-content-between">
    <h4 class="text-dark font-weight-bold mb-0"><%= question[:question]%></h4>
    <% if @compare_group %>
      <div><%= @compare_group %></div>
    <% end %>
  </div>
<% end %>
<% if donut_chart %>
  <% colors = ["dark", "gray-800", "gray-600", "gray-400", "gray-200", "gray-900", "gray-700", "gray-500", "gray-300", "gray-100"] %>
  <% legend = question[:answers].map.with_index do |item, index|
      {
        percentage: item[:benchmark],
        text: item[:answer],
        class: item[:selected] ? 'svg-fill-primary bg-primary' : "svg-fill-#{colors[index]} bg-#{colors[index]} ",
        checked: item[:selected]
      }
    end
  %>
  <%= render '/partials/charts/_donut-table.erb', legend: legend %>
<% else %>
  <% question[:answers].each do |answer| %>
    <div class="d-flex align-items-start py-4 px-2 justify-content-between border-top border-bottom  <%= answer[:selected] && 'bg-primary-100' || '' %> page-break-inside">
      <div class="form-check w-100">
        <input class="form-check-input mt-0" type="radio" value="" <%= answer[:selected] && 'checked' || '' %> disabled="disabled" name="<%= disambiguate_id(answer[:answer]) %>" />
        <div class="d-flex flex-column">
            <label class="form-check-label text-dark" for="defaultCheck1">
              <%= answer[:answer] %>
            </label>
            <%=
              render "/partials/custom-components/questions/open-text.erb",
              questions: answer[:questions] && answer[:questions].select { |question| question[:question_type].eql?('open_text') || question[:question_type].eql?('percent') } || []
            %>
        </div>
      </div>
      <div class="d-flex align-items-center parent-question">
        <h5 class="mb-0 mr-1 font-weight-light"><%= answer[:benchmark] %></h5>
        <div class="border border-dark mr-1" style="width: 170px; height: 12px;">
          <div class="bg-gray-900 h-100" style="width: <%= answer[:benchmark].gsub('<', '') %>"></div>
        </div>
        <% if answer[:selected] && answer[:questions] %>
          <i class="ss-air ss-icon ss-navigateup mt-1 toggle-questions"></i>
        <% end %>
      </div>
    </div>
    <% if answer[:questions] %>
      <div class="ml-5 show-questions">
        <% answer[:questions].each do |question| %>
          <%= render "/partials/custom-components/questions.erb", question: question, data_year: @data_year, report_type: @report_type %>
        <% end %>
      </div>
    <% end %>
  <% end %>
<% end %>
    
  

Multiple-choice question with answers

Multiple-choice answers without question

    
<% if question[:question] %>
  <div class="d-flex align-items-center p-2 border-top border-bottom page-break-inside justify-content-between">
    <h4 class="text-dark font-weight-bold mb-0"><%= question[:question]%></h4>
    <% if @compare_group %>
      <div><%= @compare_group %></div>
    <% end %>
  </div>
<% end %>
<% question[:answers].each do |answer| %>
  <% openTextQuestions = answer[:questions] && answer[:questions].select { |question| question[:question_type].eql?('open_text') || question[:question_type].eql?('percent') } || [] %>
  <div class="d-flex align-items-start py-4 px-2 justify-content-between border-top border-bottom <%= answer[:selected] && 'bg-primary-100' || '' %> page-break-inside">

    <div class="form-check w-100">
      <input class="form-check-input mt-0" type="checkbox" value="" <%= answer[:selected] && 'checked' || '' %> disabled="disabled" name="<%= disambiguate_id(answer[:answer]) %>" />
      <div class="d-flex flex-column">
          <label class="form-check-label text-dark" for="defaultCheck1">
            <%= answer[:answer] %>
          </label>
          <%=
            render "/partials/custom-components/questions/open-text.erb",
            questions: openTextQuestions
          %>
       </div>
    </div>
    <div class="d-flex align-items-center">
      <h5 class="mb-0 mr-1 font-weight-light"><%= answer[:benchmark] %></h5>
      <div class="border border-dark mr-1" style="width: 170px; height: 12px;">
        <div class="bg-gray-900 h-100" style="width: <%= answer[:benchmark].gsub('<', '') %>"></div>
      </div>
      <% if answer[:selected] && (answer[:questions] && answer[:questions][0][:question_type] != "open_text") && !(openTextQuestions.size > 0 && openTextQuestions.size === answer[:questions].size)%>
        <i class="ss-air ss-icon ss-navigateup mt-1 toggle-questions"></i>
      <% end %>
    </div>
  </div>
  <% if answer[:questions] %>
    <div class="ml-5 show-questions">
      <% answer[:questions].each do |question| %>
        <%= render "/partials/custom-components/questions.erb", question: question, data_year: @data_year, report_type: @report_type %>
      <% end %>
    </div>
  <% end %>
<% end %>