Construct English dictation App for learners with JavaScript and Vue

We will create a web application for English learners to do dictation.


See the Pen English Dictation App by Masato Takamaru (@masato-takamaru) on CodePen.

You can click on an English sentence to hear it as audio.

  <script src=""></script>
  <div id="root"></div>
const en = "In recent years, governments around the world have been working to raise awareness about oral health. While many people have heard their teeth multiple times per day is a good habit, they most likely have not considered the reasons why this is crucial."
const RootComponent = {
  data () { return {
    sentence: en,
    text: setData(),    //initialization
    p: [],              //correct and incorrect
    showBackward: true, //show/hide the Back to previous button
    message: ''         //response
  template: `
    <p>Click the sentence, and you can listen to it:</p>
    <div @click="speak(sentence)">
        <span v-for="word in text.words">
          {{word+" "}}
        v-for="(option, index) in text.opt"
    <button v-show="showBackward" @click="backward">Back to previous</button>
  methods: {
    input(index) {
      this.text.optShow[index] = false;  //Hide the pressed button.
      //Replace the masked underline with the word you chose from the choices.
      this.text.words[this.text.mask[this.p.length]] = this.text.opt[index];
      this.text.record.push(index);   //Record the number of the button pressed.
      //If the string of the choice matches the that of the text, the answer is correct.
      if(this.text.optMask[index] == this.text.mask[this.p.length]) {
        //Add the string 'correct' to the array if it is correct
      } else {
        //If the answer is incorrect, add the string 'incorrect' to the array
      if(this.p.length == this.text.mask.length) {
        this.showBackward = false;  //Hide the "Back to previous" button.
        //Check if all elements of an array are correct.
        if(this.p.every(value => value == 'correct')) {
          this.message = 'All correct';
        } else {
          this.message = 'There are some errors.';
    speak(elem) {
      speechSynthesis.cancel();     //Cancel any audio that is playing.
      let uttr = new SpeechSynthesisUtterance();  //instance
      const voices = speechSynthesis.getVoices(); //Retrieving the voice list
      let voice;
      voices.forEach((elem) => {
        if( == 'Google US English') voice = elem;
      uttr.voice  = voice;          //Women's Voices
      uttr.volume = 1.0;            //Volume
      uttr.rate   = 0.8;            //Reading speed
      uttr.pitch  = 1.05;           //pitch
      uttr.lang   = 'en-US';        //language
      uttr.text   = elem;           //text
      speechSynthesis.speak(uttr);  //play
    backward() {
      if(this.p.length > 0) {
        //Delete the last element of the array and go back one.
        //Restore underlined words as they are entered
        this.text.words[this.text.mask[this.p.length]] = ' ____ ';
        //Show the button again.
        this.text.optShow[this.text.record.pop()] = true;
  mounted() {
    const uttr = new SpeechSynthesisUtterance();
    const voices = window.speechSynthesis.getVoices();
function setData() {
  let obj = {
    words: en.split(' '),   //Split the text into words.
    record: [],             //Record the order in which buttons are pressed.
    mask: [],               //Position of the word to mask
    opt: [],                //strings of buttons
    optMask: [],            //Position of the word the choice represents
    optShow: []             //Show/hide buttons
  let n = Array.from(Array(obj.words.length).keys()); //Array of sequential numbers
  for(let i = 0; i < 100; i++) {
    let a = Math.floor(Math.random() * n.length);
    let b = Math.floor(Math.random() * n.length);
    [n[a], n[b]] = [n[b], n[a]];
  //Number of words to mask: 1 word + 25% of the total
  let amount = 1 + Math.round(obj.words.length * 0.15);
  for(let i = 0; i < amount; i++) {
    obj.mask.push(n[i]);            //Add the position of the word to be masked
    obj.opt.push(obj.words[n[i]]);  //Add a string of choices.
    obj.optMask.push(n[i]);         //Add the position of the word the choice represents
    obj.optShow.push('true');       //Add button display
  obj.mask.sort((a, b) => a - b);
  //Replace masked words with underlines
  for(let i = 0; i < obj.opt.length; i++) {
    obj.words[obj.mask[i]] = ' ____ ';
  return obj;
const app = Vue.createApp(RootComponent);

Initially, execute the instance of speechsynthesis with mounted(). This is because the first getvoice() will fail. When you run getvoice() for the first time, you will get an empty array.

Words in a sentence have a 15% chance of being masked. The masked words will be displayed as buttons, and pressing them will replace the underlined words.

When you press the “back to previous” button, you will be taken back to the previous state. The buttons you press are recorded and the information is used to return to the previous state.