[소리마당 Proj] OX Quiz 구현

Quiz List JSON 형식으로 받아오기

• Alamofire, SwiftyJSON 사용

사용한이유: 다른 데이터를 가져오는 코드보다 정말.. 간단 ㅎㅎ 했습니다.. [JSON] 형식으로 가져왔습니다.

 

viewWillAppear 함수에서 퀴즈리스트를 게임 시작 시에 가져왔습니다.

func requestQuizList() {
    AF.request(quizURL).responseJSON { response in
        if let value = response.value {
            let quizList = JSON(value).arrayValue
            self.quizList = quizList
            self.setQuiz(1)
        }
    }
}

issue 

quizURL 설정 중에 http://  를 붙이지 않아 데이터를 불러오지 못한 상황을 겪었습니다.

 

 

 

 

Timer 설정

var timer: Timer!
var timerLeft = 10

 

한 문제당 10초로 설정하였습니다.

 

startTimer()

func startTimer() {
    if timer != nil {
        resetTimer()
    }
    timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { t in
        self.timerLeft -= 1
        self.updateTimerLabel()
            
        if self.timerLeft == 0 {
            self.setAnimationView("error")
            self.resetTimer()
        }
    })
}

➡️  타이머가 0초에 다달으면 error 애니메이션 뷰를 출력하고 타이머를 리셋합니다.

 

updateTimerLabel() 

func updateTimerLabel() {
    let seconds = self.timerLeft
    UIView.transition(with: self.timerLabel, duration: 1, options: .transitionFlipFromRight) {
        if seconds > 0 {
            self.timerLabel.text = "\(seconds)"
        }
        if seconds < 4 {
            self.timerLabel.textColor = .red
        }
    } completion: { animated in
    }
}

➡️  타이머가 3초 아래이면 색을 빨간색으로 바꿉니다: 시간이 얼마 남지 않았다는 것을 알리기 위해서 표시하였습니다.

 

resetTimer()

func resetTimer() {
    timer.invalidate()
    timer = nil
    self.timerLeft = 10
    self.timerLabel.text = "10"
    self.timerLabel.textColor = .black
}

 ➡️  타이머 리셋 함수

 

 

 

 

Lottie Animation 추가

무료 애니메이션 추가

직접 애니메이션을 만들기 어려워 json 형식의 애니메이션 데이터를 쉽게 넣을 수 있는 lottie를 사용하였습니다.

 

answer 인자는 파일 이름을 correct.json   error.json 으로 설정해서 이름을 받았습니다.

correct.json 과 error.json 제작자가 달라 재생 시간이 다르기 때문에 시간을 맞춰주기 위해 스피드를 다르게 설정하였습니다.

func setAnimationView(_ answer: String) {
    animationView = .init(name: "\(answer)")
    animationView?.frame = view.bounds
    animationView?.contentMode = .scaleAspectFit
    animationView?.loopMode = .playOnce
    if answer == "correct" {
        animationView?.animationSpeed = 1.7
    }
    else {
    	animationView?.animationSpeed = 1.2
    }
    view.addSubview(animationView!)
    animationView?.play(completion: { finish in
        self.animationView?.removeFromSuperview()
        self.setQuiz(self.quizNumber + 1)
    })
}

➡️  completion : 애니메이션 재생이 종료되면 애니메이션 뷰를 지우고 다음 퀴즈를 설정하였습니다.

 

 

 

대략적인 로직

뷰가 로드되고
➡️  퀴즈리스트 불러옴 / 불러오면 스테이지에 따라서 1번부터 퀴즈를 설정

5번 반복 {
퀴즈가 설정되면 유저가 O, X를 선택하거나 10초가 지날 때까지 기다림
➡️  O, X 선택시 답에따라 애니메이션 뷰를 설정
➡️  10초가 지나면 틀린 애니메이션 뷰를 설정

애니메이션 뷰가 끝나면 다음 스테이지로 넘겨줌
}

5번까지 모두 완료하면 결과 창으로 이동

 

잘 짠 코드인지 못 짠 코드인지는 잘 모르겠습니다만.. 그래도 구현을 하면서 재밌었습니다 ㅎㅎ
JSON을 불러올 때 다른 파일에서 불러오는 형식으로도 코드를 짰었는데 왜인지 불러와지지 않아서.. 간단한 프로젝트라서 뷰컨에 구현하긴 했지만 아쉬움이 ㅠㅠ 

 

 

 

할일 

결과페이지 구현