You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.4 KiB
JavaScript
125 lines
4.4 KiB
JavaScript
/*
|
|
The index.html features all words and their labels. The function of this script is to show and hide
|
|
specific words based on their label. In this case the word is hidden, but its respective label is shown in the text.
|
|
|
|
Each collection of words and labels is inside a .wrapper with an id.
|
|
The classes of these wrapper feature the word, and the values of the labels (e.g. class="wrapper software noun keyword neutral")
|
|
by default all words inside the wrapper have the class .word. This class is visible.
|
|
by default all labels (noun, neutral etc.) have the class .tag and another class with the type of label (POS, sentiment, etc). .tag is by default display:none
|
|
|
|
If the user clicks on one of the .wrapper elements, the page changes the hidden words. The state changes.
|
|
|
|
What happens inside the wrapper if the state changes to hide all nouns?
|
|
|
|
- Previous filter is disabled. All tags invisible. All words visible.
|
|
- the words in the wrapper with class noun are selected. They get the class word_label. Which means: only visible on :hovering the wrapper.
|
|
- the span with the text 'noun' and class 'pos' will lose the class invisible. The tag is now visible in the text.
|
|
|
|
Aside: What about Weasyprint?
|
|
Weasyprint can't see the changes made by this script. It will only show the normal text, without any labels.
|
|
To print the text with the desired styling, there is a specific stylesheet called print.css.
|
|
*/
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
// State 1 Selectors for stopword tagger: selecting the word, and the label 'stopword'
|
|
var stopword_word = $('.stopword > .word');
|
|
var stopword_label = $('.stopword > .wordtype');
|
|
|
|
// State 2 Selectors for the sentiment tagger, showing neutral words and their labels
|
|
var known_entity_word = $('.known_entity > .word, .pronoun > .word');
|
|
var known_entity_label = $('.known_entity > .ner, .pronoun > .pos');
|
|
|
|
// State 3 Selectors for the noun taggger
|
|
var noun_word = $('.noun > .word');
|
|
var noun_label = $('.noun > .pos');
|
|
|
|
// State 4 Selectors for the adjective and adverb taggger
|
|
var ad_word = $('.adjective > .word, .adverb > .word');
|
|
var ad_label = $('.adjective > .pos, .adverb > .pos');
|
|
|
|
// State 5 Selectors for the determiner, pronoun, preposition and infinitival to taggger
|
|
var dppt_word = $('.determiner > .word, .pronoun > .word, .to > .word, .preposition > .word');
|
|
var dppt_label = $('.determiner > .pos, .pronoun > .pos, .to > .pos, .preposition > .pos');
|
|
|
|
// State 6 Selectors for the sentiment tagger, showing only positive and negative words and their labels
|
|
var neutral_word = $('.neutral > .word');
|
|
var neutral_label = $('.neutral > .sentiment');
|
|
|
|
// On page load, prepare the right view for state one. Hiding all stopwords, showing the stopword label
|
|
var state = 1;
|
|
stopword_word.addClass('word_label');
|
|
stopword_label.removeClass('invisible');
|
|
|
|
// Here we run through the states
|
|
$('.container').click( function() {
|
|
console.log(state);
|
|
|
|
if (state == 1) {
|
|
stopword_word.removeClass('word_label');
|
|
stopword_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_neutral.pdf")
|
|
|
|
neutral_word.addClass('word_label');
|
|
neutral_label.removeClass('invisible');
|
|
}
|
|
|
|
if (state == 2) {
|
|
neutral_word.removeClass('word_label');
|
|
neutral_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_noun.pdf")
|
|
|
|
noun_word.addClass('word_label');
|
|
noun_label.removeClass('invisible');
|
|
}
|
|
|
|
if (state == 3) {
|
|
noun_word.removeClass('word_label');
|
|
noun_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_adv.pdf")
|
|
|
|
ad_word.addClass('word_label');
|
|
ad_label.removeClass('invisible');
|
|
}
|
|
|
|
if (state == 4) {
|
|
ad_word.removeClass('word_label');
|
|
ad_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_dppt.pdf")
|
|
|
|
dppt_word.addClass('word_label');
|
|
dppt_label.removeClass('invisible');
|
|
}
|
|
|
|
if (state == 5) {
|
|
dppt_word.removeClass('word_label');
|
|
dppt_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_named_entities.pdf")
|
|
|
|
known_entity_word.addClass('word_label');
|
|
known_entity_label.removeClass('invisible');
|
|
}
|
|
|
|
if (state == 6) {
|
|
known_entity_word.removeClass('word_label');
|
|
known_entity_label.addClass('invisible');
|
|
|
|
$("#poster").prop("href", "poster_stopword.pdf")
|
|
|
|
stopword_word.addClass('word_label');
|
|
stopword_label.removeClass('invisible');
|
|
|
|
state = 0;
|
|
}
|
|
|
|
state = state+1;
|
|
});
|
|
|
|
});
|