Extension 02 - Vue.js 1

[braughtg]

Extension 02 - Vue.js 1

In these extensions you will add modify and add some feature to the Flashword app as it existed at the end of Tutorial 02. In addition you will begin to work with the inline suggestion features of GitHub's Copilot AI.

Extensions Without AI

Use the familiarity with Vue.js and the flasword app that you gained from the tutorials to complete the tasks below. Do not use any AI tools for these tasks.

Tasks

1. The "Reset" button only appears if the user has checked an answer. However, they may have typed in an answer that they don't actually want to check. For this reason it would be nice to have the "Reset" button be visible all of the time. Change the flashword app so that the "Reset" button is always visible.
2. The visibility of a number of elements on the page is controlled using the v-if and v-else directives. As you learned in the Tutorial, the v-show directive can also be used to control the visibility of elements. The choice of which approach to use depends on a number of factors. In this case, it seems like using v-show is a better choice than v-if/v-else. Change the page so that it uses v-show instead of v-if/v-else to change the visibility of all of the elements without changing the behavior of the page.
   • Note: v-show does not work on template elements so you'll have to be a little clever.

VSCode and Copilot's Completion

The remaining sections in this Extension will introduce you to VSCode and Copilot's completions (Note that suggestions is often used as a synonym for completions). Completions have several advantages:

• They appear in context directly in the editor and are less disruptive to flow.
• They are free and unlimited.
• They are easy to accept or reject.
• Plain text or code comments can act as prompts.
• Multiple alternative completions are generated.

Copilot completions were disabled by default in your Codespace for the first few Tutorials and Extensions. Complete the following tasks to enable Copilot completions in your Codesapce.

Tasks

1. Open the "Quick Reference."
2. Scroll to the "Miscellaneous" section at the bottom of the page.
3. Follow the instructions for "Enabling Copilot."
4. Follow the instructions for "Setting up Completions."

Extensions using Completions

Figure out how to use completions to accomplish each of the tasks below. Try each one a few times to experiment with different types of completions and try different approaches. You may need to modify the completions given, but challenge yourself to type as little actual code as possible.

The point here is to build a sense for when each type of completion is most useful, so do not use any of Copilot's other modes (ask, agent, plan) or any other AI tools for these tasks.

Tasks

1. Someone who finds the flashword app may not know what its purpose is. Add some introductory text at the top of the page that introduces the app.
2. Currently the reset method resets the appearance of the user interface, but it does not fully reset the internal state of the app. This can lead to future bugs if new code comes to rely on the state that is not reset. Update the reset method so that it fully resets both the user interface and the internal state of the app.
3. Currently the text field where the user is to enter the translation for the word gives no indication of its purpose. One way of improving this is to use the placeholder attribute for the input element which displays ghost text in the field, indicating its purpose, when it is empty. Add placeholder text to the answer input.
4. While adding placeholder text will help most users, those using assistive technologies such as a screen reader may still experience more difficulty because the ghost text disappears when something it typed into the input. Improve the accessibility of the text field by adding a label element.
5. Playing a translation game that uses the same word every time is just not that fun. Modify the game so that you are asked to translate a randomly selected word each time the game is reset.

AI Reflection

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

1. How did forcing yourself to use completions change the way thought what was necessary to complete a task?
2. How did you decide whether to accept, modify, or reject a completion?
3. What do you feel that you gained and lost by using completions?

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