WebFund 2016W: Tutorial 9: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
In this tutorial you will be playing with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/interactive-graphs.zip interactive-graphs], a single-page web application that graphs word frequencies. | In this tutorial you will be playing with [http://homeostasis.scs.carleton.ca/~soma/webfund-2016w/code/interactive-graphs.zip interactive-graphs], a single-page web application that graphs word frequencies. | ||
| Line 7: | Line 5: | ||
To better understand interactive-graphs, consider the following: | To better understand interactive-graphs, consider the following: | ||
* What files are loaded into the browser when | * What files are loaded into the browser when a "GET /" request is made? | ||
* What routes are defined? Is this more or less than you'd expect? | * What routes are defined? Is this more or less than you'd expect? | ||
* Where is the text analyzed, on the server or in the browser? | * Where is the text analyzed, on the server or in the browser? | ||
* How do we get the value of the numerical range? How about the sort order? | * How do we get the value of the numerical range (min and max word index)? How about the sort order? | ||
==Extending interactive-graphs== | ==Extending interactive-graphs== | ||
# Add a "Case sensitive" radio selector with the values "Yes" and "No". The program currently operates with the words being case-sensitive. When " | # Add a "Case sensitive" radio selector with the values "Yes" and "No". The program currently operates with the words being case-sensitive. When "No" is selected, all of the words should be converted to lower case and then analyzed. | ||
# Make the word frequency sorting case-insensitive (no matter the setting of the "Case sensitive" selector), so "Three" comes after "apple". | # Make the word frequency sorting case-insensitive (no matter the setting of the "Case sensitive" selector), so "Three" comes after "apple". | ||
# Add a second textbox to be analyzed. Call one "A" and the other "B". The graph should then have two datasets, one for "A" and one for "B". Change the sort radio selector to have three options: alphabetical, A's frequency, and B's frequency. | # Add a second textbox to be analyzed. Call one "A" and the other "B". The graph should then have two datasets, one for "A" and one for "B". Change the sort radio selector to have three options: alphabetical, A's frequency, and B's frequency. | ||
Revision as of 18:36, 23 March 2016
In this tutorial you will be playing with interactive-graphs, a single-page web application that graphs word frequencies.
Understanding interactive-graphs
To better understand interactive-graphs, consider the following:
- What files are loaded into the browser when a "GET /" request is made?
- What routes are defined? Is this more or less than you'd expect?
- Where is the text analyzed, on the server or in the browser?
- How do we get the value of the numerical range (min and max word index)? How about the sort order?
Extending interactive-graphs
- Add a "Case sensitive" radio selector with the values "Yes" and "No". The program currently operates with the words being case-sensitive. When "No" is selected, all of the words should be converted to lower case and then analyzed.
- Make the word frequency sorting case-insensitive (no matter the setting of the "Case sensitive" selector), so "Three" comes after "apple".
- Add a second textbox to be analyzed. Call one "A" and the other "B". The graph should then have two datasets, one for "A" and one for "B". Change the sort radio selector to have three options: alphabetical, A's frequency, and B's frequency.
Completing the Tutorial
To successfully complete this tutorial, please complete all of the three tasks above or show a TA that you've spent most of the tutorial time working on the tasks.
If you need to spend time working on Assignment 5 in tutorial, you may do so; however, you will not get credit for the tutorial. You will need to talk to a TA in office hours to show that you have completed the tutorial tasks.