🔗 https://arthurfincham.github.io/chelsea_quiz/
In making this quiz I tried to use different ways of answering the questions to practice getting their value in the JS file.
For example...
- Range sliders
- Radio buttons wrapped in images
- Customised text input
- Radio buttons wrapped in text
Doing so meant I had to learn the difference between...
document.getElementById().innerHTML
document.querySelector().value
document.querySelectorAll()
...so that I could get the user input into the JS and check the answers.
Tutorial to get the range slider to display its changing value.
Thread on stackoverflow to limit the allowed checkboxes to 2.
When researching how to make a simple quiz, I found lots of good examples but few were visually appealing. This meant I had to dive into the CSS, which took up more time than any other part of the project.
I'm fairly pleased with the results, although my code is quite clunky and longer than it needs to be.
This article was vital in understanding Flex.
This tutorial showed me how to include and style the range slider.
This thread on stackoverflow taught me how to wrap radio buttons.
Another thread on stackoverflow gave me smooth scrolling when using my anchor link buttons.
Update 29th June.
The app now works on mobile, but the images are not well aligned.
- Refactor the CSS and remove unnecessary code.
- Refactor the HTML and get rid of unused divs.
- Make the app more responsive on mobile.