<template>
<div>
<div>{{ passage }}</div>
<form>
<textarea v-model="typedText" @input="checkTyping"></textarea>
</form>
<div>{{ timer }}</div>
<div v-if="isFinished">Finished</div>
</div>
</template>
<script>
export default {
data() {
return {
passage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas lacus in enim congue, a commodo ipsum varius. Integer bibendum velit vel accumsan hendrerit. Nunc malesuada lacus vel velit facilisis consectetur. Sed bibendum erat euismod, fringilla nulla eu, tempor libero. Nam congue, magna id tincidunt feugiat, lectus eros blandit mi, sit amet congue ante odio a risus.',
typedText: '',
timer: 60,
intervalId: null,
isFinished: false
}
},
mounted() {
this.startTimer()
},
methods: {
startTimer() {
this.intervalId = setInterval(() => {
this.timer--
if (this.timer === 0) {
clearInterval(this.intervalId)
this.isFinished = true
}
}, 1000)
},
checkTyping() {
if (this.typedText === this.passage) {
clearInterval(this.intervalId)
this.isFinished = true
}
}
}
}
</script>
<div>
<div>{{ passage }}</div>
<form>
<textarea v-model="typedText" @input="checkTyping"></textarea>
</form>
<div>{{ timer }}</div>
<div v-if="isFinished">Finished</div>
</div>
</template>
<script>
export default {
data() {
return {
passage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas lacus in enim congue, a commodo ipsum varius. Integer bibendum velit vel accumsan hendrerit. Nunc malesuada lacus vel velit facilisis consectetur. Sed bibendum erat euismod, fringilla nulla eu, tempor libero. Nam congue, magna id tincidunt feugiat, lectus eros blandit mi, sit amet congue ante odio a risus.',
typedText: '',
timer: 60,
intervalId: null,
isFinished: false
}
},
mounted() {
this.startTimer()
},
methods: {
startTimer() {
this.intervalId = setInterval(() => {
this.timer--
if (this.timer === 0) {
clearInterval(this.intervalId)
this.isFinished = true
}
}, 1000)
},
checkTyping() {
if (this.typedText === this.passage) {
clearInterval(this.intervalId)
this.isFinished = true
}
}
}
}
</script>
Explanation: This code creates a typing test module with a timer and a passage. The user can type in the typedText textarea, which is bound to a data property in the Vue instance. The checking method is called on each input event and checks if the typed text is equal to the passage. If it is, the timer is cleared and the isFinished data property is set to true. The startTimer method starts a timer that decrements the timer data property every second and sets isFinished to true when the timer reaches zero. The timer and the isFinished status are displayed on the page.
Tags:
code in vuejs