File.vue

<template>
  <div>
    <div class="flex justify-between items-center w-full pr-5 h-24">
      <v-btn v-if="!getDrawer" icon @click="drawer = !drawer">
        <img
          src="@/assets/images/icons/Frame.svg"
          height="24"
          width="24"
          alt="image"
        />
      </v-btn>

      <h3 class="text-xl font-bold">{{ getLesson.topic }}</h3>

      <div class="flex gap-x-2 flex-grow-0 items-center">
        <button
          class="btn btn-secondary !border-gray-600 !text-gray-600 hover:!text-white hover:!bg-gray-600 active:!bg-gray-600"
          @click="checkAnswers"
        >
          {{ $t("app.lessons.check") }}
        </button>
        <button class="btn btn-secondary" @click="submit">
          {{ $t("app.lessons.continue") }}
        </button>
      </div>
    </div>

    <v-row v-if="form" class="px-3">
      <v-col md="6" sm="12" cols="12">
        <iframe
          :src="form.mainVideo"
          width="100%"
          height="300"
          frameborder="0"
        ></iframe>

        <h3 class="mt-10">Exercises</h3>

        <div
          class="word-translation mb-10"
          v-for="(item, index) in form.exerciseHtmlList"
          :key="index"
        >
          <h4>
            <span>{{ index + 1 }}.</span> {{ item.title }}
          </h4>
          <div
            :ref="`questions${index}`"
            class="htmlText"
            v-html="item.question"
          ></div>
        </div>
      </v-col>

      <v-col md="6" sm="12" cols="12">
        <iframe
          :src="form.mainVideo"
          width="100%"
          height="300"
          frameborder="0"
        ></iframe>
      </v-col>
    </v-row>
    <div v-else>No data is found</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Grammar",

  data() {
    return {
      form: null,
      answers: [],
      checkResults: [],
    };
  },

  computed: {
    ...mapGetters("lessons", ["getLesson"]),
    ...mapGetters("lessons", ["getLessonSubmission"]),
  },

  methods: {
    loadAnswers() {
      [...Array(this.form.exerciseHtmlList.length).keys()].forEach((index) => {
        this.answers[index] = [];

        const inputs =
          this.$refs[`questions${index}`][0].getElementsByTagName("input");

        [...inputs].forEach((input) => {
          this.answers[index].push(input.value);
        });
      });
    },

    async submit() {
      await this.loadAnswers();
      await this.$store
        .dispatch(
          "lessonPartOneSubmission/submitGrammarByLessonId",
          this.answers
        )
        .then(() =>
          this.$router.push(
            `/${this.$i18n.locale}/app/lessons/${this.$route.params.id}/1/listening`
          )
        )
        .catch((e) => this.errorMessage(e.response.data.message));
    },
    async checkAnswers() {
      await this.loadAnswers();

      this.$store
        .dispatch(
          "lessonPartOneSubmission/submitGrammarByLessonId",
          this.answers
        )
        .then(() => {
          console.log("hi");
        })
        .catch((e) => this.errorMessage(e.response.data.message));

      this.$store
        .dispatch("lessons/loadLessonSubmission", this.$route.params.id)
        .catch((err) => this.errorMessage(err.response.data.message));
    },

    async loadData() {
      try {
        this.form = (
          await this.$store.dispatch(
            "lessonPartOne/loadGrammarByLessonId",
            this.$route.params.id
          )
        ).data;
      } catch (e) {
        this.errorMessage(e.response.data.message);
      }
    },
  },

  async created() {
    await this.loadData();
  },
};
</script>

<style scoped lang="scss">
.div-input {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #384346;
}

.rounded-num {
  display: inline-block;
  text-align: center;
  background: #ffffff;
  height: 40px;
  width: 40px;
  border: 1px solid #f1f1f1;
  border-radius: 100%;
  font-weight: 600;
  font-size: 16px;
  line-height: 36px;
  color: #102c33;
}

label {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #384346;
}

h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #102c33;
  margin-bottom: 28px;
}
</style>