What is your question?
Aug 29, 2019
2
Level 5
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?
- 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.
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"
}
]
}
]
Please or to participate in this conversation.