add legend

master
bootje 5 years ago
parent aa12139983
commit 6ee205254e

@ -98,7 +98,11 @@
margin-top: 70px; margin-top: 70px;
line-height: 1.5; line-height: 1.5;
float: right; float: right;
}
.eachwords {
cursor: pointer; cursor: pointer;
} }
.top_words { .top_words {
@ -114,6 +118,7 @@
position: fixed; position: fixed;
float: left; float: left;
} }
.top_words_title { .top_words_title {
@ -186,5 +191,3 @@
background-color: lightgreen; background-color: lightgreen;
} }

File diff suppressed because one or more lines are too long

@ -36,12 +36,14 @@ print('''<!DOCTYPE>
<html> <html>
<head> <head>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="css/faceapp.css"> <link rel="stylesheet" href="faceapp.css">
<script src="js/highlight.js"></script> <link rel="stylesheet" href="legend.css">
<script src="highlight.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
</head> </head>
<body>''') <body>''')
@ -84,7 +86,7 @@ for paragraph in faceapp_text_list:
tagged = pos_tag(tokenized) tagged = pos_tag(tokenized)
print('<p>') print('<p>')
for word, pos in tagged: for word, pos in tagged:
print('<span class="{0} {1}">{2}</span>'.format(pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), word.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), word)) print('<span class="{0} {1} eachwords">{2}</span>'.format(pos.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks'), word.replace('.', 'dot').replace(',', 'comma').replace('(', 'marks').replace(')', 'marks').replace(':', 'marks').replace(';', 'marks').lower(), word))
print('</p>') print('</p>')
print('</div>') print('</div>')

@ -11,6 +11,19 @@ $(document).ready(function() {
}); });
/* legend */
$('.legendverb').click(
function() {
$('.VB, .VBZ, .VBN, .VVD').toggleClass('verb');
$('.legendverb').css('background-color','white');
$(this).css('background-color','yellow');
});
/* pos highlight*/
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').click( $('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').click(
function() { function() {
$('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').toggleClass('hide'); $('.TO, .DT, .IN, .WDT, .WP, .MD, .PRP, .CC, .marks, .comma, .dot').toggleClass('hide');

@ -0,0 +1,28 @@
.legend {
font-family: Belgika;
font-size: 10pt;
margin-top: 50px;
list-style: none;
margin-left: 12vw;
float: left;
}
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/*.legend .legendverb { background-color: #ff00ff; }
*/.legend .legendnoun { background-color: #00ffff; }
.legend .legendadjective { background-color: #0000ff; }
.legend .legendadverb { background-color: green; }
.legend .legendhide { background-color: #000000; }
.legendverb:hover {
background-color: yellow;
}
Loading…
Cancel
Save