Skip to content

Commit

Permalink
added new content
Browse files Browse the repository at this point in the history 
html
CSS
JS
  • Loading branch information
@ACLM
ACLM committed Nov 10, 2016
1 parent 59075f7 commit 4cbbc04
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 18 deletions.
43 changes: 28 additions & 15 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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%;
Expand All @@ -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%;
Expand All @@ -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;
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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 {
Expand All @@ -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; }
Expand Down Expand Up @@ -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;
Expand Down
39 changes: 36 additions & 3 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,10 @@
.vote {
margin-left: .5em;
}
.score_desc {
line-height: .5;
font-size: .9em;
}
@media (max-width: 700px) {
.left-box {
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -736,6 +759,10 @@
</div>
<div class="bar-graph--percentage-label">
<%= (item.score / 100).toFixed(2) %>
<br>
<span>
<%= item.likeliness %>
</span>
</div>
</div>
<% }); %>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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);
Expand Down

0 comments on commit 4cbbc04

Please sign in to comment.