Vue.js Simplified - Building FlashWord (#10)

In this part of the series we’ll pull together all the skills we’ve covered so far into building an actual iteration of our FlashWord game. As you’ll recall from Part 1 of this series, FlashWord is a flash card game intended to help people study vocabulary in a different language.

This accompanying note set serves as a summary of the key resources/points covered in the video.

Set up

To set up this example, I will clear out the existing options and template from our FlashWord demo thus far, giving us a blank slate.

I will also pull in some CSS which you can get a copy of here...

Below is an array of word data I’ll use.

Words data

words:
[
    {
        word_a: 'hola',
        word_b: 'hello',
        hint: 'greeting',
        answer: '',
        correct: false
    },
    {
        word_a: 'uno',
        word_b: 'one',
        hint: 'number',
        answer: '',
        correct: false
    },
    {
        word_a: 'gris',
        word_b: 'grey',
        hint: 'color',
        answer: '',
        correct: false
    },
]

Note that in the interest of simplicity, we’re only using three words to start. Obviously we’d want to expand this in a real iteration of this game. Additionally, in the future it would be more ideal if we pulled this data in from some external source such as a database or even a JSON text file. But again - we’re just keeping things simple to start.

Final code

You can see the final code for this application here: github.com/susanBuck/cws-code/vue-simplified/flashword

Bonus challenge

For additional practice, you can complete one or all of the following tasks:

• Add a reset button
• Add an option to show the hint for each word
• Add feedback letting the visitor know if their answer is incorrect
• Add an option to filter words by difficulty level that’s dependent on the length of the words
• Etc. for any other feature you can think to add