The focus of our project is to create a learning resources page - where students can access learning materials which are specially done in a way to help students understand the topics better. In addition to that, we have also included games, which are related to the topics, allowing students to learn in a fun way. The games are done in a way where students can memorise/remember key science terms better. It is a platform that allows you to organize content, view it over and over again and answer questions instantly, without limits on physical space or schedules.
Since we intend to create an educational page for Secondary Students, we decided to use more vibrant/attractive colour palette. For index.html: The main purpose of this page is to promote our features and beneifts of our website. Thus the main ideaa was to make the page look more appealing.
For discovery pages:
- The main idea was to create resources that would be useful/beneficial for students to undertsand better, thus we have created a hover over text for the diagrams.
- As for the text, we deicded to divide the pages into sections.
- For discovery 1.1, we wanted an interactive touch to our resources, therefore we created a hover over text for users to read more about it.
For games.html
- We have included 3 games; crossword, hangman and wordsearch.
- These games are created to help students remember, memorise and learn science contents in a fun, unique way.
- The games are based on the topics on the discovery pages.
Leaaderboard
- To encourage students to try out our games, as they would want attain high scores to be listed in top 10 rankings of the leaderboard.
Contact page
- For users, who may have studies enquires, or website problems to contact us.
- In our contact, we also included options such as feedbacks or commments, which users can consider in sending in, which will help us improve the site better.
User stories
- User-friendly sidebar menu that users can access to all pages of different topics
- Registration page for users to sign in or create account
- Once logged in, the site will keep track of the user's activty such as their highscores for the games and their ranking
- User can choose to access the disccovery page/games page to learn more or test themselves
- The questions on the games will be based on the discovery pages.
- There are 3 games - Crossword, Hangman and WordSearch. Users can choose to play any of the games.
- Upon completion of a game, they will be given a score according to their performance
- A leaderboard will also be featured to showcase the top players of the game
- There would be an accounts page where it would it would display user’s profile and game histories
- Log in and sign up page - To keep informations of the user's
- Leaderboard - To showcase the rankings of the top players
- Crossword Game - Allow users to guess the science term while figuring out the crossword
- HangMen Game - Allows users to think and have tries to guess the word. Hints also provided
- WordSearch Game - To help students memorise key terms as wordsearch is a game where you need full concentration to find the word,
- Contact Form - for users who have special enquiries which they can contact us privately
- Discovery pages - Pages where the topics are taught and their knowledge will be tested by playing the games
In addition, you may also use this section to discuss plans for additional features to be implemented in the future
We plan to implement
- More games to our website
- Adding more resources, topics to our website.
- Adding more functionally to our website
- Adding levels to our game
- adding more challengers to our games
Languages, frameworks, libraries, and any other tools that I have used in my project:
- Bootstrap
- The project used Bootstrap on our navigation bars, containers to make it mobile-responsive,
- JQuery
- The project uses JQuery to simplify DOM manipulation.
- Lottie
- The project uses lottie to add animations designs to our work.
- rest.db -The project uses rest.db to keep database for our user's details.
- [html] - HtML is used to describes the structure of our Web page.
- [css] - CSS is used to add colors and styles to our page. It also help us to position somme of the features.
- [javascripts] - Javavscipt helps us to make our website more interctive. Javascript is heavily used in our creation of game
Some of the problems that were faced by us, was the leaderboard, we had to format the Jquery into the table and sorting of the ranking. The problem we faced was that we had diffifulties implementing the aboved-mentioned.
- Login/SignUp Page: https://codepen.io/Devel0per95/pen/rjOpdx
- Crossword Game https://codepen.io/yagga47/pen/JgmYYx
- Hangman Game: https://codepen.io/cathydutton/pen/JjpxMm
- WordSearch Game https://codepen.io/Conor092/pen/OZPMKd
- The photos used in index.html was taken from classsdojo. -The lottie was taken from https://lottiefiles.com/
- I had received inspiration for this project from ClassDojo (https://www.classdojo.com/), as well as Buncee (https://app.edu.buncee.com/).
- Codings are referred from coddepen.io and w3schools.
- Video: https://drive.google.com/drive/u/1/folders/1XNOvCWxx179GAv7NkJ9UFNxqMRSxD4HB
- Github: https://harshini53.github.io/ID-Assignment-2/
- Respitory: github.com:harshini53/ID-Assignment-2.git