on
javascript project #2 시험 템플릿 프로그램
javascript project #2 시험 템플릿 프로그램
UI 설계
1) 4가지 질문이 출제된다.
2) 각 항목을 선택한 후 Next 버튼을 클릭하면 다음 페이지로 넘어간다.
3) 질문지의 답을 클릭할 때마다 score점수가 올라간다.
4) 모든 질문지가 완성되고 난 후 score을 표기하고, Reload 기능을 구현한다.
주의사항
1) 선택을 하는 기능은 radio 버튼을 이용한다.
2) 선택 후 다음 화면을 넘어갈 때 체크항목을 없애는 기능은 input 태그의 checked속성을 이용한다.
3) 점수는 input태그의 id값과 데이터객체의 항목을 일치시켜 구동시킨다.
4) 버튼을 클릭할 때마다, 버튼의 addEventListener('click', ()=>{}) 메소드를 이용한다.
HTML
Countdwon Timer Quiz Application Qestion Qestion Qestion Qestion Next
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display;=swap'); *{ box-sizing : border-box; } body{ font-family : 'Poppins', sans-serif; background-color: #eec0c6; background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); background-size:cover; color : rgb(65, 62, 112); align-items : center; display : flex; margin : 0; margin-top : 100px; padding : 20px; flex-direction: column; flex-basis : max-content; } h1{ margin-left : 10px; margin-right : 10px; } ul{ margin-left : 10px; margin-right : 10px; list-style-type: none;; } button { width : 100%; height : 20%; border-radius : 10px; background-color : #7f5a83; color : rgb(163, 154, 154); font-size : 25px; } #button:hover { background-color : #0d324d; color : rgb(250, 249, 249); } #content-container{ width : 300px; height : 300px; margin : 0; display : flex; flex-direction : column; flex-basis : max-content; background-color : white; border-radius : 10px; }
JAVASCRIPT
const quizData = [ { question : 'Who is the best', a : 'Steve Jobs', b : 'David Bacham', c : 'Park Ju Sung', d : 'Sooyoung', correct : 'a' }, { question : 'Who is the most old?', a : 'Green Man', b : 'Blue hat man', c : 'Lee jae young', d : 'Park Soo Jin', correct : 'b' }, { question : 'Which company the highest value?', a : 'Samsung', b : 'Google', c : 'Facebook', d : 'Apple', correct : 'd' }, { question : 'Which country you live in?', a : 'Korea', b : 'Japan', c : 'Taiwan', d : 'US', correct : 'a' } ] const question_value=document.querySelector('#question'); const a_value = document.querySelector('#a_label'); const b_value = document.querySelector('#b_label'); const c_value = document.querySelector('#c_label'); const d_value = document.querySelector('#d_label'); const nextButton = document.querySelector('#button'); const quiz_ = document.querySelector('.quiz'); var answers = document.getElementsByName('radio'); var currentQuize = 0; var score = 0; //initial call; loadQuiz(); function loadQuiz(){ question_value.innerText = quizData[currentQuize].question; a_value.innerText=quizData[currentQuize].a; b_value.innerText=quizData[currentQuize].b; c_value.innerText=quizData[currentQuize].c; d_value.innerText=quizData[currentQuize].d; delSelected(); } function delSelected(){ answers.forEach((answer)=>{ if(answer.checked){ answer.checked = false; }else{ answer.checked = answer.checked; } }) } function getSelected(){ let answer = undefined; answers.forEach((answerEl)=>{ if(answerEl.checked){ answer = answerEl.id; } }); return answer; } nextButton.addEventListener('click', ()=>{ //get input.id(quizData.correct) const ans = getSelected(); if(ans){ if(ans===quizData[currentQuize].correct){ console.log(ans); score++; } currentQuize++; if(currentQuize you finished Score : ${score} Reload`; } } })
from http://incomeplus.tistory.com/137 by ccl(A) rewrite - 2021-09-17 15:01:59