Quiz forge is designed to be a revision tool in the form of an online quiz. The primary focus is programming questions. However other topics have been considered. Live Project available here.
There is no particular audience targeted for this application, however with Quiz forge being a quiz application with the focus on revision and learning, stating the target audience would be students or those looking learn.
Game Board: As Visual Learner, I want to a gameboard, so that i can track my progression through the quiz, to help me keep engaged
Acceptance Criteria: Gameboard must be visible and not intrusive on both desktop and mobile.
Answer Quiz Questions: As a player, I want to answer quiz questions, so that I can test my programming knowledge, and advance in the game. Acceptance Criteria: Questions are presented clearly, I can submit my answers, I receive feedback on whether my answer was correct
Full Responsiveness: As a player, I want the game to be responsive, so that I can play on different devices. Acceptance Criteria: Game is playable on desktop, tablet, and mobile devices, Layout adjusts appropriately to different screen sizes
Accessibility: As a User of the quiz website, I require the site to be accessible, with consideration to colour contrast, fonts, images and screen reading capabilities,So I can utilise the website fully, regardless of potential visual impairments
Acceptance Criteria: All Accessibility aspects should be considered, e.g alt text, colours, fonts, colour contrast etc
Deployment Tests: As a Developer, I want my deployed site to function as its supposed to, So that a user can go to the site and play the game. Acceptance Criteria: You can play the quiz from the deployed website link. No major game breaking bugs in deployed site.
Quiz Types: As a player, I want to be able to face different types of questions (multiple choice, true false etc), So I can the game remains engaging Acceptance Criteria: Implement at least 3 different types of questions.
Expandable Question Storage: As a lazy developer, I want the question data to be stored in an expandable format, so that I can easily add or modify questions in the future. Acceptance Criteria: Questions are stored in a structured format (e.g., JSON), New questions can be added without changing the code structure
Scoring and Completion: As a competitive player, I want to see my score and a win/lose screen at the end of the game, so that I know how well I performed. Acceptance Criteria: The score is displayed at the end of the game, Win/lose condition is communicated, The option to play again is provided
Randomised Question Devliery: As a returning player, I want questions to be randomized each time I play, so that the game feels fresh on repeated playthrough. Acceptance Criteria: Questions appear in a different order in each game, If possible, a different set of questions is selected for each game
Varied Question Content: As a player, I want to encounter a variety of programming questions, So that i can test my knowledge on different areas. Acceptance Criteria: Questions cover various programming topics. There are enough questions to avoid frequent repetition
Timer Toggle: As a player, I want an optional question timer to challenge myself to answer quickly. Acceptance Criteria: A timer can be toggled on/off in the settings, Time remaining is displayed during questions, Time taken to answer affects scoring (if the timer is enabled)
Puzzle Integration: As a learner who enjoys puzzles, I want to solve simple puzzles (like a command-line interface simulation) to apply my programming knowledge more interactively. Acceptance Criteria: At least one puzzle type is implemented, Puzzles are interspersed with quiz questions, Clear instructions/hints are provided for how to solve the puzzles
Animated Traversal: As a player who enjoys animated content, I want to see my character move smoothly between stages, so that the game feels more dynamic. Acceptance Criteria: Character visibly moves from one stage to the next, Movement animation is smooth (lerping)
Visual Theme Toggle: As a player who values theme customisation, I want to choose between different visual themes, so that I can customize my game experience. Acceptance Criteria: At least two themes are available (e.g., light and dark mode), Theme can be changed from the main menu or settings
Storyline: As a player that enjoys story elements, I want to experience an overarching story, so that the game feels more immersive. Acceptance Criteria: Brief story snippets are presented between stages or questions, Story elements are relevant to the programming theme
Audio Integration: As a player who values audio feedback, I want to have sounds attached to actions performed within the game, to make the experience more rounded and immersive Acceptance Criteria: At least two themes are available (e.g., light and dark mode), Theme can be changed from the main menu or settings
To manage the Project and keep track of the required tasks. Agile methodologies were adopted throughout the project by utilising User Stories, a KanBan board and holding stand up / Stand downs.
The team decided to consolidate initial design ideas via a Mood Board was created as a method of brainstorming ideas amongst the team, whilst keeping a record of the thought process.
Within the initial planning stage of the project, wireframes were created to provide initial layouts and to ensure all members of the team were envisioning the same design and starting point for the web application.
Accessibility considerations have been considered throughout the projects creation. Such as colour schemes, colour contrasts, fonts and alt text attributes are set correctly.
A dark background with aqua colour scheme was chosen to keep with the retro 90's computer terminal theme.
Colour contrast has been consider and the chosen colour scheme has been tested via an online Colour Contrast Checker.
Google fonts were used within the project to enable additional customisation to the application as well adding to the general theme and feel of the application. Source Code Pro, Ubuntu Mono
Scoring And Completion: A feature to allow a visual way of keeping score for the player.
Randomised Questions: Randomising the presented quiz questions from the initial bank of 30 quiz question
Varied Question Content: Quiz questions should have varied content, taking into consideration different topics as well as adding images as question answers as well as more visual content.
Timer Toggle: Addition of a timer to increase the difficulty of the quiz and force the user to think quickly.
Puzzle Integration: The addition of more puzzles, rather than simple answer the question style questions
Visual Theme Toggle: Addition of themes that can be toggled between each other. Proposed colours are aqua by default, orange, green and a light or white. These chosen colours are based off traditional terminal themes.
Testing the application has been an ongoing process throughout the development of the website. With a focus on responsiveness across all standard screen sizes, various edits were made throughout the development process to ensure the application looks and performs well on mobile, tablet and desktop. The team agreed to deploy early to allow to additional live testing encase there were any inconsistencies between the development environment and the live application.
Bug: Quiz question icons, don't scale properly on higher resolution screens, the question icons are really small on the screen.
Fix: Issue resolved, bug was created due to different zoom levels on different developers screen sizes.
Bug: Random question list generator goes into infinite loop due to use of while.
Fix: prevent while loop from starting when number of questions is larger than the list of possible questions.
Bug: Footer expands past boundary of game board, creating white space and scroll on mobile phones
Fix: Pending (Add burger icon for mobile devices?)
Bug: Text in json files where code has been used as an answer, the answer gets interpreted as code.
Fix: html characters in string not displaying properly was: use string.replaceAll to replace < and > characters with correct HTML escape characters - < and > respectively.
Bug: Close button on display questions modal not working
Fix: Corrected indexing to fix this issue
Validators were used to help address any issues within the projects HTML, CSS and Javascript files. HTML Validator, CSS Validator, [JavaScript Linter]()
For this project, GitHub pages was the chosen deployment method. A simple and straight forward service provided by github which uses a repo branch as a source for the page to pull from.
Guy Clements: GitHub
Zara Samm: GitHub
Nathan Jones: GitHub
Richard Hallam: GitHub
James Vanstone: GitHub
One of the key successes was creating the retro 90's style computer terminal for the Quiz's game board. The entire team contributed to the structure, layout and theme to achieve this.
After deciding on using a JSON format for the storage of quiz questions, Utilising this format as well as linking and looping through the questions in Javascript proved problematic with Javascript's Arrays.
Overall the Quiz Forge project went very well, there were ups and downs as to be expected, Javascript was both kind and hard to tame at the same time. Ensuring the application looks great and responded smoothly and correctly was an ongoing yet enjoyable battle.
The development worked very well together with little to no issues. Stand ups and Downs took place everyday where progress was summarised and a game plan for the next day was formed. Throughout various discussions the entire group was involved in communicating their view, problem, concern or solution.
Shuffle function is from this Stackoverflow Javascript Shuffle
With regards to future improvements, generally speaking additional functionality and customisation would be the main areas of focus. For example, extending the quiz's question bank, featuring different topics, additional more challenging questions in the form of puzzles. By utilising JSON as the question storage format, with additional development the user would be given the ability to configure the quiz system to their liking via uploading a custom JSON file to change the content of the quiz.