Implementing a dynamic quiz with randomized questions in Vue.js involves several steps. Below is a basic outline of how you can achieve this:
Set up your Vue.js project: Make sure you have Vue.js installed in your project. You can use Vue CLI to quickly set up a new Vue.js project.
Create a Quiz Component: Create a Vue component to represent your quiz. This component will contain the logic for fetching questions, randomizing them, and displaying them to the user.
Fetch Questions: You'll need to fetch questions from an API or store them locally. For simplicity, let's assume you have a JSON file containing the questions.
Randomize Questions: Once you fetch the questions, you'll need to randomize their order. You can use JavaScript's Math.random()
function to achieve this.
Display Questions: Render the questions one by one in your component. You can use Vue's v-for
directive to loop through the questions array and display each question.
Handle User Input: Implement functionality to handle user input (e.g., selecting answers). You can use Vue's data binding and event handling to accomplish this.
Calculate Score: Keep track of the user's score as they answer questions. You can update the score whenever the user selects an answer.
Display Results: Once the user has completed the quiz, display their score and any relevant feedback.
Here's a simplified example of how you might implement this:
html<template>
<div>
<div v-if="questions.length">
<div v-for="(question, index) in questions" :key="index">
<h2>{{ question.text }}</h2>
<ul>
<li v-for="(option, optionIndex) in question.options" :key="optionIndex">
<input type="radio" :id="'option-' + optionIndex" :value="option" v-model="selectedAnswer">
<label :for="'option-' + optionIndex">{{ option }}</label>
</li>
</ul>
<button @click="nextQuestion">Next</button>
</div>
</div>
<div v-else>
<p v-if="score === questions.length">Congratulations! You completed the quiz with a score of {{ score }}/{{ questions.length }}</p>
<p v-else>Fetching questions...</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
questions: [],
currentQuestionIndex: 0,
selectedAnswer: null,
score: 0
};
},
mounted() {
// Fetch questions from an API or JSON file
this.fetchQuestions();
},
methods: {
fetchQuestions() {
// Simulated API call or loading questions from a JSON file
setTimeout(() => {
// Example questions
this.questions = [
{
text: "What is 2 + 2?",
options: [3, 4, 5],
correctAnswer: 4
},
{
text: "What is the capital of France?",
options: ["Paris", "London", "Berlin"],
correctAnswer: "Paris"
},
// Add more questions here
];
// Randomize questions
this.questions = this.shuffle(this.questions);
}, 1000); // Simulate loading delay
},
nextQuestion() {
// Check answer and update score
if (this.selectedAnswer === this.questions[this.currentQuestionIndex].correctAnswer) {
this.score++;
}
// Move to the next question
this.currentQuestionIndex++;
// Reset selected answer
this.selectedAnswer = null;
},
shuffle(array) {
// Function to shuffle an array (Fisher-Yates shuffle algorithm)
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
}
};
</script>
In this example, the fetchQuestions
method simulates fetching questions from an API or JSON file. The shuffle
method is used to randomize the order of the questions. Each question is displayed one by one, and the user can select an answer for each question. The nextQuestion
method handles moving to the next question, checking the answer, and updating the score. Finally, the results are displayed once the user completes the quiz.