DevPersona

Devlog 4 — Start Button, Quiz Flow & Result Sharing

This update focuses on making the Start Test button fully functional, establishing the core quiz flow, and allowing users to share their results in DevPersona.

Key Changes:

Start Test Button: Clicking it hides the landing section and reveals the quiz section, giving users a smooth transition into the quiz.

Question Display: Questions are presented one by one with multiple-choice answers. The progress bar and question counter update dynamically as users move through the quiz.

Navigation: Users can navigate forward with the Next button and backward with the Previous button. Buttons update their state automatically based on the current question.

Answer Selection: Each selected answer is saved in real-time, updating the internal scores object. Selected answers are highlighted visually, so users can easily see what they picked.

Result Sharing: After completing the quiz, users can share their developer personality results via native share dialogs or by copying a link to the clipboard. This allows friends and fellow developers to see and compare results.

With this update, the quiz is fully interactive, responsive, and polished. Users can now complete the full flow from start to finish and share their results with ease.

Preparing the Quiz Logic

Today I started preparing the logic for how the quiz will actually work. The UI is mostly finished now, so the next step was making sure the structure is ready for JavaScript.

I reviewed the sections I built earlier and made sure each part has the right IDs so it can be controlled from JS later. This includes the landing section, the quiz section, and the results section. The quiz and results sections are hidden by default for now.

I also prepared the container where the answers will be rendered dynamically. Instead of writing all the answers directly in the HTML, the plan is to generate them with JavaScript depending on the current question.

Another thing I worked on was the progress bar layout and the navigation buttons. These will later update based on which question the user is on.

At this point the structure is ready, so the next step will be writing the JavaScript that starts the quiz when the Start Test button is clicked and begins showing the questions.

Working on the UI

Today I focused mostly on the visual side of the project. After finishing the basic structure earlier, I started improving how everything looks and feels.

I used Tailwind CSS to style the layout and tried to keep the design simple but clean. I worked on the landing section first, adding the main title, description, and the Start Test button. I also added some icons using Font Awesome to make the interface feel a bit more alive.

After that, I designed the cards that explain what the quiz does (questions, progress tracking, and personality result). I also added the progress bar layout that will later be updated with JavaScript while the user answers questions.

Most of the UI is now ready. The sections for the quiz and the results page are already in the HTML, but they are hidden for now. The next step will be connecting everything with JavaScript so the quiz can actually start and move between questions.

Started working on the structure of the project today. I began by building the full layout using HTML and focused on organizing the sections clearly (landing page, quiz section, and results section). After that, I styled everything using Tailwind CSS to keep the design clean and responsive.

Most of the UI is now in place, including the cards, buttons, progress bar, and layout for the questions and results. I also added icons and fonts to make the interface look a bit more polished.

Right now I’m moving into the JavaScript part of the project. The plan is to handle the quiz logic, question navigation, progress updates, and calculating the final personality result. The structure for the answers container and result section is already prepared, so the next step is wiring everything together with JS.