I am trying to build a quiz which when the user chooses a selection and submits the answer the notification div displays whether choice is correct or not. I have got this logic working however what is happening is the div is disappearing each time the next question is answered. I want to keep the previous question result on the screen and lock the user out of answering the question again and show the correct answer.

Here is what I have so far:

                  <div
                    
                    v-for="options in quiz"
                    v-bind:key="options.quizId"
                  >
                    <h3>{{ options.question }}</h3>
                    <div
                      
                    >
                      <label >
                        <input
                          type="radio"
                          :value="options.op1"
                          v-model="selectedAnswer"
                        />
                        {{ options.op1 }}
                      </label>
                    </div>
                    <div >
                      <label >
                        <input
                          type="radio"
                          :value="options.op2"
                          v-model="selectedAnswer"
                        />
                        {{ options.op2 }}
                      </label>
                    </div>
                    <div >
                      <label >
                        <input
                          type="radio"
                          :value="options.op3"
                          v-model="selectedAnswer"
                        />
                        {{ options.op3 }}
                      </label>
                    </div>
                    <div >
                      <label >
                        <input
                          type="radio"
                          :value="options.op4"
                          v-model="selectedAnswer"
                        />
                        {{ options.op4 }}
                      </label>
                    </div>
                    <div  >
                      <button  @click="call(options.id)">
                        Submit
                      </button>
                    </div>
                    <br />
                    <template v-if="options.id === quizId">
                      <template v-if="quizResult == 'correct'">
                         <template v-if="correctAnswer">
                        <div >
                          Correct. Well done!
                        </div>
                        </template>
                        <br />
                      
                      </template>
                      <template v-if="quizResult == 'incorrect'">
                        <div >
                          Incorrect. Please try again.
                        </div>
                        <br />
                      </template>
                    </template>
                  </div>

                                </div>
                          </div>
                        </div> <br>
                      </section>
                         </div>
                        </div>

                  <!-- <hr /> -->
                </template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      course: {},
      lessons: [],
      comments: [],
      activeLesson: null,
      errors: [],
      showModalFlag1: false,
      okPressed1: false,
      quiz: {},
      questionIndex: 0,
      loading: true,
      quizId: null,
      selectedAnswer: "",
      quizResult: null,
      correctAnswer: false,
      userScore: {
        username: '',
        lesson_id: '',
        lesson_score: '',
      },
      images: [
        {
          photo: "",
        },
      ],
      comment: {
        name: "",
        content: "",
      },
    };
  },
  methods: {

    call(id){
      this.submitQuiz(id);
      console.log('checkid@call',id)
    },
    submitQuiz(e) {
      console.log('check-id@submit', e)
      const quizArray = this.quiz;
      const choice = this.selectedAnswer;
      console.log('chosen: ', choice)

      const result = quizArray.filter( obj => obj.op1 === choice || obj.op2 === choice || 
                                      obj.op3 === choice || obj.op4 === choice)[0];
      console.log('result',result.id);

      for (const prop in result) {
          if ( result.hasOwnProperty(prop) ) {
            if (result.id == e) {
              this.quizId = result.id;
              if (choice == result.answer) {
                  this.quizResult = "correct";
                  this.correctAnswer = true;
                  
              }
         if(choice !== result.answer){
            this.quizId = result.id;
            this.quizResult = "incorrect";
         }
          }
        }
    }
    

    },

CodePudding user response：