Personality Quiz

Build IT with HTML, CSS, and JavaScript

---

Goals

• Gain exposure to HTML, CSS, and JavaScript and learn how these files interact with each other
• Gain familiarily with JavaScript by reading the existing code and modifying it to produce a different response
• Learn enough to know how to ask questions and keep learning
• Create a working personality quiz they can share with friends!

---

Preparation

• Clone this GitHub repo to your local machine

---

Getting Excited

• From Git Bash, open the files in Visual Studio Code
• Browse to Starter folder
• Right click index.html and Reveal in File Explorer, then double click to open index.html in the browser, OR use the Visual Studio Live Server extension to open index.html
• Take the already-working personality quiz!

---

Getting to Know You

• Share with your pair partner:
  • your personality quiz result ("What animal are you?")
  • what kind of personality quiz you'd like to create

---

Getting our Hands Dirty

• Familiarize yourself with each file and the language involved:

File	Language	Purpose	Contents
index.html	HTML	Structure	title, quiz container, connects js/css files
style.css	CSS	Appearance	layout, font, colors
script.js	JavaScript	Behavior	interactive features, function to calculate personality

---

Customize Quiz with JavaScript and Make it Your Own!

Open and familiarize yourself with the app.js file:

• Change the answers, or delete some questions or answers to show the difference.
• Determine how the results are hidden in the HTML and displayed in JavaScript
• Add new results and questions and see your personality quiz change!