tutorial and docs

package.json

@@ -53,7 +53,7 @@
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-plugin-pwa": "^4.1.2",
-    "@vue/cli-service": "^3.0.4",
+    "@vue/cli-service": "^3.12.1",
     "@vue/eslint-config-prettier": "^5.0.0",
     "babel-eslint": "^10.0.1",
     "css-loader": "^3.2.0",

src/components/FgpeTour.vue

@@ -1,9 +1,22 @@
 <template>
-  <v-tour name="fgpeTour" :steps="steps">
+  <v-tour
+    id="fgpeTour"
+    name="fgpeTour"
+    :steps="steps"
+    :callbacks="{
+      onStop: onStopTour,
+      onSkip: onSkipTour,
+      onFinish: onFinishTour
+    }"
+    :options="{
+      highlight: false
+    }"
+  >
     <template slot-scope="tour">
       <transition name="fade">
         <template v-for="(step, index) of tour.steps">
           <v-step
+            id="fgpeTourStep"
             v-if="tour.currentStep === index"
             :key="index"
             :step="step"
@@ -65,7 +78,7 @@
                 color="#fff"
                 type="border"
                 class="btn-tour-finish"
-                v-if="tour.currentStep == tour.steps.length - 1"
+                v-if="tour.currentStep === tour.steps.length - 1"
               >
                 {{ $t("Tour.Finish") }}
               </vs-button>
@@ -81,40 +94,138 @@
 export default {
   name: "fgpe-tour",
   props: {
+    active: {
+      required: true,
+      type: Boolean,
+      default: () => false
+    },
     steps: {
       required: true,
       type: Array
     }
   },
-  mounted() {
-    this.$tours["fgpeTour"].start();
+  watch: {
+    async active(v) {
+      if (v) {
+        await this.$tours["fgpeTour"].start("0");
+        document.body.classList.add("v-tour--active");
+      } else this.$tours["fgpeTour"].stop();
+    },
+    steps(steps, oldSteps) {
+      if (!this.active) return;
+      /*const idx = this.$tours["fgpeTour"].currentStep;
+      this.$tours["fgpeTour"].stop();
+      setTimeout(() => {
+        this.$tours["fgpeTour"].start(
+          Math.max(steps.indexOf(oldSteps[idx]), 0) + ""
+        );
+        document.body.classList.add("v-tour--active");
+      }, 500);*/
+    }
   },
   methods: {
     currentSteps(tour) {
       return tour.steps.filter((step, index) => {
         return tour.currentStep === index;
       });
+    },
+    onStopTour() {
+      this.$emit("stop");
+    },
+    onSkipTour() {
+      this.$emit("skip");
+    },
+    onFinishTour() {
+      this.$emit("finish");
     }
   }
 };
 </script>
 
 <style lang="scss">
-.v-tour {
-  .v-step {
-    z-index: 55000;
-    background-color: rgba(var(--vs-primary), 1);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.5));
-
-    .v-step__arrow {
-      border-color: rgba(var(--vs-primary), 1);
-    }
+#fgpeTourStep.v-step {
+  z-index: 55000 !important;
+  background-color: rgba(var(--vs-primary), 1) !important;
+  border-radius: 0.5rem !important;
+  padding: 1.5rem !important;
+  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.5)) !important;
 
-    .vs-button-border:not(.btn-tour-next):not(.btn-tour-finish) {
-      border-color: rgba(255, 255, 255, 0.5) !important;
-    }
+  > .v-step__arrow {
+    border-color: rgba(var(--vs-primary), 1);
+  }
+
+  .vs-button-border:not(.btn-tour-next):not(.btn-tour-finish) {
+    border-color: rgba(255, 255, 255, 0.5) !important;
+  }
+
+  &.v-step--sticky {
+    max-width: 640px !important;
+  }
+}
+
+.v-step {
+  &.v-step--sticky {
+    max-width: 640px !important;
   }
 }
+
+#fgpeTourStep.v-step[x-placement^="top"] {
+  margin-bottom: 0.5rem;
+}
+
+#fgpeTourStep.v-step[x-placement^="top"] .v-step__arrow {
+  border-width: 0.5rem 0.5rem 0 0.5rem;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  bottom: -0.5rem;
+  left: calc(50% - 1rem);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#fgpeTourStep.v-step[x-placement^="bottom"] {
+  margin-top: 0.5rem;
+}
+
+#fgpeTourStep.v-step[x-placement^="bottom"] .v-step__arrow {
+  border-width: 0 0.5rem 0.5rem 0.5rem;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: -0.5rem;
+  left: calc(50% - 1rem);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#fgpeTourStep.v-step[x-placement^="right"] {
+  margin-left: 0.5rem;
+}
+
+#fgpeTourStep.v-step[x-placement^="right"] .v-step__arrow {
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  left: -0.5rem;
+  top: calc(50% - 1rem);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#fgpeTourStep.v-step[x-placement^="left"] {
+  margin-right: 0.5rem;
+}
+
+#fgpeTourStep.v-step[x-placement^="left"] .v-step__arrow {
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  right: -0.5rem;
+  top: calc(50% - 1rem);
+  margin-left: 0;
+  margin-right: 0;
+}
 </style>

src/components/card-list/CardListHeader.vue

@@ -8,6 +8,7 @@
         v-if="allowCreate"
         class="py-2 px-6 mr-4 rounded-lg cursor-pointer md:flex inline-block items-center justify-between text-lg text-base text-white bg-primary"
         @click="$emit('create')"
+        id="createButton"
       >
         <feather-icon icon="PlusIcon" svgClasses="h-4 w-4" />
         <span class="ml-2 text-base">{{ $t("CardList.Header.Create") }}</span>
@@ -16,6 +17,7 @@
         v-if="allowImport"
         class="py-2 px-6 mr-4 rounded-lg cursor-pointer md:flex inline-block items-center justify-between text-lg text-base text-primary border border-solid border-primary"
         @click="chooseArchive"
+        id="importButton"
       >
         <feather-icon icon="ArrowUpCircleIcon" svgClasses="h-4 w-4" />
         <span class="ml-2 text-base text-primary">{{
@@ -30,6 +32,7 @@
           v-if="sortingOptions.length > 0"
           vs-trigger-click
           class="cursor-pointer ml-4"
+          id="sortingFieldSelector"
         >
           <div
             class="px-6 py-2 border border-solid border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between"
@@ -66,7 +69,7 @@
             </template>
           </vs-dropdown-menu>
         </vs-dropdown>
-        <vs-dropdown vs-trigger-click class="cursor-pointer ml-4">
+        <vs-dropdown vs-trigger-click class="cursor-pointer ml-4" id="pageSizeSelector">
           <div
             class="px-6 py-2 border border-solid border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between"
           >
@@ -99,6 +102,7 @@
           icon-pack="mi"
           :icon="tableView ? 'view_list' : 'view_comfy'"
           @click="onViewChanged"
+          id="listViewToggle"
         ></vs-icon>
       </div>
     </div>

src/i18n/en.i18n.js

@@ -21,7 +21,8 @@ export default {
     Lights: {
       On: "Turn the lights off",
       Off: "Turn the lights on"
-    }
+    },
+    HelpTutorial: "Show help tutorial"
   },
 
   // auth pages
@@ -139,7 +140,64 @@ export default {
     Skip: "Skip",
     Previous: "Previous",
     Next: "Next",
-    Finish: "Finish"
+    Finish: "Finish",
+    Navbar: {
+      languageSwitch: "You can change UI language from here.",
+      searchButton:
+        "You can click here to filter results by some field values. Use <field>:<value> for fields" +
+        " whose value belongs to a well-defined set of possible values and/or any text for open text fields.",
+      themeButton: "You can switch between light and dark mode here.",
+      tutorialButton: "Use this button to toggle this contextual help.",
+      loginButton: "Click here to go to sign-in form.",
+      userAvatar:
+        "This is your identification. Click to open a dropdown to open user profile or exit session."
+    },
+    Projects: {
+      createButton:
+        "Click here to create a project. A project is just an organizational unit within AuthorKit, which can be " +
+        "exported/imported in different AuthorKit instances and shared among users within the same AuthorKit instance.",
+      importButton:
+        "Click here to import a project. A project archive contains a JSON metadata file describing the project, " +
+        "a folder <code>exercises</code> with all exercises in YAPExIL format, and a folder " +
+        "<code>gamification-layers</code> with all gamification layers in GEdIL format.",
+      sortingFieldSelector: "Choose a field and the order to sort results by.",
+      pageSizeSelector: "Select the size of the page.",
+      listViewToggle: "Toggle between the list and card views.",
+      pagination: "Navigate among results' pages.",
+      content:
+        "<p>Here are the projects that you can see.</p><p>Clicking in a row/card opens the project context, where" +
+        " you will be able to manage/view exercises and gamification layers.</p>"
+    },
+    Exercises: {
+      createButton:
+        "Click here to create an exercise. An exercise is a non-gamified task that the learners will solve, supported" +
+        " with feedback from the automated assessment system we load it into.",
+      importButton:
+        "Click here to import an exercise in a supported exercise format. AuthorKit uses YAPExIL format for exercises," +
+        " but it allows to import existing exercises in other formats such as SIPE and MEF. The same for exporting " +
+        "exercises.",
+      sortingFieldSelector: "Choose a field and the order to sort results by.",
+      pageSizeSelector: "Select the size of the page.",
+      listViewToggle: "Toggle between the list and card views.",
+      pagination: "Navigate among results' pages.",
+      content:
+        "<p>Here are the exercises of the project.</p><p>Clicking in a row/card opens the exercise form, where" +
+        " you will be able to edit/view exercise data and files. </p>"
+    },
+    GamificationLayers: {
+      createButton:
+        "Click here to create a gamification layer. A gamification layer is an envelope for a set of exercises that " +
+        "adds rules, rewards, leaderboards, and some mods to them.",
+      importButton:
+        "Click here to import a gamification layer in GEdIL format.",
+      sortingFieldSelector: "Choose a field and the order to sort results by.",
+      pageSizeSelector: "Select the size of the page.",
+      listViewToggle: "Toggle between the list and card views.",
+      pagination: "Navigate among results' pages.",
+      content:
+        "<p>Here are the gamification layers of the project.</p><p>Clicking in a row/card opens the gamification " +
+        "layer form, where you will be able to edit/view the gamification layer. </p>"
+    }
   },
 
   CardList: {
@@ -279,7 +337,8 @@ export default {
       DRAFT: "Draft",
       ANNOUNCED: "Announced",
       OPEN: "Open",
-      CLOSED: "Closed"
+      CLOSED: "Closed",
+      UNPUBLISHED: "Unpublished"
     },
     Public: "Public?"
   },
@@ -768,16 +827,18 @@ export default {
       A3: "A",
       Q4: "Q",
       A4: "A",
-      Q5: "Q",
-      A5: "A",
+      Q5: "How to create a project?",
+      A5:
+        '<p>See the video below</p><br/><video width="100%" controls><source src="{src}" type="video/mp4"></video>',
       Q6: "Q",
       A6: "A",
       Q7: "Q",
       A7: "A",
       Q8: "Q",
       A8: "A",
-      Q9: "Q",
-      A9: "A",
+      Q9: "How to create an exercise?",
+      A9:
+        '<p>See the video below</p><br/><video width="100%" controls><source src="{src}" type="video/mp4"></video>',
       Q10: "How to develop a source-code checker?",
       A10:
         "<p class='my-1'>A source-code checker is an external program that is invoked before dynamic correction to classify/process the program's source code. In this field you can write a command line to invoke a source-code checker and you may use these variables:</p>" +
@@ -847,8 +908,9 @@ export default {
         "<p class='my-1'>Use $FILE to refer to the absolute path to the script file.</p>",
       Q12: "Q",
       A12: "A",
-      Q13: "Q",
-      A13: "A",
+      Q13: "How to create a gamification layer?",
+      A13:
+        '<p>See the video below</p><br/><video width="100%" controls><source src="{src}" type="video/mp4"></video>',
       Q14: "Q",
       A14: "A",
       Q15: "How to define actions in rules?",