Javascript응용_Effect34 문제 04 객관식 퀴즈 웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다. 이번에는 객관식 문제입니다. querySelector와 querySelectorAll을 통해 저장된 값들을 선택하며 for문이나 forEach문을 이용하여 편리하게 출력합니다. + updateQuiz 함수를 만들어서 문제출력과 해설숨기기를 묶어놓고 실행 시킵니다. + answerQuiz 함수를 만들어서 정답확인에 대한 값을 묶어 담습니다. + addEventListener함수 안에 answerQuiz함수를 넣어주어 정답 확인하기를 클릭할때 실행시켜줍니다. 문제 04 정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다. 오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다. 맞출 경우 해설이 나오지 않으며, 틀릴경우 해설을 .. 2022. 8. 8. 문제 03 다수의 퀴즈 웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다. 이전 문제와 달리 다수의 문제를 선택해 불러와야 하기 때문에 querySelectorAll을 통해 저장된 값들을 불러오며, 값을 개별적으로 출력하지 않고 for문이나 forEach문을 이용하여 편리하게 출력합니다. + addEventListener 함수로 클릭 했을때 값을 출력하도록 합니다. + if함수로 값에 대한 결과를 나눕니다. 문제03 정답 확인하기를 누르면 답이 나옵니다. 정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다. 오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다. 맞출 경우 정답이 나오지 않으며, 틀릴경우 정답을 보여줍니다. 원본 소스 보기 Javascript 코드 선택자, 문제정보, 문제출력, 정.. 2022. 8. 6. 문제 02 주관식 퀴즈 웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다. querySelector를 통해 저장된 값들을 불러오며, addEventListener 함수로 클릭 했을때 정답을 출력하도록 합니다. 여기에 if함수를 더해 정답과 오답에 대한 결과를 나눕니다. 문제02 정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다. 오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다. 원본 소스 보기 Javascript 코드 선택자, 문제정보, 문제출력, 정답 숨기기, 정답확인, 사용자 정답, 사용자 정답과 문제 정답 맞춰보기 단계로 구성되어 있습니다. { //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const qui.. 2022. 8. 4. 문제 01 퀴즈 웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다. querySelector를 통해 저장된 값들을 불러오며, addEventListener 함수로 클릭 했을때 정답을 출력하도록 합니다. 여기에 if함수를 더해 정답과 오답에 대한 결과를 나눕니다. 문제01 정답 확인하기를 누르면 답이 나옵니다. 원본 소스 보기 Javascript 코드 선택자, 문제정보, 문제출력, 정답 숨기기, 정답확인 단계로 구성되어 있습니다. { //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const q.. 2022. 8. 4. 이전 1 2 다음
