아라의 WWW

어제와 비슷하지만 오늘 수정한 부분이 있어서 보충하고자 합니다. 점수 나오기(버튼 나오면 점수나오기) const answerQuiz = () => { const cbtHeaderScore = document.querySelector(".time_submit__score span") cbtHeaderScore.innerHTML = `총 ${Math.ceil((quizScore / questionLength)*100)}입니다!`; cbtScorebox.style.display = "block"; } 함수는 querySelector() 메서드를 사용하여 HTML 요소 중 클래스가 time_submit__score인 요소의 하위 요소인 span 요소를 선택하고, 해당 요소의 innerHTML 속성을 수정하여 퀴..

모달창 추가 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회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능사 2011년 5회 ..

HTML 2020년 1회 정보처리기능사 기출문제 수험자 : 노지영 전체 문제수 : 문항 남은 문제수 : 문항 제출하기 59분 10초 태그를 사용하여, 퀴즈의 틀을 만드는데 사용됩니다. 여기서 퀴즈의 제목, 문제, 보기, OMR 카드 등이 들어갑니다. 태그를 사용하여, 객관식 문제의 보기를 만듭니다. type="radio" 속성을 사용하여, 라디오 버튼 형태로 만듭니다. 객관식 문제에서는 보기 중 하나만 선택할 수 있기 때문에, 라디오 버튼이 사용됩니다. 그리고 마지막으로 제출하기 버튼과 시간을 나타내는 부분이 들어갑니다. SCRIPT 우선const 를 사용하여 변수 cbt, cbtQuiz, cbtOmr, cbtSubmit를 선언합니다. 이 변수들은 이후 DOM 요소를 참조하는 데 사용됩니다. let 키워..

html Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 jo0132@naver.com 이번에도 html은 앞서 했던 퀴즈 이펙트에 사용한 html을 사용하도록 합니다. 하지만 이번에는 몇문제가 남았는지 몇점인지가 나옵니다. 문자 정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : ["시간의 흐름", "연필의 갯수", "온도의 변화", "식물의 성장"], infoAnswer : "연필의 갯수", infoD..

선택자 const quizWrap = document .querySelector(".quiz__wrap"); let quizScore = 0; 문제 정보 // 문제정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : { 1: "시간의 흐름", 2: "연필의 갯수", 3: "온도의 변화", 4: "식물의 성장" }, infoAnswer : "2", infoDesc : "연필은 1.5개가 존재 하지 않으므로 디지털입니다" // 문제1 end },{ infoType : "정보처리..

html Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 jo0132@naver.com 우선 지금까지 만들었던 퀴즈 이펙트에서 여러 가지 보기중 하나를 선택하면 선택한 답이 정답과 동일한지 비교하는 객관식입니다. 우선 label로 보기를 만드는데 for이라는 속성으로 이름들 지정합니다. 또한 value로 값을 주어 번호를 매깁니다. script 우선 늘 그랬듯이 문제 정보에 키값과 원하는 정보를 객체에 저장합니다. 이때 우리는 객관식 문제를 만들기때문에 정답 선택지를 저장하기 위해 infoChoice라는 키값에 배열로 선택지를 저장합니다. 그 후 문제 출력부분에서 updateQuiz함수를 만들어 문제를 불러오는데 이때 innerHTML을 사용하여 html속성까지 불..

오늘 은 퀴즈 이펙트를 한페이지에 여러개를 넣어 한번에 풀 수 있도록 하려고 합니다. html . 정답입니다! 틀렸습니다! 정답 확인하기 html을 위와 같이 세개를 만들어 줍니다. 이는 한페이지에 3문제를 한번에 볼 수있도록 하는것으로 똑같은 이펙트를 html로 구현합니다. 선택자 const quizWrap = document .querySelector(".quiz__wrap"); const quizTitle = quizWrap .querySelectorAll(".quiz__title"); // 시험 날짜_시간 const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); // 문제 번호 const quizQuestion = quizW..

오늘은 주관식 정답 판별하는 문제를 만들어 보았습니다. 오늘은 사용자가 답을 직접 적고 정답의 유무를 판별 하는 페이지를 만들어 보겠습니다. html의 구조와 css는 어제 와 비슷해서 올리지는 않았습니다. 오늘은 자바스크립트 위주로 설명드릴려고합니다. 현재 페이지는 사용자가 답을 적으면 답을 적는 박스와 버튼이 사라지면서 답과 팁이 나오고 강아지의 표정이 바뀌는 페이지입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 jo0132@naver.com 이렇게 코딩합니다. 그중 javascript를 따로 이야기해보겠습니다. const quizWrap = document .querySelector(".quiz__wrap") const quizTitle = quizWrap .querySelector..

오늘은 강아지가 나오는 퀴즈화면을 만들어 보았습니다. reset.css 리셋은 먼저 제가 제작하려는 사이트들의 기본 셋팅을 의미합니다. 이번에는 csss파일로 만들어 제작하였습니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/elice/EliceDigitalBaeum.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; columns: #222; } ..