Extension 04 - Vue.js 3

[braughtg]

Extension 04 - Vue.js 3

In these extensions you will improve the Flashword (v2 with Vite) app by:

• implementing a hint feature.
• refactoring the way the number of correct words is computed to take better advantage of Vue's reactivity.
• optionally adding some other features.

In addition, you will gain additional practice using VS Code's IntelliSense, Copilot inline completions and Copilot's Ask agent.

Getting Started

You will start and work on this extension in the same way as you have for the previous extensions. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

Tasks

1. If you don't remember all of the steps for getting started and working on the extension tasks, you should review the relevant parts of the workflow using the links in the "QuickReference" document as necessary.

Self Check

1. Which steps do you still need to look up?
2. What can you do to commit more of those steps to memory?

Extension without AI

Use the familiarity with Vue.js and the flashword app that you gained from the tutorials to complete the tasks below. For these tasks you may code manually, use on-line documentation and use VS Code IntelliSense and Copilot inline completions, but do not use any other Copilot modes or AI tools.

Tasks

1. The words property in the Vue data contains an array of objects representing the word for the game. Each word has a number of properties including a hint. However, the hint property is not currently used in the game. Add code such that a hint checkbox appears below each answer input and that the hint associated with the word is shown if the box is checked.
2. If the hint checkbox and hint are not hidden when the correct answer is entered, fix the implementation so that they are.

Self Check

1. What causes your hint checkbox be replicated for each word in the user interface?
2. How is the visibility of the hint changed when the checkbox is checked and unchecked?

Extension using Copilot's Ask Agent

While the Flashword app works correctly, the way that a few of its features are implemented do not take full advantage of Vue's reactivity. In this extensions, you'll gain further practice using Copilot's Ask agent as you work to understand and refactor one of those implementations.

When all of the words have been correctly translated Flashword displays the message "Great work, you have completed all the words!" In the template you can see that this happens when the completed property becomes true. That is the correct behavior, however the way that the script manages the completed property manually instead of utilizing Vue's reactivity. Complete the tasks below to better understand this issue and refactor the implementation to better leverage Vue's reactivity.

Tasks

1. Use Copilot's Ask mode to understand why the way the script manages the correctCount property does not currently leverage Vue's reactivity and why that is a potential problem. Continue to ask Copilot questions until you understand the problem. As you ask questions, be sure to keep Copilot narrowly focused just on the correctCount property. If Copilot proposes a solution, don't implement it yet, you'll do that in the next tasks.
2. Now that you understand the problem, write a new prompt that uses what know to directly ask Copilot how to do the refactoring.
3. Check that the solution that Copilot gives you focuses narrowly on management of the correctCount property and does not change the management of any other properties.
4. Continue to interact with Copilot in ask mode until you have a solution that:
   a. only affects the management of the correctCount property.
   b. that you fully understand.
5. Implement Copilot's proposal to refactor the way that the correctCount property is managed.

Self Check

1. Why is the manual management of the completed property a potential source of bugs?
2. How does the refactored management of the completed property better utilize Vue's reactivity?
3. Do you see another instance of the same type of issue in the implementation?

Optional Extensions

There are so many different things that you could do to enhance the Flashword game, but there is only so much time. Here are a few optional extensions that you can try before moving onto the AI Reflection below. If you have the time an interest you can do any or all of them in any order for more practice with Vue and Copilot.

Tasks

1. Add a reset button to the game that resets everything to the initial start state for the game.
2. There is another instance in which a data property is being managed manually instead of leveraging Vue's reactivity. Refactor the implementation in the script to better utilize Vue's reactivity to manage this data property.
3. Currently if you type a correct answer and press Enter the word turns green to indicate that the answer is correct. However, if you type an incorrect answer and type Enter nothing happens. This is a little confusing and makes it seem like maybe the app is not working. Modify the app so that if the answer is incorrect the word turns a different color when you press Enter.
4. Add anything else you can think of! For each change you make, add a comment to your PR describing the change and then make it.

Self Check

1. Does making use of Vue's reactivity make it easier or harder for you to understand the implementation? Why?
2. Do you think it would make it easier or harder for a Vue expert to understand the implmentation? Why?
3. What was an unexpected complication that you ran into when working on one of these extensions? Why were you not able to anticipate that complication?

AI Reflection

Add a comment to your pull request for this Extension that addresses the following points:

1. Describe an instance when the AI tools gave you a response that was not directly useful (e.g., it was off topic, too broad, used language features that you did not know, or that worked in a way that you didn't immediately understand.).
2. Reflect on how you responded to the situation you described in 1 and discuss how the experience you gained might improve your future interactions with AI tools such as Copilot.

Turning in Your Work

Once you have finished all of the work in this extension you will need to officially submit it.

Tasks

1. Use the steps for "Completing an Extension" in the Extensions Workflow to submit your work.

---

This Extension is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License