문제 페이지
<script>
// 선택자
const htest = document.querySelector(".htest");
const htestNum = htest.querySelector(".htest__number");
const htestChoice = htest.querySelector(".htest__choice");
const htestCount = htest.querySelector(".htest__count");
const htestDesc = htest.querySelector(".htest__desc");
let quizCount = 0;
let quizScore = 0;
// 문제 정보
const quizInfo = [
{
testcount: "하나",
desc: "보기보기",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "둘",
desc: "보기보기2",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "셋",
desc: "보기보기3",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "넷",
desc: "보기보기4",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "다섯",
desc: "보기보기5",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "여섯",
desc: "보기보기6",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "일곱",
desc: "보기보기7",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},{
testcount: "여덟",
desc: "보기보기8",
infoChoice: ["보기1","보기2"],
infoAnswer: "보기1",
},
];
const updateQuiz = (index) => {
let typeTag = `
${quizInfo[index].testcount}
`;
let questionTag = `
${quizInfo[index].desc}
`;
let choiceTag = `
<label for="choice1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
`;
let h4Tag = `
총 ${quizInfo.length - index}문제 남았습니다.
`;
htestNum.innerHTML = typeTag;
htestChoice.innerHTML = choiceTag;
htestDesc.innerHTML = questionTag;
htestCount.innerHTML = h4Tag;
// 퀴즈가 종료되었을 때 로컬 스토리지에 점수를 저장
const saveScoreToLocalStorage = () => {
// 점수를 백분위로 계산하여 저장
const calculatedScore = Math.ceil((quizScore / quizInfo.length) * 100);
localStorage.setItem("quizScore", calculatedScore);
};
// 퀴즈가 종료되었을 때 페이지 이동
const navigateToResultPage = () => {
saveScoreToLocalStorage(); // 점수를 로컬 스토리지에 저장
window.location.href = "hangeulTestResult.html"; // 결과 페이지로 이동
};
// 보기 클릭 이벤트 처리
const choices = document.querySelectorAll(".htest__choice label");
choices.forEach((choice, choiceIndex) => {
choice.addEventListener("click", () => {
// 사용자가 선택한 보기를 가져옴
const selectedChoice = quizInfo[quizCount].infoChoice[choiceIndex];
// 정답과 비교하여 점수 계산
if (selectedChoice === quizInfo[quizCount].infoAnswer) {
quizScore++;
}
// 다음 문제로 넘어감
quizCount++;
if (quizCount < quizInfo.length) {
updateQuiz(quizCount);
} else {
// 모든 문제가 끝났을 경우에 대한 처리
navigateToResultPage(); // 페이지 이동하여 점수 표시
}
});
});
};
updateQuiz(quizCount);
</script>updateQuiz 함수는 인덱스를 매개변수로 받아서 퀴즈의 내용을 업데이트합니다. quizInfo 배열에서 해당 인덱스에 대한 정보를 가져와서 HTML 태그로 변환하여 해당 요소들의 내용을 업데이트합니다.
saveScoreToLocalStorage 함수는 퀴즈가 종료되었을 때 사용자의 점수를 로컬 스토리지에 저장합니다. 점수는 백분위로 계산되어 저장됩니다.
navigateToResultPage 함수는 퀴즈가 종료되었을 때 결과 페이지로 이동합니다. 먼저 saveScoreToLocalStorage 함수를 호출하여 점수를 저장한 후, window.location.href를 사용하여 결과 페이지로 이동합니다.
보기를 클릭했을 때의 이벤트 처리는 choices 변수를 사용하여 보기 레이블 요소들을 선택하고, 각각에 대해 클릭 이벤트 리스너를 등록합니다. 사용자가 선택한 보기를 가져와서 정답과 비교하여 점수를 계산하고, 다음 문제로 넘어갑니다. 퀴즈의 마지막 문제일 경우 navigateToResultPage 함수를 호출하여 결과 페이지로 이동합니다.
마지막으로 updateQuiz(quizCount)를 호출하여 초기 퀴즈를 업데이트합니다.
결과 페이지
<script>
// 결과 페이지에서 로컬 스토리지에서 점수를 가져와 표시
const quizScore = localStorage.getItem("quizScore");
const scoreElement = document.querySelector(".hangeulTestResult__score em");
scoreElement.textContent = quizScore;
const h1Element = document.querySelector(".hangeulTestResult h1");
const h2Element = document.querySelector(".hangeulTestResult h2");
if(quizScore <= 30){
h1Element.textContent = "한국인 맞으세요?";
h2Element.textContent = "힘내세요! 더 많은 연습으로 한글 실력을 향상시킬 수 있어요!";
}
if(quizScore >= 31 && quizScore <=70 ){
h1Element.textContent = "그래도 국어시간에 졸진 않았나봐여 ㅋ";
h2Element.textContent = "ㄷㄷㄷ";
}
if(quizScore >= 70 ){
h1Element.textContent = "세종대왕이세요?";
h2Element.textContent = "걸어다니는 백과사전인줄 ㄷㄷ";
}
</script>localStorage.getItem("quizScore")를 사용하여 로컬 스토리지에서 퀴즈 점수를 가져옵니다.
scoreElement 변수는 퀴즈 점수를 표시할 요소를 선택합니다. textContent 속성을 사용하여 해당 요소의 내용을 퀴즈 점수로 설정합니다.
h1Element 변수는 결과 페이지에서 첫 번째 제목을 선택합니다. h2Element 변수는 결과 페이지에서 두 번째 제목을 선택합니다.
점수에 따라 동적으로 텍스트를 변경하기 위해 조건문을 사용합니다.
quizScore가 30 이하인 경우: 첫 번째 제목을 "한국인 맞으세요?"로 설정하고, 두 번째 제목을 "힘내세요! 더 많은 연습으로 한글 실력을 향상시킬 수 있어요!"로 설정합니다.
quizScore가 31에서 70 사이인 경우: 첫 번째 제목을 "그래도 국어시간에 졸진 않았나봐여 ㅋ"로 설정하고, 두 번째 제목을 "ㄷㄷㄷ"로 설정합니다.
quizScore가 70 이상인 경우: 첫 번째 제목을 "세종대왕이세요?"로 설정하고, 두 번째 제목을 "걸어다니는 백과사전인줄 ㄷㄷ"로 설정합니다.
이를 통해 결과 페이지에서 점수를 가져와 표시하고, 해당 점수에 맞는 텍스트를 동적으로 변경합니다.
