From 4cbbc04d2e3e4559167dee1807935331986309f5 Mon Sep 17 00:00:00 2001
From: Alex Meyer <alexmeyer@us.ibm.com>
Date: Thu, 10 Nov 2016 15:16:25 -0600
Subject: [PATCH] added new content

html
CSS
JS
---
 public/css/style.css | 43 ++++++++++++++++++++++++++++---------------
 views/index.ejs      | 39 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 9d36a182..e434d206 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1366,7 +1366,7 @@ pre[class*=" language-"] {
 .summary--emotion {
   background-color: #f9f9f9;
   padding: 1rem;
-  height: 17rem; }
+  height: 21.5rem; }
   @media (min-width: 768px) {
     .summary--emotion {
       width: 31.91489%;
@@ -1377,15 +1377,15 @@ pre[class*=" language-"] {
       margin-top: 0rem; } }
   @media (min-width: 768px) {
     .summary--emotion {
-      height: 17rem; } }
+      height: 21.5rem; } }
   @media (min-width: 1200px) {
     .summary--emotion {
-      height: 16.5rem; } }
+      height: 21.5rem; } }
 
 .summary--writing {
   background-color: #f9f9f9;
   padding: 1rem;
-  height: 17rem; }
+  height: 21.5rem; }
   @media (min-width: 768px) {
     .summary--writing {
       width: 31.91489%;
@@ -1396,15 +1396,15 @@ pre[class*=" language-"] {
       margin-top: 0rem; } }
   @media (min-width: 768px) {
     .summary--writing {
-      height: 17rem; } }
+      height: 21.5rem; } }
   @media (min-width: 1200px) {
     .summary--writing {
-      height: 16.5rem; } }
+      height: 21.5rem; } }
 
 .summary--social {
   background-color: #f9f9f9;
   padding: 1rem;
-  height: 17rem; }
+  height: 21.5rem; }
   @media (min-width: 768px) {
     .summary--social {
       width: 31.91489%;
@@ -1415,10 +1415,10 @@ pre[class*=" language-"] {
       margin-top: 0rem; } }
   @media (min-width: 768px) {
     .summary--social {
-      height: 17rem; } }
+      height: 21.5rem; } }
   @media (min-width: 1200px) {
     .summary--social {
-      height: 16.5rem; } }
+      height: 21.5rem; } }
   @media (min-width: 768px) {
     .summary--social {
       width: auto;
@@ -1584,7 +1584,7 @@ pre[class*=" language-"] {
 .summary-emotion-graph--label-container:hover .bar-graph--tooltip {
     visibility: visible;
     opacity: 1;
-}   
+}
     .summary-emotion-graph--percentage-label-likeliness {
       font-weight: light;
       font-size: 0.5rem; }
@@ -1979,11 +1979,18 @@ pre[class*=" language-"] {
     position: absolute;
     right: 0rem; }
     .original-text--legend-block_low {
-      right: 9rem; }
+      right: 9rem;
+      text-align: center;
+      padding-top: .5em;}
     .original-text--legend-block_med {
-      right: 4.5rem; }
+      right: 4.5rem;
+      text-align: center;
+      padding-top: .5em; }
     .original-text--legend-block_high {
-      right: 0rem; }
+      right: 0rem;
+      text-align: center;
+      color: #ffffff;
+      padding-top: .5em;}
     .original-text--legend-block_anger-low {
       background-color: #FFF; }
     .original-text--legend-block_anger-medium {
@@ -2007,6 +2014,7 @@ pre[class*=" language-"] {
     .original-text--legend-block_joy-medium {
       background-color: #FFF173; }
     .original-text--legend-block_joy-high {
+      color: #000000;
       background-color: #FFD629; }
     .original-text--legend-block_sadness-low {
       background-color: #FFF; }
@@ -2037,31 +2045,36 @@ pre[class*=" language-"] {
     .original-text--legend-block_openness-medium {
       background-color: #94FFEF; }
     .original-text--legend-block_openness-high {
+      color: #000000;
       background-color: #1AE5CD; }
     .original-text--legend-block_conscientiousness-low {
       background-color: #FFF; }
     .original-text--legend-block_conscientiousness-medium {
       background-color: #94FFEF; }
     .original-text--legend-block_conscientiousness-high {
+      color: #000000;
       background-color: #1AE5CD; }
     .original-text--legend-block_extraversion-low {
       background-color: #FFF; }
     .original-text--legend-block_extraversion-medium {
       background-color: #94FFEF; }
     .original-text--legend-block_extraversion-high {
+      color: #000000;
       background-color: #1AE5CD; }
     .original-text--legend-block_agreeableness-low {
       background-color: #FFF; }
     .original-text--legend-block_agreeableness-medium {
       background-color: #94FFEF; }
     .original-text--legend-block_agreeableness-high {
-      background-color: #1AE5CD; }
+      background-color: #1AE5CD;
+      color: #000000; }
     .original-text--legend-block_emotional-range-low {
       background-color: #FFF; }
     .original-text--legend-block_emotional-range-medium {
       background-color: #94FFEF; }
     .original-text--legend-block_emotional-range-high {
-      background-color: #1AE5CD; }
+      background-color: #1AE5CD;
+      color: #000000; }
   .original-text--legend-label {
     margin-top: 0.35rem;
     position: absolute;
diff --git a/views/index.ejs b/views/index.ejs
index f9acefa9..ce60bcc2 100755
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -369,6 +369,10 @@
       .vote {
         margin-left: .5em;
       }
+      .score_desc {
+        line-height: .5;
+        font-size: .9em;
+      }
 
       @media (max-width: 700px) {
           .left-box {
@@ -512,18 +516,36 @@
       <div class="output">
         <h2 class="base--h2">Output</h2>
         <p class="base--p output--document-description">The Tone Analyzer Service analyzes text at the document level and the sentence level. Use the document level analysis to get a sense of the overall tone of the document, and use the sentence level analysis to identify specific areas of your content where tones are the strongest.</p>
+        <p class="base--p output--document-description">To understand how to interpret your tone score, see <a href="https://www.ibm.com/watson/developercloud/doc/tone-analyzer/understanding-tone.shtml">Understand your Tone Score.</a></p>
         <h3 class="base--h3 output--document-title" style="padding-left: 0rem;">Document-level</h3>
+
+
         <div class="summary--row">
           <div class="summary--emotion">
             <h5 class="base--h5 summary--header">Emotion</h5>
+            <p class="score_desc">
+              &lt; .5 = not likely present <br>
+              &ge; .5 = likely present <br>
+              &gt; .75 = very likely present <br>
+            </p>
             <div class="summary-emotion-graph bar-graph"></div>
           </div>
           <div class="summary--writing">
             <h5 class="base--h5 summary--header">Language Style</h5>
+            <p class="score_desc">
+              &lt; .5 = not likely present <br>
+              &ge; .5 = likely present <br>
+              &gt; .75 = very likely present <br>
+            </p>
             <div class="summary-writing-graph"></div>
           </div>
           <div class="summary--social">
             <h5 class="base--h5 summary--header">Social Tendencies</h5>
+            <p class="score_desc">
+              &lt; .5 = not likely present <br>
+              &ge; .5 = likely present <br>
+              &gt; .75 = very likely present <br>
+            </p>
             <div class="summary-social-graph bar-graph"></div>
           </div>
         </div>
@@ -535,6 +557,7 @@
             <p class="base--p">The Language Style and Social Tendencies graphs represent the amount of a language or social tone present in the text. <a class="base--a" target="_blank" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/understanding-tone.shtml#social">Learn more</a>.</p>
           </div>
         </div>
+        <p class="base--p output--document-description">For details on how Tone Analyzer detects tone in text see, <a href="https://www.ibm.com/watson/developercloud/doc/tone-analyzer/understanding-tone.shtml">The Science Behind the Tone Analyzer Service</a>.</p>
         <div class="summary--row">
 
                       <div class="results-table--feedback-inputs dcl">
@@ -736,6 +759,10 @@
         </div>
         <div class="bar-graph--percentage-label">
           <%= (item.score / 100).toFixed(2) %>
+          <br>
+          <span>
+            <%= item.likeliness %>
+          </span>
         </div>
       </div>
       <% }); %>
@@ -748,6 +775,10 @@
           <div class="summary-<%= className %>-graph--bar-value" style="height: <%= item.score %>%;"></div>
           <div class="summary-<%= className %>-graph--bar-tooltip summary-<%= className %>-graph--bar-tooltip_<%= item.label.replace(/\s+/g, '-') %> bar-graph--bar-tooltip" style="margin-bottom: <%= item.score %>%;">
             <%= (item.score / 100).toFixed(2) %>
+            <br>
+            <span class="summary-emotion-graph--percentage-label-likeliness">
+              <%= item.likeliness %>
+            </span>
           </div>
         </div>
         <div class="summary-<%= className %>-graph--label">
@@ -804,9 +835,10 @@
 
   <script type="text/html" id="originalTextLegendTemplate">
     <div class="original-text--legend-bar">
-      <div class="original-text--legend-block original-text--legend-block_low original-text--legend-block_<%= className %>-low"></div>
-      <div class="original-text--legend-block original-text--legend-block_med original-text--legend-block_<%= className %>-medium"></div>
-      <div class="original-text--legend-block original-text--legend-block_high original-text--legend-block_<%= className %>-high"></div>
+      <div class="description--<%= className %>" style="text-align: left; float: left; margin-right: 210px; font-size: 0.8rem;"> </div>
+      <div class="original-text--legend-block original-text--legend-block_low original-text--legend-block_<%= className %>-low">&lt; .5</div>
+      <div class="original-text--legend-block original-text--legend-block_med original-text--legend-block_<%= className %>-medium">.5 - .75</div>
+      <div class="original-text--legend-block original-text--legend-block_high original-text--legend-block_<%= className %>-high">&gt; .75</div>
       <div class="original-text--legend-label original-text--legend-label_low">None</div>
       <div class="original-text--legend-label original-text--legend-label_high">Strong</div>
     </div>
@@ -832,6 +864,7 @@
   $(document).ready(function(){
     $('input[name="document-level"]').prop('checked', false);
     $('input[name="sentence-level"]').prop('checked', false);
+    $("description-anger").text("Evoked due to injustice, conflict, humiliation, negligence or betrayal. If anger is active, the individual attacks the target, verbally or physically. If anger is passive, the person silently sulks and feels tension and hostility.");
 
     $(".input--submit-button, .output--reset-button").click(function() {
       $('input[name="document-level"]').prop('checked', false);