#16 頁面間的資料傳輸 — 製作巴氏量表 App

來到我最期待的選擇題 App 的作業,這次來做一直很有興趣的醫療 App 吧!

巴氏量表用來評斷病人生活自理的程度,一共分成十個面向,每個面向根據程度不同給予不同分數,最低分是0分(完全依賴),而最高分是100分(完全獨立)。巴氏量表也是申請外傭的時候需要評估的重要條件之一。以往在評量表的時候,常常需要拿著一張紙一項一項勾選,這次想要做一個 App,可以直接手機或平板點選,快速計算總分。

分成三個畫面:首頁、問卷、及結果

這次使用到的技巧有:

  1. 頁面間的資料傳遞、從 segue 拉線產生 IBSegueAction function

2. struct 建立Q&A

3. switch 和 case 的運用

4. Outlet collection(選項按鈕)的運用

操作細節:

首先新增 File>Swift file,輸入 Q&A 需要的變數。由於選項有可能2~4項不等,參考過去學長姐方式,將「第三項option2」和「第四項option3」 做成Optional 的型別,加上問號。由於每個選項對應的分數也不同,另外給予每個選項相對應的分數 Score。

struct qna{
let question: String
let option0: String
let option1: String
let option2: String?
let option3: String?
let score0: Int
let score1: Int
let score2: Int?
let score3: Int?
}

接下來設定需要的變數,為避免每頁因改變答案、重複疊加各選項分數,我想到將各頁面設定一個暫定加總分數,從第一題到第十題,以及最後十題總分,設定一個 totalScore 的 Array : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]。另外設定一個變數是控制現在的題數:currentIndex: Int

接著將個別問題輸入 qna 的 Array 中,例如:

let qnas = [
qna(question: "一、進食", option0: "可自行使用餐具或輔具進食", option1: "需他人協助使用餐具或輔具進食", option2: "無法自行進食", option3: "", score0: 10, score1: 5, score2: 0, score3: nil),
qna(question: "二、移位(平躺到坐起、床鋪至輪椅)", option0: "可自行完成移位,不需任何協助", option1: "移位時需他人輕微協助,或有安全上之顧慮", option2: "可自行坐起,但需他人協助才能移位", option3: "需他人協助坐起,或需兩人幫忙方可移位", score0: 15, score1: 10, score2: 5, score3: 0),
...

將各個問題、選項、相對應的分數分別輸入欄位中。注意沒有的選項,輸入空集合 “ ”沒有的分數則為 nil

一進到問題畫面,設定為第一題:

override func viewDidLoad() {
super.viewDidLoad()

questionLabel.text = qnas[0].question
optionsButton[0].setTitle(qnas[0].option0, for: .normal)
optionsButton[1].setTitle(qnas[0].option1, for: .normal)
optionsButton[2].setTitle(qnas[0].option2, for: .normal)
optionsButton[3].isHidden = true
optionsButton[3].isEnabled = false
nextButtonView.isHidden = true

}

每次更改選項時,按鈕的顏色也隨之改變,這時其他按鈕顏色須回復正常。分數利用 totalScores 的 Array,設定每一頁的總分,由上一題的總分做累加,以免更改選項時重複計分。

@IBAction func option0Selected(_ sender: Any) {
optionsButton[0].backgroundColor = UIColor(red: 171/255, green: 174/255, blue: 211/255, alpha: 1.0)
optionsButton[1].backgroundColor = UIColor(red: 241/255, green: 201/255, blue: 196/255, alpha: 1.0)
optionsButton[2].backgroundColor = UIColor(red: 241/255, green: 201/255, blue: 196/255, alpha: 1.0)
optionsButton[3].backgroundColor = UIColor(red: 241/255, green: 201/255, blue: 196/255, alpha: 1.0)
totalScores[currentIndex+1] = totalScores[currentIndex] + qnas[currentIndex].score0
totalScoreLabel.text = "\(totalScores[currentIndex+1] )"
nextButtonView.isHidden = false
}

點選「下一題」的按鈕時,記得將選項按鈕全部歸零。這時需判斷下一題是否超過題數,沒有超過題數則可以進行下一題,超過題數則自動顯示結果頁(performSegue)。前兩個選項自動根據輸入內容顯示。

if currentIndex < 9 {
currentIndex+=1
questionLabel.text = qnas[currentIndex].question
optionsButton[0].setTitle(qnas[currentIndex].option0, for: .normal)
optionsButton[1].setTitle(qnas[currentIndex].option1, for: .normal)

後兩個選項需加上 if 判斷是否有內容:

if qnas[currentIndex].option2 == ""{
optionsButton[2].isHidden = true
optionsButton[2].isEnabled = false
optionsButton[3].isHidden = true
optionsButton[3].isEnabled = false
}else if (qnas[currentIndex].option2 != "") && (qnas[currentIndex].option3 == "") {
optionsButton[2].isHidden = false
optionsButton[2].isEnabled = true
optionsButton[2].setTitle(qnas[currentIndex].option2, for: .normal)
optionsButton[3].isHidden = true
optionsButton[3].isEnabled = false
}

最後結果頁依據分數判斷結果,使用 switch & case:

func resultByScore() {
switch score! {
case 0...20:
resultLabel.text = "結果:完全依賴"
case 21...60:
resultLabel.text = "結果:嚴重依賴"
case 61...90:
resultLabel.text = "結果:中度依賴"
case 91...99:
resultLabel.text = "結果:輕度依賴"
default:
resultLabel.text = "結果:完全獨立"
}

這樣就完成我們的巴氏量表 App 了~~

2021.04.30 新增功能:

  1. 新增 Navigation controller
  2. 最後一頁加上「再次測驗」的程式:回到 Navigation controller 的下一頁
@IBAction func testAgain(_ sender: Any) {
navigationController?.popToRootViewController(animated: true)
}

3. 中間測驗頁面改成 FullScreen,以免不小心滑到頁面取消所有答案

實際操作影片如下:

參考作業:(感謝大大)

GitHub在此:

--

--