# All files / src/questions McqQuestion.vue

22.22% Statements 2/9
0% Branches 0/4
50% Functions 2/4
22.22% Lines 2/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97

    1x

    1x

     <template>
      <transition name="question">
        <div v-if="active" :class="['card', 'question', addClass]">
          <div class="card-header alert-light border-bottom border-light text-dark">
            <slot></slot>
          </div>
          <div class="card-body">
            <box v-if="showHint" type="tip">
              <slot name="hint"></slot>
            </box>

            <slot name="answers"></slot>
          </div>

          <div class="card-footer alert-light border-top border-light text-dark">
            <i v-if="state === 1" class="fa fa-times text-danger border-danger result-icon"></i>
            <i v-else-if="state === 2" class="fa fa-check text-success border-success result-icon"></i>

            <div class="float-right">
              <transition name="q-btn">
                <button
                  v-if="$slots.hint && !showHint && state === 0"
                  type="button"
                  class="btn btn-success q-btn"
                  @click="showHint = true"
                >
                  Hint
                </button>
              </transition>
              <transition name="q-btn" mode="out-in">
                <button
                  v-if="state === 0"
                  key="check"
                  type="button"
                  class="btn btn-primary q-btn"
                  @click="checkAnswer"
                >
                  Check
                </button>
                <button
                  v-else-if="questions"
                  key="active"
                  type="button"
                  class="btn btn-primary q-btn"
                  @click="gotoNextQuestion"
                >
                  Next
                </button>
              </transition>
            </div>
          </div>
        </div>
      </transition>
    </template>

    <script>
    import {
      STATE_WRONG,
      STATE_CORRECT,
    } from './QuestionConstants';
    import QuizQuestionMixin from './QuizQuestionMixin';
    import QuestionMixin from './QuestionMixin';

    export default {
      name: 'McqQuestion',
      mixins: [QuizQuestionMixin, QuestionMixin],
      data() {
        return {
          answers: [],
        };
      },
      provide() {
        return {
          answers: this.answers,
          answered: this.answered,
          qOptionType: 'mcq',
        };
      },
      methods: {
        checkAnswer() {
          const selectedAnswer = this.answers.find((answer) => answer.selected);
          if (!selectedAnswer) {
            return;
          }

          if (selectedAnswer.$props.correct) {
            this.state = STATE_CORRECT;
          } else {
            this.state = STATE_WRONG;
          }

          this.answered.value = true;
        },
      },
    };
    </script>