Merge pull request #423 from avantifellows/scorecard

NEW: Scorecard for viewers!

jest.config.js

@@ -13,6 +13,6 @@ module.exports = {
     "!src/components/Vue2PortedPackages/**/*.{js,vue}",
     "!src/services/Testing/**/*.{js,vue}",
   ],
-  setupFiles: ["<rootDir>/jest.init.js"],
+  setupFiles: ["<rootDir>/jest.init.js", "jest-canvas-mock"],
   restoreMocks: true,
 };

jest.init.js

@@ -87,5 +87,13 @@ Object.defineProperty(window, "matchMedia", {
 
 // mock getBoundingClientRect
 global.document.getElementById = jest.fn(() => ({
-  getBoundingClientRect: jest.fn(),
+  getBoundingClientRect: jest.fn(() => {
+    return {
+      width: 100,
+      height: 100,
+    };
+  }),
+  setAttribute: jest.fn(() => {
+    return;
+  }),
 }));

package.json

@@ -19,6 +19,7 @@
     "@sentry/tracing": "^6.7.2",
     "@tailwindcss/forms": "^0.3.3",
     "axios": "^0.21.1",
+    "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "deep-eql": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
@@ -60,7 +61,8 @@
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4",
-    "vue-jest": "^5.0.0-0"
+    "vue-jest": "^5.0.0-0",
+    "jest-canvas-mock": "^2.3.1"
   },
   "eslintConfig": {
     "root": true,

src/assets/locales/en.js

@@ -30,7 +30,7 @@ export default {
     headings: {
       add_question: "Add a new question",
       subjective_question_warning:
-        "Subjective Questions are not included while calculating the accuracy in the dashboard",
+        "All answers to subjective questions are considered correct",
     },
     buttons: {
       home: "Home",
@@ -315,6 +315,20 @@ export default {
       enter: "Go Fullscreen",
       exit: "Exit Fullscreen",
     },
+    scorecard: {
+      greeting: "Hooray! Congratulations on completing the plio!",
+      metric: {
+        description: {
+          correct: "Correct",
+          wrong: "Wrong",
+          skipped: "Skipped",
+          accuracy: "Accuracy",
+        },
+      },
+      buttons: {
+        watchAgain: "Watch Again",
+      },
+    },
   },
   error: {
     404: "Page Not Found",

src/assets/locales/hi.js

@@ -30,7 +30,7 @@ export default {
     headings: {
       add_question: "एक नया प्रश्न जोड़ें",
       subjective_question_warning:
-        "डैशबोर्ड में सटीकता की गणना करते समय विस्तृत प्रश्न शामिल नहीं होते हैं",
+        "सब्जेक्टिव प्रश्नों के सभी उत्तर सही माने जा रहे हैं",
     },
     buttons: {
       home: "होम",
@@ -316,6 +316,20 @@ export default {
       enter: "पूर्ण स्क्रीन में प्रवेश करें",
       exit: "पूर्ण स्क्रीन से निकास लें ",
     },
+    scorecard: {
+      greeting: "प्लायो पूरा करने के लिए आपको बधाई!",
+      metric: {
+        description: {
+          correct: "सही",
+          wrong: "गलत",
+          skipped: "छोड़े",
+          accuracy: "यथार्थता",
+        },
+      },
+      buttons: {
+        watchAgain: "फिरसे देखें",
+      },
+    },
   },
   error: {
     404: "वेब पेज मौजुद नहीं हैं ",
@@ -341,7 +355,7 @@ export default {
       empty_title_placeholder: "कोई नाम नहीं",
     },
     mcq: "बहुविकल्पी",
-    subjective: "विस्तृत",
+    subjective: "सब्जेक्टिव",
     submitted: "निवेदन हो गया",
     dialogs: {
       share: {
@@ -377,7 +391,7 @@ export default {
       add_item: {
         published: "आप एक प्रकाशित प्लायो में नए प्रश्न नहीं जोड़ सकते",
         mcq: "बहुविकल्पीय प्रश्न जोड़ने के लिए यहां क्लिक करें",
-        subjective: "विस्तृत प्रश्न जोड़ने के लिए यहां क्लिक करें",
+        subjective: "सब्जेक्टिव प्रश्न जोड़ने के लिए यहां क्लिक करें",
       },
       item_editor: {
         buttons: {

src/components/App/EmbedPlioDialog.vue

@@ -214,7 +214,7 @@ export default {
       // class for the dialog box showing the embed codes
       return {
         "top-1/6": this.isPersonalWorkspace,
-        "top-1/100 xsm:top-1/20 bp-500:top-1/6": !this.isPersonalWorkspace,
+        "top-1/100 bp-360:top-1/20 bp-500:top-1/6": !this.isPersonalWorkspace,
       };
     },
     isCodeWithoutSSOCopied() {

src/components/App/SharePlioDialog.vue

@@ -10,7 +10,7 @@
       ></icon-button>
     </div>
 
-    <div class="px-4 xsm:px-8 bp-500:px-12 pb-8">
+    <div class="px-4 bp-360:px-8 bp-500:px-12 pb-8">
       <!-- title -->
       <p class="text-2xl text-gray-500 font-bold w-56 sm:w-80" data-test="title">
         {{ $t("editor.dialog.share_plio.title") }}

src/components/Collections/Table/Table.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col mx-2 xsm:mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-14">
+  <div class="flex flex-col mx-2 bp-360:mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-14">
     <!-- nav bar for table : table title and search bar -->
-    <div class="flex flex-col xsm:flex-row justify-between pt-4">
+    <div class="flex flex-col bp-360:flex-row justify-between pt-4">
       <!-- table title -->
       <div :class="tableTitleClass">
         <p class="whitespace-nowrap">{{ tableTitle }}</p>
@@ -231,7 +231,7 @@ export default {
         "flex flex-row space-x-2 text-base sm:text-lg md:text-xl xl:text-2xl font-bold p-2 items-center",
       // classes for the search bar container
       searchContainerClass:
-        "bg-white rounded-md flex shadow-md border focus:outline-none border-grey-light w-full xsm:w-2/3 sm:w-2/3 md:w-1/3 float-right mb-2 mt-2",
+        "bg-white rounded-md flex shadow-md border focus:outline-none border-grey-light w-full bp-360:w-2/3 sm:w-2/3 md:w-1/3 float-right mb-2 mt-2",
       // classes for search bar input box
       searchInputBoxClass:
         "w-full rounded-md text-gray-700 leading-tight p-2 pl-4 focus:outline-none focus:ring-0 border-none",

src/components/Editor/ItemEditor.vue

@@ -48,7 +48,7 @@
 
       <!-- add item button -->
       <icon-button
-        class="rounded-xl w-8 h-8 px-2 hidden xsm:block"
+        class="rounded-xl w-8 h-8 px-2 hidden bp-360:block"
         :iconConfig="addItemIconConfig"
         :buttonClass="addItemButtonClass"
         @click="removeSelectedItemIndex"

src/components/Items/Question/Body.vue

@@ -251,7 +251,7 @@ export default {
           "h-28 sm:h-36 md:h-48 lg:h-56 xl:h-80 w-1/2 bp-500:w-1/3":
             (!this.isPortrait && !this.previewMode) ||
             (this.isPortrait && !this.isFullscreen),
-          "h-20 xsm:h-24 bp-420:h-28 bp-500:h-36 sm:h-48 md:h-24 lg:h-32 xl:h-40 w-1/2": this
+          "h-20 bp-360:h-24 bp-420:h-28 bp-500:h-36 sm:h-48 md:h-24 lg:h-32 xl:h-40 w-1/2": this
             .previewMode,
           hidden: this.isImageLoading,
         },