Homework 9 - Angular Wordle

Due: Monday, April 28, 2025 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. You must implement this game using Angular.

You may find the in-class Angular example helpful when completing this assignment.

Slightly-Evil Wordle Requirements

Move over Wordle, Quordle, Kilordle, Heardle, Worldle, and so, so, SO many more… we’re writing our own word guessing game! Specifically, in our version, words can be any length and we’re giving more cryptic clues. We’ll pick a word (the “target word”) from our list of possibilities at random, which the user must try to guess. If they get it right, they win! If they don’t, we’ll give them some hints (described below) so that they can guess again. They can keep guessing until they can correctly guess the word.

Our “angular word guessing” game will consist of at least one component that displays the current game. For the 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 (1) how many characters in their guess were in the correct position, (2) how many characters in their guess were in the target word, and (3) 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

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.
  - Word bank for local use: Text File
  - Word bank for cs4640 server deplyment: /var/www/html/homework/angularwords.txt
- 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

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 7 JavaScript code may be helpful for the client-side components.

Deployment

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=".">

To build an Angular app, issue the following command:
ng build
This will build your app to a dist/ folder inside of your main project directory. Inside this folder is a browser folder which contains the built (browser-side) application. It will consist of the index.html file, JavaScript and CSS files. When publishing to our cs4640 server, you should update the index.html file as described above, then upload the contents of this folder to your hw8 directory on the server.

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:

Submit your Angular app (only the app directory) and PHP code to Gradescope in the “Homework 9” 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!
Build your application and publish your web site to the cs4640 server under a folder titled “hw9”. 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/hw9.

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 any other student’s code or submission before the deadline. Your submitted code should reflect your work alone, not that of another student.

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 9, you are not allowed to use generative AI tools to help you solve this problem.