I am currently working on creating an exam page that features fill in the gap type questions. These questions have placeholders where students need to insert the correct words or phrases. The questions are fetched via an ajax request and consist of simple text with specific gaps for responses. Each question can contain one or more fill in the gap sections.
For example:
The cats are {black} and {white}, they also like {brown}.To convert this, I am utilizing Vue.js by replacing the placeholders with input fields:
<p>The cats are <input type='text' v-model='gap1'> and <input type='text' v-model='gap2'>, they also like <input type='text' v-model='gap3'>Currently, I have implemented a computed method in my component to dynamically add these input fields:
computed: {
addGapsField () {
let regex = /\{.*?\}/g
let match = ''
let updatedText = this.question
// loop through each match
while((match = regex.exec(updatedText)) !== null) {
updatedText = updatedText.replace(match[0],"<input type='text'>")
}
return updatedText
}
}
I am exploring methods to bind v-model to these dynamically generated input fields. If not v-model, I am open to other suggestions within Vue.js as well.