Giter Club home page Giter Club logo

mathsbuddy's Introduction

MathsBuddy logo

MathsBuddy

MathsBuddy is a website that provides online learning for maths to students who wish to take the Junior Cycle exam.

Overview

Who is this app for?

MathsBuddy is a website which provides resources for students who will be taking the Junior Cycle exam in Ireland. These students will be aged between 14 and 16 years old. MathsBuddy is a website which will be used by students who are in high-risk families and are not entitled to online instruction from the department of education.

What does it do?

MathsBuddy hopes to bridge the gap during the current covid-19 crisis by offering an opportunity to solidify maths concepts up to Junior Cycle level.

How does it work

MathsBuddy gives access to tutorial videos and past exam questions, broken down by topic, for the Junior Cycle maths exam.

Screen Mockups

These screen mockups were created for the MathsBuddy website using the Multi Device Website Mockup Generator from techsini.com.

Home Page Home page

Maths Page Maths page

About Page About page

Contact Us Page Contact Us page

Number Types Page Number Types page

Co-ordinate Geometry Page Co-ordinate Geometry page

Algebra Page Algebra page

Trigonometry Page Trigonometry page

Number Types Exam Questions Page Number Types Exam question page

Co-ordinate Geometry Exam Questions Page Co-ordinate Geometry Exam question page

Algebra Exam Questions Page Algebra Exam question page

Trigonometry Exam Questions Page Trigonometry Exam question page

404 error Page 404 error page

Features

Existing Features

1 Site navigation

On the MathsBuddy website each page has a header at the top of the page which contains a logo and a NavBar. On any page if the student clicks the logo they will be redirected to the MathsBuddy home page. The benefit of this is that it is a consistent behaviour across the entire MathsBuddy website. This means that the student can always get back to the home page, no matter where they are in the site.

The NavBar contains links to the 4 main pages (Home, Maths, About and Contact Us). NavBar

The NavBar is used so that the student can navigate easily between the major sections of the MathsBuddy website, on every device.

On each of the topic video pages, which are navigated to from the Maths page, there is also a breadcrumb navigation bar.
Topic breadcrumb navigation

This breadcrumb navigation bar serves a number of purposes. Firstly, it allows the student to navigate from one topic page to another, rather than having to go back to the Maths page each time they wish to go from one topic page to another. Secondly, it allow the student to navigate back up to the parent(Maths) page easily. Thirdly, the breadcrumb shows the student exactly where they are in the MathsBuddy website. Students will never feel lost when they use MathsBuddy.

On each of the topic exam questions pages, which are navigated to from the topic video page, there is also a breadcrumb navigation bar. Topic exam breadcrumb navigation

This breadcrumb navigation bar serves a number of purposes. Firstly, it allows the student to navigate from one exam question page to another, rather than having to go back to the topic video page each time they wish to go from one exam question page to another. Secondly, it allows the student to navigate back up to the parent pages easily, both to the topic video page and the Maths page. Thirdly, the breadcrumb shows the student exactly where they are in the MathsBuddy website. Students will never feel lost when they use MathsBuddy.

2 Show videos on each topic

Each topic video page shows 3 videos relating to the topic, except the Trigonometry topic video page which show one image and 2 videos. None of the videos will play automatically. All of them have user controls. Topic video page

Students can click on whichever of these videos they want to watch. They can expand it to full screen, pause, restart, mute, choose to go back or forward on the video if they wish.

This gives the student full control over a multi-sensory, multimedia learning tool. Learning is greatly enhanced for every new sense that is used when studying. These videos give the student the best chance to retain information from their study session with MathsBuddy..

These videos come from two distinct types of source:

   2.1 Videos stored locally

   2.2 Videos from external sources.  E.g. Youtube, Khan Academy

3 Display past exam papers for each topic

Since the end goal of the Junior Cycle maths programme is for students to sit a formal Department of Education exam, it is imperative that the student has access to questions on each topic that are of the same standard as those that will appear on the exam. Past exam paper page

The benefit of having past exam papers on the MathsBuddy website to work through, is that the student will be practising questions that are of the same standard that they will encounter during the exam. This is a key part of the preparation for any exam, but especially for the Junior Cycle exam which will be the first externally set exam that most students will sit.

4 Supporting pages

Home Page The home page is where the student will land when they access the MathsBuddy website. As well as the header containing the logo and navbar the home page consists of

  • a Title which lets the student know that they are on the MathsBuddy website.
  • a Subtitle which reassures the student that MathsBuddy is a friendly place to learn
  • a subtle, non-intrusive background video which lets the student know that this website is all about maths.
  • a prominent "Call To Action" button which invites the student to enter the main Maths section of the MathsBuddy website.

Maths page

The Maths page contains links to the Number Types, Algebra, Co-ordinate Geometry and Trigonometry topic video pages. It also contains an inspirational quote displayed against a background image of a traditional blackboard. Maths page

As well as providing inspiration to the students via the central message, the Maths page is an essential central repository of the links to the topic video pages. This page acts like a central hub for all the resources on the site.

About page

The About page contains 6 boxes that provide information about the service that the MathsBuddy team provide, beyond the videos and the exam questions. Each box shows a relevant image, a service heading and a short description of the service available. About page

There are six services shown on the About page: Zoom classes, Recorded classes, Here 2 help, Exam prep, Student focussed and Slack community. Displaying these services will put the student at ease. They will know that there is support for them as they prepare for the Junior Cycle maths exam. Just knowing that there is someone out there who care about the student, is on their side and willing to help will take some of the pressure off these students. Plus, they now know exactly what type of support they will receive.

Contact Us page

The Contact Us page consists of a single form which the student can use whenever they have a query. The form consists of some input fields to collect information about the user: Name, Enquirer type (Student, Parent, etc.), Topic of interest, Email address and Query. The student has the option to clear the form if they want to start again. There is a prominent "Submit Query" call to action button on this form. Contact Us page

The Contact Us page gives a student (or parent or teacher) the opportunity to contact the MathsBuddy team at any time with any questions they might have. This will give a student great peace of mind knowing that they can reach out whenever they are stuck.

Features to Implement in the future

  • Send the 'Contact Us' form data to a backend server.
  • Use a collapsible navbar in mobile versions of the site.
  • Add more maths topics.
  • Add more past papers exam questions.

UX

Personas

External link to Emily's Persona

Emily

External link to Daniel's Persona Daniel

Student Journey Maps

External link to Emily's Journey Map Emily Journey Map

External link to Daniel's Journey Map Daniel Journey Map

User Flow

External link to User Flow User Flow

Site Map

External link to Site Map MathsBuddy Site Map

Accessibility

The MathsBuddy website was checked to ensure accessibility using the WAVE web accessibility evaluation tool. A Lighthouse report was also generated.

Lighthouse Report

Lighthouse Report

Home Page Home page

Maths Page Maths page

About Page About page

Contact Us Page Contact Us page

Number Types Page Number Types page

Co-ordinate Geometry Page Co-ordinate Geometry page

Algebra Page Algebra page

Trigonometry Page Trigonometry page

Number Types Exam Questions Page Number Types Exam question page

Co-ordinate Geometry Exam Questions Page Co-ordinate Geometry Exam question page

Algebra Exam Questions Page Algebra Exam question page

Trigonometry Exam Questions Page Trigonometry Exam question page

404 error Page 404 error page

Design Decisions

Code Quality

  • Correct use of HTML
    • Use HTML5 Semantic elements
    • Use Horizontal NavBar
  • Correct use of CSS
    • Use Flexbox for page layout

Usability

  • Suitability for purpose
    • MathsBuddy provides resources that cover maths topics for the Junior Cycle.
    • MathsBuddy provides access to past exam questions from the maths Junior Cycle exams.
    • MathsBuddy provides resources and exam questions for both Paper 1 and Paper 2 on the Junior Cycle exam.
    • Covers Number Types (paper 1), Algebra(paper 1), Co-ordinate Geometry(paper 2) and Trigonometry (paper 2)
  • Ease of use
    • A simple easy-to-use application focusing on reducing the 'cognitive load' on students. The system is designed so that students do not have to remember large amounts of detail.
  • Information Display
    • There is a main navigation bar on every page. This allows navigation to all the main pages (Home, Maths, About and Contact Us) from everywhere on the site.
    • For the Topics pages, as well as the main navigation bar, there is a secondary (breadcrumb) navigation that allows the student to (i) go back to the parent page (Maths), or (ii) go to the previous and next topic pages.
    • For the Exam Question pages, as well as the main navigation bar, there is a secondary (breadcrumb) navigation that allows the student to (i) go back to either of the parent pages (Maths or the topic page), or (ii) go to the previous and next exam question pages.

Layout and Visual Impact

  • Responsive Design
    • "Desktop First" design philosophy
    • FlexBox is used to give responsive layouts
    • Media Queries are used for each different screen size the tool will be used on.
  • Navigation
    • Straightforward navigation enabling students to move easily from one part of the site to another.
    • When a student ventures onto a page which is not navigable from the main navigation bar, a secondary breadcrumb navigation bar is engaged, which allows the student to navigate all the way back to a main page.
    • The secondary breadcrumb navigation bar also allows the student to go to the next and previous pages at the same level. I.E. If the student is on the Number types topic page, he can go to the Algebra topic page or the Trigonometry topic page. Also, if the student is on the Number types exam questions page, he can go to the Algebra exam questions page or the Trigonometry exam questions page.
  • Image Treatment
    • Images are compressed to reduce download times. tinypng.com and tinyjpg.com were used to compress the image files.
    • Multiple versions of each image are used, with smaller images used for smaller devices. This reduces the download times for tablets and especially mobile devices. The HTML5 source element is used and its srcset attribute is set to show the smaller image at lower screen widths. For background images, a media query is used in CSS to set the background image to a smaller image when the screen size falls below a particular size.
  • Non-image Treatment
    • All videos are made available in mp4, webm and ogg formats. Videos were converted to webm format using wem.to, and to ogg format using onlineconverter.com. The HTML5 source element is used and its src attribute is set to point to the correct version. Its type attribute is set to tell the browser which format this src is pointing to.
    • Text is set within the video element. This text will be displayed if the student's browser does not support the video element.
    • The video on the home page is set to play automatically and to loop. This is because the video is intended as a background video, its sound is muted and the colours have a low saturation so they will not distract the student.
    • All other videos are not autoplay and allow the student to control their playback.
    • Some videos are served from the MathsBuddy site.
    • Videos served from external sites are displayed within an iframe.
    • For contrast reasons to make the MathsBuddy website accessible to those with vision impairment, text is shown either as dark text on a light background, or light text on a dark background.
    • The font used on the site is "Gabriela" serif font. A complementary sans serif font "Roboto Slab" is used only in the footer.5

Wireframes

Home Page Home page Maths Page Maths page About Page About page Contact Us Page Contact Us page Topic Video Page Topic page Topic Exam Questions Page Exam question page

Software Development Process

Version Control

Git is used for version control of this project

  • Git commit message prefix convention denoting the type of change made in this commit:
    • DOC: Documentation
    • FEAT: Feature
    • FIX: Bugfix
    • STYLE: Changes to CSS
    • ARIA: Changes to improve accessibility for the MathsBuddy website.
  • Git messages will be no longer than 50 characters long.

GitHub is used as the central version control repository for this project.

Testing

All testing on the MathsBuddy website will be done manually.

Heuristic Evaluation Heuristic testing is performed where an expert in the particular field is not available. However, an expert has laid out a set of rules for testing. The non-expert tester can follow these heuristic set of rules, and apply them in place of an expert tester.

For the MathsBuddy website, a set of heuristic rules developed by Jakob Nielson, an expert in usability, will be used to test the usability of the website.

No Heuristic test MathsBuddy
1 Visibility of system status Navbar indicates where in the site the user is
2 Match between system and real world Real exam questions
3 User control and freedom Full navigation, control on videos
4 Consistency and standards Same navigation on all pages, layouts are the same
5 Error prevention All links are working
6 Flexibility & Efficiency of use Student can go from on topic to the next easily, or navigate back using breadcrumb
7 Aesthetic & minimalist design Minimal content is shown, e.g. only videos needed and a button to go to exam pages
8 Recognition rather than recall Each topic page is laid out the same way
9 Help users recognise, diagnose and recover from errors 404 error page

The MathsBuddy website will be tested on the following browsers:

  • Firefox
  • Chrome

The MathsBuddy website will be tested on the following devices:

  • Laptop = HP EliteBook 8570p
  • Tablet (Landscape orientation) = Huawei MediaPad M5 10.1"
  • Tablet (Landscape orientation) = Huawei MediaPad M5 10.1"
  • Phone = Samsung Galaxy A10
Test scripts

Home page - Laptop - Firefox Home-Laptop-Firefox

Home page - Laptop - Chrome Home-Laptop-Chrome

Home page - Tablet Landscape - Firefox Home-Tablet Landscape-Firefox

Home page - Tablet Landscape - Chrome Home-Tablet Landscape-Chrome

Home page - Tablet Portrait - Firefox Home-Tablet Portrait-Firefox

Home page - Tablet Portrait - Chrome Home-Tablet Portrait-Chrome

Home page - Phone - Firefox Home-Phone-Firefox

Home page - Phone - Chrome Home-Phone-Chrome

Maths page - Laptop - Firefox

Maths-Laptop-Firefox

Maths page - Laptop - Chrome

Maths-Laptop-Chrome

Maths page - Tablet Landscape - Firefox

Maths-Tablet Landscape-Firefox

Maths page - Tablet Landscape - Chrome

Maths-Tablet Landscape-Chrome

Maths page - Tablet Portrait - Firefox

Maths-Tablet Portrait-Firefox

Maths page - Tablet Portrait - Chrome

Maths-Tablet Portrait-Chrome

Maths page - Phone - Firefox

Maths-Phone-Firefox

Maths page - Phone - Chrome

Maths-Phone-Chrome

About page - Laptop - Firefox About-Laptop-Firefox

About page - Laptop - Chrome About-Laptop-Chrome

About page - Tablet Landscape - Firefox About-Tablet Landscape-Firefox

About page - Tablet Landscape - Chrome About-Tablet Landscape-Chrome

About page - Tablet Portrait - Firefox About-Tablet Portrait-Firefox

About page - Tablet Portrait - Chrome About-Tablet Portrait-Chrome

About page - Phone - Firefox About-Phone-Firefox

About page - Phone - Chrome About-Phone-Chrome

Contact Us page - Laptop - Firefox

Contact Us-Laptop-Firefox

Contact Us page - Laptop - Chrome

Contact Us-Laptop-Chrome

Contact Us page - Tablet Landscape - Firefox

Contact Us-Tablet Landscape-Firefox

Contact Us page - Tablet Landscape - Chrome

Contact Us-Tablet Landscape-Chrome

Contact Us page - Tablet Portrait - Firefox

Contact Us-Tablet Portrait-Firefox

Contact Us page - Tablet Portrait - Chrome

Contact Us-Tablet Portrait-Chrome

Contact Us page - Phone - Firefox

Contact Us-Phone-Firefox

Contact Us page - Phone - Chrome

Contact Us-Phone-Chrome

Number Types page - Laptop - Firefox

Number Types-Laptop-Firefox

Number Types page - Laptop - Chrome

Number Types-Laptop-Chrome

Number Types page - Tablet Landscape - Firefox

Number Types-Tablet Landscape-Firefox

Number Types page - Tablet Landscape - Chrome

Number Types-Tablet Landscape-Chrome

Number Types page - Tablet Portrait - Firefox

Number Types-Tablet Portrait-Firefox

Number Types page - Tablet Portrait - Chrome

Number Types-Tablet Portrait-Chrome

Number Types page - Phone - Firefox

Number Types-Phone-Firefox

Number Types page - Phone - Chrome

Number Types-Phone-Chrome

Algebra page - Laptop - Firefox

Algebra-Laptop-Firefox

Algebra page - Laptop - Chrome

Algebra-Laptop-Chrome

Algebra page - Tablet Landscape - Firefox

Algebra-Tablet Landscape-Firefox

Algebra page - Tablet Landscape - Chrome

Algebra-Tablet Landscape-Chrome

Algebra page - Tablet Portrait - Firefox

Algebra-Tablet Portrait-Firefox

Algebra page - Tablet Portrait - Chrome

Algebra-Tablet Portrait-Chrome

Algebra page - Phone - Firefox

Algebra-Phone-Firefox

Algebra page - Phone - Chrome

Algebra-Phone-Chrome

Co-ordinate Geometry page - Laptop - Firefox

Co-ordinate Geometry-Laptop-Firefox

Co-ordinate Geometry page - Laptop - Chrome

Co-ordinate Geometry-Laptop-Chrome

Co-ordinate Geometry page - Tablet Landscape - Firefox

Co-ordinate Geometry-Tablet Landscape-Firefox

Co-ordinate Geometry page - Tablet Landscape - Chrome

Co-ordinate Geometry-Tablet Landscape-Chrome

Co-ordinate Geometry page - Tablet Portrait - Firefox

Co-ordinate Geometry-Tablet Portrait-Firefox

Co-ordinate Geometry page - Tablet Portrait - Chrome

Co-ordinate Geometry-Tablet Portrait-Chrome

Co-ordinate Geometry page - Phone - Firefox

Co-ordinate Geometry-Phone-Firefox

Co-ordinate Geometry page - Phone - Chrome

Co-ordinate Geometry-Phone-Chrome

Trigonometry page - Laptop - Firefox

Trigonometry-Laptop-Firefox

Trigonometry page - Laptop - Chrome

Trigonometry-Laptop-Chrome

Trigonometry page - Tablet Landscape - Firefox

Trigonometry-Tablet Landscape-Firefox

Trigonometry page - Tablet Landscape - Chrome

Trigonometry-Tablet Landscape-Chrome

Trigonometry page - Tablet Portrait - Firefox

Trigonometry-Tablet Portrait-Firefox

Trigonometry page - Tablet Portrait - Chrome

Trigonometry-Tablet Portrait-Chrome

Trigonometry page - Phone - Firefox

Trigonometry-Phone-Firefox

Trigonometry page - Phone - Chrome

Trigonometry-Phone-Chrome

Exam Questions > Number Types page - Laptop - Firefox

Exam Questions > Laptop-Firefox

Exam Questions > Number Types page - Laptop - Chrome

Exam Questions > Number Types-Laptop-Chrome

Exam Questions > Number Types page - Tablet Landscape - Firefox

Exam Questions > Number Types-Tablet Landscape-Firefox

Exam Questions > Number Types page - Tablet Landscape - Chrome

Exam Questions > Number Types-Tablet Landscape-Chrome

Exam Questions > Number Types page - Tablet Portrait - Firefox

Exam Questions > Number Types-Tablet Portrait-Firefox

Exam Questions > Number Types page - Tablet Portrait - Chrome

Exam Questions > Number Types-Tablet Portrait-Chrome

Exam Questions > Number Types page - Phone - Firefox

Exam Questions > Number Types-Phone-Firefox

Exam Questions > Number Types page - Phone - Chrome

Exam Questions > Number Types-Phone-Chrome

Exam Questions > Algebra page - Laptop - Firefox

Exam Questions > Algebra-Laptop-Firefox

Exam Questions > Algebra page - Laptop - Chrome

Exam Questions > Algebra-Laptop-Chrome

Exam Questions > Algebra page - Tablet Landscape - Firefox

Exam Questions > Algebra-Tablet Landscape-Firefox

Exam Questions > Algebra page - Tablet Landscape - Chrome

Exam Questions > Algebra-Tablet Landscape-Chrome

Exam Questions > Algebra page - Tablet Portrait - Firefox

Exam Questions > Algebra-Tablet Portrait-Firefox

Exam Questions > Algebra page - Tablet Portrait - Chrome

Exam Questions > Algebra-Tablet Portrait-Chrome

Exam Questions > Algebra page - Phone - Firefox

Exam Questions > Algebra-Phone-Firefox

Exam Questions > Algebra page - Phone - Chrome

Exam Questions > Algebra-Phone-Chrome

Exam Questions > Co-ordinate Geometry page - Laptop - Firefox

Exam Questions > Co-ordinate Geometry-Laptop-Firefox

Exam Questions > Co-ordinate Geometry page - Laptop - Chrome

Exam Questions > Co-ordinate Geometry-Laptop-Chrome

Exam Questions > Co-ordinate Geometry page - Tablet Landscape - Firefox

Exam Questions > Co-ordinate Geometry-Tablet Landscape-Firefox

Exam Questions > Co-ordinate Geometry page - Tablet Landscape - Chrome

Exam Questions > Co-ordinate Geometry-Tablet Landscape-Chrome

Exam Questions > Co-ordinate Geometry page - Tablet Portrait - Firefox

Exam Questions > Co-ordinate Geometry-Tablet Portrait-Firefox

Exam Questions > Co-ordinate Geometry page - Tablet Portrait - Chrome

Exam Questions > Co-ordinate Geometry-Tablet Portrait-Chrome

Exam Questions > Co-ordinate Geometry page - Phone - Firefox

Exam Questions > Co-ordinate Geometry-Phone-Firefox

Exam Questions > Co-ordinate Geometry page - Phone - Chrome

Exam Questions > Co-ordinate Geometry-Phone-Chrome

Exam Questions > Trigonometry page - Laptop - Firefox

Exam Questions > Trigonometry-Laptop-Firefox

Exam Questions > Trigonometry page - Laptop - Chrome

Exam Questions > Trigonometry-Laptop-Chrome

Exam Questions > Trigonometry page - Tablet Landscape - Firefox

Exam Questions > Trigonometry-Tablet Landscape-Firefox

Exam Questions > Trigonometry page - Tablet Landscape - Chrome

Exam Questions > Trigonometry-Tablet Landscape-Chrome

Exam Questions > Trigonometry page - Tablet Portrait - Firefox

Exam Questions > Trigonometry-Tablet Portrait-Firefox

Exam Questions > Trigonometry page - Tablet Portrait - Chrome

Exam Questions > Trigonometry-Tablet Portrait-Chrome

Exam Questions > Trigonometry page - Phone - Firefox

Exam Questions > Trigonometry-Phone-Firefox

Exam Questions > Trigonometry page - Phone - Chrome

Exam Questions > Trigonometry-Phone-Chrome

Navigation > Main NavBar - Laptop - Firefox

Navigation > Main NavBar-Laptop-Firefox

Navigation > Main NavBar - Laptop - Chrome

Navigation > Main NavBar-Laptop-Chrome

Navigation > Main NavBar - Tablet Landscape - Firefox

Navigation > Main NavBar-Tablet Landscape-Firefox

Navigation > Main NavBar - Tablet Landscape - Chrome

Navigation > Main NavBar-Tablet Landscape-Chrome

Navigation > Main NavBar - Tablet Portrait - Firefox

Navigation > Main NavBar-Tablet Portrait-Firefox

Navigation > Main NavBar - Tablet Portrait - Chrome

Navigation > Main NavBar-Tablet Portrait-Chrome

Navigation > Main NavBar - Phone - Firefox

Navigation > Main NavBar-Phone-Firefox

Navigation > Main NavBar - Phone - Chrome

Navigation > Main NavBar-Phone-Chrome

Navigation > Number Types - Laptop - Firefox

Navigation > Number Types-Laptop-Firefox

Navigation > Number Types - Laptop - Chrome

Navigation > Number Types-Laptop-Chrome

Navigation > Number Types - Tablet Landscape - Firefox

Navigation > Number Types-Tablet Landscape-Firefox

Navigation > Number Types - Tablet Landscape - Chrome

Navigation > Number Types-Tablet Landscape-Chrome

Navigation > Number Types - Tablet Portrait - Firefox

Navigation > Number Types-Tablet Portrait-Firefox

Navigation > Number Types - Tablet Portrait - Chrome

Navigation > Number Types-Tablet Portrait-Chrome

Navigation > Number Types - Phone - Firefox

Navigation > Number Types-Phone-Firefox

Navigation > Number Types - Phone - Chrome

Navigation > Number Types-Phone-Chrome

Navigation > Algebra - Laptop - Firefox

Navigation > Algebra-Laptop-Firefox

Navigation > Algebra - Laptop - Chrome

Navigation > Algebra-Laptop-Chrome

Navigation > Algebra - Tablet Landscape - Firefox

Navigation > Algebra-Tablet Landscape-Firefox

Navigation > Algebra - Tablet Landscape - Chrome

Navigation > Algebra-Tablet Landscape-Chrome

Navigation > Algebra - Tablet Portrait - Firefox

Navigation > Algebra-Tablet Portrait-Firefox

Navigation > Algebra - Tablet Portrait - Chrome

Navigation > Algebra-Tablet Portrait-Chrome

Navigation > Algebra - Phone - Firefox

Navigation > Algebra-Phone-Firefox

Navigation > Algebra - Phone - Chrome

Navigation > Algebra-Phone-Chrome

Navigation > Co-ordinate Geometry - Laptop - Firefox

Navigation > Co-ordinate Geometry-Laptop-Firefox

Navigation > Co-ordinate Geometry - Laptop - Chrome

Navigation > Co-ordinate Geometry-Laptop-Chrome

Navigation > Co-ordinate Geometry - Tablet Landscape - Firefox

Navigation > Co-ordinate Geometry-Tablet Landscape-Firefox

Navigation > Co-ordinate Geometry - Tablet Landscape - Chrome

Navigation > Co-ordinate Geometry-Tablet Landscape-Chrome

Navigation > Co-ordinate Geometry - Tablet Portrait - Firefox

Navigation > Co-ordinate Geometry-Tablet Portrait-Firefox

Navigation > Co-ordinate Geometry - Tablet Portrait - Chrome

Navigation > Co-ordinate Geometry-Tablet Portrait-Chrome

Navigation > Co-ordinate Geometry - Phone - Firefox

Navigation > Co-ordinate Geometry-Phone-Firefox

Navigation > Co-ordinate Geometry - Phone - Chrome

Navigation > Co-ordinate Geometry-Phone-Chrome

Navigation > Trigonometry - Laptop - Firefox

Navigation > Trigonometry-Laptop-Firefox

Navigation > Trigonometry - Laptop - Chrome

Navigation > Trigonometry-Laptop-Chrome

Navigation > Trigonometry - Tablet Landscape - Firefox

Navigation > Trigonometry-Tablet Landscape-Firefox

Navigation > Trigonometry - Tablet Landscape - Chrome

Navigation > Trigonometry-Tablet Landscape-Chrome

Navigation > Trigonometry - Tablet Portrait - Firefox

Navigation > Trigonometry-Tablet Portrait-Firefox

Navigation > Trigonometry - Tablet Portrait - Chrome

Navigation > Trigonometry-Tablet Portrait-Chrome

Navigation > Trigonometry - Phone - Firefox

Navigation > Trigonometry-Phone-Firefox

Navigation > Trigonometry - Phone - Chrome

Navigation > Trigonometry-Phone-Chrome

Navigation > Exam Questions > Number Types - Laptop - Firefox

Navigation > Exam Questions > Number Types-Laptop-Firefox

Navigation > Exam Questions > Number Types - Laptop - Chrome

Navigation > Exam Questions > Number Types-Laptop-Chrome

Navigation > Exam Questions > Number Types - Tablet Landscape - Firefox

Navigation > Exam Questions > Number Types-Tablet Landscape-Firefox

Navigation > Exam Questions > Number Types - Tablet Landscape - Chrome

Navigation > Exam Questions > Number Types-Tablet Landscape-Chrome

Navigation > Exam Questions > Number Types - Tablet Portrait - Firefox

Navigation > Exam Questions > Number Types-Tablet Portrait-Firefox

Navigation > Exam Questions > Number Types - Tablet Portrait - Chrome

Navigation > Exam Questions > Number Types-Tablet Portrait-Chrome

Navigation > Exam Questions > Number Types - Phone - Firefox

Navigation > Exam Questions > Number Types-Phone-Firefox

Navigation > Exam Questions > Number Types - Phone - Chrome

Navigation > Exam Questions > Number Types-Phone-Chrome

Navigation > Exam Questions > Algebra - Laptop - Firefox

Navigation > Exam Questions > Algebra-Laptop-Firefox

Navigation > Exam Questions > Algebra - Laptop - Chrome

Navigation > Exam Questions > Algebra-Laptop-Chrome

Navigation > Exam Questions > Algebra - Tablet Landscape - Firefox

Navigation > Exam Questions > Algebra-Tablet Landscape-Firefox

Navigation > Exam Questions > Algebra - Tablet Landscape - Chrome

Navigation > Exam Questions > Algebra-Tablet Landscape-Chrome

Navigation > Exam Questions > Algebra - Tablet Portrait - Firefox

Navigation > Exam Questions > Algebra-Tablet Portrait-Firefox

Navigation > Exam Questions > Algebra - Tablet Portrait - Chrome

Navigation > Exam Questions > Algebra-Tablet Portrait-Chrome

Navigation > Exam Questions > Algebra - Phone - Firefox

Navigation > Exam Questions > Algebra-Phone-Firefox

Navigation > Exam Questions > Algebra - Phone - Chrome

Navigation > Exam Questions > Algebra-Phone-Chrome

Navigation > Exam Questions > Co-ordinate Geometry - Laptop - Firefox

Navigation > Exam Questions > Co-ordinate Geometry-Laptop-Firefox

Navigation > Exam Questions > Co-ordinate Geometry - Laptop - Chrome

Navigation > Exam Questions > Co-ordinate Geometry-Laptop-Chrome

Navigation > Exam Questions > Co-ordinate Geometry - Tablet Landscape - Firefox

Navigation > Exam Questions > Co-ordinate Geometry-Tablet Landscape-Firefox

Navigation > Exam Questions > Co-ordinate Geometry - Tablet Landscape - Chrome

Navigation > Exam Questions > Co-ordinate Geometry-Tablet Landscape-Chrome

Navigation > Exam Questions > Co-ordinate Geometry - Tablet Portrait - Firefox

Navigation > Exam Questions > Co-ordinate Geometry-Tablet Portrait-Firefox

Navigation > Exam Questions > Co-ordinate Geometry - Tablet Portrait - Chrome

Navigation > Exam Questions > Co-ordinate Geometry-Tablet Portrait-Chrome

Navigation > Exam Questions > Co-ordinate Geometry - Phone - Firefox

Navigation > Exam Questions > Co-ordinate Geometry-Phone-Firefox

Navigation > Exam Questions > Co-ordinate Geometry - Phone - Chrome

Navigation > Exam Questions > Co-ordinate Geometry-Phone-Chrome

Navigation > Exam Questions > Trigonometry - Laptop - Firefox

Navigation > Exam Questions > Trigonometry-Laptop-Firefox

Navigation > Exam Questions > Trigonometry - Laptop - Chrome

Navigation > Exam Questions > Trigonometry-Laptop-Chrome

Navigation > Exam Questions > Trigonometry - Tablet Landscape - Firefox

Navigation > Exam Questions > Trigonometry-Tablet Landscape-Firefox

Navigation > Exam Questions > Trigonometry - Tablet Landscape - Chrome

Navigation > Exam Questions > Trigonometry-Tablet Landscape-Chrome

Navigation > Exam Questions > Trigonometry - Tablet Portrait - Firefox

Navigation > Exam Questions > Trigonometry-Tablet Portrait-Firefox

Navigation > Exam Questions > Trigonometry - Tablet Portrait - Chrome

Navigation > Exam Questions > Trigonometry-Tablet Portrait-Chrome

Navigation > Exam Questions > Trigonometry - Phone - Firefox

Navigation > Exam Questions > Trigonometry-Phone-Firefox

Navigation > Exam Questions > Trigonometry - Phone - Chrome

Navigation > Exam Questions > Trigonometry-Phone-Chrome

Known Bugs

Number types exam questions says 16 questions but it only has 4.

Image on Trigonometry topic page (5.1KB) does not have a smaller image to display on smaller screens

Validation

CSS was validated using W3C CSS validator CSS Validated

HTML was validated on all pages using W3C HTML validator

Home Page

Home page validated

Maths Page

Maths page validated

About Page

About page validated

Contact Us Page

Contact page validated

Number Types video page

Number Types page validated

Algebra video Page

Algebra page validated

Co-ordinate Geometry video Page

Co-ordinate Geometry page validated

Trigonometry video Page

Trigonometry page validated

Number Types exam questions Page

Number Types exam questions page validated

Algebra exam questions Page

Algebra exam questions page validated

Co-ordinate Geometry exam questions Page

Co-ordinate Geometry exam questions page validated

Trigonometry exam questions Page

Trigonometry exam questions page validated

404 Error page

404 error page validated

Documentation

  • README.md : Comprehensive overview of the MathsBuddy website detailing how it works, what its features are, the technologies involved and all the design decisions that were made in creating this learning resource.
  • Vision doc : Business needs and feature list.

Deployment

This project is deployed to Github Pages

  1. Push the code to Github using git push.

  2. Go to the Github repository MathsBuddy github repository

  3. In the Github repository, click on the Settings menu option. Github Settings

  4. Scroll down to and select the Pages section. Github Pages

  5. Choose the main branch to deploy Select main branch

  6. After a few minutes the site was deployed. MathsBuddy website deployed

Technology Used

Some of the technology used includes:

  • HTML5
    • HTML5 is used to develop the content of the MathsBuddy website.
  • CSS
    • CSS is used to layout the HTML elements on each page of the MathsBuddy website.
  • FlexBox
    • FlexBox is used to give the MathsBuddy website a simple, responsive layout.

Contributing

Clone

  1. Firstly you will need to clone this repository by running the git clone https://github.com/Liz-Conway/MathsBuddy.git command
  2. After you've that you'll need to make sure that you have a package manager such as npm installed
  3. You can get npm by installing Node from here
  4. Make sure that you have live-server installed. You can install this by running the following: npm install -g live-server . This also may require sudo on Mac/Linux
  5. Once live-server is installed run live-server in the root directory (the one where index.html is).
  6. The project will now run on localhost
  7. Make changes to the code and if you think it belongs in here then just submit a pull request.

Fork

  1. Log into Github
  2. Search for MathsBuddy and choose to go to Liz-Conway/MathsBuddy.
  3. Click on the Fork button on the top right hand side of the screen.
  4. This will make a copy of MathsBuddy in your github account.
  5. In your version of MathsBuddy click on the code button and copy the clone text.
  6. Then, you will need to clone this repository by pasting the command you just copied into a terminal window on your computer and running it. This will create a copy of MathsBuddy from your github account on your computer.
  7. After you've that you'll need to make sure that you have a package manager such as npm installed
  8. You can get npm by installing Node from here
  9. Make sure that you have live-server installed. You can install this by running the following: npm install -g live-server This also may require sudo on Mac/Linux
  10. Once live-server is installed run live-server in the root directory (the one where index.html is).
  11. The project will now run on localhost
  12. Make changes to the code and run git push to save those changes to your github account.

Cloning versus Forking

The major difference between cloning and forking is where your updates go when you perform a git push.

With cloning you are pushing the updates to the Liz-Conway/MathsBuddy repo on github.

With forking you are pushing the updates to your own MathsBuddy repo on github.

Credits

Using rems for CSS : https://www.aleksandrhovhannisyan.com/blog/respecting-font-size-preferences-rems-62-5-percent/

Button pop up: https://www.tutorialspoint.com/Add-a-pressed-effect-on-button-click-with-CSS

MathsBuddy logo: https://codepen.io/Tsankashvili/pen/zmPXGX

**Background video on home page **: Owner = https://www.vidsplay.com/, Downloaded from = https://www.vidsplay.com/formula-free-stock-video/

About - Student focussed: Owner = Anastasiya Gepp, Downloaded from = https://www.pexels.com/photo/woman-standing-in-hallway-while-holding-book-1462630/

Zoom classes: Owner = Julia M Cameron, Downloaded from = https://www.pexels.com/photo/person-writing-on-notebook-4145190/

Recorded classes: Adapted from - Owner = Alexas_Fotos, Downloaded from = https://pixabay.com/illustrations/college-student-professor-university-2052868/

Slack community: Owner = Austin Distel, Downloaded from = https://unsplash.com/photos/gUIJ0YszPig

Here 2 help: Owner = Andrea Piacquadio, Downloaded from = https://www.pexels.com/photo/elder-sister-and-brother-studying-at-home-3769981/

Exam Preparation: Owner = Julia M Cameron, Downloaded from = https://www.pexels.com/photo/photo-of-woman-teaching-his-son-while-smiling-4145355/

Centering text with CSS: https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

Evenly space item in a wrapped flexbox row: https://stackoverflow.com/questions/44902771/flex-row-space-between-wrapped-items

Responsive media queries breakpoints: Code Institute - Love Running project

Convert mp4 video to webm video: https://webm.to/video-webm

Convert mp4 video to ogg video: https://www.onlineconverter.com/video-to-ogg

Compress image files: www.tinypng.com

Break words on smaller devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Inspirational Quote: Lou Holt

Prime Numbers video: Owner = Khan Academy, Youtube=https://www.youtube.com/embed/mIStB5X4U8M

Prime & Composite numbers video: Owner = Khan Academy, Youtube=https://www.youtube.com/embed/3h4UK62Qrbo

Factorising Quadratics video: Owner = Nancy Pi, Youtube=https://www.youtube.com/embed/YtN9_tCaRQc

Algebraic Fractions video: Owner = CorbettMaths, Youtube=https://www.youtube.com/embed/Aat-_BYvjLg

Co-ordinate Geometry introduction: Owner = Fuse School, Youtube=https://www.youtube.com/embed/Byw72mbDBT8

Equation of a line video: Owner = CorbettMaths, Youtube=https://www.youtube.com/embed/MJKPASvp0qY

Co-ordinate Geometry review video: Owner = Danswers, Youtube=https://www.youtube.com/embed/9qmW-M2zr6Q

Pythagoras' Theorem: Owner = CorbettMaths, Youtube=https://www.youtube.com/embed/iWLVTy_rGjs

Trigonometric ratios: Owner = FuseSchool, Youtube=https://www.youtube.com/embed/QThmz7ZJsWM

Parts of a triangle: Owner = mathsisfun.com, https://www.mathsisfun.com/algebra/images/adjacent-opposite-hypotenuse.svg

Daisy McGirr for being an absolutely amazing mentor

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.