IT Dev Log

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 가 있는 두번째 문제를 실행..