Adds ProgressBar component

calcScore getter needed to be updated to return a number to make it more usable

displayScoreAsPercent added to replicate original use of calcScore

Author: angeliquejw

src/components/ProgressBar.vue

@@ -0,0 +1,91 @@
+<template>
+  <progress
+    :max="max"
+    :aria-valuemax="max"
+    :aria-valuemin="min"
+    :value="value"
+    :aria-valuenow="value"
+    :aria-labelledby="label"
+  >
+    <div
+      class="progress-bar"
+      :aria-valuemax="max"
+      :aria-valuemin="min"
+      :aria-valuenow="value"
+      :aria-labelledby="label"
+    >
+      <div :style="styleObject"></div>
+    </div>
+  </progress>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      styleObject: {
+        width: this.value + '%',
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@mixin default-bar-styles {
+  background-color: $color-mystic;
+  box-shadow: inset 0 1px 2px 0 $color-regent-gray;
+  width: 100%;
+}
+$bar-color: $color-salem;
+
+progress {
+  @include default-bar-styles();
+  appearance: none;
+  border: none;
+  color: $bar-color;
+}
+
+progress::-webkit-progress-bar {
+  @include default-bar-styles();
+}
+
+progress::-webkit-progress-value {
+  background-color: $bar-color;
+}
+
+progress::-moz-progress-bar {
+  background-color: $bar-color;
+}
+
+.progress-bar {
+  @include default-bar-styles();
+  > div {
+    background-color: $bar-color;
+    height: 100%;
+  }
+}
+
+progress,
+.progress-bar {
+  height: 24px;
+}
+</style>

src/components/SummaryStats.vue

@@ -2,7 +2,10 @@
   <h2>Summary</h2>
   <div class="summary u-padding-horizontal-sm u-padding-vertical u-margin-bottom-lg">
     <h3 class="u-margin-top-none u-margin-bottom-sm">Your Score</h3>
-    <h4 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h4>
+    <ProgressBar :value="getScore" label="quiz-score" />
+    <span id="quiz-score" class="grade-details progress-bar-label u-margin-left-xs">{{
+      displayScoreAsPercent
+    }}</span>
     <span class="meta meta--duration">Time Spent: {{ formattedDuration }}</span>
     <SvgIconContainer width="24" height="24" icon-name="Success" aria-hidden>
       <IconCheckmark />
@@ -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;
 }

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<QuizStateInterface, StateInterface> & Getters = {
@@ -53,7 +53,7 @@ const getters: GetterTree<QuizStateInterface, StateInterface> & Getters = {
     const totalQ = getters.countQuestions(state);
     const correctQ = getters.countCorrect(state);
     const score = (correctQ / totalQ) * 100;
-    return Math.floor(score) + '%';
+    return Math.floor(score);
   },
 };