Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
COMP6080 Sample Exam
For this exam you are provided with this public repostory ( exam-sample-spec ) that all students have access to. This repository contains the
questions being asked. You will then also have your own personal exam repository where you actually complete the work that will be submitted.
The personal exam repo is where you actually commit and push your code.
1. The Exam
1.1 Overview
You are to build a small single page application (with either ReactJS or Vanilla JS) that has three basic interactive games, along with a dashboard
acting as a homepage.
1.2. Getting Started
Please clone your personal exam repository.
Run yarn install to install all relevant dependencies to start.
Run yarn start to start your ReactJS app.
You are welcome to install any dependencies on top of ReactJS that you would like using yarn add [dependency] .
If you are using VLAB to complete the exam, the usage of npm install , npm run start , and npm install [dependency] is also fine.
Please note: If you prefer to complete the exam with VanillaJS, then you can simply remove all files we've provided and start from an empty
repo.
There is no backend in this application. The entire state you manage should be done in localstorage or another form of persistent browser
storage.
1.2. Features
The numbers in brackets next to any items (e.g. "Make the page big (1)") describe the number of marks associated with that piece of
functionality.
1.2.0. Document, Header, and Footer (10 marks)
The overall document/page should have a margin of 0 . (0.5)
All screens shall have a header bar that is:
80px high. (0.5)
Has a width that spans the full width of the viewport. (0.5)
Has property position: fixed such that no matter where the user scrolls the header is visible. (0.5)
Has a background colour of #eeeeee . (0.5)
Contains a logo ( src/assets/logo.png ) that:
Is in the top left corner of the header bar. (0.5)
Has a margin of 15px on all sides. (0.5)
Has a size 50px x 50px . (0.5)
Contains a section for navigation that:
For viewport widths over 800px, has text Home | Blanko | Slido | Tetro . (0.5)
For viewport widths less than or equal to 800px, has text H | B | S | T . (0.5)
Has the text aligned on the right hand side of the header bar. (0.5)
README.md
slido.png
04/05/2022, 21:20 COMP6080 / exam-sample-spec · GitLab
https://gitlab.cse.unsw.edu.au/COMP6080/exam-sample-spec 2/4
Has the Home or H text linking to the page / ; has the Blanko or B text linking to the page /blanko ; has the Slido or S text
linking to the page /slido ; and has the Tetro or T text linking to the page /tetro . (1.5)
All screens shall have a footer bar that:
Has a height of 50px. (0.5)
Has a width that spans the full width of the viewport. (0.5)
Is not fixed to the bottom of the viewport - but is instead fixed to the bottom of the document/page (i.e. if a page is twice the height of
the viewport, the footer will only be visible when you scroll to the bottom). (0.5)
Has a background colour of #999999 (1)
The entirety of the space on the page that isn't used by the header and footer is referred to as the main body , and screens from 1.2.2 ,
1.2.3 , 1.2.4 , and 1.2.5 should occupy that full space, unless otherwise specified (0.5).
1.2.1. Dashboard (12 marks)
This screen exists on route / and contains the header and footer from 1.2.1 . (0.5)
This screen shall contain two lines of text that are centre aligned vertically and horizontally. The general shape of this can be seen in this
video:
The first line is the text Please choose an option from the navbar. The text is colour red and font size 2em . (1)
The second line is the content Games won: X (reset) . (1)
X should be filled with the number of games that the user has won since the very first usage, or since the reset was clicked last. (2)
The value of X shall persist between loads by making use of a form of browser storage (e.g. localstorage ). (2)
When (reset) (a button) is clicked, the counter X will be reset. (1)
1.2.2. Game 1 - Blanko (18 marks)
This page exists on route /blanko and contains the header and footer from 1.2.1 . (0.5)
This page will display 12 square containers, all spaced equally in a row, centered vertically, in the middle of the page. (3)
Each time the component for this screen mounts, it randomly displays one of the 7 strings defined in src/data/blanko.js . Each character
of the string is displayed in the 12 boxes you've created, except: (5)
3 randomly chosen non-space characters are replaced with input fields that only allow a single character to be entered (5)
When all 3 inputs have been entered, if the entered values are correct then the page will create an alert that says Correct! before
refreshing the screen to start a new game (with another string randomly chosen, and the 3 random inputs cleared). A new game win
will be added to the dashboard tally. (2.5)
Underneath the list of characters (anywhere below) a reset button exists that when clicked will start the Blanko game again with another
randomly chosen string. (2)
A short video demonstration of this game can be found here..
1.2.3. Game 2 - Slido (21 marks)
This game is based on a sliding puzzle game. An example can be found here.
This page exists on route /slido and contains the header and footer from 1.2.1 . (0.5)
The page will consist of a few key components:
A 3 x 3 grid of cells that are 150px x 150px in size, with a #333 coloured 1px solid border, and a 0px margin. This grid appears in
the vertical and horizontal centre of the main area. (2)
When the game starts, 8 of the 9 cells are pre-filled randomly with one of the 8 Shrek squares found in src/data/shrek/*.png .
The cells should not be in the correct position to start. The empty 9th square shall be randomly placed in one of the 9 positions. (3)
Whilst the grid of cells has not been solved, clicking on one of the 2-4 cells immediately adjacent to the blank space should cause
that clicked cell to move into the blank space, and then the clicked cell's original be position be replaced with a blank cell
(effectively swapped position). (6)
As an alternative to clicking cells, whilst the grid of cells is active (i.e. the parent container has been clicked on), the left, right, up,
and down arrows should result in a similar behaviour. E.G. Clicking the "down" key on the keyboard would result in the shrek cell
immediately above the blank moving down (if such a cell exists). (4)
After the cell move made that that correctly places all the cells, an alert occurs that says Correct! before refreshing the screen
to start a new game. A new game win will be added to the dashboard tally. (2)
A button below the grid, on the left half of the screen, with text Solve : (0.5)
When this button is pressed, the grid will automatically move to the solved state (i.e. win state - with all the squares correctly
placed). (1)
Whilst in the win state, waiting for reset to be clicked, the Solve button is disabled. (0.5)
A button below the grid, on the right half of the screen, with text Reset : (0.5)
When clicked, the game will "start" again. (0.5)
The button shall remain disabled whilst the game has started, but no move has been made. (0.5)
The game starts automatically when the screen is mounted, or the reset button is clicked.