Rails escape characters for two layers of quotations

Question

I'm trying to put my own percentage in a Bootstrap progress bar. The float is getting passed to the view perfectly fine, but for some reason the Bootstrap progress bar doesn't want to read it. I'm going to start by guessing I'm not properly escaping the style tag.

The view:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="#{ <% @app.completion_status %> }" aria-valuemin="0" aria-valuemax="100" style="width: '#{raw(<%= number_to_percentage(@app.completion_status) %>)}';">
    <%= @app.completion_status %>%
  </div>
</div>

A closer look:

style="width: '#{raw(<%= number_to_percentage(@app.completion_status) %>)}';"

The value attempting to be passed and converted to a percentage is: `33.3333333333333` (one third)

The controller:

def set_completion
  @app = App.find(params[:id])

  @app.update_attribute(:completion_status,

  (((@app.elements.where(completion: true).count) / (@app.elements.count).to_f) * 100 )

  )
end

Answer 1

Have you tried switching the ' and " ?

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="#{ <% @app.completion_status %> }" aria-valuemin="0" aria-valuemax="100" style='width: "#{raw(<%= number_to_percentage(@app.completion_status) %>)}";'>
    <%= @app.completion_status %>%
  </div>
</div>

Answer 2

At first glance I see you are using ruby interpolation outside of the erb tags which could be the issue. Edit:: Try below

style="width: <%= number_to_percentage(@app.completion_status) %>"

Below is one I just built so try to follow this and keep your interpolation inside the ERB tags!

<div class="progress-bar progress-bar-info progress-bar-striped"
 role="progressbar" aria-valuenow="<%=@email_usage%>" aria-valuemin="0"
 aria-valuemax="100" style="width: <%=@email_usage%>%">