IT Dev Log

Angular 앱- 13. 퀴즈 결과 계산하기 모든 퀴즈에 대한 진행이 끝나면 Result 컨테이너를 active 시켜주면 된다. 결과 result 영역에 대한 css 추가 !important 는 다른 속성들 보다 우선 순위를 높게 주기 위함이다. 전에 question 의 수나 score 는 $scope 에 있기 때문에 percentage 만 계산하면 된다. index.html 로 돌아와서 result 부분을 수정한다. 실행결과 pecentage 를 소수점 1자리까지로 고정하기 위해서 .toFixed() 함수를 사용한다. 조금더 보기 좋은 포맷으로 변경했다. 끝.

Angular 앱- 12. 진행상태바 기능 추가하기 이미 진행상태바에 대해서 css 상태 정의가 끝났기 때문에, Progress 에 대한 class 만 추가해주면된다. class 추가는 inline condition statement 로 가능하고, 또 ng-class 를 통해서도 추가할수 있다. 이번 예제는 inline 방식으로 answered/unanswered, correct/incorrect 로 상태를 변경하는 방식을 적용했다.

Angular 앱- 11. Feedback 기능 추가하기 이번 포스팅에서는 피드백 기능을 추가해보자. 여기서는 ng-show 를 이용해서 특정 조건이 true 인경우에만 보여지도록 설정한다. 그리고 feedback 의 경우도 json 데이터파일에 있는 내용을 호출해서 사용할수 있게 변경한다. Continue 버튼 구현하기 Continue 버튼을 누르면 다음 문제로 넘어가야한다. 이를 위해서 selectContinue() 함수를 호출하고, 함수내에서 activeQuestion을 증가시켜주면 된다. selectContinue() function in quiz.js 실행 feedback 있는 문제만 correct / incorrect 와 feedback 을 함께 보여준다. 현재는 마지막을 문제를 풀고나면 다음..

Angular 앱- 10. 이미지를 보기로 사용하기 이번 포스팅에서 문제의 보기를 텍스트가 아닌 이미지를 사용해서 문제를 만드는 방법에 대해 작성한다. 기존에 작성한 코드에서 Answer 의 문제 타입이 image 인 경우, image 클래스를 추가해준다. 어떤 문제의 경우 보기 타입이 image로 되어 있는것을 확인할수 있다. angular 코드를 이용해서 image 추가하는 코드이다. 먼저 Answer.image 가 존재한다면 "image" 클래스를 추가하고, ng-style 또한 추가한다. 그리고 quiz.css 로 가서 image 에 대한 style 을 추가해 주면 된다. 아직 Next 버튼이 없어서 Begin 버튼 클릭시 항상 첫번째 문제가 실행되고 있다. image 가 있는 두번째 문제를 실행..

Angular 앱- 9. Quiz 앱의 질문과 보기 불러오기 시작하기 전에 기존에 실습하기 위해 만들었던 예제를 다음과 같이 정리한다. 질문과 답 1개만 남기고 모두 삭제한다. 진행상태바에서 했던것 처럼 question 클래스에도 ng-repeat 를 적용한다. 모든 문제에 대해서 반속에서 화면에 보여주기 위해서 ng-repeat 를 추가한다. 이제 각각의 루프에서 필요한 변수를 찾아서 화면에 표시해 주면된다. 다시 json 변수를 확인해 보고 question & answers 에 대한 내을 확인해서 html 에 적용한다. json 데이터의 answers 또한 반복된 구조로 되어 있기 때문에 ng-repeat 를 사용해서 이 부분을 호출해 온다. 현재까지 적용하고 화면을 확인해도 변경된 내용은 없다. 코..

Angular 앱- 8. Angular 를 이용해서 진행상태 구현 이전 포스팅에서 테스트 했던 totalQuestion 변수를 지우고 다음과 같이 div 태그를 추가한다. ng-repeat 는 배열로 가지고 있는 question 에 대해서 반복실행하는 구문이다. 반복시 각각의 데이터는 myQuestion 으로 접근가능하다. 화면을 다시 리프레시 하자. 그럼 5개의 데이터를 반복실행하면서 5개의 원이 그려진것을 볼수있다. ( ng-repeat ) intro 클래스 작업하기 intro 클래스의 경우, activeQuestion 의 값이 0 보다 작은 경우에만 보여지고, 그렇지 않으면 Qustion 에 대한 질문과 답이 보여지고 intro 클래스는 사라지게 한다. 이를 구현하기 위해서는 javascript 의..

Angular 앱- 7. Model_JSON 데이터 준비하기 퀴즈앱을 위해서 질문과 답을 관리하는 quiz_data.json 파일을 프로젝트 폴더에 생성한다. 잠시 여기서 JSON 파일 형식에 대해서 알아보자. JSON은 자바스크립트에서 object 를 관리하기 위해서 만들어졌지만, 현재는 모든 언어에서 공통으로 사용하는 하나의 인터페이스 사용되고 있다. 이제 실제도 quiz 앱에서 사용될 JSON 파일을 만들어보자. 같은 방식으로 모든 데이터를 입력한다. ( snippet.txt 파일에서 데이터 복사 ) json 파일에 대해서 검증해 주는 online 웹사이트가 있다. ( https://jsoneditoronline.org/ ) 전체 데이타를 복사해서 왼쪽에 넣으면, json 포맷에 맞는지 확인해서 오..

Angular 앱- 6. Angular 앱과 컨트롤러 설치 angular 사용을 위해서 자바스크립트 파일 / 컨트롤러는 준비한다. 자바스크립트 관련 파일들은 body 태그의 마지막에 위치한다. 이유는 html 에 있는 모든 내용을 먼저 화면에 보여주고 자바스크립트 파일을 로딩한다. 그렇지 않으면 자바스크립트 파일 로딩으로 보여지는 화면에 지연이 생길수 있기 때문이다. angular 와 quiz 용 자바스크립트 파일을 js 폴더 아래에 복사하고 만들어준다. quiz.js 파일 : angular 에서 html 코드를 제어하기 위해서 모듈을 호출해야 하는데, 'myQuiz' 라는 app 을 index.html 에서 찾아서 angular app 으로 선언한다. 이를 위해서 html 코드에서도 app 을 선언해주..

Angular 앱- 5. 진행 상태 표시하기 Progress 컨테이너 만들기 : 진행상태를 만들기 위해서 progress 영역 밑에 3개의 div 영역을 생성한다. Progress 스타일링하기 . Pseudo 코드 after 를 이용해서 progress::after 하나더 만든다. 이번 css 는 image 를 변 이부분은 퀴즈가 진행되면서 하나씩 마킹되는 부분이다. 지금 전체 모습은 다음과 같다. 문제 풀이의 진행을 한번 확인해 주시길 부탁드려요. 여기에 opacity : 0 를 추가하면 현재 링은 사라진다. 사실 화면에 존재하시만 화면에 표시되지 않게 한것이다. 문제에 따라서 상태를 다르게 설정해 보자. 현재 문제가 진행중이라면 on, 문제의 답이 제출된 경우는 answered 라고 지정한다. pro..

Angular 앱- 4.styling for feedback container 각 문제에 대한 피드백에 대한 내용을 추가한다. 피드백에 대한 내용과 버튼이 추가된 것을 확인할수 있다. 피드백에 대한 CSS 스타일을 작성한다. 피스백 스타일이 적용된 내용을 확인한다. 여기서 피드백을 숨기기 위해서 다음 스타일을 추가한다. 그럼 피드백이 히든으로 되서 화면에서 보이지 않게 된다. 여기서 사용자가 질문에 대한 답을 하게되면 feedback 이 다시 visible 상태로 변경되기 때문에 화면에 보여지게된다. 여기서 상태가 unanswered -> answered 로 변경되면 피드백이 자동으로 변경된다. 다시 화면에 나타난다. 이제 새로운 작업을 위해서 기존의 모든 작업을 옆으로 이동하고 새로운 작업을 준비한다...