인프런 커뮤니티 질문&답변

김한결님의 프로필 이미지

작성한 질문수

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

진행 상태 바 구현하기

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

21.04.04 15:13 작성

·

279

2

ㅠ.ㅠ 저만 이해못하는지 질문이없네요..

엔드포인트로 나누어서 인덱스+1 곱하시는 로직이

어떤 원리인지 궁금함미다...

답변 2

1

판다코딩님의 프로필 이미지
판다코딩
지식공유자

2021. 04. 04. 18:11

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

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

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

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

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

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

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

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

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

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

혹시 도움이 되셨을까요?

김한결님의 프로필 이미지
김한결
질문자

2021. 04. 04. 18:15

허으............... 친절한설명 감사합니다 ㅠㅠ

수알못인 저를 이해시켜주셔서 감사해요..

앞으로 프로그레스바는 저도 할수 있을것 같습니다 덕분에..

앞으로도 많은 강의 부탁드려요 진짜 너무최고에요..

꼭꼭 수강할게요 감사해요^^

0

jhyjhy968님의 프로필 이미지

2024. 01. 13. 00:34

  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%