Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

david001's avatar

Laravel Vue save Quiz result in database

Hello developers, i'm problem here. Actually i am implementing a simple quiz with laravel and vue js and want to save result of user choices in db. i want to save my final result to results table which has an attribute as

id,question,given_answer,true_answer,created_at,updated_at

what i want to achieve?

  1. when user click the next button i want to save current question, user chosen answer and correct answer in db.
  2. when user click the previous button and want to update his choice, changes should also be updated in db.

This is my Quizcomponent.vue file



<template>
    <div class="container">
        <div class="row justify-content-center">
{{questionAnswer}}
  <div v-for="(question, index) in questions":key="question.id">
    <div v-show="index === questionIndex">
      <h2>{{ question.name }}</h2>
      <ol>
        <li v-for="answer in question.answers":key="answer.id">
          <label :for="'answer-'+answer.id">
             <input type="radio" 
                   name="answer"
                   id="'answer-'+answer.id" @click="choose(question,answer)" 
                   >
          </label>{{answer.choice}}
        </li>
      </ol>
      <button v-if="questionIndex > 0" v-on:click="prev">
        prev
      </button>
      <button v-if="showNext" v-on:click="next(question)">
        next
      </button>
    </div>
  </div>

  <div v-show="questionIndex === questions.length">
    <h2>
      Quiz finished
    </h2>
    <p>
    </p>
  </div>




        </div>
    </div>
</template>

<script>
    export default {
        data:function(){
            return {
                showNext:'',
                questionAnswer:[],
                answerChosen: null,
                 questionIndex: 0,

                    questions: []

                }
        },
        mounted() {
//here i fetched list of questions with questions options
            console.log('Component mounted.')
            var app=this;
            axios.get('/question')
                .then(function (resp) {
                    console.log(resp)
                    app.questions = resp.data; 
                    console.log(resp)

                })
        },
            methods: {
              next: function(question) {
    //when user click next button i want to save result in db

                this.questionIndex++;
             //   this.questionAnswer.push({
                   //     question:question.id,
                       // answer:answers.choice
                  //  })

              },
              prev: function() {
//when user click prev button and update his answer want to update in db
                this.questionIndex--;
              },
              choose:function(question,answer){
                  
                this.showNext=true


              },
              score: function() {
               
              }
    }
    }
</script>

This is questions with options and correct answer fetched from db and push in questions[]


[
{
id: 1,
name: "What is the value of 2+2?",
created_at: "-0001-11-30 00:00:00",
updated_at: "-0001-11-30 00:00:00",
answers: [
{
id: 1,
question_id: 1,
choice: "2",
correct: "false"
},
{
id: 2,
question_id: 1,
choice: "4",
correct: "true"
},
{
id: 5,
question_id: 1,
choice: "3",
correct: "false"
},
{
id: 6,
question_id: 1,
choice: "5",
correct: "false"
}
]
},
{
id: 2,
name: "what is PHP?",
created_at: "-0001-11-30 00:00:00",
updated_at: "-0001-11-30 00:00:00",
answers: [
{
id: 3,
question_id: 2,
choice: "Hypertext Preprocessor",
correct: "true"
},
{
id: 4,
question_id: 2,
choice: "personal page",
correct: "false"
}
]
},
{
id: 3,
name: "what is js",
created_at: "-0001-11-30 00:00:00",
updated_at: "-0001-11-30 00:00:00",
answers: [
{
id: 7,
question_id: 3,
choice: "javascript",
correct: "true"
},
{
id: 8,
question_id: 3,
choice: "java server",
correct: "false"
}
]
}
]
0 likes
2 replies
david001's avatar

when user click the next button i want to save current question, user chosen answer and correct answer in db.

when user click the previous button and want to update his choice, changes should also be updated in db

Please or to participate in this conversation.