Our project "Escape Room" tried to solve the problem that learning new lessons can be boring by interacting questions about HTML, Git, and JavaScript with Room Escape. Our project offers visual entertainment that attracts users and provides entertainment while solving the questions.
The web page provides several different questions inside the room. The user can only open the exit and escape the room by solving all problems and obtaining hints by solving the questions. Thank you for the attention!
Introduction
Example of room design
Maze
Example of Question Format
Features:
There is a main room, and several rooms which can be accessed by solving problems. Each room provides several different questions. Questions are provided with visual contents. The user has to know the features of HTML, Git and JavaScript to find the answer. If the user finds all the answers and solves the questions, the user can will receive hint to unlock the door and escape the room. It is a success when the user escapes every room.
Usage scenario:
- The index.html will be the main room that will start. There would be pop-up explain about the stoy
- In the room, there will be objects that can be clicked and solve the questions to receive the hint.
- If image can be clicked, there would be zoom animation, if there is not animation that object is not able to click
- Need to click on the object, solve the question by clicking button or writing down
- The hints received by solving the questions will be used to unlock the door and leave to the next room.
- Click on the door lock image to unlock the door
- The final room is solving the maze to escape the room
- The arrow buttons are used to move the character around
Task assignment:
- Designing rooms
- Making overall plot
- Making problem & answer sets using what we learned in class
- Making rooms and user-interfaces by HTML & CSS
- Making detailed parts (ex. scene of enlarged objects)
- Implementing reactions and web page movements by HTML & CSS & JavaScript
Contact:
| Name | |
|---|---|
| HyunJoon Park | joell0526@gmail.com |
| Hajong Kim | whoami125@g.skku.edu |
| Yumin Heo | ymheo1123@gmail.com |
Notes - each room is made by absolute postion, without considering relative - READ.ME is created to follow up the patch notes - To check branch of remote, create own local branch, pull the remote branch to check the update
Room Escape version 1.0.1 ~Sun (5.22)
- Fixed bugs made in room3
Room Escape version 1.0 ~Sun (5.22)
- Final Development
- Testing & Fixing errors
- Released version
Room Escape version 0.3 ~Sat (5.21)
HyunJoon Park :
- Making Heart UI (Life system)
Hajong Kim :
- Making cookie modal
- Created heart storage information
Yumin Heo :
- Making maze game in end page
- Fixed ratio issue of the room objects
Room Escape version 0.2 ~Thurs (5.19)
- Everyone decorates own room with questions
HyunJoon Park :
- question answer determine if it is correct or not
Hajong Kim :
- Create Lock for the door
Yumin Heo :
- Intro webpage : Pop-up about story of kidnap when index.html is firsted loaded
Room Escape version 0.1: ~Sat (5.14)
Yumin Heo :
- basic html door placement setting and room setting (all with absolute position)
- questions about git
Hajong Kim :
- animation opening the door and zoom-in animation when curser is on the object (took check if that object is able to click)
- questions about html and css
HyunJoon Park :
- pop up menu + question UI
- questions about javascript, NPM
If You Want to Participate in Developing Room Escape
Download the most up-to-date release version in our github repository or fork to work on it.
If you want new room and study
- create room#.html in main directory, and create room# file and put the related source inside!
If you want to Edit
- Each room folder contains all the sources needed for room#.html
- Edit the files inside the folder and apply to the room#.html in the main directory
For more information, see the contact and connect to one of us