프로그레스바 로직 질문있어요....

.status div 태그의 색은 흰색으로 지정하고,

.statusBar div 태그의 색은 다른색으로 지정한 다음,

.statusBar div 태그의 width값을 바꾸어가며 진행창을 구현하고자 합니다.

(100 / 모든 질문의 개수) 를 한다면, 질문 한개당 몇 %의 width값이 할당되어야 하는지 알 수 있습니다.

사용자가 첫 번째 질문에 대한 응답을 할 차례라면,

width 값은 ( 100 / 모든 질문의 개수 ) * 1 이 되어야 할 것입니다.

두 번째 질문에 대한 응답을 할 차례라면,

width 값은 ( 100 / 모든 질문의 개수 ) * 2 가 되어야 할 것입니다.

저희의 qIdx 값은 0부터 시작하기에 +1을 해주어 계산한 것입니다.

혹시 이해가 안되신다면, 모든 질문의 개수가 10개라고 가정하여 직접 계산해보시면 될 것 같습니다.

혹시 도움이 되셨을까요?

1. qIdx = 0:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (0 + 1)

   • (100 / 12) * 1

   • 약 8.33%

2. qIdx = 1:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (1 + 1)

   • (100 / 12) * 2

   • 약 16.67%

3. qIdx = 2:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (2 + 1)

   • (100 / 12) * 3

   • 약 25%

4. qIdx = 3:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (3 + 1)

   • (100 / 12) * 4

   • 약 33.33%

5. qIdx = 4:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (4 + 1)

   • (100 / 12) * 5

   • 약 41.67%

6. qIdx = 5:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (5 + 1)

   • (100 / 12) * 6

   • 약 50%

7. qIdx = 6:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (6 + 1)

   • (100 / 12) * 7

   • 약 58.33%

8. qIdx = 7:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (7 + 1)

   • (100 / 12) * 8

   • 약 66.67%

9. qIdx = 8:

   • (100 / endPoint) * (qIdx + 1)

   • (100 / 12) * (8 + 1)

   • (100 / 12) * 9

   • 약 75%

10. qIdx = 9:

    • (100 / endPoint) * (qIdx + 1)

    • (100 / 12) * (9 + 1)

    • (100 / 12) * 10

    • 약 83.33%

11. qIdx = 10:

    • (100 / endPoint) * (qIdx + 1)

    • (100 / 12) * (10 + 1)

    • (100 / 12) * 11

    • 약 91.67%

12. qIdx = 11:

    • (100 / endPoint) * (qIdx + 1)

    • (100 / 12) * (11 + 1)

    • (100 / 12) * 12

    • 정확히 100%