Hangman

Game Objective

In the spirit of Halloween, we've spookified this classic game with an educational twist! The objective of our ghoulishly fun game is to enhance the players' knowledge of Computer Science while enjoying the experience of doing so. To add to the excitement, we've crafted three levels of difficulty: Beginner, Intermediate, and Expert, ensuring a hauntingly good time for all.

Rules

• You can choose your preferred difficulty level: Beginner, Intermediate, and Expert. After choosing the levels you will be presented with questions related to the field of Computer Science.
• The goal is to guess the correct response to the question and save the hangman from being hanged.
• Select an option among the four presented, that you think answers the question correctly.
• If you guess the answer right, you will learn more about the topic and the question changes.
• If your guess is wrong, the hangman image changes adding an element of suspense and challenge.
• Keep guessing until you've either answered all the questions correctly or run out of attempts.
• Learn more about Computer Science while having fun!

Technology stacks used

• HTML
• CSS
• JavaScript
• API for generating questions

Setup Instructions

1. Clone this repository to your local machine. You can do so by executing the following command in your command prompt:

   git clone https://github.com/vamshivk/HangmanGame.git
   

2. Open the 'index.html' file from this project folder using your preferred browser.
3. Start playing the game and enjoy educating and informative experience.

Deployment Instructions

1. Upload the Repository to GitHub: First, upload the project's repository to GitHub. This can be done by creating a new repository on GitHub or pushing the local repository to an existing one.
2. Access and Configure Repository Settings: Once the repository is on GitHub, go to the repository's page. On the top menu of your repository, click on "Settings."
3. Configure Deployment Source: In the left sidebar, navigate to the "Pages" section. Under "Source", click on the dropdown menu and select Deploy from a branch (typically, the main or master branch).
4. Select Publishing Source: After the deployment branch is selected, GitHub Pages will automatically detect the root directory. If the HTML file is in the root directory, it will serve as the main page. However, a different directory can also be defined.
5. Save the Configuration: Click the "Save" button to save the GitHub Pages configuration.
6. Access Your Deployed Site: After saving the configuration, GitHub Pages will provide a URL using which the deployed site can be accessed.

Credits

• Computer Science related sourced from the API endpoint for the Open Trivia Database (OpenTDB) API - Link

Design and Development Process

• Planning: In the planning phase, our goal was to create an educational game. We have decided on Hnagman game and outlined the initial concept with three levels of difficulty. Praneetha took a lead role in HTML development and the initial JavaScript setup, Pratyusha focused on CSS styling, design and in JavaScript Setup, while Vamshi handled JavaScript integration with the API and advanced JavaScript development.
• Development: During the development phase, we sourced the content, integrating an API to fetch questions. We emphasized user interface design, focusing on creating a seamless and visually appealing game. Task breakdown in the planning phase allowed us to allocate work efficiently based on individual strengths and interests.
• Testing and Quality Assurance: Continuous playtesting among team members helped identify and address issues to improve the user experience. We tackled challenges related to error handling, especially with API responses. Vamshi played a crucial role in error handing, while Pratyusha and Praneetha contributed their technical expertise to address all other issues.
• Deployment: In the deployment phase, we established a GitHub repository and configured deployment settings for GitHub Pages. This step ensured that our game could be accessed online, making it available to a wider audience. The entire team collaborated to set up the repository and configure deployment.

What worked

• Collaboration of our team: This team assignment brought together students with diverse skills and perspectives. This collaborative effort allowed us to tackle various aspects of this project efficiently.
• API Integration: To provide the questions related to Computer Science for users to learn, we decided to integrate an API. The instance where this decision was extremely helpful was when we decided to create a feature for the user to select the desired difficulty level (Beginner, Intermediate, Hard) which is a feature that enhanced the educational aspect of our game. This decision made the task relatively easy, which contributed to catering our game to users with varying levels of expertise thus broadening our game's audience.
• Continuous gameplay sessions: One of the key success factors in refining the gaming experience is, playing the game among the team. By playing the game ourselves, we identified areas for improvement on the UI, that range from UI tweaks to better phrasing and making the UI seamless. We gathered feedback and made real-time changes resulting in a more enjoyable user experience.
• Effective communication: There were a few moments where we had debates about the layout of the interface. Though among the team we had different perspectives regarding design approaches, we had open communication with each other and took everyone's thoughts as input to help improve the development process iteratively. This taught each one of us the power of communication and compromise.
• Task Breakdown: Breaking down the assignment into smaller tasks contributed to our careful planning and was helpful in assigning the work to teammates effectively. We divided the tasks based on everyone's interests and strengths. Our team made sure that every aspect of this project received attention.

What didn't work

• Overly Ambitious Goals: As a team, we found ourselves setting overly ambitious goals, to include many features in our game like enabling the user to customize the themes to enhance user personalization. Due to design constraints, we focused on a single theme. Through this experience, we learned that striking a balance between ambition and feasibility is crucial.

Challenges faced

• Managing the API requests and responses was challenging for our team, this called for dynamic planning to stay on track. One situation was where we attempted to fetch numerous questions at once which led to a noticeable lag in loading times. This taught us the importance of optimizing API requests.
• Error handling was also burdensome as we had issues with undesired responses from the API. To maintain a seamless experience throughout the game, we had to work on it and perform testing and debugging multiple times.
• Schedule conflicts among the team due to academic commitments which interrupted us to meet up and discuss the progress of the project. To overcome it we sometimes preferred virtual meetings or postponed it till everyone was available. This made us understand the need for adaptability in a team setting.
• Conflicting opinions regarding the game's layout, and UI's color palette which were resolved by discussing the pros and cons of each. We managed to reach an open ground for all of them through discussions and communicating our thoughts clearly. Rather than considering the differences in perspectives as a weakness, this experience has taught us that they can be a source of strength as well.

Lessons learned

• For developing a project, teamwork plays a crucial role This was our first lesson when we initially started on our project. This teamwork brought out the best in each of us. This experience also made us realize how strong each one of us is, in working as a team. We also realized that by leveraging our individual strengths, we can achieve more collectively.
• We discovered how gaming can be a powerful tool to be informative.
• Working our way through the API is a skill worth learning. Though initially, we struggled with integrating the API, we overcame it by learning the importance of optimizing API requests.
• User feedback is crucial for any project development. Having knowledge about real-time player feedback can be a way to enhance the functionalities or the adding changes to the UI design which will help the developer refine the project.
• A collaborative working environment enhances the developer's creative synergy which leads to innovative thoughts to resolve the problem at hand. While brainstorming, we explored several ideas and perspectives which made the developing process more interesting.
• We have learned how Agile methodology helps in addressing the issues adeptly. Whenever we find an issue, we have adapted a development plan to fix it.

Game URL

• https://vamshivk.github.io/HangmanGame/

Contributors

• Vamshi Krishna Mummadi
• Praneetha Pradeep
• Pratyusha Samidhapudi