20210616 Quizzler project -1 & 2D array

 

먼저, main.storyboard에 있는

question label, true button, false button, progress bar를 viewcontroller.swift에 각각 IBOutlet으로 연결시킨다.

 

 

그리고,

true/false button에 대해 IBAction을 만들어준다 (type:UI button)

 

 

 

 

Challenge )

 

Main.storyboard - attributes inspector를 건드리지 않고,

어플이 실행되었을 때 첫 화면에

questionLabel의 내용이 'Question Text'가 아닌, 다른 Question이 뜨도록 코드를 수정할 것

 

 

->

viewdidload() 코드블럭에 questionLabel.text = "2 + 4 = 6" 작성함

 

 

 

----

 

 

IBOutlet 아래에 상수 배열으로 퀴즈를 만들어준다.

 

let quiz = [
	"4 + 2 = 6",
	"5 - 3 > 1",
	"3 + 8 < 10"
]

 

 

 

Challenge )

 

화면이 로드되었을 때 배열에서 1번째 퀴즈가 question label에 출력되도록 할 것

 

 

-> 

 

viewdidload() 코드블럭에

questionLabel.text = quiz[0] 입력

 

 

 

-----

 

 

quiz 배열에 들어있는 모든 Question이 출력되도록 하기 위해

우선, 변수 하나를 선언해주고

questionLabel.text = quiz[index]의 index 부분에 직접 숫자를 입력하는 것이 아니라, 그 변수의 이름을 넣어줄 것이다.

 

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var questionLabel: UILabel!
    @IBOutlet weak var progressBar: UIProgressView!
    @IBOutlet weak var trueButton: UIButton!
    @IBOutlet weak var falseButton: UIButton!
    
    let quiz = [
        "4 + 2 = 6",
        "5 - 3 > 1",
        "3 + 8 < 10"
    ]
    
    var questionNumber = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        questionLabel.text = quiz[questionNumber]
    }
    
    @IBAction func answerButtonPressed(_ sender: UIButton) {
    }
    
    
}

 

어플을 실행했을 때의 결과는 앞의 코드와 동일하지만,

훨씬 동적인 코드를 갖게 되며 앞으로 questionNumber 변수를 조작함에 따라 여러가지 question을 출력할 수 있게 되었다.

 

questionLabel.text = quiz[questionNumber]을 여러 번 사용할 것이기 때문에 따로 함수를 만들어준다. (updateUI)

 

 

 

//
//  ViewController.swift
//  Quizzler-iOS13
//
//  Created by Angela Yu on 12/07/2019.
//  Copyright © 2019 The App Brewery. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var questionLabel: UILabel!
    @IBOutlet weak var progressBar: UIProgressView!
    @IBOutlet weak var trueButton: UIButton!
    @IBOutlet weak var falseButton: UIButton!
    
    let quiz = [
        "4 + 2 = 6",
        "5 - 3 > 1",
        "3 + 8 < 10"
    ]
    
    var questionNumber = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        updateUI()
    }
    
    @IBAction func answerButtonPressed(_ sender: UIButton) {
        questionNumber += 1
        updateUI()
    }
    
    func updateUI() {
        questionLabel.text = quiz[questionNumber]
    }
    
    
    
}

 

 

 

---

 

 

 

2D array

 

 

 

 

Swift에서 2차원 배열은 위와 같이 구성되며, 각 항목은 동일한 자료형으로 구성되어야 한다.

 

위의 예시에서 만약 '9'라는 인자는 array[2][2]로 나타낼 수 있다.

 

array[i][j] 에서, 

[i] == outer array, [j] == inside array의 인덱스를 의미한다.

 

 

이러한 방법대로 quiz 배열을 2차원 배열로 만든다면

 

위와 같이 선언될 것이며,

이 배열을 사용하는 func updateUI()의 코드도 수정해줘야 한다.

 

 

updateUI를 통해 Question이 출력되어야 하므로 위와 같이 수정해준다.

 

 

 

------

 

 

이제, 2D array의 두 번째 항목인 정답과 사용자가 입력한 정답을 비교하는 기능을 넣어야 한다.

사용자가 선택한 정답이 뭔지 알아야 하고, 실제 정답(2D array)과 일치하는지 비교해야 한다.

 

 

 

@IBAction func answerButtonPressed(_ sender: UIButton) {
        
        let userAnswer = sender.currentTitle //True or False
        
        let actualAnswer = quiz[questionNumber][1]
        
        if userAnswer == actualAnswer {
            print("Right!")
        } else {
            print("Wrong!")
        }
        questionNumber += 1
        updateUI()
    }

 

 

위와 같이 코드를 수정하여서 해당 기능을 만들었다.

 

 

 

 

-----

 

실제로 여러 번 테스트해보면 어플에 버그가 존재하는 것을 확인할 수 있는데,

questionNumber가 실제 배열의 퀴즈 수보다 많아지는 경우 어플이 crash되는 것을 볼 수 있다.

 

이를 막기 위해 조건문을 사용해줬다.

 

 

무작정 questionNumber += 1 을 하는 대신

 

if questionNumber < quiz.count - 1 {
    questionNumber += 1
}
updateUI()

 

위와 같이 코드를 수정해줬다.

 

 

 

 

Challenge )

 

퀴즈의 마지막 항목을 끝낸다면, 다시 첫문제가 나타나도록 코드를 수정할 것

 

 

 

->

 

 

        if questionNumber < quiz.count - 1 {
            questionNumber += 1
        } else {
            questionNumber = 0
        }
        updateUI()