Remix this starter code or just use it to see how you might get started on your personality quiz.
Click Show in the header to see your app live. We recommend choosing the Next to Code option so you can view updates to your webpage side-by-side to your code.
Updates to your code will instantly deploy and update live.
Your quiz should:
- Have at least three questions.
- Have at least four choices per question.
- Allow the user to select an answer choice by clicking a button or photo.
- Produce different results for different combinations of selections.
Once you meet the basic requirements, you might:
- Extension 1: Lengthen your quiz with more questions.
- Extension 2: Allow the user to retake or restart the quiz.
- Extension 3: Change your JavaScript to disable buttons after the user has selected an answer.
- Extension 4: Improve the user experience of your quiz.
- Extension 5: Make your website more accessible.
- Extension 6: Change your JavaScript to allow a user to change their selections at any point before they finish the quiz.
That's this file, where you can tell people what your cool website does and how you built it. You can also include instructions on how to run your quiz!
Where you'll write the content of your personality quiz and code the layout for each element. The layout for all three questions have already been done for you, but if you want to add more questions you will need to edit this file.
CSS files add styling rules to your content. Once you finished programming your personality quiz add some styling to make your quiz look professional! We highly encourage you to try to google some styling for your images! Don't forget to change up the colors and fonts of your website!
We will be working mainly in this file to add interactivity to the buttons on our quiz! You will learn how to code variables, conditionals, events, event listeners, and functions in Javascript.
Drag in assets, like images or music, to add them to your project. You can use images online and grab their URL Address or use some of your own images.
Be sure that your images can be accessed digitally. If you want to use print photos, take a picture of it and then upload them in the assets folder.