作業#47 期中測驗-NBA問答App

目的：期中測驗，練習製作出符合作業考核項目的App

期中作業的題目是製作出問答題的App並且要符合Peter文章內要求的技術考核項目，說到問答題我第一個想到的就是在很久以前在App Store下載玩過的一款關於NBA的問答遊戲，剛好今年也是對於NBA來說別具義的75週年，就來時做出一款關於NBA的問答App吧!

期中作業功能需求

1.製作選擇題 App，每題有四個選項。

2.答對一題加 10 分 。

3.畫面上顯示目前題目是第幾題。

4.自訂選擇題的資料型別。

5.題庫有 n 題，隨機出其中的 10 題，每次玩的時候題目順序都不一樣。( n > 10 )

6.包含多個頁面，至少有問題頁面和分數頁面。

7.利用 IBSegueAction & performSegue 將結果從問題頁傳到分數頁。

8.使用 UIAlertController 顯示 alert。

App功能說明

1. 共有三種主題可供選擇
2. 上方籃球內顯示目前第幾題，一共會有十題，每次遊玩會從資料中隨機取出十題作為題目
3. 右上角會有分數，每答對一題10分答錯不扣分，總分100分
4. 每題會有四個選項，每次遊玩即使題目相同選項順序也會有所不同

App架構說明

Storyboard

1. 由最右邊的主頁根據使用者所點選的遊戲主題去顯示不同的頁面
2. 主題有三種但主要分為兩種題型，文字題以及圖片題
3. 但兩種題型最後會顯示同一個結果頁面，告知使用者最終分數

程式

程式部分我使用MVC的模式去寫，但目前對MVC的概念還不是非常熟練，若有不對之處歡迎指教～

Model：TextQuestionData、ImageQuestionData、Game

View：Storyboard

Controller：Storyboard四個畫面的ViewController

程式說明

以下只會分享Model以及Controller的部分，View的部分可透過GitHub上去看看

Model

Model裡有關於文字題目、圖片題目以及進行遊戲的三個類別

TextQuestionData、ImageQuestionData

在Struct定義我們要的資料型別

1. question、questionImageName:這兩個型別設定為optional String，因為有文字題以及圖片題，一個只有文字題目一個只有圖片，所以其中一種情況會另一個為nil
2. options:選項是接受String的Array

生成兩個題目的類別(只截圖部分)

TextQuestionData裡包含了兩種主題的題目，NBA小知識以及NBA球隊主場

Game

questions:在遊戲開始時會傳入十道題

updateQuestion:用questionIndex作為索引值，拿出questions裡的題目以及選項跟答案

updateUI:讓拿出的題目跟選項以及questionIndex作為題號顯示到畫面上

checkAnswer:判斷選項上的文字跟答案是否相同

Controller

首頁

開頭動畫

1. 使用CGAnimateImageDataWithBlock做出Gif圖
2. 在Gif圖執行五秒後，使用UIViewPropertyAnimator讓螢幕外的View移動到想要的位子上
3. 移動過後的View會完全遮擋著Gif圖，因此動畫跑完後顯示Gif圖的ImageView移除

unwind Segue

在最後顯示結果後希望使用者能夠跳回首頁重新選擇主題，這裡可以設定uwindSegue，最後顯示畫面連接到這個unwindSegue就可以跳回來了，另外我們只純粹跳回來沒有要傳遞數據，所以裡面可以空著

製作十個問題

1. 在Controller裡生成兩個題目的物件
2. 聲明一個變數去裝隨機挑選的十個問題

1. 用enum列舉三個主題
2. 寫一個function去製作出題目，傳入主題模式
3. 每個模式都先將題目用Shuffle洗牌，然後傳入十道題目進我們聲明好的Array中

傳遞資料

1. 製作出十道題後，利用IBSegueAction將題目傳遞過去下一頁
2. 在tenQuestions傳給下一頁後，要將tenQuestions淨空，不然會一直累加下去

遊戲畫面

文字題以及圖片題基本上都是一模一樣的，所以我只拿文字題來示範

變數聲明

1. 建立一個Array接收從首頁傳來的十道題
2. 生成遊戲的物件
3. score使用didSet在改變後顯示到Label上

初始化遊戲

在viewDidLoad時將十道題給Game的questions，然後Game物件現在有了我們十道題目，就可以更新題目以及更新畫面

點選選項

1. 聲明兩個變數接受答案對或錯的時候，Alert要顯示的內容
2. 用Game裡面的checkAnswer檢查答案跟選項
3. 檢查目前到是否是最後一道題目去顯示不同的Alert

UIAlertController

1. 將呼叫Alert的方法寫在extension，這樣兩個繼承了UIViewController的遊戲畫面都能使用
2. 傳入三個參數alert的title跟message以及handler我們okAction按下後要執行的內容，這邊要加入@escaping在function跑完後我們才能使用裡面的功能

傳遞分數

用IBSegueAction將分數傳到最後一頁顯示結果

結果

1. finalScore去接收遊戲畫面傳來的分數
2. 然後用Switch判別分數，顯示什麼內容給使用者

unwindSegue

剛剛首頁的unwindSegue，在storyboard上按著control拉線上去最右邊的Exit就會跳出這個選單，就可以選擇回到首頁

遊戲畫面

作業連結：

Swift UIKit iOS App 入門測驗 1

GitHub連結：

GitHub - PogaHuang/Homework47NBAQA