Homework 8 - Evil Words, Angular Edition

Due: Tuesday, December 5, 2023 at 11:59pm

This assignment must be completed individually.

Purpose:

  • Gain experience with Angular

Overview

For this homework, you must work independently. You will implement a Wordle-like game that picks a random target word from a list of possible words, then allows the user to guess the word and provides feedback on correct letters. Unlike Homework 6, you must implement this version using Angular; however, you may find that your Homework 6 code is helpful when completing this application.

Evil Words Requirements

Based on the success of our prior Word Guessing Game, aka Homework 6, we’re updating our implementations to improve maintainability! Just like our prior version, words can be any length and we’re giving more cryptic clues, however this time we will be using a front-end framework (Angular).

Our new version will consist of at least one component that displays the current game. The user will be presented with a text box to enter their guess. Once the user enters a guess, if they are incorrect, the view will be updated, adding their previous guesses and how close they were. That is, we’ll tell the user how many characters in their guess were in the correct position, how many characters in their guess were in the target word, and whether their word was longer, shorter, or the same length as the target word. Users may continue guessing until they guess the word.

For this assignment, you must implement the following components. (You may implement more functionality if you wish, for example by telling users which letters they have in the right spot, but remember that we’ll be grading on effort in implementing these components below.)

Requirements

Server-side Components

  1. Write a wordle_api.php back-end file that returns a random word from our CS4640 wordle word list in a JSON object.
    • Read in the word list directly from our CS4640 Word Bank. You should not save this list, but open this URL directly from your PHP code.
    • Your back-end should choose a word at random from the bank and use that as the target word, then return a JSON file containing that word. Remember that for PHP to serve as a JSON api, you will need to modify the HTTP header and echo out JSON.

Front End Framework

  1. Write your client-side application using Angular. It must contain the following views:
    • Implement at least one component:
      • Game component: This component will control and display information about the current in-progress game. It will include a form with the following input and functionality. Note that the action of the form should not be a PHP page, you should have an event handler in your Game’s controller that updates the page when the user interacts with the form.
        • Instructions asking the user to enter a word.
        • A form and text box for the user to enter the word, with a button to submit their guess.
        • A list of all the user’s prior guesses. Please be creative! You are encouraged to determine how best to organize the display, but for each prior guess, the application must display:
          • how many characters were in the word,
          • how many characters were in the correct location, and
          • if the guessed word is too long or too short.
          • For example, if the target word was “science” and the user guessed “computer”, then the page must state that there were: 2 characters in the word, 1 in the correct place, and the word was too long.
        • An option (link, button, etc) for the user to start a new game (which will end the current game, if applicable).
    • Use the HttpClient Module to make an AJAX query of your back-end PHP to get the next game’s word. You should consider creating a service in your Angular project to handle this request, but it is not required for this homework.
    • At least two out of three common, built-in structural directives in Angular:
      • ngIf
      • ngFor
      • ngSwitch (note: ngSwitch, ngSwitchCase, and ngSwitchDefault count as one use of structural directives)
    • Use built-in attribute directive ngStyle, [ngStyle], or [style] to set at least one CSS property.
    • Use built-in attribute directive ngClass, [ngClass], or [class] to set at least one CSS class.
    • Use (or implement) at least two categories of data binding. Implementing two of the same category does not satisfy this requirement.
      • One-way binding from component to DOM: for example, interpolation (display data on screen), attribute binding (set HTML attribute).
      • One-way binding from DOM to component, “event binding”: when a specific DOM event happens, call the specified method in the component.
      • Two-way binding: data property in the component is used as the value for the DOM (input). If the DOM value is changed (by users, for example), the component property gets updated automatically to the new value.
    • Hint: your Homework 6 JavaScript code may be helpful for the client-side components.

Deployment

  1. You must build and deploy your Angular application to the cs4640 server. Once your application is built, upload the contents of your dist directory to the cs4640 server and modify the base tag in index.html to reflect the current directory:
  <base href=".">

Note: We have explicitly left some requirements of the assignment vague to provide freedom of design. You are encouraged to be creative in your implementations!

Submission

The submission will consist of two parts:

  1. Submit your Angular app (only the app directory) and PHP code to Gradescope in the “Homework 8” submission. You may choose to upload the files individually, upload a zip folder, or upload from a GitHub repository. Do NOT submit your entire Angular workspace.
    • You must include a link to your published version in the comments of your app.module.ts file to be graded!
  2. Build your application and publish your web site to the cs4640 server under a folder titled “hw8”. That is, upload the contents of your dist directory to the cs4640 server. Therefore, we should be able to access your work at https://cs4640.cs.virginia.edu/yourid/hw8. If you work with a partner, each person must publish the work to their web space.

Grading Rubric

This homework is worth 50 points, based on the following rubric:

  • 10 points - Server-side component
  • 6 points - Angular Game component
  • 24 points - Using Angular directives, data binding, modules
    • 6 points - Structural directives
    • 6 points - CSS Class/Property directives
    • 6 points - Data binding (one-way and/or two-way)
    • 6 points - HttpClient AJAX request
  • 10 points - Build and publish your application to the cs4640 server

Academic Integrity

For this assignment, you are welcome to share/publish your website! You’ll be doing that on our cs4640 server as well. We only ask that you not make any GitHub projects public until after the deadline.

However, we will consider it an honor code violation to view another student or team’s code or submission before the deadline. Your submitted code should reflect you (and your partner’s) work alone, not that of another student or team.

Note: You must cite any sources you use in a comment at the top of your app.module.ts file. For example:

// Sources used: https://cs4640.cs.virginia.edu, ...
//
// ...

Use of Generative AI

For Homework 8, you are not allowed to use generative AI tools to help you solve this problem.