indentlabs/notebook

<% if analysis.flesch_kincaid_reading_ease %>
  <div class="row">
    <div class="col s12 m12 l12">
      <div class="card">
        <div class="card-content">
          <div class="card-title">
            <span class="right"><%= analysis.flesch_kincaid_reading_ease.try(:round) %> / 100</span>
            <i class="left material-icons orange-text">bubble_chart</i>
            Flesh-Kincaid Reading Ease
          </div>
          <div class="progress">
            <div class="determinate" style="width: <%= 100 * analysis.flesch_kincaid_reading_ease.try(:round) / 100 %>%"></div>
          </div>
          <div class="row">
            <div class="col s12 m12 l7">
              <p>
                According to this scale, your document scores 
                <strong>
                  <%=
                    case analysis.flesch_kincaid_reading_ease.try(:round)
                    when 90..500
                      'Very easy to read. Easily understood by an average 11-year-old student.'
                    when 80..90
                      'Easy to read. Conversational English for consumers.'
                    when 70..80
                      'Fairly easy to read.'
                    when 60..70
                      'Plain English. Easily understood by 13- to 15-year-old students.'
                    when 50..60
                      'Fairly difficult to read.'
                    when 30..50
                      'Difficult to read.'
                    when 10..30
                      'Very difficult to read. Best understood by university graduates.'
                    when -500..10
                      'Extremely difficult to read. Best understood by university graduates.'
                    else
                      analysis.flesch_kincaid_reading_ease.try(:round)
                    end                  
                  %>
                </strong>
              </p>
              <br />
              <p>
                The Flesch–Kincaid scale is a readability test designed to indicate how difficult a passage in English is to understand.
                It was originally designed by Rudolf Flesch and J. Peter Kincaid for the U.S. Navy, but is commonly used to this day to
                measure and ensure some legal documents are written at no higher than a ninth-grade reading level.
              </p>
              <br />
              <p>
                The readability test is backed up by a separate test called the Flesch–Kincaid Grade Level which measures readability in
                the same way, but weights those measurements in a slightly different way. This is the scale used by Microsoft Word and 
                Grammarly to calculate the reading level of a document.
              </p>
              <br />
              <p>
                A <strong>higher score</strong> on this scale indicates a document is <strong class="green-text">easier to understand</strong>.
              </p>
            </div>
            <div class="col s12 m12 l4 offset-l1">
              <p class="green-text text-darken-3">
                To <strong>raise</strong> your score on this scale:
              </p>
              <ul>
                <li>
                  <i class="material-icons left green-text">arrow_drop_up</i>
                  Use shorter words.
                </li>
                <li class="clearfix">
                  <i class="material-icons left green-text">arrow_drop_up</i>
                  Use shorter sentences.
                </li>
              </ul>
              <br />
              <p class="red-text text-darken-4">
                To <strong>lower</strong> your score on this scale:
              </p>
              <ul>
                <li>
                  <i class="material-icons left red-text">arrow_drop_down</i>
                  Use longer words.
                </li>
                <li class="clearfix">
                  <i class="material-icons left red-text">arrow_drop_down</i>
                  Use longer sentences.
                </li>
              </ul>
              <br />
            </div>
          </div>
          
        </div>
        <div class="card-action">
          <%= link_to 'Compare to other works', '#', class: 'activator orange-text text-darken-3' %>
        </div>

        <div class="card-reveal">
          <div class="card-title">
            <i class="material-icons right">close</i>
            <span class="right"><%= analysis.flesch_kincaid_reading_ease.try(:round) %> / 100</span>
            <i class="left material-icons orange-text">bubble_chart</i>
            Flesh-Kincaid Reading Ease
          </div>
          <div class="progress">
            <div class="determinate" style="width: <%= 100 * analysis.flesch_kincaid_reading_ease.try(:round) / 100 %>%"></div>
          </div>

          <div class="col s12 m12 l12">
            <table>
              <tr>
                <th>Work</th>
                <th>Score</th>
              </tr>
              <%
                [
                  ["<strong class='orange-text text-darken-3'>This document</strong>", analysis.flesch_kincaid_reading_ease.try(:round)],
                  ["<em>Reader's Digest</em> magazine", 65],
                  ["<em>Time</em> magazine", 52],
                  ["An average sixth grade student's written assignment", 60],
                  ["<em>Harvard Law Review</em>", 30],
                  ["<em>Moby Dick</em>, by Herman Melville", 57.9],
                  ["<em>Harry Potter and the Philosopher's Stone</em>, by J. K. Rowling", 83.7],
                  ["The Affordable Care Act", 12],
                ].sort_by(&:second).reverse.each do |work, score|
              %>
                <tr>
                  <td><%= work.html_safe %></td>
                  <td style="font-size: 1.5em;">
                    <%=
                      if score > analysis.flesch_kincaid_reading_ease.try(:round)
                        '<span class="green-text">'.html_safe
                      elsif score < analysis.flesch_kincaid_reading_ease.try(:round)
                        '<span class="red-text">'.html_safe
                      else
                        '<span class="orange-text">'.html_safe
                      end
                    %>
                      <%= score %>
                    </span>
                  </td>
                </tr>
              <% end %>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>