indentlabs/notebook

<% if analysis.smog_grade %>
  <div class="row">
    <div class="col s12 m12 l12">
      <div class="card">
        <div class="card-content">
          <div class="card-title">
            <span class="right"><%= analysis.smog_grade.try(:round) %> / 16</span>
            <i class="left material-icons orange-text">bubble_chart</i>
            SMOG grade
          </div>
          <div class="progress">
            <div class="determinate" style="width: <%= 100 * analysis.smog_grade.try(:round) / 16 %>%"></div>
          </div>
          <div class="row">
            <div class="col s12 m12 l7">
              <p>
                According to this scale, your document is
                <% if analysis.smog_grade.round > 12 %>
                  <strong>
                    Understandable by a <%= (analysis.smog_grade.round - 12).ordinalize %>-year college student.
                  </strong>
                <% else %>
                  <strong>
                    Understandable by a <%= analysis.smog_grade.round.ordinalize %>-grade reader.
                  </strong>
                <% end %>
              </p>
              <br />
              <p>
                Don't let the silly acryonym (The Simple Measure of Gobbledygook) sidetrack you; the SMOG readability formula was first
                published by Dr. G. Harry McLaughlin in 1969 as an improvement to the Fog index. Like other readability scales, SMOG aims
                to measure at what U.S. grade level a reader will fully understand a work of text.
              </p>
              <br />
              <p>
                SMOG has been validated against reading comprehension tests, predicting with 98.5% accuracy (and a standard error of 1.5%)
                which students had a 100% comprehension rate on a given piece of text.
              </p>
              <br />
              <p>
                A <strong>higher score</strong> on this scale indicates a document is <strong class="red-text">harder to understand</strong>.
              </p>
            </div>
            <div class="col s12 m12 l4 offset-l1">
              <p class="red-text text-darken-3">
                To <strong>raise</strong> your score on this scale:
              </p>
              <ul>
                <li>
                  <i class="material-icons left red-text">arrow_drop_up</i>
                  Use more words of at least three syllables.
                </li>
                <li class="clearfix">
                  <i class="material-icons left red-text">arrow_drop_up</i>
                  Use more sentences.
                </li>
              </ul>
              <br />
              <p class="green-text text-darken-4">
                To <strong>lower</strong> your score on this scale:
              </p>
              <ul>
                <li>
                  <i class="material-icons left green-text">arrow_drop_down</i>
                  Use more one- and two-syllable words.
                </li>
                <li class="clearfix">
                  <i class="material-icons left green-text">arrow_drop_up</i>
                  Use fewer sentences.
                </li>
              </ul>
              <br />
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
<% end %>