Exercises
These exercises are provided to help you practice with the important concepts in a controlled way but submission is not required.
You are encouraged to
- explore JavaScript, and its effect on a page, using the Developer Tools with the debugger (to stop the page and step through the code!) and especially the JavaScript Console (for printing as well as interactively experimenting with code)
- collaborate with other students, in contrast to the assignments, to work out solutions to these exercises (as long as everyone understands the code developed)
- practice the basic GIT workflow commands (
add,commit, andpush) regularly after each "task" or "feature" you complete
Practice Connecting HTML to JavaScript: Extending Tag Cloud to let users set options
For this exercise, explore creating HTML input elements to set values that can be used in your JavaScript code.
Extend the Tag Cloud example to allow users access to change the options used when creating the Tag Cloud rather than relying only on the default built-in options. This involves
- thinking abut which input element best matches the value expected by each option (including whether or not you will need to verify the user's choice as valid)
- determining the correct event to respond to for calling your code (including whether or not it is even necessary right away or how it can change the cloud interactively)
- learning how to access the input value within JavaScript (including whether or not it makes sense to reset that value after it has been "used")
The randomize boolean option has already been done as part of the example.
Feel free to come up with additional options as well or make any changes to the code you want to.
Practice JSON: Extending Quiz to be data driven
For this exercise, explore using JavaScript and JSON to build a site that can deliver a quiz about any subject dynamically as well as score the results.
Extend your implementation of the previous quiz exercise (or use our solution) to use JSON data to generate the quiz questions instead of simply hard-coding them into the HTML page.
Start by making a variable that refers to a JSON data structure representing a list of questions (the question itself, the possible choices, and the correct answer). Then use this variable to generate a String representing the HTML for each question that mirrors the existing HTML code to set as the innerHTML for the parent element. When that is working correctly, remove the original HTML from the page, leaving the DIV with the quiz ID empty as has been done for all the other examples.
Feel free to experiment with randomizing the order of the questions, adding a point value for questions, or creating you own quiz as a JSON data structure rather than the simple math example. But a more challenging task is to allow the user to load your new quiz after successfully finishing the current quiz. When a quiz is completed you change the Next button to keep track of how many quizzes have been completed and load the next one to start a new quiz.
Practice Fetching JSON Data: Extending Quiz to fetch its JSON
For this exercise, explore fetching JSON data (and waiting for it to arrive) instead of using a hardcoded data structure.
Extend your implementation of the previous Quiz exercise to fetch the JSON data rather than storing it as a local variable. While keeping Strings as local variables is often done and can be a harmless way to be more efficient, JSON data is often loaded dynamically (either through an API, a database, or just to hide it from users that know how to read your source code).
Start by moving each quiz's JSON data into its own separate file that is read when the user chooses it. Then change your local variable to be a list of strings (or you could even fetch that list too!) — an advantage of having a data structure represent the order in which quizzes are presented is that it allows you to present quizzes based on a variety of criteria, such as: in random order, dependent on completing others, or sorted by a "hardness" metric. Finally, change your code that uses the JSON data to load it using fetch and appropriately handling the wait for it to arrive on the user's machine.
Note, it is still useful to the previous version of this exercise to get you used to working with JSON before adding the complication of dealing with loading it.
Practice Using APIs and their Resulting JSON Data: Extending the ISS display to also plot recent Earthquakes on a world map
For this exercise, plot data points on the world map to practice deciphering JSON responses and using the Leaflet Map API that will be used in your project for this module.
Extend the ISS example to add data from a USGS API to plot recent earthquakes on the world map based on their latitude and longitude along with the International Space Station, ISS, position. To make sure you are interpreting the data correctly, start with a small number of earthquakes (hopefully): those that occurred in the last day, then expand to getting a whole week or month of data. Rather than using Markers, we suggest using Circles since they can be sized based on the magnitude of the earthquake (although be aware that you will need to multiply the magnitude by at least 10,000 just to make them visible when zoomed out to see the whole world!).
After you have gotten it to display all the data from the request consider enhancing it by adding features such as:
- add information that shows a description of the earthquake when you hover over it
- make older earthquakes more transparent or lighter in color so more recent earthquakes stand out more
- filter the earthquake data to show only those that are above a magnitude set by the user using an input element on the page
- filter the earthquake data to show only those that are "close" to the ISS as it moves across the Earth and make the closeness a value the user can change dynamically on the using an input element on the page
Here is the documentation for the APIs used in this application:
- Leaflet Map API
- USGS Earthquake data API
