Video Notes

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