Fix the quiz progress bar

[Marchand-Nicolas]

Description

Fix the quiz progress bar

PROPOSED TODO

→ As you can see on the screenshot, the green bar is often beside the numbers. It should exactly reach the current number, not go before or after it. You can easily test on this task: Attentiveness Tree Quest. (Mainnet) Attentiveness Tree Quest. (Sepolia)

[ShantelPeters]

Please can I be assigned to this issue @Marchand-Nicolas

[onlydustapp[bot]]

Hi @ShantelPeters! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[petersdt]

@Marchand-Nicolas i would like to make this my first contribution to the starknet quest project kindly assign me as should be able to hanlde this task in 2working days max.

[onlydustapp[bot]]

Hi @petersdt! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[Luluameh]

@Marchand-Nicolas kindle assign me to this issue

[onlydustapp[bot]]

Hi @Luluameh! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[martinvibes]

hello @Marchand-Nicolas i would love to work on this issue :)

[onlydustapp[bot]]

Hi @martinvibes! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[onlydustapp[bot]]

Hi @vickiddev! Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[dev-chinx]

hello @Marchand-Nicolas can i hop on this

[PabloVillaplana]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack developer with 6 years of experience in the industry, I am super excited to be able to contribute to Web 3 projects, this to continue paving my way as an Open Source Contributor. I am from Dojo Coding Community

How I plan on tackling this issue

I would like to contribute back to Starknet Quest with this issue, I think I can fix the progress bar issue quickly.

[mariocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hii! My name is Mario Araya, I’m a Software Developer with 2+ years of experience. I have worked with backend technologies such as Cairo, Java, and C#, as well as frontend development using React, NextJS, and JavaScript/TypeScript. I’ve made contributions to open-source projects, completed a Starknet Bootcamp, exercises on NodeGuardians, finished Starklings, and participated in multiple hackathons. I’m also a member of the Dojo Coding community here in Costa Rica.

How I plan on tackling this issue

I would approach this issue in the following way:

First, I would review the code responsible for rendering the quiz progress bar, likely in the component handling the quest's UI. I would identify the logic calculating the progress bar's width or percentage and ensure it aligns precisely with the current number. This may involve adjusting how the percentage is calculated based on the total steps or adding more accurate rounding logic. Next, I would inspect the CSS or styling responsible for positioning the progress bar to confirm that it properly aligns with the number markers, ensuring no offset issues are present. After implementing the fix, I would test the progress bar using the Attentiveness Tree Quest (both on Mainnet and Sepolia) to verify the green bar reaches the current number exactly without going before or after it. If I encounter any issues or doubts, I would reach out to the maintainers for clarification.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend developer and a technical writer please can i work on this issue :) i would love to be a contributor on this repo

How I plan on tackling this issue

I’ve noticed that the green bar currently doesn’t quite align with the numbers, and I think it’s crucial for a seamless user experience. My goal is to ensure that the progress bar reaches the current number exactly, as shown in the screenshot. It might seem like a small detail, but it can make a big difference in how users perceive their progress.

To tackle this, I plan to test the fix on the Attentiveness Tree Quest in both the Mainnet and Sepolia environments. I’ll dive into the code to pinpoint what needs adjusting and implement the necessary changes to get that progress bar aligned perfectly. I’ll also run some tests afterward to ensure everything looks great and functions as expected.

[Mystic-Nayy]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Web3/frontend developer With a lot of experiences in open source contribution.

How I plan on tackling this issue

I will fix the progress bar and make it reach the current number, not go before or after it

[ridwanalaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with 2 years experience building applications

How I plan on tackling this issue

I will follow the figma design to implement to pixel perfect details and also implement the animations

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet, Ethereum ecosystem.

How I plan on tackling this issue

I will fix the quiz progress bar by adjusting the calculation of the right style for the colored_line in the ProgressBar component. The goal is to ensure that the green progress bar aligns exactly with the current step number without exceeding or falling short.

Currently, the calculateRightDistance function calculates the right distance based on the doneSteps and totalSteps, but it may not accurately reflect the desired position of the progress bar. I will modify the logic to ensure it reaches precisely the current step:

const calculateRightDistance = useCallback(
  (doneSteps: number, totalSteps: number) => {
    return doneSteps >= totalSteps
      ? 8 // Full completion case
      : `${((totalSteps - doneSteps) / totalSteps) * 100}%`; // Adjusted calculation
  },
  []
);

With this adjustment, the progress bar will visually represent the user's progress accurately. I will test this implementation on the 'Attentiveness Tree Quest' in both the Mainnet and Sepolia environments to ensure it behaves as expected.

---

ETA - 1 day

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @Marchand-Nicolas,

I’m Benjamin, a JavaScript developer with 4 years of experience and over 18 contributions on OnlyDust | https://app.onlydust.com/u/Benjtalkshow. I specialize in creating smooth and responsive user experiences, and I’m eager to tackle the task of fixing the quiz progress bar.

How I plan on tackling this issue

I’ve noticed that the green bar currently doesn’t quite align with the numbers, and I think it’s crucial for a seamless user experience. My goal is to ensure that the progress bar reaches the current number exactly, as shown in the screenshot. It might seem like a small detail, but it can make a big difference in how users perceive their progress.

To tackle this, I plan to test the fix on the Attentiveness Tree Quest in both the Mainnet and Sepolia environments. I’ll dive into the code to pinpoint what needs adjusting and implement the necessary changes to get that progress bar aligned perfectly. I’ll also run some tests afterward to ensure everything looks great and functions as expected.

[EnochScript]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with expertise in JavaScript and react. This is my first time contributing to ODHack and I will like the opportunity to contribute to this project. I have good technical knowledge; I have the ability to work under pressure and adapt quickly and these will help me to contribute effectively to solving diverse challenges.

How I plan on tackling this issue

I will analyze the style properties of the green bar (width, alignment, padding) and I will adjust where needed

[Kaminar-i]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend developer and a technical writer please can i work on this issue :) i would love to be a contributor on this repo

How I plan on tackling this issue

please this issue is good to tackle base on my skill i will like to do it kindly assign as it will be my first issue on this repo

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a blockchain developer , with vast knowlegde in html, css , react, javascript,typescript etc. i would love to be given an opportunity to contribute.

How I plan on tackling this issue

I will approach this problem by adjusting the quiz progress bar so that the green fill aligns precisely with the current progress number, ensuring it neither overshoots nor falls short. Test the fix using the "Attentiveness Tree Quest" on both Mainnet and Sepolia to verify proper functionality.

[bhavyagosai]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am Bhavya, a seasoned frontend engineer with two years of professional experience. I have been working with react, react native, nextjs, typescript, shadcn, tailwindcss for a while now and am familiar with the code. Have worked previously on this repo too!

How I plan on tackling this issue

I can see that the core logic of rendering the steps seems fine.

data-completed={index < currentStep}
data-current={index === currentStep}

The issue might lie in the way the width or right position of the .colored_line (the green bar) is being calculated.

Here, both left and right are set statically to 16px, which doesn't allow the bar to be flexible based on the number of steps. The right value is adjusted in the JSX based on a function, but this could be the root cause.

Also the function responsible for bar width, it calculates how much space to leave on the right side, but this formula seems to be placing the progress marker inconsistently for certain steps. The problem could stem from the fact that it uses totalSteps - 1 for the denominator, which may cause the green bar to misalign depending on the total number of steps. Also, it may not take into account the exact step width, so the final bar length might not align visually.

• Proportionally adjusting the width and fully align when the final step is reached may fix the issue.
• Avoiding static values for left and right
• Ensure that the steps themselves are aligned properly

[onlydustapp[bot]]

The maintainer Marchand-Nicolas has assigned ShantelPeters to this issue via OnlyDust Platform. Good luck!

[ShantelPeters]

Thank you . Will get to it .

[Marchand-Nicolas]

Done here: https://github.com/lfglabs-dev/starknet.quest/pull/848