In this project we created a form consisting of multiple questions regarding the user's morning routine. With this project we practiced React state and controlled forms. We also got to further practice using props, and many vanilla Javascript functions.
We started out by brainstorming ideas. With an idea it was easier to start researching designs to get more designinspiration. Dribbble was used for this. ChatGpt was used to help render unique answers for all possible questions that we had decided on. We also got help from ChatGpt to place these answers in a Json file format. We worked at very different times, which worked out great! One of us worked day-time on the project, and the other on the evenings. So we where always on the main branch and had tight contact on Slack the whole time. We made sure to always write clear comments so that the other one would understand what had been done. Great practice in reading code and understanding it also.
We started by trying to display all the questions on the page, and then once that part worked we started to split it up to be shown at different moments with the use of states. Stylning was done parallell to the rest of the code. Once we had all answers down, and that it worked to display the next question on a click, we focused on displaying all the answers we had in the template. Until this moment we siumply had a placeholder text showing that the quiz was done. We had the same approach here, with just displaying the answers first, and later figuring out how to display the answers from the template.
Final steps was restructuring a bit/splitting up the code, to add a progress bar and work a bit more on the styling. Some extra effects like timeouts where added to make it feel more "real".
With more time we would like to split up the QuestionsComponent into several components, and to add more questions for a "longer" quiz.