Challenge Overview
Welcome to "Heritage qJack - the qHMO Card Game UI Prototype". We want to build a Card Game (Blackjack) that educates those who are using our application called "qHMO" (desktop web app) about healthcare and management care in a fun and engaging way. This card game will launch from within our "qHMO" web application, as an overlay on the current qHMO application in a way that fits within the design and minimizes how much the user is pulled out of the qHMO primary functions. As an example, "qHMO" is a web application that helps a medical care provider manage their patient care, case management, prescription control and other aspects of their care provider functions. In this challenge, we need your help to create basic UI and basic functionality needed for the card game. Join us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Test in all the required browsers (including Safari and Chrome for mobile phone).
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
User Interaction Scenarios :
Please create the card game interaction like the following scenarios :
1. Basic Environment :
- This card game will run under our primary office application called "qHMO".
- Since we cannot provide the real app to you, please use the qHMO apps screenshot as a background for the game.
- This card game will run above the qHMO apps (similar like modal window apps) and will be run under desktop and mobile Tablets (Not Phone), the interfaces do not have to be responsive however should be able to adapt to screen resizes/rescaling by upto 25%.
2. Starting The Game :
- This card game can be activated when a user clicks the game "Hot Spot".
- Hot spot is a launcher/button that will show randomly (time and location) in the qHMO apps (time launch decide by admin).
- Design for the Hot Spot can be found in "heritage-ffix-01.png"
- Notice that the hot spot design elements consist of Play button, timer button, and two cards.
- Hot spot will appear randomly (location and time), so when user refreshes the page we need the hot spot needs to appear in random location on the screen.
- User can play the games by click the play button, after user click it, there will be a card games shown in the qHMO apps (heritage-ffix-02.png).
- Since this game show randomly in any location of the screen, user should be able to delay the games if they're busy. Hot spot button should be moveable by drag action, so when user don't want to play it, they can move it to the edge of the screen until the button disappears (time out).
- Since this game show randomly in any time, user should be able to delay the game if they're busy but still want to play the game later. When user click the timer button, there will be an option to hide the hot spot (heritage-ffix-06.png). Options are 15 and 30 minutes.
- If user chooses to delay the game and hide the button for 3 times in a row, there will be a warning showed up (heritage-ffix-11.jpg). Make sure to provide this condition in your prototype.
3. Play the Game (Stage 1) :
- After user clicks the play button, the card game will show up above the qHMO application (heritage-ffix-02.jpg)
- This game uses a competition format, the game itself will run for a whole one year in the company and the format will be like the following :
* Stage 1, Individual Play (3 months, January to March)
* Stage 2, Team/Division Play (3 months, April to June)
* Stage 3, League Play (3 months, July to September)
* Stage 4, Championship (3 months, October to December)
- Each full game is started on Monday and should end on Friday of the same week.
- Users need to agree to the disclaimer before being able to start the game (heritage-ffix-02.jpg)
- Notice the table design, there are several layout elements that need to be understandable :
* "Phase 1 : Individual Play", this is showing the stage where user currently active, Individual play means user will play alone against the dealer in stage 1.
* "Welcome John!", this is a welcome screen that welcoming the user.
* "300, chip icons", this is the money/point that user have to play in the card game.
* "Your place: 32 of 130", showing user position in the competition.
* "leaderboard", this is link to go to leaderboard screen.
* "Game rules", link that will show the overall games rules/blackjack basic games.
* "Chat", additional features for user to chat with other player.
* "5 Circle on the table", showing user and other player position in the games.
- To be able get new card, user needs to answer questions on the games (heritage-ffix-03.jpg) related to healthcare and the company. Questions will be added by admin in admin section and user can choose one of the 4 answer options.
- Questions will be set in 3 different difficulties, Easy, Moderate and Highy Difficult. Questions difficulties will be arrange depends on stage
- If user choose wrong answer, the card games will be close (user cannot continue), and the games will show the right answer along with a link about the topics (heritage-ffix-08.jpg).
- If user choose right answer, the card games will continue and user will get new cards on their table (heritage-ffix-04.png).
- There will be a transition when the card being forwarded from the dealer to user table. There will be also a side bet (insurance) needed to be created (not necessary for now).
- After receive their cards, the games will be closed and the games will be paused until the next hot spot appear (heritage-ffix-05.png).
- After the next hot spot appear and user click the play button, new question will appear and if user answer correctly, new cards will be given to the user (heritage-ffix-09.png)
- After receive the 2nd cards, the games then will be closed and paused until the next hot spot appear.
- On the next hot spot and games continue, user will be asked about their choices for their bet (stand, split, x2 double, hit).
- If user choose to stand, dealer and user will show their cards and if the user win screen "heritage-ffix-13.png" will appear.
- If user choose to x2 double, the bet will be raise, default bet in stage 1 is 100 points and then dealer and user will show their cards for winner decision.
- If user choose to hit, user will be give a new card and then dealer and user will show their cards for total accumulation and winner decision.
- If user win the game, user will be able to continue to 2nd phase/stage (heritage-ffix-26.png)
4. Play the Game (stage 2,3 and 4) :
- Basically the scenario is the same, everytime hotspot appear, user can choose to play or delay or pass the game. These stages requires each user to create group/team consist of 5 persons in each team.
- Everytime user play, they need to answer a questions, if in stage 1 question was set to low then in stage 2 to 4 questions was set to :
* Stage 2, Low to Medium questions.
* Stage 3, Medium to High questions.
* Stage 4, High questions.
- User will play as a team (up to 5 user) in stage 2,3,4 (heritage-ffix-15.png)
- At the first start of stage 2,3,4, the team will be given 500 points + their team player points (added to the team bucket).
- Only team player with the highest point can go to next stage.
- In stage 2, if user choose right answer, they will be given card + 10 points to their team bucket and if they choose wrong answer, no cards will be give and their team bucket point will be deducted by 10 points (heritage-ffix-17.png and heritage-ffix-18.png).
- In stage 3, if user choose right answer, they will be given card + 20 points to their team bucket and if they choose wrong answer, no cards will be give and their team bucket point will be deducted by 20 points (heritage-ffix-17.png and heritage-ffix-18.png).
- In stage 4, if user choose right answer, they will be given card + 30 points to their team bucket and if they choose wrong answer, no cards will be give and their team bucket point will be deducted by 30 points (heritage-ffix-17.png and heritage-ffix-18.png).
- If any user answer 5 correct questions in a row, they will be able to choose 1 from 5 cards available (heritage-ffix-16.png and heritage-ffix-19.png).
- User can see all cards from their team members.
- If user choose to stand, dealer and user will show their cards and if the user win screen "heritage-ffix-27.png" will appear.
- If user choose to x2 double, the bet will be raise double.
- If user choose to hit, user will be give a new card and then dealer and user will show their cards for total accumulation and winner decision (heritage-ffix-28.png)
- If user win the game, user will be able to continue to next phase/stage (heritage-ffix-27.png)
5. Games Settings and Links
- Leaderboard screen can be found in heritage-ffix-21.png
- Member rules screen can be found in heritage-ffix-22.png
- Chat features can be found in heritage-ffix-23.png
IMPORTANT : Please read qHMO_Design_Files.zip for more clear explanation/description about the games flow.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use JQuery for this challenge.
Browsers Requirements:
- IE9, IE10++
- Latest Firefox, Safari & Chrome Browsers
- Mobile Browser.
Documentation Provided:
- Storyboard and All necessary flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.