在前面的實作中，MedicalDataCleaner 已經能夠檢查缺失值、格式錯誤、數值異常、重複資料與一致性問題，並將各類問題的數量顯示在網頁上。
不過，當使用者看到多項統計數字時，可能還是需要花一些時間才能了解整體資料的品質狀況。
因此，今天的目標是建立一個簡單的資料品質分數，將檢查結果轉換成 0 到 100 分的指標，並搭配進度條呈現，讓使用者更容易掌握目前的資料品質。
一、計算資料品質分數
首先，使用PHP計算有問題的資料比例，再將其轉換為品質分數。

if ($totalRows > 0) {
    $qualityScore = max(0, min(100, 100 - $affectedRate));
} else {
    $qualityScore = 0;
}

這裡使用100 - $affectedRate計算分數，並透過max()和min()將分數限制在 0到100之間。
如果沒有任何資料，則直接將分數設為0，避免計算時發生除以零的問題。
本專案目前使用的公式為：資料品質分數 = 100 − 有問題的資料比例
需要注意的是，這是專案自行設計的簡易指標，並非正式的醫療資料品質標準。由於目前的受影響資料比例是以問題資料編號數除以資料總筆數計算，若資料存在重複紀錄，分數也可能受到影響。
二、顯示品質分數與進度條
利用PHP將分數顯示在網頁上，並將分數轉換為進度條的寬度。

$scoreDisplay = number_format($qualityScore, 1);
$scoreWidth = number_format($qualityScore, 1, '.', '');
echo '<div class="quality-score-card">';
echo '<div class="quality-score-header">';
echo '<div>';
echo '<h3>資料品質分數</h3>';
echo '<p>依照目前的資料品質檢查結果計算</p>';
echo '</div>';
echo '<div class="quality-score-number">';
echo $scoreDisplay . ' / 100';
echo '</div>';
echo '</div>';
echo '<div class="quality-score-track">';
echo '<div class="quality-score-fill" style="width: '
    . $scoreWidth . '%;"></div>';
echo '</div>';
echo '<p>目前有問題的資料比例：'
    . number_format($affectedRate, 1) . '%</p>';
echo '</div>';

其中，number_format()可以控制數字的顯示格式，讓品質分數保留一位小數。
進度條的寬度則根據$qualityScore動態調整。例如，分數為40分時，進度條的寬度就會是40%。
三、設定品質分數卡片條的樣式

.quality-score-card {
    background: white;
    border: 1px solid #dce5e2;
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0 28px;
}
.quality-score-number {
    font-size: 40px;
    font-weight: bold;
    color: #27675d;
}
.quality-score-track {
    height: 12px;
    background: #e5efec;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0 10px;
}
.quality-score-fill {
    height: 100%;
    background: #4c8b80;
    border-radius: 999px;
}

透過卡片、字體大小與進度條的搭配，讓資料品質分數成為網頁中容易辨識的資訊。