- 자 오늘도 어제와 같은 페이지를 진행을 해보겠습니다.
- 숙제로 추가한 부분들을 볼 건데요 일단 시간이 가는데 그 시간이 초가 1의 자리일 때 0이 들어가서 자리 수를 맞춰주는 것과
- 점수를 매겨주는 것
- 이름을 입력했을 때 이름 값을 가져오는 3가지를 했습니다.
- 코드를 같이 보시죠
// 입력한 이름을 가져오기 -- 시작버튼을 누르면 작동되는 함수 안에 추가
cbtName.innerText = `${yourName.value}`;
// 점수 표시 ------------------------------
// 전역변수 추가
let quizScore = 0;
//제출하기 창을 누르면 작동되는 함수 안에 추가
// 정답을 맞추었을 때 quizScore더해주기 반복문 안의 if문에 추가
if(numberAnswer == question.answer){
cbtSelects[number].parentElement.classList.add("good");
quizScore++
cbtEndScore.innerHTML = `${Math.ceil((quizScore / questionLength) * 100)}`;
// 시간의 초가 10 보다 작을 때 초앞에 0을 추가하여 자릿수를 맞추어 줌
const displayTime = () => {
if(questionTimeRemain <= 0){
return "0분 00초";
} else {
let minutes = Math.floor(questionTimeRemain / 60);
let seconds = questionTimeRemain % 60;
if (seconds<10){
return minutes + "분 0"+ seconds + "초";
} else {
return minutes + "분 " + seconds + "초";
}
}
}- 예전에 해봤던 것들이라 생각보다 많이 어렵지는 않습니다.
- 사용자가 입력한 이름을 가져와서 원하는 자리에 넣어주는 것은 일단 가져올 input태그와 가져다 넣을 div태그의 선택자를 만들어 준 뒤
- value를 통해 input에 사용자가 입력한 값을 가져온 뒤 innerText 혹은 innerHTML를 통해 넣어주면 됩니당.
- 두번째는 점수를 표시해주는 것입니다.
- 저는 간단하게 일단 전역변수로 quizScore = 0라는 변수를 만들어준 뒤 정답이 맞았을 경우 quizScore를 하나씩 더해주었습니다.
- 그리고 맞은 문제의 수와 전체문제의 수를 나눠준 후 그것을 100 곱해주고 소수점 값을 올리거나 내려주면 끝!!
- 시간이 가는 것은 if문 안에 if문을 써서 해결을 했는데요 처음 if문은 시간이 남아있을 때와 다썼을 때를 나눠주었습니다.
- questionTimeRemain 라는 곳에 정해진 초(seconds)를 넣고 일초에 1씩 줄어들게 해주면 일단 타이머는 완성됩니다.
- 그리고 그 시간이 안남아있다면 0분 00초 가 나오게 해주었고 남아있다면 남은 시간을 60으로 나눈 것의 값을 분(minutes)으로 나눈것의 나머지를 초(seconds)로 선언해주었습니다.
- 그리고 두번째 if문에선 초가 10보다 작을 때와 10보다 클 때로 나누었는데 10보다 작다면 정해진 형식에서 초(seconds)앞에 0을 붙여주고 10보다 크다면 0을 추가 하지 않는 형식으로 해주었습니다.
- 끝!