View the Live Site here.

Teachflow is a fictitious company, providing support, information and materials to two groups of poeple.
a) Those considering ESL teaching in Asia &
b) Those who are already working in as ESL teachers.

The purpose of this project to create a one-stop-shop of information for ESL teachers. The website focuses on providing information on 4 destination countries. Additional countries may be added in future releases. Teaching materials are also featured on the website and can be accessed by clicking on a link. This leads to the classroom portal. Class material includes flashcards, a song lesson and a memory game.

Important information and features that the company would like to include:

• Providing information on 4 Asian countries
• Providing information on ESL teaching
• Including a contact form. A long term goal is to build up a network of ESL teachers who may use the 'Classtime' portal.
• Providing a full class lesson (game and flashcards)

1. UX

   • Overview
   • User Stories
   • Project Scope
   • Design
   • Wireframes

2. Features

   • Existing Features
   • Features Left to Implement

3. Technology Used

4. Testing

5. Deployment

6. Credits

   • Content
   • Code
   • Media
   • Acknowledgments

TeachFlow aims to provide users with honest and thorough ESL teaching-related information. In this release, as well as featuring in depth information about teaching in Asia, a virtual classroom will be incorporated. This aims to give users a realistic impression of what a typical class lesson would entail. In future releases, 'Classtime' may be further developed and TeachFlow may charge for access to this material.

By creating an in-depth ESL information hub, TeachFlow hopes to promote ESL teaching as a career, post Coronavirus lock-downs.

As a potential ESL teacher:

• I am looking for information on ESL countries, so that I can find out what appeals to me.
• I usually do all my research on my phone, so I would like the website to be mobile responsive.
• I am looking for information about a typical class lesson, so that I can learn about a typical day on the job.
• I would like to be able to contact the website owners if I have any questions about the content.
• I would like to see the requirements for becoming an ESL teacher; the salary and benefits.

As a current ESL Teacher:

• I would like to see information on regions or cities as well as general country information.
• I would like to see some interactive information about the countries, such as the current weather or statistics so that I am receiving live, updated information.
• I would like any class material featured to be focused on learning English words and improving students speaking skills.
• I would like to be able to sign up to a newsletter.

Based on the above user stories, the following are features that will be included in this release:

• A maps API which will show 4 countries in Asia.
• A contact us form, for users who would like to learn more about ESL teaching.
• A newsletter signup.
• A Map & Interactive Information on ESL countries which is created using an API.
• Flashcard / a song focused on learning vocabulary.
• A simple memory game focused on speaking English words.

The following is a list of features that will not be included in this release:

• Functionality to enter a zip code on maps.
• Custom designed maps with colours or detailed markers.
• More than one lesson plan.
• Coronavirus adapted ESL content.
• A save high score function on the memory game.

All fonts used are from Google Fonts.

Fonts used include:

• Roboto (regular 400) - used for body text.
• Lato (700) - used for headings (H1 - H6).

A blue/yellow colour palette was used which creates a bright undertone and compliments the striking imagery well.

The colours above were used for inspiration. In this project, the following shades were used:

• Blue (#034cae)
• Dark blue (#070958)
• Teal (#246e74)
• Light yellow (#fef7dd)
• Dark yellow (#fccf14)

• A carousel banner is used in index.html. This contains 3 striking images that focus on ESL teaching.
• A Hero Image is used in game.html. This focuses on ESL teaching; a fun and engaging lesson.
• In game.html, multiple animal images are used and re-used throughout the class lesson. This is done intentionally, as reusing material to reinforce learning is common practice in teaching.

• 'Home', 'About' & 'Contact us' are all sections on index.html. In doing this, a strong user pathway is created. The pathway shows company information, ESL teaching information, and finally a contact form.
• 'Classtime' is created as a stand-alone page (game.html). This is deliberately done for two reasons. First, the page includes a large volume of content. Second, 'Classtime' is a section which may be further developed in future releases. A call to action is included on index.html to connect the two pages.

All wireframes were created using the software Balsamiq. Layouts were created following research on the five planes of UX, and before coding.

Please note, the final website layout contains slight variations to the original wireframes. Each of the following files contain wireframes for desktop, tablet, and mobile devices.

• Home Page
• About
• Contact us
• Classtime

• Navigation

  • The navigation contains the brand logo (anchor tag to the homepage) with four links. 3 links, connect to sections on index.html (home, about & contact us). 1 link, connects to a separate page (game.html).
  • For mobile devices, the navbar collapses to a toggler button.
  • The navbar is fixed, disappears on scroll down, and reappears on scroll up.
  • The navigation was created using Bootstrap and Javascript.

• Maps API

  • The user is able to explore 4 Asian countries using a Maps API.
  • 3 markers showing popular cities to teach ESL in are featured on each map.
  • Information and statistics are displayed alongside each map.
  • Javascript and Leaflet maps were used to create this feature.

• Contact Us Form

  • The contact form includes fields for name, email address, and message text area.
  • A newsletter signup option is included.
  • If a message has been submitted successfully, the form collapses and a confirmation message is displayed.
  • If a message fails to send, a SweetAlert modal appears. The message states that there has been an error.
  • EmailJS and Bootstrap were used to to create this feature.

• Flashcards

  • 4 animal flashcards, which onclick play a sound are featured.
  • Duration for this lesson is listed at 15 minutes.
  • Flashcard sizes decrease with smaller device sizes.
  • Javascript was used to create the onclick playsound function.

• Song lesson

  • A YouTube video (iframe) and content block create the song lesson.
  • Duration for the lesson is listed at 20 - 30 minutes.
  • The iframe size decreases with smaller device sizes.

• Memory Game

  • The memory game re-uses the flashcard animal tiles.
  • Game instructions are accessible by clicking on a button.
  • There are 15 rounds. A random tile is selected and added to each new round.
  • First, the sequence of tiles is played by the computer. As the sequence plays, the tiles audio file plays and a CSS transform property is applied. When complete, the player's turn begins.
  • In the player's turn, hovering over a tile activates a CSS transform property. Pressing a tile plays the animal audio file and also activates a CSS tranform property.
  • The index of each tile pressed is compared to the index of the actual tile in the sequence. If correct, the game continues. If incorrect, the game resets.
  • If the player completes 15 rounds, they win and the game ends.
  • The 'Rounds Remaining' & 'Taps left' in each round are calculated and displayed on the screen.
  • SweetAlert is used to create an aesthetic alert box.
  • Javascript was used to create the memory game.

• Footer

  • Copyright information is included in the footer left.
  • Social media links are visible on the footer right.
  • The footer was created using Bootstrap.

The following are features were not included in this release. These may be developed in the future:

• Use of an API to create the map information: This would ensure that all data is up to date and accurate. Unfortunately, I was not able to find an API that would display the right information.

• Use of an API for real-time weather: This was intended as a stretch goal for this release. Due to time pressures, I was not able to include this feature.

• Sending an automatic reply to the user after they submit a contact form: I was not able to research this fully, due to time pressure in this project.

• An API that will include ESL jobs in the 4 featured Asian countries: This was out of scope for this project.

• HTML5 - Used for structuring the site pages.

• CSS - Used for styling the site pages.

• Bootstrap 4 - Framework used for building the site pages.

• Javascript - Used to make the website interactive.

• jQuery - Used to make the website interactive.

• Leaflet - Used to create the maps.

• SweetAlert - Used to create pretty alert boxes.

• EmailJS - Used to create the email service.

• Google Fonts - Used for typography.

• Adobe Photoshop - Used to resize and edit images including the company logo and game tiles.

• Font Awesome - Used for all Icons.

• Gitpod - Used as a development environment.

• Github - Used for repository hosting.

• Github Pages - Used for site deployment.

• Chrome Dev tools - Used for monitoring the responsiveness of the website.

• LamdaTest - Used for monitoring the responsiveness of the website.

All testing documentation is stored in a separate testing file, which can be accessed here.

The website was hosted on Github Pages. It was deployed by carrying out the following steps:

1. login into Github.
2. Select the repository from the profile.
3. go to 'settings' in the repository.
4. In 'Github Pages' choose 'Master Branch' as Source and save.

The Live site deployed can be viewed on the following link: TeachFlow

To clone this project locally; a Chrome browser and Github account are required.

The following steps can then be followed:

1. Install the Gitpod Browser Chrome Extention, restarting the browser after installation.
2. Log into Gitpod.
3. Click on the following link to go to the project repository.
4. Click on the green 'Gitpod' button (which is located to the right of the repository) to launch a new workspace.
5. The code can be worked on in this newly launched workspace.

To clone code within an IDE of your choice:

1. Click on the following link to go to the project repository.
2. Click 'Code' and in the Clone with HTTPs, copy the provided repository URL.
3. Open a terminal in your IDE.
4. Change the current working directory to the location you wish to generate the cloned directory.
5. Type git clone, and then paste the URL from step 2.

git clone https://github.com/emmahartedev/ms2-teachflow.git

The following material is not my own. Sources have been listed alongside a description of the content used.

• Map information
  • Capital city, salary, requirements & benefits.
  • Source: Go Overseas

• Animal names (mp3) used in game.html
  • these mp3 files are used in the flashcard and memory game section.
  • Source: Voice Maker (Joanna, Female) used to create all files.

The following websites were used for inspiration and assistance:

• CSS Tricks
• Stack Overflow
• Bootstrap Documentation

The following scripts/plugins were used in the project:

• SweetAlert - used for popup messages
• Grow hover effect - used on footer icons

The following code has been directly used in this project:

• Switch div display

  • Used to switch the 3 'game-container' divs in game.html for mobile view.
  • Source: Code

• Smooth scrolling

  • Used to create a smooth-scrolling effect on index.html.
  • Source: Code

• Full page Tabs

  • Idea used to display the map and info contents on button click.
  • Source: Code

The images used on this website were obtained from the following sources:

In README.md:

• Colour palette: Source

In index.html:

• Students in a classroom: Source
• Teacher writing on blackboard: Source
• Student outside looking to sky: Source
• Woman walking up a temple path: Source
• Child in Classroom: Owned by me

In game.html:

• Students running outside: Source
• Chicken: Source
• Duck: Source
• Cow: Source
• Pig: Source
• Finger Family Farm Animals Song: Source

• Thank you to Gerry McBride for the the coding support throughout this project.