JAVASCRIPT 47

퀴즈 이펙트 CBT 확인 유형 (보충)

퀴즈 이펙트 CBT확인 유형을 보충 하였습니다. 문제에 있는 정답 체크 들과 omr에 있는 정답 체크 들을 연동 시키기 위해 사용자가 체크를 하게 되면 체크된 정답의 값을 onclick의 answerSelect2을 통해 value를 가져 왔습니다. 그리고 그 value값 사이에있는 "_"를 구분자로하여 split 안에있는 숫자를 배열로 나워 주었습니다.그후 omr에 있는 전체 문항수를 가져오고 label 이라는 변수를 만들어 체크 되었을때 문제 밑에 있는 정답 4개중 하나를누르면 omr에 정답도 같은 숫자로 체크가 되게 할 수 있습니다. 밑에도 마찬가지로 omr을 눌렀을때 문제 밑에 있는 정답과 같은 번호로 체크가 되게 만들어 주었습니다. 그 후 남은 문제를 구하기 위해 체크한 값을 가져와 그값과 전체 ..

JAVASCRIPT 2023.04.04

퀴즈 이펙트 json을 이용한 CBT 확인 유형

Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 수험자 : 전체 문제수 : 1문항 남은 문제수 : 1문항 class의 cbt 부분과 omr 부분을 주석처리 하고 script 부분에서 반복하여 나오게 하였습니다. ·json에 있는 데이터를 불러와서 itmes로 저장해준후 map으로 json파일에있는 데이터를 하나씩 빼와 questionAll에 저장 해주었습니다. ·newQuestion의 익명함수를 만듣후 빈배열이 있는 변수 두개를 만들고 그안에 forEach를 이용해 questionAll에있는 문제의 내용을 가져와 각배열 안에 넣어주면 문제가 여러게 나오게 됩니다. ·정답을 확인하기 위해 우선 사용자의 체크한 답을 ..

JAVASCRIPT 2023.04.03

addEventListener()이벤트를 활용한 문제 풀어보기

1.마우스를 이미지에 오버하면 이미지가 바뀌게 하기 마우스 오버하면 이미지 랜덤으로 바꾸기 우선 텍스트와 이미지을 넣어줍니다. 그 후 상수 cover를 만들어 querySelector를 이용해 아이디가container안에 img에 값을 가져오거나 변경 할 수 있습니다. 또 하나의 상수 covers 를 만들어 마우스를 오버 했을때 바뀔 이미지들을 배열에 넣어줍니다. 그리고 이벤트 함수인 'addEventListener' 를 이용해 이벤트 용어중 하나인 'mouseover'를 이용해 마우스를 오버 했을때 cover에 있는 이미지 src를 covers에있는 배열의 이미지로 랜덤하게 바뀌게 해주었습니다. 그리고 마우스가 이미지를 벗어낫을때 다시 원래 이미지로 바꾸기 위해 'mouseout' 을 사용하였습니다. ..

JAVASCRIPT 2023.03.30

문자열 메서드에 대해서 알아봅시다.

문자열의 길이를 알고싶을때 (length) 문자열의 길이를 찾을 때는 배열에서 처럼 length를 사용하여 문자길이를 가져올 수 있습니다. { let str ="Good morning!"; let lang = "반갑습니다!"; console.log(str.length); console.log(lang.length); } //str.length 출력:13 //lang.length 출력:6 문자열에 포함된 "공백"도 문자열의 길이에 포함 됩니다. 문자열의 문자의 위치 활용하기 charAt(), indexOf () 메서드 문자열은 여러개의 문자가 나열 되어 있으므르 배열 처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정하고, 그 위치와 관련된 주요 메서드에는 charAt()메서드와 indexOf()메서드가..

JAVASCRIPT 2023.03.29

퀴즈 이펙트 객관식 여러문제 확인하기 슬라이드 유형

여러 문제를 한번에 보지 않고 다음 문제를 누르면 또 다른 문제가 나오게 하는 방법입니다. Quiz 객관식 여러 문제 확인하기 슬라이드 유형 1 2 3 4 5 6 맞힌갯수? 정답입니다! 틀렸습니다! 다음 문제 점수 확인하기 ghkddn132@naver.com //문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2008년 1회", infoNumber: "20080101", infoQuestion: "101101(2)의 2의 보수는 얼마인가?", infoChoice: ["110111(2)","110001(2)","111000(2)","010011(2)"], infoAnswer: "010011(2)", infoDesc: "2의 보수로 바로 바꾸는 방법..

JAVASCRIPT 2023.03.27

퀴즈 이펙트 객관식 여러문제 확인하기 유형

여러 문제 확인하기 유형에 대해 알아 봅시다 Quiz 객관식 여러 문제 확인하기 유형 1 2 3 4 5 6 ghkddn132@naver.com 이제는 body에 직접 html에 적는게 아닌 문제를 push()를 이용해 html을 넣어 줄거기 때문에 body부분은 다 주석처리를 해주었습니다. 우선 quiz__wrap에 html에 적었던 문자열을 넣어주기 위해 quiz__wrap의 선택자를 만들어 줍니다. 그후 익명함수 updateQuiz를 실행시킨후 그안에 상수를 만들어 exam에 배열안에 객체를 저장한 quizinfo를 넣은 quizWrap을 반복하기 위해 forEach문을 사용하였고 push를 와 (`) 키를 이용해 html에 주석으로 표시한 곳을 복사해 가져와 배열안에 객체인 quizinfo를 넣어야..

JAVASCRIPT 2023.03.25

검색 이펙트에 대해서 알아 봅시다.

1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction : 애니메이션 움직임 방향을 설정합니다. animation-duration : 애니메이션 움직임 시간을 설정합니다. a..

JAVASCRIPT 2023.03.23

마우스 이펙트 2 GSAP 사용하기

GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사이트의 소스를 가져와 보안해 주도록 합시다. 마우스 이펙트1 보러가기 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com GSAP의 사이트는 버벅거리는 애니메이션 효과를 부드럽게 만들어 주는 사이트 입니다. https://greensock.com/gsap/ G..

JAVASCRIPT 2023.03.21

마우스 이펙트3 조명 효과를 만들어 봅시다.

전에 올렸던 마우스 이펙트를 이용해 이번엔 조명 효과를 만들어 보겠습니다. 마우스 이펙트1 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com 마우스 이펙트 2 https://coding23213.tistory.com/50 마우스 이펙트 2 GSAP 이용하기 GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사..

JAVASCRIPT 2023.03.21

마우스 이펙트1 마우스 따라다니기

마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것은 치열한 전투이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ghkddn132@naver.com ※마우스 커서 만들기 기존마우스 커서를 대신할 마우스 커서를 만들어주었습니다. .mouse__coursor { position: absolute; left: 0; top: 0; width: 50px; heig..

JAVASCRIPT 2023.03.20