diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..9def89e
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
diff --git a/src/components/SummaryStats.vue b/src/components/SummaryStats.vue
index 06b5df8..652c7d3 100644
--- a/src/components/SummaryStats.vue
+++ b/src/components/SummaryStats.vue
@@ -2,7 +2,10 @@
Summary
Your Score
-
{{ getScore }}
+
+
{{
+ displayScoreAsPercent
+ }}
Time Spent: {{ formattedDuration }}
@@ -18,11 +21,12 @@
import { mapGetters } from 'vuex';
import SvgIconContainer from './SvgIconContainer.vue';
import IconCheckmark from './icons/IconCheckmark.vue';
-
+import ProgressBar from './ProgressBar';
export default {
components: {
SvgIconContainer,
IconCheckmark,
+ ProgressBar,
},
props: {
data: {
@@ -37,6 +41,9 @@ export default {
countCorrect: 'quiz/countCorrect',
getScore: 'quiz/calcScore',
}),
+ displayScoreAsPercent() {
+ return this.getScore + '%';
+ },
formattedDuration() {
const durationArray = this.data.timeSpent.split(':');
const duration = [];
@@ -93,6 +100,9 @@ h3 {
.grade-details {
font-size: $text-size-up-1;
}
+.progress-bar-label {
+ letter-spacing: 1px;
+}
svg {
color: $color-salem;
}
diff --git a/src/store/modules/quiz.ts b/src/store/modules/quiz.ts
index 928c66e..15a30ab 100644
--- a/src/store/modules/quiz.ts
+++ b/src/store/modules/quiz.ts
@@ -23,7 +23,7 @@ type Getters = {
listQuestions(state: QuizStateInterface): Quiz['questions'];
countQuestions(state: QuizStateInterface): number;
countCorrect(state: QuizStateInterface): number;
- calcScore(state: QuizStateInterface): string;
+ calcScore(state: QuizStateInterface): number;
};
const getters: GetterTree & Getters = {
@@ -53,7 +53,7 @@ const getters: GetterTree & Getters = {
const totalQ = getters.countQuestions(state);
const correctQ = getters.countCorrect(state);
const score = (correctQ / totalQ) * 100;
- return Math.floor(score) + '%';
+ return Math.floor(score);
},
};