Multimedia and Human Computer Interaction – Final Project Report

Chemistry: Periodic Table

Team Members:

  • Sherlyn Angelia Chance (2101693100)
  • Nicander Alworth Chance (2101693110)
  • Yoksan Herlie (2101684525)

Brief Description:

This is simple Chemistry game we created focusing on the Periodic Table of Elements. The reason we chose this as our main focus is because Periodic Table is the basic chemistry for middle school students and we want to help them have fun while also learning about the topic.

Since this is a game for middle school students, we decided to keep it simple enough without too colorful visuals since it might be too childish and distracting. We also stick to the idea of clicking and typing concept for this game because we do not want the game to be too complicated for them to play.


1.Main Menu

  • The game will start from this page. In this page, the user can choose to start the game, go to the volume settings, or go to the about page which will give a brief explanation of what the game is about.
  • When the mouse hover over the start button, the start button will pop up.

Main Menu


2. Volume Settings

  • In this page, the user can adjust the music and sound effects by adjusting the slider bar.
  • The user can also choose to turn off the music or sound effect completely by clicking on the on/off symbol.
  • The user also has the option to go back to the main menu.

Volume settings with music off


3. Games Selection

  • After clicking the start button, the player will be redirected to the sub-menu page where they can choose any of the two games available.
  • A brief visualization of each game will appear if the user hovers the mouse cursor over the top of the selected game image.
  • The user can click the back button on the top left corner of the page to go back to the main menu
  • The questions for each game can be added through the .txt file in case the user wants to challenge themselves more.

Game Selection Menu


Brief Visualization of ‘Simple Quiz Game’


Brief Visualization of ‘Guess the Element’


  • The game selection page also contains help page for both games.
  • This help page contains information on how to play the game to help the user. It can be accessed by clicking the help button on the respective game.


4. Simple Quiz Game

  • Once you click “PLAY”, the game will start immediately.
  • Each question in this game is related to the periodic table and the user can check the periodic table for clues and information.
  • The user has 15 seconds to answer each question by clicking on one of the choice presented. Scores are based on how fast you answer each question. The score will be accumulated until the game is over.
  • The game will end once the user got one question wrong and the high score will be saved until another higher score beat the current one.
  • The user can choose whether to go back to the menu or to play the game again.

Guess the Element


Score by Time


Game Over



5. Guess the Element

  • Once you click “PLAY”, the game will start immediately.
  • For this game, an image with a symbol of an element will pop up.
  • The user will have to guess the element name and the atomic number of the element symbol presented.
  • The user has 20 seconds to answer each question by filling in the text box provided. Click the ‘submit’ button after.
  • Scores are based on how fast you answer each question. The score will be accumulated until the game is over.
  • The game will continue until all of the questions available have been presented.
  • The score of the user will be presented and the game will end.
  • The user can choose whether to go back to the menu or to play the game again.

Guess the Element




5. Scoring System

Like mentioned above, the score is accumulated based on the time required for the user to answer each question. The faster the user answer the question, more score will be obtained. This applies for both games.


6. User Controls

As we try to design this game as simple as possible for the user to use, the controls revolves mostly around clicking and typing only.

To navigate the menus, the user simply has to move the cursor around and click the option the want.

For the first game, the user is only required to click on the correct answers. While for the second game, the user is required to type in their answer into the text box provided.


7. Contributions of each member

For this project, each of us are given equal distribution of workload. Yoksan focuses on creating the second game while Nicander focuses on creating the first game while I focuses more on the development of the main menus and design. However, we also help each other’s task regardless of the work distribution to complete this project.


8. List of items we created

  • All buttons
  • All text including title

9. About Page

  • The about page consists of our information, the brief description of our project, and the list of. music titles and  the source of graphics components and sprites that we retrieve from the Internet.

About page


Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.