This project aims to quantify a figure skater's development as an athlete for high performance pathway through profiling. It will allow individual skaters to map out their own progress goals with coaches' guidance whilst highlighting possible improvement areas. It is also a visualization tool for skaters to be more aware of their strong components vs. weak components for a better understanding of on ice performance.
The following are the stakeholders:
- Skaters / Skater's Parents
- Skater's Coach
Island Ice Figure Skating Club is a social ice skating club formed to provide support to our figure skater members and families. IIFSC focuses on building rapport, camaraderie and harmony within the ice skating community by initiating and organizing a variety of activities that promotes such values through fun/play. IIFSC believes that it takes a village to raise a child and aims to create a strong tribe to support each and every individual skater (and family) to reach their individual skating goals. IIFSC logo represents the blades and scratch lines made when a figure skater draws/cuts an image on ice. Both blades were chosen in pink and blue to signify gender neutrality whislt one being larger than the other as a representation of a parent/educator/coach and child/student.
IIFSC is also the home club for a number of Singapore's National Squad team members. This profiling tool was built to provide support for squad athletes; while also providing awareness and opportunity for recreational and competitive skaters geared towards high performance.
Singapore launched The National Physical Fitness Award/Assessment (NAPFA) in 1982. It is an assessment of physical fitness conducted biannually to school going children which involves the following components:
- 2.4km Walk-Run
- Sit-Ups
- Pull-Ups/Push-Ups/Inclined Pull-Ups
- Sit-and-Reach
- Shuttle Run
- Standing Broad Jump
NAPFA standards were used to develop an adapted version for our profiling standards as figure skating demands sport specific skills. The 3 most critical fitness component domains for figure skating are listed below. More information can be found in the demo site info page; whilst the standards developed for the evaluation algorithm can be found here.
1. Agility, Balance and Coordination
2. Power and Strength
3. Flexibility
Assessment stations selected took into consideration limited access to sport science lab and equipment. As such, these assessment can be conducted by high level athletes themselves (as a gauge) at home or anywhere by a coach with just a measuring tape, marker and a phone with timer.
At present, the algorithm is limited to the evaluation of female skaters in the age range of 7 to 19 and skating at least in the preliminary category. info page image guidelines are still pending approval
Wireframe of the build design includes:
- Interactive profiles page with skater card / data.
- Assessment page that allows input of data for storage.
- Info page that provides guidelines for skaters for self assessment at home.
IIFSC base colors were used for uniformity across the site for a strong DNA connection with users to strenghten their relationship with IIFSC. Sport skill component domains are color coded for easy referencing. Color selection is based on color pyschology skewed towards asian associations but adjusted to match IIFSC base colors.
BLUE denotes stability, balance, and harmony; selected to represent the component domain of Agility, Balance and Coordination.
RED symbolizes power and energy. PINK symbolizes unconditional love and support; selected to represent the component domain of Power and Strength.
YELLOW is associated with spontainety and flexibility; selected to represent the component domain of Flexibility.
BLACK symbolizes elegance and sophistication; heavily use and a representation of our graceful and elegant skaters.
Julius Sans One and Montserrat (san-serif family) were selected as font-pair for this project to portray IIFSC's lean yet no nonsense approach towards setting a higher bar for the figure skating community.
A demo of the site can be found here https://suipingooi.github.io/iifscpt/
- HTML 5.0 + CSS
- Bootstrap 4.0 - CSS & JS https://getbootstrap.com/
- JQuery.JS https://jquery.com/
- Restdb.io https://restdb.io/ for API database management.
- Chart.JS https://www.chartjs.org/ for visual / graphical representation of data.
- Google Fonts https://fonts.google.com/
- Gimp 2.10 https://www.gimp.org/ for image manipulation - alpha channels / gamma backgrounds.
- Adobe Color https://color.adobe.com/ to extract IIFSC base color chart.
JSHint testing was done for script.js. All warnings dealt with.
W3C Validator testing was done for all html files. All errors corrected and suggestion for language included.
Jigsaw CSS Validator testing was done for css file. No error was found.
Action (development testing) | Results | Status |
---|---|---|
Form submissions - empty form | API post empty strings | Fixed |
Form submissions - invalid data | API error and redirects with no data | Fixed |
Algorithm domain(s) function | Banding error | Fixed |
Algorithm domain(s) function | datatype error | Fixed |
Loading - on wait div | Misalignment | Fixed |
Action (deployed testing) | Results | Status |
---|---|---|
Loading deployed page on iOS mobile | chart.JS dissapeared when modal reopens | Fixed |
Loading deployed page on android mobile | No Issues found | |
Loading deployed page on Firefox | No Issues found | |
Loading deployed page on Chrome | No Issues found | |
Loading deployed page on Safari | chart.JS dissapeared when modal reopens | Fixed |
Responsive testing on Firefox | Misalignment of form columns detected | Fixed |
Responsive testing on Chrome | No Issues found | |
Logo hyperlink | Reloads profiles (API get) | No Error |
IG icon hyperlink | Opens IIFSC IG page in a new tab | No Error |
Profile card hyperlink | Modal pop-up with chart & data | No Error |
Tab navigations | Opens file paths | No Error |
Form submissions - invalid response | Alert pop-up (invalid response) | No Error |
Form submissions - empty form | Alert pop-up (invalid response) | No Error |
Form submissions - float & integers | Able to post floats and integers | No Error |
Form submissions - submit | (API post) Redirects to profiles page | No Error |
Form submissions - reset | All field clears | No Error |
Hyperlinks in readme.md | All links successfully loads | No Error |
- Tab folder navigation bar for easy access with contrast for active pages.
- Info page for parents and aspiring high perfomance athletes for self assessment.
- Profile card view on index landing page for coaches.
- Visual representation of chart and score banding with raw data included.
- Color coded domains across the site for easy reference.
- IIFSC logo reloads to main index (profiles) page.
- IG account link for recent news and activities by the club.
- A login ID for coaches and skaters to protect individual skater's datasets and privacy as high performance pathway is extremely competitive.
- PhotoID of skaters on profile cards.
- Profiling evaluation of male skaters.
- Profiling evaluation of adult skaters.
Deployed page on github pages for testing. No Issue encountered. https://suipingooi.github.io/iifscpt/. Deployment on github pages is straightforward utilizing the settings page and built from main branch without theme or custom domain as it is still a demo site pending assessment and approval for actual active deployment on IIFSC's main site.
Island Ice Figure Skating Club (IIFSC) for all the support provided in the development of this diagnostic tool. Tutors Arif and Malcolm for guidance with troubleshooting and debugging.
NAPFA standards extracted from Ministry of Education's Physical Education framework for school going children in Singapore.
- IIFSC logo from IIFSC
- IIFSC color chart from AdobeColor retrieved on 31 Dec 2020.
- IG logo adapted from Flaticon retrieved on 27 Dec 2020.
- Ms. Jackie Chin - President, IIFSC
- IIFSC Executive Committee Members
- Mr. TC Wee
- Ms. Angeline
- Ms. Priscilla
- Ms. Cindy
- Ms. Genevieve Har - IIFSC Coach