Exercise: Quiz
For your first exercise you are going to build a quiz game! We are going to use a tool called CodePen. CodePen is basically a little miniature development environment contained in your browser. Instead of having your separate HTML, CSS, and JavaScript files, CodePen combines them nicely into one web page for you. It's nice for making simple, shareable pieces of code. And you it makes it easy to do exercises.
Some words of advice for as you use CodePen:
- I recommend signing up for an account. But you do not have to. This will allow you to save your work.
- The way you'll be able to save your work is click the Fork button. It means to fork (as in how a river forks) from the original author's version to your own version. You can modify it without worrying about changing mine. It's making your own copy.
- It is possible to crash the browser. Normally CodePen can recover well on its own but in the case that you make it crash so bad it can't even start, see this blog post to see how to start with JavaScript turned off.
- In this exercise you do not need to modify the CSS or HTML at all. However you can see it and play around it if you want to.
- The first one is complete for you as an example. You don't need to change anything about it.
- If you see see a icon like this: ! in the bottom right of the JavaScript pane, it means you have syntax errors in your JS (code that doesn't work / make sense.) If you click on it, it will show you what's wrong. If you're writing code and nothing is happening differently, check to see if that exclamation point is there.
- If you're stuck, Google it. That's not cheating. That's what you're supposed to do.
- Don't be afraid of looking at the answers. This is about learning, not grades. That said, don't cheat yourself. Try. Struggle. Learn.
Good luck!