How to build a question and answer page

Sounds like you would use something like a Vue component. You'd pass all the questions to it and render the current question. You would have some state to determine what the current question is and use the next and previous buttons to change that state. Seems pretty straight forward.

You could expand it by having the component save progress through the questions. You might also want to use query parameters so a person could navigate directly to a particular question.

Yea sounds pretty straight forward if you think but it's not.

<template>
<div class="h-72 p-6">
                <p class="mb-6">{{ currentQuestion.question_text }}</p>

                <div class="flex items-center mb-4" v-for="(option, index) in JSON.parse(currentQuestion.options)" :key="index">
                    <input :id="'option' + index" type="radio" value="" v-model="selectedOption" :value="index" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2">
                    <label :for="'option' + index" class="ms-2 text-gray-900 dark:text-gray-300">{{option }}</label>
                </div>

            </div>


            <div class="flex justify-between w-full">
                <button @click="prevQuestion" :disabled="currentQuestionIndex === 0" type="button"
                        class="text-white w-24 bg-slate-900 hover:bg-blue-900 focus:ring-4 focus:ring-slate-700 font-medium rounded-lg text-sm px-5 py-2 mx-4  focus:outline-none">
                    Previous
                </button>
                <button @click="nextQuestion" :disabled="currentQuestionIndex === questions.length - 1" type="button"
                        class="text-white w-24 bg-slate-900 hover:bg-blue-900 focus:ring-4 focus:ring-slate-700 font-medium rounded-lg text-sm px-5 py-2 mx-4  focus:outline-none">
                    Next
                </button>
            </div>
</template>
<script>
export default {
    props: ['questions','quiz','questionsLenth'],

    data() {
        return {
            currentQuestionIndex: 0,
            selectedOption: null
        }
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentQuestionIndex];
        }
    },
    methods: {
        prevQuestion() {
            if (this.currentQuestionIndex > 0) {
                this.currentQuestionIndex--;
            }
        },
        nextQuestion() {
            if (this.currentQuestionIndex < this.questions.length - 1) {
                this.currentQuestionIndex++;
            }
        }
    }
}

</script>

That's what I have done so far, now I have problem with tracking what option the user selected for each question as correct answer.

Solved.