-
If you have not done preREADME yet, please check it out first.
-
This in-class Hackathon is to implement a famous online puzzle game - Wordle. No matter you know how to play the game or not, please WATCH THIS INTRO VIDEO fist: Introduction video (MUST WATCH). It also explains how the code is designed and structured.
-
Please sign in to Hackathon #1 thru this Google Form. After you fill in your student ID, name, department and grade, you will see the link to the reference code. The downloaded file should be named "hack1.zip". Uncompress it and copy the files to the
wp1111/hack1
directory. (Note: If you see an extrahack1
directory underhack1
, copy the files underhack1/hack1
instead.) -
Check the structure of the files/directories under
hack1
and it should be like this: -
Run
yarn
ornpm install
to install all the dependencies, and runyarn start
ornpm start
to start the app.
:::info
For Windows user, modify package.json
--
Change:
"scripts": {
"start": "PORT=8080 react-scripts start",
},
to
"scripts": {
"start": "set PORT=8080 && react-scripts start",
},
:::
If you haven't watched the Introduction video (MUST WATCH), watch it NOW!
Wordle is a famous online puzzle game. The goal is to guess the correct word in 6 tries. Each guess must be a 5-letter word. Press the enter button to submit. After each guess, the colors of the tiles will change to show how close your guess was to the word. To experience it, click here to play.
Hack#1 is a simplified version of Wordle.
-
You do not need to check whether the 5-letter guess is an existing vocabulary.
-
You do not need to support the
click
function of the keyboard as shown on the screen. -
All css files have been provided to you. DO NOT modify them.
-
You are not allowed to use modules which were not specified in the
package.json
of preREADME. -
Must program in JavaScript and ReactJS.
-
A public testcase is provided for you (in cypress format:
./cypress/e2e/public.cy.js
). It is for your self-test only. When grading, the grading program Gradescope will change the testcases (i.e.solutions
insrc/data/config.json
, like the picture shown below) with our private testcases and your code will be graded based on these private testcases. -
Although your code should have been graded by Gradescope during the test, however, you should still push your codes onto the
main
branch of your GitHub repowp111/hack1
before the end of Hack#1. We will check your codes if needed. Failure to push the code before the deadline will be treated as "no-submission" and your grade will become '0' point.git add . git commit -m "<your commit message>" git push
-
Each key, id and className that have been defined in pictures below must be added correctly in your code. If you miss adding the correct key/id/className or specify the incorrect key/id/className to the structure, your code will not be scored.
-
Anything modified outside the
src
folder will not be scored. -
For further testing rules of Wordle in Hack#1, Please refer to the Introduction video (MUST WATCH) for details.
-
Basic Keyboard Implementation (15%)
- Files to be modified:
Wordle.js
,Keyboard.js
1-1. In
Wordle.js
, renderKeyboard
by passingusedChars
into it.1-2. In
Keyboard.js
, sliceconfig.letters
into three parts. Please note thatthirdRowLetters
has been done for you and you do not need to modify it. You should implement the code forfirstRowLetters
andsecondRowLetters
as shown on the screen.1-3. Please note that we have handled the "case-insensitive" character (English letter) comparison in
handleKeyup
inuseWordle
. In the later word checking process, you don't need to worry about the upper or lower letter case issues. - Files to be modified:
-
Board Implementation (15%)
- Files to be modified:
Wordle.js
,Board.js
- Refer to
Row.js
2-1. In
Wordle.js
, renderBoard
by passingturn
,guesses
,curGuess
into it.2-2. In
Board.js
, display 6 rows (usingmap
function is recommended) with the correctly defined row'skey
andid
. (Be careful the usage ofRow
andCurRow
.) - Files to be modified:
-
Row Implementation: display in each
Row-wordbox
the corresponding letter and the color. (15%)- Files to be modified:
Row.js
,CurRow.js
- Refer to
Row.css
for class definition. - Remember to add
id
andkey
to eachRow-wordbox
and changeclassName
based on the color of eachRow-wordbox
.
- Files to be modified:
-
Check each
Row-wordbox
's color incurGuess
and updateguess
,turn
andcurGuess
(25%)-
Prerequisite: TODO2 & 3 (Please finish 2 & 3 first)
-
Files to be modified:
useWordle.js
-
Firstly, create a
set
(i.e. a structure to store data) formed by the letters insolution
(i.e. the input parameter ofuseWordle
, as called byWordle.js
). We call this set "solution letter set". -
If some letters in
curGuess
match thesolution
with correct positions, mark these positions green, and remove these letters from the solution letter set. -
For the remaining letters in
curGuess
, check if each of them, from left to right, exists in the solution letter set. If so, mark the encountered position(s) yellow and remove the letter(s) from the solution letter set. -
Hint: Check green first, and then check yellow. Therefore, if a letter in the solution letter set is removed during the "green" color check, it will not be considered during the "yellow" color check. See the second row in the example below.
-
Warning: If your code cannot trigger the color changing on your screen, you will not get the point.
-
Example:
If the solution is
FUNNY
curGuess color 'nnaaa' ['yellow', 'yellow', 'grey', 'grey', 'grey'] 'aannn' ['grey', 'grey', 'green', 'green', 'grey'] 'aaann' ['grey', 'grey', 'grey', 'green', 'yellow'] 'nanan' ['yellow', 'grey', 'green', 'grey', 'grey']
-
-
Update parameters, check each char's usage and show in
Keyboard
and resetcurGuess
(20%)- Prerequisite: TODO1 (Please finish 1 first)
- YOU MUST WATCH THE Introduction video.
- Files to be modified:
useWordle.js
,Keyboard.js
- If you do not implement the
Keyboard
correctly, you will not get the point.
5-1. If
curGuess
is equal tosolution
, setisCorrect
totrue
.5-2. Update
usedChars
so that the colors on the keyboard can be updated correcly with respect tocurGuess
-
Implementation for showing the result of the game. (10%)
We provide a public testcase for you to test your code. However, this public testcase result is NOT your final score. TAs will change the testcases and when Gradescope is grading your code, it will be tested by these private testcases. Your final score will be the score as shown on Gradescope.
- How to run the public testcase:
You should open two terminal windows. Use
yarn start
ornpm start
to start your app in the first window, and useyarn test
ornpm test
in the other window. You should wait for a few minutes to get your result as displayed on the terminal.
An example of the result is like the picture below:
Remind again, the self-test result of your cypress is NOT to your final score.
Please zip your src
folder and submit it to Gradescope. The grading on Gradescope will be the final score of your Hack#1.
zip -r src.zip src
:::warning Please note that your score will be the latest uploaded src.zip. NOT the highest one. Please be careful NOT to submit a buggy version in the last minute. :::
Please push your final version codes onto your GitHub repo main
branch before the end of Hack#1. We will check your codes if needed. Failure to push the code before the deadline will be treated as "no-submission" and your grade will become '0' point.
git add .
git commit -m "<your commit message>"
git push
Go to this Hackathon #1 Q&As repo. Check if your question has been asked. If not, open a new issue.
Please read the README.md before you do so.
Please DO NOT discuss or consult with anyone during the exam. If you find someone who might violate this rule, or is cheating in the Hackathon, please help fill in this Google Form.