codersforcauses
diff --git a/‎client/.vscode/settings.json‎
Lines changed: 2 additions & 1 deletion b/‎client/.vscode/settings.json‎
Lines changed: 2 additions & 1 deletion
diff --git a/‎client/assets/ambient_shapes.png‎
21.4 KB b/‎client/assets/ambient_shapes.png‎
21.4 KB
diff --git a/‎client/components/Quiz/AnswersBox.vue‎
Lines changed: 16 additions & 0 deletions b/‎client/components/Quiz/AnswersBox.vue‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎client/components/Quiz/Box.vue‎
Lines changed: 23 additions & 0 deletions b/‎client/components/Quiz/Box.vue‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎client/components/Quiz/MultiselectBox.vue‎
Lines changed: 21 additions & 1 deletion b/‎client/components/Quiz/MultiselectBox.vue‎
Lines changed: 21 additions & 1 deletion
diff --git a/‎client/components/Quiz/QuestionBox.vue‎
Lines changed: 17 additions & 0 deletions b/‎client/components/Quiz/QuestionBox.vue‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎client/components/Quiz/QuizButton.vue‎
Lines changed: 45 additions & 0 deletions b/‎client/components/Quiz/QuizButton.vue‎
Lines changed: 45 additions & 0 deletions
diff --git a/‎client/components/Quiz/ResponseBox.vue‎
Lines changed: 17 additions & 0 deletions b/‎client/components/Quiz/ResponseBox.vue‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎client/nuxt.config.js‎
Lines changed: 2 additions & 3 deletions b/‎client/nuxt.config.js‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎client/package.json‎
Lines changed: 1 addition & 0 deletions b/‎client/package.json‎
Lines changed: 1 addition & 0 deletions
@@ -5,5 +5,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
-  "headwind.runOnSave": false
+  "headwind.runOnSave": false,
+  "vetur.completion.tagCasing": "initial"
 }
@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-inline">
+    <label class="text-white mt-3 mr-5 text-l font-bold">{{ header }}</label>
+    <input class="p-4 m-0 w-[700px] h-2 rounded shadow-md" :type="inputType" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AnswersBox',
+  props: {
+    header: String,
+    inputType: String,
+  },
+};
+</script>
@@ -0,0 +1,23 @@
+<template>
+  <div class="mx-50 place-items-center shadow-md">
+    <div :class="`flex ${isCentered ? 'self-center' : ''}`">
+      <h1 class="w-full font-bold text-xl bg-green2 p-7 rounded-tl rounded-tr">
+        {{ title }}
+      </h1>
+    </div>
+
+    <div class="place-self-center bg-blue2 rounded-br rounded-bl w-fit">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  Name: 'Box',
+  props: {
+    title: String,
+    isCentered: Boolean,
+  },
+};
+</script>
@@ -18,7 +18,6 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
-
 export default {
   name: 'MultiselectBox',
   components: {
@@ -76,3 +75,24 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style>
+.beginQuizSelector .multiselect__tag,
+.beginQuizSelector .multiselect__option--highlight,
+.beginQuizSelector .multiselect__option--highlight::after {
+  background-color: #fcd47c;
+  color: black;
+}
+.beginQuizSelector .multiselect__tag i:hover {
+  background-color: #d19a24;
+  color: black;
+}
+.beginQuizSelector .multiselect__tags {
+  border-radius: 6px;
+  font-size: 16px;
+  border-width: 0px;
+}
+.beginQuizSelector .multiselect__placeholder {
+  margin-bottom: 0px;
+  padding-top: 0px;
+}
+</style>
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-inline mb-5">
+    <textarea
+      class="p-0 mx-5 w-[700px] h-[100px] rounded shadow-md"
+      :type="inputType"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuestionBox',
+  props: {
+    inputType: String,
+  },
+};
+</script>
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <button
+      :class="`inline-flex rounded-full shadow-sm 
+      ${colour} ${textColour} 
+      font-bold px-7 py-1`"
+    >
+      <slot />
+    </button>
+  </div>
+</template>
+
+<script>
+import Color from 'color';
+export default {
+  name: 'QuizButton',
+  props: {
+    colour: {
+      type: String,
+      default: 'bg-red',
+      validator(v) {
+        return v.startsWith('bg-');
+      },
+    },
+  },
+  data() {
+    return {
+      // Display white text on dark backgrounds & vice-versa
+      textColour: 'text-white',
+    };
+  },
+  mounted() {
+    // Get the class background colour via the final colour
+    const buttonColour = window
+      .getComputedStyle(this.$el)
+      .getPropertyValue('background-color');
+
+    if (Color(buttonColour).isLight()) {
+      this.textColour = 'text-black';
+    } else {
+      this.textColour = 'text-white';
+    }
+  },
+};
+</script>
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-inline">
+    <textarea
+      class="p-0 ml-[13px] w-[700px] h-[100px] rounded shadow-md"
+      :type="inputType"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AnswersBox',
+  props: {
+    inputType: String,
+  },
+};
+</script>
@@ -97,9 +97,7 @@ export default {
       local: {
         token: {
           property: 'token',
-          global: true,
-          // required: true,
-          // type: 'Bearer'
+          maxAge: 604800, // 7 days in seconds
         },
         refreshToken: {
           data: 'token',
@@ -115,5 +113,6 @@ export default {
         },
       },
     },
+    plugins: ['~/plugins/axios.js'],
   },
 };
@@ -22,6 +22,7 @@
     "@fortawesome/vue-fontawesome": "2.0.8",
     "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
     "@nuxtjs/axios": "5.13.6",
+    "color": "^4.2.3",
     "consola": "2.15.3",
     "core-js": "3.24.1",
     "nuxt": "2.15.8",
Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,6 @@`
`5`	`5`	`"editor.codeActionsOnSave": {`
`6`	`6`	`"source.fixAll": true`
`7`	`7`	`},`
`8`		`- "headwind.runOnSave": false`
	`8`	`+ "headwind.runOnSave": false,`
	`9`	`+ "vetur.completion.tagCasing": "initial"`
`9`	`10`	`}`