notebook/app/views/document_analyses/readability.html.erb

<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>

<h5 class="grey-text">Readability scales</h5>
<%= render partial: 'document_analyses/readability/flesch_kincaid',              locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/smog_grade',                  locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/coleman_liau',                locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/dale_chall',                  locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/gunning_fog',                 locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/automated_readability_index', locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/linsear_write',               locals: { analysis: @analysis } %>
<%= render partial: 'document_analyses/readability/forcast',                     locals: { analysis: @analysis } %>

<h5 class="grey-text">Lexical richness</h5>
<div class="row">
  <div class="col s12 m6">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Word variety</div>
        <p>Number of unique words used...</p>
        <%= 
          pie_chart({
            'exactly once'   => @analysis.words_used_once_count, 
            'multiple times' => @analysis.words_used_repeatedly_count
          }, colors: ["#FF6977", Document.hex_color])
        %>
      </div>
      <div class="card-action">
        <a class="activator blue-text text-darken-4">
          Why is this important?
        </a>
      </div>
      <div class="card-reveal">
        <span class="card-title">
          Why is this important?
          <i class="material-icons right">close</i>
        </span>
        <p>
          The higher percentage of reused words you have, the more likely a reader will
          be able to understand new words from context alone, as they'll have more instances
          in which they can infer a meaning from that word's surroundings.
        </p>
        <p>
          Having a higher number of reused words can make text much easier to read and understand,
          but a limited vocabularity may result in repetition and bland writing. Having a higher
          number of unique words may indicate more effective word choice, but can also be indicative
          of jargon.
        </p>
      </div>
    </div>
  </div>

  <div class="col s12 m6">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Word complexity</div>
        <p>Of all your words...</p>
        <%=
          pie_chart({
            "simple words (#{(@analysis.simple_words_count.to_f / @analysis.word_count * 100).round}%)"  => @analysis.simple_words_count,
            "complex words (#{(@analysis.complex_words_count.to_f / @analysis.word_count * 100).round}%)" => @analysis.complex_words_count,
          }, colors: [Document.hex_color, "#FF6977"])
        %>
        <!--
        <ul>
          <li><%= pluralize @analysis.unique_simple_words_count, 'unique simple word' %> used</li>
          <li><%= pluralize @analysis.unique_complex_words_count, 'unique complex word' %> used</li>
        </ul>
        -->
      </div>
      <div class="card-action">
        <a class="activator blue-text text-darken-4">
          Why is this important?
        </a>
      </div>
      <div class="card-reveal">
        <span class="card-title">
          Why is this important?
          <i class="material-icons right">close</i>
        </span>
        <p>
          A <em>complex word</em> is a word made up of at least three morphemes, or <em>parts</em>.
          Conversely, a <em>simple word</em> consists of only one. 
          For example, "bookishness" is a complex word with morphemes "book", "ish", and "ness";
          while "math" is a simple word with just one morpheme: "math".
        </p>
        <p>
          Having a healthy mixture of simple and complex words is an important aspect of variety
          in your writing. Replacing complex words with simple words can make your story easier
          to understand, while replacing simple words with complex words can enable you to more 
          efficiently pack more context and information into the words you choose to use.
        </p>
      </div>
    </div>
  </div>


  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Number of N-syllable words</div>
        <%= 
          column_chart(
            @analysis.n_syllable_words.map { |k, v| [k.to_s + "-syllable words", v] },
            colors: [Document.hex_color],
            # todo more readable tooltips
          ) 
        %>
      </div>
    </div>
  </div>

<div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Lexical richness: % unique words per passage</div>

        <%= 
          column_chart([
            ['This document',       @analysis.pos_percentage(:words_used_once)],
            ['Hemingway',           12.5],
            ['The Grapes of Wrath', 14.5],
            ['The Great Gatsby',    16],
            ["Swann's Way",         17],
            ["Typical Writing",     22]
          ], colors: [Document.hex_color])
        %>
      </div>
    </div>
  </div>

  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">Averaged structure ratios</div>
        <table>
          <tr>
            <th></th>
            <th>... per word</th>
            <th>... per sentence</th>
            <th>... per paragraph</th>
          </tr>
          <tr>
            <th>Letters...</th>
            <td><%= (@analysis.character_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.character_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.character_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
          <tr>
            <th>Words...</th>
            <td><%= (@analysis.word_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.word_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.word_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
          <tr>
            <th>Simple words...</th>
            <td><%= (@analysis.simple_words_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.simple_words_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.simple_words_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
          <tr>
            <th>Complex words...</th>
            <td><%= (@analysis.complex_words_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.complex_words_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.complex_words_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
          <tr>
            <th>Sentences...</th>
            <td><%= (@analysis.sentence_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.sentence_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.sentence_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
          <tr>
            <th>Paragraphs...</th>
            <td><%= (@analysis.paragraph_count.to_f / @analysis.word_count).round(4) %></td>
            <td><%= (@analysis.paragraph_count.to_f / @analysis.sentence_count).round(4) %></td>
            <td><%= (@analysis.paragraph_count.to_f / @analysis.paragraph_count).round(4) %></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="col s12">
    <div class="card <%= @analysis.adult_content_flag? ? 'yellow' : 'green' %> lighten-4 black-text">
      <div class="card-content">
        <div class="card-title black-text">
          <% if @analysis.adult_content_flag? %>
            Potential adult content detected
          <% else %>
            No adult content detected
          <% end %>
        </div>

        <div class="col s12 m12 l6">
          <% if @analysis.profanity_content_flag? %>
            <div>
              <i class="material-icons left yellow-text text-darken-3">warning</i>
              <%= pluralize @analysis.profanity_trigger_words.count, 'potentially profane word' %> detected:
            </div>
            <% @analysis.profanity_trigger_words.each do |word| %>
              <span class="red lighten-4 badge left"><%= word %></span>
            <% end %>
            <div class="clearfix"></div>
          <% else %>
            <i class="material-icons left green-text">check</i>
            No profane words detected.
          <% end %>
          <br />
        </div>

        <div class="col s12 m12 l6">
          <% if @analysis.violence_content_flag? %>
            <div>
              <i class="material-icons left yellow-text text-darken-3">warning</i>
              <%= pluralize @analysis.violence_trigger_words.count, 'potentially violent word' %> detected:
            </div>
            <% @analysis.violence_trigger_words.each do |word| %>
              <span class="red lighten-4 badge left"><%= word %></span>
            <% end %>
            <div class="clearfix"></div>
          <% else %>
            <i class="material-icons left green-text">check</i>
            No violent words detected.
          <% end %>
          <br />
        </div>

        <div class="col s12 m12 l6">
          <% if @analysis.hate_content_flag? %>
            <div>
              <i class="material-icons left yellow-text text-darken-3">warning</i>
              <%= pluralize @analysis.hate_trigger_words.count, 'potentially hateful word' %> detected:
            </div>
            <% @analysis.hate_trigger_words.each do |word| %>
              <span class="red lighten-4 badge left"><%= word %></span>
            <% end %>
            <div class="clearfix"></div>
          <% else %>
            <i class="material-icons left green-text">check</i>
            No hateful words detected.
          <% end %>
          <br />
        </div>

        <div class="col s12 m12 l6">
          <% if @analysis.sex_content_flag? %>
            <div>
              <i class="material-icons left yellow-text text-darken-3">warning</i>
              <%= pluralize @analysis.sex_trigger_words.count, 'potentially sexual word' %> detected:
            </div>
            <% @analysis.sex_trigger_words.each do |word| %>
              <span class="red lighten-4 badge left"><%= word %></span>
            <% end %>
            <div class="clearfix"></div>
          <% else %>
            <i class="material-icons left green-text">check</i>
            No sexual words detected.
          <% end %>
          <br />
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>