For my Portfolio Project 2 on Code Institute's 5 Project Course I have created this informational website focused on teaching students some foundational trigonometic principles. The site includes useful notes and a quiz to reinforce the student's learning.

Link to deployed site.

• Sokatoa
  • Table of Contents
  • Project Goals
    • User Goals
    • Site Owner Goals
  • User Experience
    • Target Audience
    • User Requirements and Expectations
    • User Stories
  • Design
    • Design Choice
    • Colour Palette
    • Fonts
    • Structure
    • Wireframes
  • Technologies
    • Langauges
    • Frameworks & Tools
  • Features
  • Testing
    • HTML Validation
    • CSS Validation
    • Accessibility
    • Performance
    • Device Testing
    • Browser Compatibility
    • Testing User Stories
  • Bugs
  • Deployment
    • Site Deployment
    • Version Control
  • Credits

• Learn what trigonometric functions are.
• Learn how to apply the work in maths problems.
• Memorise the three main trig functions with a simple memnomic device.

• Teach site users about trig functions and how to use them
• Ensure site users remember the different functions after they leave the site.

• Those learning the basics of trigonometry
• Those studying for junior cycle maths exams.
• People looking for a simple way to memorise the trig functions.

• A simple and intuitive site design.
• A short descriptive section to teach the basics of trigonometric functions.
• Fun and easy game to help reinforce what they have just learnt.
• A functional site that can scale to all screen sizes.
• Accessibilty
• A means of leaving feedback.

1. As a first-time user, I want to know I am on the correct site.
2. As a first-time user, I want to know what the purpose of the site is.

3. As a user, I want to learn the basics of trigonometric functions.
4. As a user, I want to test my knowledge of trigonometric functions.
5. As a user, I want to see how many correct/incorrect questions I've scored.
6. As a user, I want to reset the quiz and try again.
7. As a user, I want to provide feedback to the site.

8. As the site owner, I want users to be able to find me on social media.

This webpage has been designed to be visually interesting and provide the readers the information required for them to feel confident in their understanding of trigonometric functions.

The chosen colour palette was picked to be simple to emphasise the content with more vibrant colours to indicate incorrect and correct answers in the quiz.

The Noto Sans font was used for headings and text body.

• On the index.html page:
  • A landing and introductory section.
  • one section where to user can learn basic trigonometry.
  • one secion with a quiz.
  • one section with the quiz results.
• A 404 page.

Landing screen

A wireframe for the landing screen on mobile & browser

Learning screen

A wireframe for the learning screen on mobile & browser

Practice screen

A wireframe for the practice screen on mobile & browser

Review screen

A wireframe for the review screen on mobile & browser

• CSS
• HTML
• JavaScript

• Git
• GitHub
• GitPod
• Balsamiq
• Google Fonts
• Pexels
• TinyPNG
• Convertio
• JSHint
• Lighthouse
• W3C HTML Checker
• W3C Jigsaw CSS validation service
• WAVE WebAIM web accessibility evaluation tool

This website consists of 1 page, with 4 sections:

• The logo and name are displayed to confirm the user is on the correct site.

• Social Media Links

• Introduces the user to the site and basic trig

• Provides some basic information to teach the user the basic of triginometric functions

• The format of the quiz section when the user first lands on the quiz section.

• The format of the quiz section when the user begins the quiz

• The format of the quiz section when the user completes the quiz

• The review screen where the user can review the results of the quiz.

• Provides a way for the user to return to the main site after clicking a broken link.

• An interactive right angle triangle to demostrate the effects changing the triangle properties has.
• An introduction to the unit circle.
• A section and quiz where the user can learn about wave functions.

The W3C validation service was used to validate the html of the webpage. No errors were detected.

index.html Validation

404.html Validation

The W3C Jigsaw CSS validation service is used to validate the sites CSS styling.

CSS Validation

The JSHint Static Code Analysis Tool was used to validate the sites JavaScript files.

quiz.js JSHint validation

script.js JSHint validation

The WAVE WebAIM web accessibility evaluation tool is used to ensure the site has no accesibility or contrast errors.

index.html Accessibility

404.html Accessibility

Google Lighthouse, found in Google Chrome Dev tools was used to test the performance of the site.

index.html Lighthouse Desktop Performance

index.html Lighthouse Mobile Performance

404.html Lighthouse Desktop Performance

404.html Lighthouse Mobile Performance

• Header & Logo
  • Logo and site title remain clearly visible down to a screen width of 200px.
  • Logo link to reload page functions as expected.
• Landing Section
  • Landing section scaling remains functional down to a minimum screen width of 190px.
  • Images and text are clearly seperated and legible at all screen widths.
  • Navigational button works as expected.
• Learn Section
  • Landing section scaling remains functional down to a minimum screen width of 230px.
  • Images and text are clearly seperated and legible at all screen widths.
  • Navigational buttons works as expected.
• Quiz Section
  • Initial quiz section scaling remains functional down to a minimum screen width of 200px.
  • During the quiz; quiz section scaling remains functional down to a minimum screen width of 230px.
  • After the quiz; quiz section scaling remains functional down to a minimum screen width of 230px.
  • Timer works as expected - Begins when the 'begin' button clicked, stopped when the final question is answered.
  • Score keeper works as expected.
  • Option selection buttons work as expected.
  • Next question button and question resetting works as expected.
  • Review button becoming available upon completion of the quiz works as expected.
• Review Section
  • Review section scaling remains functional down to a minimum screen width of 180px.
  • Score and Time display works as expected.
  • Reset quiz button works as expected.
• Footer
  • Footer scaling remains functional down to a minimum screen-width of 180px.
  • All social media link work as expected.

In addition to various devices resolutions being testing through the Responsive Design Mode tool in Mozilla Firefox the following devices were used to test the site:

• Moto G8 [720x1560px]
• iPhone 13 [1170x2532px]
• iPhone 11 [1792x828px]
• iPhone XR [828x1792px]
• Galaxy a51 [1080x2400px]

The website performed well on all these devices. No unexpected errors were found and responsiveness was good.

The following devicese were used to test the site:

• Mozilla Firefox v101.0.1
• Google Chrome v103.0.5060.53
• Microsoft Edge v103.0.1264.37 The website performed well on all these browsers. No unexpected errors were found and responsiveness was good.

1. As a first-time user, I want to know I am on the correct site.

Screenshots

2. As a first-time user, I want to know what the purpose of the site is.

Screenshots

3. As a user, I want to learn the basics of trigonometric functions.

Screenshots

4. As a user, I want to test my knowledge of trigonometric functions.

Screenshots

5. As a user, I want to see how many correct/incorrect questions I've scored.
6. As a user, I want to reset the quiz and try again.

Screenshots

7. As a user, I want to provide feedback to the site.
8. As the site owner, I want users to be able to find me on social media.

Screenshots

The site was deployed using Github Pages using the following steps:

1. In the github repository open repository settings.
2. In setting open pages tab.
3. Select branch main as source.
4. Save selection to deploy the site.
5. Open the deployed site using the link provided on the screen.

Steps to deploy site on Github Pages

Repository created on Github. Method:

• Create new public repository on Gitpod using the CodeInstitiute template.
• Open a Gitpod workspace.
• Create required folders and documents.
• Project was previewed using the liveserver port on a the Firefox browser.
• Work was continuosly saved and committed using the following git commands:
  • git add . to stage changes to git.
  • git commit -m to commit changes
  • git push to push changes to Github repo.

A copy of the original repository can be created by forking it. This will allow changes to be made to the cloned repo without it affecting the original.

1. From within the repo you want to fork click the fork button.
2. Input the name and description of your cloned repo and click the Create fork button.

Steps to fork a repository

Cloning a repo allows you to make local changes to the repository before committing and pushing them to the remote. z

1. From within the repo you want to clone click the dropdown Code button.
2. Click on the clipboard icon to copy the URL.
3. In Git Bash, navigate to the working directory you want to place the clone.
4. Type git clone followed by the copied URL.
5. Press Enter and the clone will be created.

Steps to clone a repository

Explanations for the Sohcahtoa memnomic were taken from CalcWorkshop

Right Angle Diagram taken from CalcWorkshop
SohCahToa Diagram taken from CalcWorkshop
Trigonometry Diagram 2 taken from MathsMadeEasy
Trigonometry Diagram 3 taken from MathsMadeEasy
Trigonometry Diagram 4 taken from MathsMadeEasy
Trigonometry Diagram 5 taken from MathsMadeEasy
Trigonometry Diagram 6 & 7 taken from Story of Mathematics
Trigonometry Diagram 8 taken from Basic-Mathematics.com
Trigonometry Diagram 9 taken from mathsisfuncom
Trigonometry Diagram 10 taken from Justin Math

I would like to thank my mentor Simen Dehlin for his mentorship throughout the project. I would also like to thank Mo and Mike Sheehan, the cohort mentor and facilitator for helping out wherever I had any questions. Lastly, thanks to all my friends and family who were happy to help out with the device testing.