심심한 페이지를 벗어나기 위해(?) js 소스를 뿌려준다.
우리가 원하는 기능은 2개!
1. result 페이지를 띄워주기 전 로딩 화면을 띄워준다.
2. 유저의 점수와 전체 유저의 점수 평균을 비교해주는 그래프를 띄워준다.
출동!
1. result 페이지를 띄워주기 전 로딩 화면을 띄워준다.
우리가 원하는 화면.
요 로딩바를 3초가량 보여준 후 진짜 result 페이지의 내용이 뜨면 된다!
js로 로딩 화면을 만드는 데는 여러 가지 방법이 있는데...
여기서는 setTimeout 함수를 이용해 2.5초가 지나면 result 페이지 내용이 뜨도록 만들 예정.
result.html
로딩바 이미지와 글귀를 담은 div를 loading으로,
result 페이지 내용을 담은 div를 result_content로 이름 붙여준다.
result.js
우선 window.onload로 페이지 로딩이 완료되면 initall 함수를 작동!
$(".result_content").hide(); 로 result 페이지 내용은 우선 감춰둔다!
→ 그럼 이용자에게는 loading 부분, 즉 로딩바와 글귀만 보일 것이다.
다음은 setTimeout함수를 사용! 2.5초 뒤에 안의 함수를 작동시키는데...
작동되는 함수는? loading은 숨기고, 감춰뒀던 result_content는 보이고!
따라서 fadeOut()과 fadeIn()을 사용해 서서히 사라지고 서서히 나타나도록 만들었다.
(show와 hide를 쓰면 갑작스레 나타나고 없어지므로 fadeIn, fadeOut을 사용)
2. 유저의 점수와 전체 유저의 점수 평균을 비교해주는 그래프를 띄워준다.
와우... 유저의 점수는 PnuUser의 score에 저장되어 있다!
하지만 전체 유저의 점수 평균은? view에서 직접 계산해주자!
views.py
아항! 요 함수가 여기서 사용된 것!
우선 PnuUser.objects.all()로 PnuUser를 몽땅 가져온 후,
for문을 통해 모든 유저의 점수(i.score)를 받아온다!
빈 리스트인 scorelst에 하나씩 append!
그럼 scorelst에는 모든 유저의 점수가 담기게 된다.
전체 유저들의 점수 평균 = 전체 유저 점수 합 / 전체 유저 수 이므로...
average_score = round(sum(scorelst)/len(all_user)) 를 통해 average_score를 구할 수 있다!
혹시 소수점이 나오면 귀찮...을 수 있으니 round로 감싸줬다.
result.html
쨘. result.html에 두 개의 구역을 지정한다. scores와 bar_box.
bar_box 부분에는? 우리가 구현하고자 하는 점수 비교 그래프가 담긴다!
scores에는 {{html 템플릿 태그}}를 이용해 평균 점수와 문제를 푼 현 유저의 점수를 담아준다.
그런데 중요한 건...
요놈들은 이용자들에게 보이지 않는다! 따라서 display:none; !
아니 그럼 왜 적어둔 것??? → 얼른 js로 넘어가자.
result.js
와우! 길기도 하다!
코드를 뜯기 전, 요놈의 작동 원리는...
1. getElementById와 innerText를 통해 html상에 담긴 평균 점수와 유저 점수를 가져온다.
2. getElementById와 innerHTML을 통해 bar_box내에 그래프를 만들어 준다.
3. 이때 해당 그래프의 길이는 평균 점수와 유저 점수에 따라 %가 달라지도록!
또한 %에 따라 그래프가 서서히 증가하도록!
1. getElementById와 innerText를 통해 html상에 담긴 평균 점수와 유저 점수를 가져온다.
이를 통해 1번 성공!
최대 점수가 4점밖에 안돼서(현재는 네문제만 만들었다) 각 점수에 25를 곱해줬다!
(즉 딱히 필요는 없다)
2. getElementById와 innerHTML을 통해 bar_box내에 그래프를 만들어 준다.
제일 바깥쪽 setTimeout은 왜?
현재 로딩 페이지를 만들었기 때문에... result의 전체 내용은 2.5초 뒤에나 페이지 상에 나타난다!
따라서 우리가 구현하고자 하는, 그래프가 서서히 증가하는 모습도 2.5초 뒤에 시작돼야 한다!
3. 이때 해당 그래프의 길이는 평균 점수와 유저 점수에 따라 %가 달라지도록!
요 부분이 우리가 원하는 기능을 담당하는 부분!
제일 먼저 first_width를 0으로 지정. 또한 setInterval(frame, 50)을 통해 0.05초마다 frame이라는 함수를 작동시킨다.
그럼 이 frame이라는 함수는 뭘 하는디?
fisrt_width >=`${average_score_percent}` 이면, 즉 평균 점수가 first_width보다 작아지면...
clearInterval(id), 즉 setInterval 함수를 종료!
else면 → fist_width++를 해주고(1씩 증가),
score.style.width = first_width + "%"; 를 통해 html상 bar_box 부분의 width를 변경한다!!!
이게 무슨 말? first_width가 0부터 1,2,3... 으로 점점 증가하므로,
score의 width 역시 1%, 2%, 3%... 로 점차 증가한다!
→ 사람 눈으로 보면? 마치 그래프의 길이가 점점 늘어나는 것처럼 보인다! 와우!
점수와 first_width가 같아지면 함수가 종료되기 때문에 평균 점수만큼 그래프가 증가한다! 우와!
'source-code > Django' 카테고리의 다른 글
| 단위 테스트를 이용한 홈페이지 테스트 (0) | 2021.02.10 |
|---|---|
| debug-tool-bar 이용하기 (0) | 2021.02.09 |
| PNU Quiz App _ django로 퀴즈 구현하기2 (1) | 2021.02.01 |
| Django REST Framework _ 인증 기능 구현하기2 (0) | 2021.01.29 |
| Django REST Framework _ 인증 기능 구현하기 (0) | 2021.01.25 |
