우당탕탕 코딩생활

기능 추가 마무리를 위한 기능 추가 입니다! 수험자 이름 입력과 정답 체크 기능입니다. 코드 분석을 해보겠습니다! const nameInput = document.querySelector(".cbt__view input"); const cbtResult = document.querySelector(".cbt__result"); let great = 0; const startQuiz = () => { cbtStart.classList.add("hide"); questionTime = setInterval(reduceTime, 1000); let youName = nameInput.value; cbtName.innerHTML = youName; } const answerQuiz = () => { let sc..

퀴즈만들기 0mr형식 체크 부분 연동하기 오늘은 지난 포스팅을 보충 하는 글을 써보도록 하겠습니다. 먼저 추가된 HTML입니다. 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처..

Script 오늘 만든 페이지는 스크립트 부분이 가장 중요하고 복잡하기 때문에 스크립트 부분만 살펴보도록 하겠습니다. 이 페이지에서는 데이터를 json으로 불러와서 작업했습니다. const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr") const cbtSubmit = document.querySelector(".cbt__submit") let questionAll = []; // 모든 퀴즈 정보 //데이터 가져오기 const dataQuestion = () => { fetch("json/gineungsaWD2023_01.json") .then(res => res.json())..

지난 포스팅에서는 여러개의 문제를 불러와 나열하는 형식이었는데요. 오늘은 답을 맞추면 넘어가는 형식으로 해보겠습니다! HTML 정답🥰 오답😩 다음 문제 퀴즈 만들기 4번과 동일한 형식이지만 객관식 부분을 주석 처리해주었습니다. 한 문제를 풀면 다음 문제로 넘어가야 하는 방식이기에 한 문제 한문제 모두에 객관식을 넣기보다는 자바스크립트에서 태그를 작성해 작업하기 위해 주석처리를 해주었습니다. Script const quizInfo = [ { infoType : "정보처리기능사", infoTime : "2008년 2회", infoNumber : "20080201", infoQuestion : "다음 논리회로에서 출력 f의 값은? ", infoChoice : ["-1", "0", "1/2", "1"], inf..

객관식 유형(여러개) 지난 포스팅에 이어서 객관식 유형을 여러개 추가해보도록 하겠습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 dripidea77@gmail.com 구조 기본적인 HTML을 띄고 있습니다. main 안의 구조를 살펴보겠습니다. quiz__wrap : 퀴즈 창 전체를 뜻합니다. 가장 상위에 있는 박스입니다. quiz__header : 퀴즈의 머리 부분을 뜻합니다. quiz__title : 제목을 의미하는 것으로 이 스크립트 내에서는 '정보처리기능사'와 '시험 날짜'를 의미합니다. quiz__question : 퀴즈의 질문입니다. dog__wrap : 정답에 따라 달라지는 개의 얼굴입니다. quiz__choice : 사용자가 선택하게 되는 객관식의 목록입니다. ..

객관식 확인하기 HTML 주관식을 해보았으니 이번에는 객관식 유형을 작성해보도록 하겠습니다. Quiz 객관식 확인하기 유형 1 2 3 4 5 정답🥰 오답😩 정답 확인하기 * div 태그에는 "quiz__choice" 클래스가 지정되어 있습니다. 이는 CSS나 JavaScript에서 해당 영역을 조작하기 위한 식별자로 사용됩니다. * label 태그는 각각의 선택지를 나타내는데, 이는 input 태그와 함께 사용됩니다. * input 태그는 라디오 버튼을 생성합니다. "type" 속성이 "radio"로 설정되어 있으며, "id", "name", "value" 속성이 지정되어 있습니다. * "id" 속성은 각각의 라디오 버튼을 식별하기 위한 고유한 식별자입니다. * "name" 속성은 라디오 버튼들이 그룹으..

강아지 이펙트 파헤치기 오늘은 강아지 이펙트의 자바스크립트 부분과 약간의 애니메이션 부분을 알아보려고 합니다. 먼저, 준비 해야할 것은 퀴즈 안에 들어가야할 정보들이 필요합니다. 어떤 종목인지, 언제 출제되었던 문제인지, 문제와 답 등을 먼저 정리해보도록 하겠습니다. 이 이펙트를 만들어 내기 위해 필요한 정보들은 아래와 같습니다. 시험종목 : 정보처리 기능사 시험시간 : 2011년 4회 문제번호 : 1 문제질문 : 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 ... 문제정답 : 가드밴드(Guard band) 문제설명 : 가드밴드(Guard Band)는 주파수분할 다중화 방식에서 ... 이 필요한 정보들을 이펙트 효과로 불러오기 위해서는 정보들을 데이터로 변환시켜주는 작업과 선택자인 query..

오늘은 주관식 유형을 추가해보도록 하겠습니다. HTML 작성 . script // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQusetionNum = quizWrap.querySelector(".quiz__question em"); const quizQuestion = quizWrap.querySelector(".quiz__question span"); const quizDesc = quizWrap.quer..

정답에 따라 표정이 변하는 강아지 퀴즈! 오늘은 정답을 맞추었을 때, 틀렸을 때 표정이 변하는 강아지를 만들어 보려고 합니다. 정답을 맞추었을 때는 웃는 얼굴, 틀렸을 때는 우는 얼굴을 하는 강아지입니다. 꼬리는 기본적으로 흔들리고 있어요! 그럼 코드를 먼저 작성해야겠죠? HTML 코드 먼저 보시죠!! Quiz 정답확인하기 유형 . // like or dislike를 삽입하며 표정을 바뀌게 합니다. 정답 확인하기 연변대비 dripidea77@gmail.com 기본 HTML 코드이며 css에 (정답을 맞추었을 때), (정답을 틀렸을 때)에 다른 표정의 코드를 작성해두었습니다. Css코드는 상당히 길기 때문에 생략하고 오늘의 포인트인 javascript를 보겠습니다. javascript 선택자와 문제 정보,..