indentlabs/notebook

<% if analysis.gunning_fog_index %>
  <div class="row">
    <div class="col s12 m12 l12">
      <div class="card">
        <div class="card-content">
          <div class="card-title">
            <span class="right"><%= analysis.gunning_fog_index.try(:round) %> / 16</span>
            <i class="left material-icons orange-text">bubble_chart</i>
            Gunning fog index
          </div>
          <div class="progress">
            <div class="determinate" style="width: <%= 100 * analysis.gunning_fog_index.try(:round) / 16 %>%"></div>
          </div>
          <div class="row">
            <div class="col s12 m12 l7">
              <p>
                According to this scale, your document is
                <% if analysis.gunning_fog_index.round > 12 %>
                  <strong>
                    Understandable by a <%= (analysis.gunning_fog_index.round - 12).ordinalize %>-year college student.
                  </strong>
                <% else %>
                  <strong>
                    Understandable by a <%= analysis.gunning_fog_index.round.ordinalize %>-grade reader.
                  </strong>
                <% end %>
              </p>
              <br />
              <p>
                The Gunning fog index was developed by Robert Gunning in 1952 after working in newspaper and textbook publishing. It is
                primarily used to ensure that text can be easily read by a large audience. The index was refined in the 80s to more accurately
                measure and incorporate sentence complexity.
              </p>
              <br />
              <p>
                In general, texts intended for a wide audience are recommended to have a fog index of no more than 12. Texts requiring
                near-universal understanding and comprehension are recommended to keep their fog index below 8.
              </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 complex words.
                </li>
                <li class="clearfix">
                  <i class="material-icons left red-text">arrow_drop_up</i>
                  Use longer 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 simpler words.
                </li>
                <li class="clearfix">
                  <i class="material-icons left green-text">arrow_drop_down</i>
                  Use shorter sentences.
                </li>
              </ul>
              <br />
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
<% end %>