Objective: TitleTrek - Image Edition is an interactive trivia game designed to test your knowledge of movie titles. The game offers two exciting modes to challenge your movie expertise. In "Novice Trek," players must guess movie titles based on emojis, while in "Advanced Trek," the challenge is to identify movie titles from images representing the films. Both game modes provide an opportunity to earn points for correct answers. In "Advanced Trek," players are given three chances to guess the correct title and can utilize a hint feature to assist in solving the puzzle. The ultimate goal in TitleTrek - Image Edition is to answer as many questions as possible, making it a fun and educational experience for movie enthusiasts. Challenge your movie knowledge, enjoy the game, and aim for high scores in both Novice Trek and Advanced Trek.
Begin your gaming adventure immediately by clicking on the following link: Title Trek
Rules for Novice Trek:
- In Novice Trek, players will guess movie titles from emojis.
- Each question will present four answer options to choose from.
- Players have one attempt to select the correct movie title based on the provided emojis.
- After answering a question or when the timer runs out, the correct answer will be displayed.
- At the end of the game, players have the option to play Advanced Trek or replay Novice Trek.
- Enjoy the game and challenge your movie knowledge in this emoji-filled adventure!
Rules for Advanced Trek:
- In Advanced Trek, players will guess movie titles from a combination of images representing the films.
- There are no answer options or choices in Advanced Trek; players must type in the movie title.
- Players have three chances to guess the correct movie title.
- A hint feature is available to assist players in solving the puzzle.
- After answering a question, the correct answer will be displayed.
- At the end of the game, players have the option to play Novice Trek or replay Advanced Trek.
- Challenge your movie knowledge and enjoy this image-based movie title challenge!
Frontend:
- HTML, CSS, JavaScript
- jQuery library
Styling:
- Custom CSS for styling
- Fonts from Google Fonts
Clone the Repository
- Begin by cloning the TitleTrek - Image Edition repository to your local machine. You can use Git to do this by running the following command in your terminal:
git clone https://github.com/adesh1998/TitleTrek-Image-Edition.git
Open the Project Folder
- Open the cloned project folder in your preferred code editor. You can use code editors like Visual Studio Code, Sublime Text, or any editor you prefer.
Start with index.html
- Within the project folder, locate the index.html file. This serves as the starting point for accessing both game modes: Novice Trek and Advanced Trek.
Play the Game
- Open index.html in your web browser to access the game. From there, you can select the game mode of your choice (either Novice Trek or Advanced Trek) and follow the on-screen instructions. Have fun challenging your movie knowledge!
In order to deploy in Github pages, we need to follow below steps:
- First upload the repository to Github.
- Next go to
Settingsof the project and in theCode and automationsection of the sidebar, clickPages. - Under
Build and deployment, underSource, select Deploy from a branch. - Under
Build and deployment, use the branch dropdown menu and select a publishing source. - Click
Save.
-
Valuable lessons and assistance were received from Free Code Camp and Tutorials Point, which greatly contributed to our project.
-
Learning and improvement were made possible by Udemy and Coursera, and they played a significant role in the development of TitleTrek - Image Edition.
The exciting journey of creating the "TitleTrek" game saw a unique and engaging user experience being crafted by us. This reflection will now delve into the key stages of the process and highlight the lessons learned along the way.
Project Initiation:
The project's objective - to create a picture puzzle game challenging users to guess movie titles with pictures and emojis - was defined at the outset. A fun and interactive user experience was the goal, guiding the entire development process. The specific features and rules of the game were meticulously identified in the requirements gathering phase. The chosen technology stack included HTML, CSS, JavaScript, and the jQuery library for a seamless and interactive user experience.
Conceptualization and Planning:
Two game levels, Novice Trek and Advanced Trek, were detailed in this phase. Novice Trek allowed users to guess movie titles from emojis with four answer options, while Advanced Trek was more challenging, requiring users to guess movie titles from pictures with hints and clues but no multiple-choice answers. Designing the user interface was a crucial aspect, shaping the game's visual appeal and usability. We envisioned the layout, color scheme, and styling using wireframes and design mockups. Our division of responsibilities was based on our strengths, with Rishitha handling CSS and HTML, Aadesh managing JavaScript for interactivity, and Akshitha integrating the jQuery library and designing engaging questions.
Development:
Frontend development, the core of our project, brought our design concepts to life. HTML, CSS, and JavaScript were combined to create a seamless user experience. The jQuery library was a crucial component, enhancing user interactions and providing smooth functionality.
Testing and Refinement:
Rigorous testing was critical, beginning with Novice Trek, ensuring emojis and answer options worked correctly and that the game was user-friendly. Advanced Trek, a more complex level, required extensive development and testing. Hints and clues were incorporated to enhance user engagement. Cross-browser testing guaranteed compatibility with various web browsers, ensuring consistent functionality.
Deployment:
Deployment involved setting up a version control repository on GitHub for collaborative development. Game files were hosted on GitHub Pages, allowing easy public access without installation requirements
User Testing:
Beta testing with a select group of users and feedback incorporation were pivotal. Eliminating the 5-second time limit per question was a significant change based on user feedback, making the game more user-friendly. The user registration process was streamlined, enhancing overall user experience.
Release and Future Enhancements:
The game was successfully released to the public. Future updates and feature enhancements are planned, ensuring an appealing and challenging game.
In conclusion, the creation of the "TitleTrek" game was a fulfilling experience that led to an engaging and interactive user experience. The process emphasized the significance of user feedback and the importance of adapting to user needs. We look forward to continually improving and expanding the game to reach a broader audience while maintaining high standards of quality and entertainment.
Tech Stack Selection: The selection of the appropriate technology stack for the project posed an initial challenge. Factors such as compatibility, ease of development, and user experience had to be considered. This process demanded extensive research and discussion.
User Interface Design: Designing an engaging and visually appealing user interface presented a challenging task. Ensuring that the design was user-friendly and coherent with the game's theme required careful attention.
Cross-Browser Compatibility: The testing of the game across various web browsers to ensure consistent functionality proved to be a daunting task. Different browsers have unique rendering engines and quirks that needed to be addressed.
Feedback Incorporation: The gathering and effective implementation of feedback was a significant challenge. Sorting through diverse user opinions and deciding which changes to make presented a complex process.
Continuous Improvement: Sustaining the game's engagement and user enjoyment necessitated ongoing efforts. Continuously adding new features and enhancing existing ones was vital to maintain user interest.
Team Collaboration: The division of responsibilities based on our strengths proved to be an effective strategy and ensured a balanced and harmonious development process.
Technology Selection: Ultimately, the choice of the technology stack worked well for the project. The combination of HTML, CSS, JavaScript, and jQuery provided the necessary tools for developing the game.
User Testing: Conducting beta testing with a select group of users was a productive step. It allowed us to gather valuable feedback and identify issues that might have been missed during development.
Iterative Design: Continuously improving the game based on user feedback proved beneficial. The decision to streamline the user registration process based on feedback enhanced user-friendliness.
Initial Time Limit: The addition of a 5-second time limit for each question in the game did not work as expected. User feedback revealed that it affected usability and enjoyment, leading to the decision to proceed to the next question as soon as the user answered the current one.
Flexibility is Key: It's essential to remain flexible in the development process. Recognizing that our initial time limit wasn't working and promptly adapting to user feedback was a valuable lesson.
User-Centric Approach: Users' feedback is invaluable. Incorporating user opinions, improving the game based on their preferences, and streamlining processes for quicker user interaction helped enhance the game's overall quality.
Collaboration Matters: Effective collaboration and division of responsibilities among team members are crucial. Utilizing each team member's strengths is essential for optimal results.
Continuous Improvement: To keep users engaged, ongoing support and feature enhancements are vital. Planning for future updates based on user feedback is a smart strategy.
The design and development of TitleTrek was a dynamic process, where challenges were encountered and addressed as a team. By staying adaptable, focusing on user feedback, and refining our development process, we were able to create a successful and enjoyable game. The experience has equipped us with valuable lessons that we can carry forward into future projects, ensuring continued growth and success in our work.
- Adesh Anil Bhosale
- Rishitha Vasireddy
- Akshitha Gunupati