Angular 앱- 9. Quiz 앱의 질문과 보기 불러오기

Angular 앱- 9. Quiz 앱의 질문과 보기 불러오기

 

시작하기 전에 기존에 실습하기 위해 만들었던 예제를 다음과 같이 정리한다. 

질문과 답 1개만 남기고 모두 삭제한다. 

진행상태바에서 했던것 처럼 question 클래스에도 ng-repeat 를 적용한다. 모든 문제에 대해서 반속에서 화면에 보여주기 위해서 ng-repeat 를 추가한다. 

이제 각각의 루프에서 필요한 변수를 찾아서 화면에 표시해 주면된다. 다시 json 변수를 확인해 보고 question & answers 에 대한 내을 확인해서 html 에 적용한다. 

json 데이터의 answers 또한 반복된 구조로 되어 있기 때문에 ng-repeat 를 사용해서 이 부분을 호출해 온다. 

현재까지 적용하고 화면을 확인해도 변경된 내용은 없다. 코드 인스펙터를 이용해서 css 를 직접확인해 보면. 

실제 코드는 질문과 답이 반복해서 보여지고 있는 것을 확인할수 있다. 

 

"Begin" 버튼을 클릭하면 질문이 시작되고 index를 하나씩 증가하면서 다음 문제 넘어가게 구현해 보자. 가장 먼저 index번호에 맞게 질문과 보기가 화면에 나타나게 만들어보자. 

question 을 answered 상태로 지정하고 inline 함수를 추가한다. index 와 activeQuestion 의 번호가 같다면 active 상태가 되고, 아니면 inactive 상태를 나타낸다. 

이번에는 답을 클릭했을때 action 에 대해서 알아보자. 이 경우는 경우의 수가 많기때문에 javascript function를 사용해서 로직을 구현한다. ng-click 에 selelctAnswer 를 추가한다. 여기서 $parent.$index 는 Question 에 대한 변수이고, $index 는 answer에 대한 변수 이다. 

quiz.js

먼저, 테스트 목적으로 화면에서 보기를 클릭하면 해당 문제의 index 와 보기의 index를 alert 창을 통해서 알려주는 함수이다. 

이제 selectAnswer function 이 정상동작하는 것을 보았으니, 실제 코드를 작성해보자. 

quiz.js

 그리고 html 에서 question 에 대한 상태를 2개 추가한다. 첫째는 active / inactive, 그리고 answered / unanswered 이다. 

답을 선택해서 answered state 가 되면, feedback 에 대한 내용이 나타난다. 

화면에서 실제 어떤 답을 선택했는지, return 값으로 알려준다. 다음은 계속해서 해당문제의 정답을 알려주는 함수 이다. 

html 코드로 돌아와서, ng-class 를 사용해서 특정 class 를 추가해주는 angular 코드이다. 

isSelected / isCorrect 함수에서 true 값을 리턴하면 selected / correct 클래스를 class="ans" 에 추가해준다. 

 

오답을 선택한 경우

정답을 선택한 경우

끝..