Post practice session report

packages/app/src/components/AnswerDescription.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="container q-mb-md">
+    <div class="col 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">
+      <!-- <img v-if="skipped" src="../public/img/loading.svg" class="img-container" />
+      <img v-if="correct" src="../public/img/tick.svg" class="img-container" />
+      <img v-if="!correct" src="../public/img/close.svg" class="img-container" /> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { QuestionReport } from "../store/practice/models";
+import { boolean } from "mathjs";
+export default {
+  props: {
+    question: {
+      type: QuestionReport,
+      required: true,
+    }
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 98px;
+  border-radius: 10px;
+  box-shadow: -2px 0px 2px 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 {
+  width: 80%;
+  margin-left: 20px;
+}
+</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;

packages/app/src/pages/PostPracticeSession.vue

@@ -0,0 +1,147 @@
+<template>
+  <q-page class="mobile-container">
+    <div class="config-header" />
+    <div class="column q-pb-lg">
+      <router-link to="/" class="absolute-top-left left-btn">
+        <q-btn flat round size="40px" class="btn-style">
+          <q-icon name="mdi-file-document-outline" size="50px" class="left-btn-icon" />
+        </q-btn>
+      </router-link>
+      <router-link to="/" class="absolute-top-right home-btn">
+        <q-btn flat round size="40px" class="btn-style">
+          <q-icon name="home" size="50px" class="home-btn-icon" />
+        </q-btn>
+      </router-link>
+      <span class="config-header-label text-center">Summary</span>
+      <span class="config-header-label config-sub-header-label text-center">Session Completed!</span>
+      <div class="full-width config-btn row justify-center">
+        <div class="config-btn-border">
+          <router-link to="/practice">
+            <q-btn flat size="25px" class="config-btn-style btn-style" rounded>
+              Play Again
+              <q-icon name="mdi-rotate-left" right />
+            </q-btn>
+          </router-link>
+        </div>
+      </div>
+      <div class="column q-ma-lg">
+        <div class="headings">Concepts Practiced</div>
+        <div class="row justify-center">
+          <q-chip
+            color="pink"
+            size="16px"
+            v-for="operator in operators"
+            :key="operator"
+          >{{ operator }}</q-chip>
+        </div>
+      </div>
+      <div class="column content-center">
+        <span style="width:80%" v-for="question in practiceAttemptedQuestions.questions" :key="question.question">
+          <AnswerDescription
+            :question="question"
+          />
+        </span>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { PracticeGetters } from "../store/practice/practice";
+import { mapGetters } from "vuex";
+import AnswerDescription from "../components/AnswerDescription.vue";
+
+export default {
+  computed: {
+    ...mapGetters({
+      operators: PracticeGetters.OPERATORS,
+      practiceAttemptedQuestions: PracticeGetters.PRACTICE_ATTEMPTED_QUESTIONS,
+    }),
+  },
+  components: {
+    AnswerDescription,
+  },
+};
+</script>
+
+<style scoped>
+.mobile-container {
+  width: 420px;
+  min-height: 85%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 599px) {
+  .mobile-container {
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+.config-header {
+  width: 140%;
+  height: 384px;
+  background: linear-gradient(0deg, #114489, #114489), #2f80ed;
+  border-radius: 50%;
+  margin-top: -192px;
+  position: absolute;
+  margin-left: -20%;
+}
+.config-header-label {
+  color: white;
+  font-size: 32px;
+  font-family: "Montserrat", sans-serif;
+  top: 24px;
+  z-index: 2;
+  position: relative;
+}
+.config-sub-header-label {
+  font-size: 24px;
+}
+.config-btn {
+  margin-top: 75px;
+  z-index: 2;
+}
+.btn-style {
+  color: #ffffff;
+  background: #2f80ed;
+}
+.config-btn-style {
+  border-radius: 30px;
+  top: -6px;
+}
+.config-btn-border {
+  background: #114489;
+  border-radius: 30px;
+  color: #ffffff;
+  z-index: 1;
+  width: 230px;
+  box-shadow: 0px 0px 5px grey;
+}
+.home-btn {
+  top: -35px;
+  right: -35px;
+}
+.home-btn-icon {
+  left: -15px;
+  bottom: -15px;
+}
+.left-btn {
+  top: -35px;
+  left: -35px;
+}
+.left-btn-icon {
+  right: -15px;
+  bottom: -15px;
+}
+.headings {
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 32px;
+}
+</style>

packages/app/src/router/routes.ts

@@ -8,7 +8,7 @@ const routes: RouteConfig[] = [
       { path: '', component: () => import('pages/HomePage.vue') },
       { path: 'practice', component: () => import('pages/PracticePage.vue') },
       { path: 'customize', component: () => import('pages/CustomizePracticePage.vue') },
-
+      { path: 'post-practice', component: () => import('pages/PostPracticeSession.vue') },
     ]
   }
 ];