Post practice session report

packages/app/src/App.vue

@@ -6,7 +6,17 @@
 
 <script lang="ts">
 export default {
-  name: 'App'
+  name: 'App',
+  created() {
+    document.addEventListener("keyup", e => {
+    if (e.key == "d") {
+        [].forEach.call(document.querySelectorAll("*"), function(a) {
+        a.style.outline =
+            "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
+        });
+    }
+    });
+}
 }
 </script>
 

packages/app/src/components/AnswerDescription.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="row container q-mb-md">
+    <div class="col-5 question-container">
+      <div class="question-text">{{ question.question }}</div>
+      <div class="answer-text">
+        Given Answer: {{ question.answer }}
+        <br />
+        Correct Answer: {{ question.correctAnswer }}
+      </div>
+    </div>
+    <div class="col correctness-display">
+      <div class="column items-end content-around">
+        <img v-if="question.skipped" src="../assets/img/loading.svg" class="img-container" />
+        <div v-else>
+          <img v-if="question.correct" src="../assets/img/tick.svg" class="img-container" />
+          <img v-if="!question.correct" src="../assets/img/close.svg" class="img-container" />
+        </div>
+        <div class="answer-text">Took {{ question.duration }} seconds to answer</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { QuestionReport } from "../store/practice/models";
+
+export default {
+  props: {
+    question: {
+      type: QuestionReport,
+      required: true,
+    },
+  },
+  // computed: {
+  //   questionType() {
+  //     if (this.question.challengeType === Expression) {
+  //       return this.question.operators.join(', ')
+  //     } else return this.question.challengeType
+  //   }
+  // },
+};
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 98px;
+  border-radius: 10px;
+  box-shadow: -9px 0 #FDC97C, 0 2px 3px 2px #767676;
+  background: #ffffff;
+}
+.question-text {
+  font-family: Varela Round;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 32px;
+  /* identical to box height, or 178% */
+  color: #767676;
+  margin: 0 0 25px;
+}
+.answer-text {
+  font-family: Montserrat;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 18px;
+  /* or 180% */
+  color: #767676;
+  bottom: -10px;
+}
+.img-container {
+  height: 50px;
+  width: 50px;
+}
+.question-container {
+  margin-left: 20px;
+}
+.correctness-display {
+  margin-top: 15px;
+  margin-right: 20px;
+}
+@media screen and (max-width: 350px) {
+  .correctness-display {
+    margin: 15px;
+    margin-right: 10px;
+  }
+  .img-container {
+    height: 40px;
+    width: 40px;
+    margin-right: 35px;
+  }
+}
+</style>

packages/app/src/components/ClassicChallenge.vue

@@ -15,13 +15,14 @@ import ChallengeStreak from "./ChallengeStreak.vue";
 import ChallengeHeader from "./ChallengeHeader.vue";
 import {
   PracticeActions,
-  PracticeGetters,
-  PracticeOptions
+  PracticeGetters
 } from "../store/practice/practice";
+import { PracticeOptions } from "../store/practice/models"
 import { Operator } from "../engine/math_questions/expression/models";
 import { ChallengeType } from "../engine/models/math_question";
 import { mapActions, mapGetters } from "vuex";
 import Vue from "vue";
+// import { import } from "mathjs";
 
 export default Vue.extend({
   components: {

packages/app/src/pages/HomePage.vue

@@ -32,7 +32,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .config-header {
   width: 140%;
   height: 384px;