UCF
University of Central Florida
CIS 4004 Web Based Information Technology
Page 2 of 2
Assignment 4
Due, Thursday, August XXXXXXXXXXfor 100% credit
Friday, August 5, 2022 for 90% credit
Saturday, August 6, 2022 for 80% credit
Assignment scope
This assignment is focused on writing ReactJS and will create an electronic version of a dice game Boggle.
This project will require students to generate a Boggle board. The player will have three minutes to find as many words as possible. Words are created with three letters or more. Words are formed from adjoining letters. Letters must join in the proper sequence to spell a word. Letters may join horizontally, vertically, or diagonally, to the left, right, up or down. No letter cube may be used more than once in a single word.
Installation resources and steps
Node.js and ReactJS
1. Download and install Node.js
a. https:
nodejs.org/en/download
2. Using the command prompt, install the serve static serve
a. npm install serve -g
3. Using the command prompt, install Babel and its React companion
a. npm install babel-cli@6 babel-preset-react-app@3 -g
4. Using the command prompt, install Create React App toolchain
a. npm install -g create-react-app
5. Using the command prompt, create a React application in desired workspace
a. create-react-app boggle
6. Using the command prompt, test the default React app
a. npm start
. The web
owser should display
7. Browse to the src folder of the boggle app directory
a. Create folder named components
. Move to the components folde
i. Create empty file Boggle.js
ii. Create empty file Boggle.css
Four files have been provided as templates or resources for this assignment
1. logo.png
2. index.html
3. style.css
4. Boggle_temp.js
Assignment submission
Compress the React app boggle folder and submit the compressed file (e.g. .zip)
Tasks
Activity
logo.png
1. Copy file in app directory boggle/src
2. Copy file in app directory boggle/src/components
App.css
3. Comment out or delete the logo spin code
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
App.js
1. Change the logo import
a. from: import logo from './logo.svg';
. to: import logo from './logo.png';
index.js
1. Change root.rende
a. from:
. to:
Boggle.css
1. Copy the contents of style.css to Boggle.css
Boggle.js
1. Copy the contents of Boggle_temp.js to Boggle.js
2. In method render return {} copy the code from index.html in the
ody>…
ody> element as JSX in the {} of the return
3. Modify any ‘class = ‘classname’ so that class is className to convert to JSX
4. Modify the
![]()
to convert to JSX
a. from:
. to:
5. Update the JSX so that the Boggle board looks like Figure 1
6. Update the JSX so that the Cu
entWord looks like Figure 2
7. Update the JSX so that the Words Found looks like Figure 3
Test Cases
Test Case 1
Rendered ReactJS Boggle app looks similar to Figure 4
Figure 1 Boggle board
Figure 2 Cu
ent Word
Figure 3 Words Found
Figure 4 ReactJS Boggle app