More Interactive Examples
What is it?
Here are some more scripts that you can use, modify and customize, as you start to consider doing other projects. Feel free to get inspiration from these examples, but make sure to put your own mark on them with design and integrating functionality.
Why should I learn it?
These are just some additional examples. Sometimes you just want to find something that's close, to see how someone else coded it. Get inspiration from these examples.
What can I do with it?
Feel free to modify and customize any of these scripts for your own purposes.
How long will it take?
Take your time with your own projects. You are just getting started. But you know all the basic functionality to solve any problem, with patience and the right mindset.
This isn't an exercise as much as it is a series of completed examples. I don't have step-by-step videos or instructions for these, but you should now be able to make changes to code for your own purposes. Put the code for each in an html file and open in a browser to see them in action.
BuzzFeed Style Quiz
Copy and paste the code to the right into a text editor and save with an html extension. This is a short quiz with three questions. Instead of having a right or wrong answer, it uses values to evaluate something about the user. Depending on the person's score, they get paired up with an Austin-based band.
Use the script for functionality, but you will want to create a more interesting design. For instance, you might include a graphic or photo in the header section for visual interest. You might also want to change the way that the answer is calculated, using different ways to weight the answers. And, you could add an image to correspond to the answer, as we did in the Interactive Quiz tutorial. And you should have more than three questions.
Code Sample - BuzzFeed Stye Quiz
BuzzFeed Style Quiz - New Scoring Algorithm
Copy and paste the code to the right into a text editor and save with an html extension. This script uses a different algorithm for scoring a quiz. It allows you to give points to a specific category, rather than simply tally up a total. Each question gives a point to one of the category answers and then the category with the highest score is the one that is returned with feedback. It uses a variety of advanced techniques to find out which category has the highest score and at which index number it is. Then that index number is matched to the "scores" section to provide the feedback.
The script uses a function to score the quiz that can be called for each question as a parameter. You could also use a second parameter for the value, if you want to score some questions with a number other than 1.
Code Sample - BuzzFeed Stye Quiz - New Scoring
BuzzFeed Quiz with Dropdown
This example is the same as above, except one of the form elements is a dropdown instead of a radio button series. Getting the value from a dropdown is actually easier than getting it for a radio button. You just use the getElementById function to capture the value from the selection.
This script uses the advanced algorithm for scoring from the example above. The same suggestions as above apply to this script: improve the design, add visual interest, weight the calculation differently, add an image for the answer and/or add additional questions.
Code Sample - BuzzFeed Style Quiz with Dropdown
Dropdown with JSON
The script to the right provides an example for using a dropdown to lookup a value in the JSON section. This is based on Becky Larson's Loud Austin project. In the dropdown, the user selects a zipcode. The script returns the element from the JSON with the key "noise." Becky's project was a lot more complex than this, using the Google Maps API to plot the addresses of the noise complaints from City of Austin data. But you can start to see how you could reference data in a JSON section and replace it in the DOM, based on a user's selection.
This example also introduces some error correction. It first checks to see if the value from the dropdown is greater than 0. If it isn't, then it jumps to the area where it asks the user to make a selection. If it is, then the rest of the script executes. It goes through a loop to make the selection with something in the JSON. When it finds a match, it returns the zipcode itself into the "zip" id and returns the "noise" id the value for noise.
Dropdown with JSON
Another Dropdown with JSON
This example uses data that I pulled from the Spotify API. I wanted to get the Related Artists for several musicians. I created three different JSON arrays, one for each band. It also includes the Spotify popularity number. Ideally, these numbers would be formatted better, perhaps using a table.