웹디자인기능사6 문제 06 퀴즈 이번 유형은 객관식(여러문제)-슬라이드형식이며 점수 확인이 가능합니다. 문제 06 Math.floor를 이용하여 점수를 문제수에 따라 소수점 없이 나오게 해줍니다. 틀린 문제를 모아서 빠르게 정리해봅시다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { ${question.answerType} 정답입니다! 틀렸습니다! 다음 문제 보기 🫠 } Javascript 코드 매개변수를 이용해 HTML요소를 반복해서 적어야 하는 고생을 없애줍니다. 0부터 카운트하니 quizInfo.length-1을 해주고 Math.floor와 quizCount, quizScore를 이용해 합격여부(60%)와 맞춘 문제수, 점수를 나타내줍니다. { // 문제정보 const quizInfo = [...]; const quiz.. 2022. 8. 25. 문제 05 퀴즈 이번 유형은 객관식(여러문제)이며 점수 확인이 가능합니다. 문제 05 count를 이용하여 문제를 세줍니다. 36문제 이상 "통과" / 미만 "불합격" 입니다. 원본 사이트 보기 원본 소스 보기 HTML 코드 { } Javascript 코드 push를 이용해서 forEach안에 HTML요소를 넣어줍니다. 이렇게 하면 한번만 적어도 됩니다. if와 count를 이용해서 36개 이상 맞은 사람만 합격처리 시켜줍니다. { // 문제정보 const quizInfo = [...]; let count = 0; const quizWrap = document.querySelector(".quiz__wrap"); const updateQuiz = () => { const exam = []; quizInfo.forE.. 2022. 8. 18. 문제 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 다음
