notebook/app/views/documents/analysis/sections/_readability.html.erb

<h5 class="grey-text">Ease of reading</h5>
<div class="row">
  <div class="col s12">
    <div class="green card">
      <div class="card-content">
        <div class="row">
          <div class="col s12 m3 white-text center">
            <h2><%= analysis.readability_score %></h2>
            READABILITY
          </div>
          <div class="col s12 m9 white-text">
            <h4>
              <% Documents::Analysis::ReadabilityService.readability_score_category(analysis.readability_score) %>
            </h4>
            <p>
              <%= Documents::Analysis::ReadabilityService.readability_score_text(analysis) %>
            </p>
          </div>
        </div>
      </div>
      <div class="card-action green lighten-1">
        <a class="activator white-text text-darken-4">
          How is this calculated?
        </a>
      </div>
      <div class="card-reveal">
        <span class="card-title">
          Readability scales
          <i class="material-icons right">close</i>
        </span>
        <p>
          In order to provide you with a generalized score in Notebook.ai, we compute
          several of the most well-known readability scores on your text. 
          For all scales other than the Flesch-Kincaid reading ease, a higher score means
          a greater difficulty reading. Conversely, lower scores mean text is easier to read.
        </p>
        <p>
          We take a weighted composite score of all readability scales to give you a singular readability score.
        </p>
        <ul>
          <% if analysis.flesch_kincaid_reading_ease %>
            <li>
              Flesch-Kincaid reading ease: <%= analysis.flesch_kincaid_reading_ease.try(:round) %> / 100
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.flesch_kincaid_reading_ease.try(:round) / 100 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.flesch_kincaid_grade_level %>
            <li>
              Flesch-Kincaid grade level: <%= analysis.flesch_kincaid_grade_level.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.flesch_kincaid_grade_level.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.flesch_kincaid_age_minimum %>
            <li>
              Flesch-Kincaid age minimum: <%= analysis.flesch_kincaid_age_minimum.try(:round) %> / 20
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.flesch_kincaid_age_minimum.try(:round) / 20 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.forcast_grade_level %>
            <li>
              Forcast grade level: <%= analysis.forcast_grade_level.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.forcast_grade_level.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.coleman_liau_index %>
            <li>
              Coleman liau index: <%= analysis.coleman_liau_index.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.coleman_liau_index.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.automated_readability_index %>
            <li>
              Automated readability index: <%= analysis.automated_readability_index.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.automated_readability_index.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.gunning_fog_index %>
            <li>
              Gunning fog index: <%= analysis.gunning_fog_index.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.gunning_fog_index.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.smog_grade %>
            <li>
              SMOG grade: <%= analysis.smog_grade.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.smog_grade.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
          <% if analysis.combined_average_reading_level %>
            <li>
              Combined average reading level: <%= analysis.combined_average_reading_level.try(:round) %> / 16
              <div class="progress">
                <div class="determinate" style="width: <%= 100 * analysis.combined_average_reading_level.try(:round) / 16 %>%"></div>
              </div>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</div>