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
Validating If Elements Are Selected
So far, our forms have required the user to fill out all elements before submitting. If someone forgets to select a radio button or fill out a text field, the form doesn't work. But that's not how forms work in the real world. People make mistakes all the time and your script must anticipate and handle certain mistakes. This can get very complicated, when you consider things like format of entries, but we can start by checking to see if all fields are filled out. If not, we can send the user an alert. See the script to the right and replace the script area in the previous example. The script uses an if statement to check if all elements have a checked value. If so, it progresses with the rest of the script. If not, it moves to the else statement that provides the alert.
This is just one way to handle this situation. You may want to allow people to skip an item. If you want to assign a "default value" for a field if a user doesn't select one, you can use an if statement to check for the value and then the else statement to assign the default value. Try doing this with a series of if/else statements, one for each form element. Be careful that this doesn't skew the results of your quiz or calculator.
Code Sample - Validating If Elements Are Selected
BuzzFeed Style Quiz - More Advanced Algorithm
Sometimes you need to use a more elaborate scoring algorithm. You might want to weight items differently by multiplying them to something before you add them to the result. Or you might want to get a point (or more) each time someone picks an element that meets the criteria for one of your answers - putting each score in a bucket and using the script to evaluate the one with the highest number. The script to the right does that.
Carefully consider your algorithm when you are creating forms with results.