Learn Spanish

Welcome to Learn Spanish.

Learn Spanish is a quiz with 15 questions focus on start learning animals in Spanish for both kids and adults. An image is displayed with the name of the animal in English and four buttons with the answers in Spanish.

Features

• The title:
  • Title and name of the game at the top of the screen.

• Game Area:
  • Here is where all the game takes place with all the features to play it.

• Question Counter:
  • Counts the questions from 1 to 15 every time the user goes to the next question.

• Question:
  • Question is a combination between an image and a paragraph with the animal picture and name.

• Answers:
  • Four buttons with the possible answers, when they are press if the answer is correct will show a green background and if the answer is incorrect, will be red background. Once one answer is press, the other answers will be disabled.

• Next button:
  • Once the question has been answer pressing "next" button will bring the user to the next question, when all the questions are answered will bring the user to an extra window where they can repeat the test.

• Play again screen:
  • When all the question has been answered, this screen will show where you can find a button to play again.

Technologies used

Three main languages:

• HTML5
• CSS3
• JavaScript

Testing

• I tested that this page works in different browsers: Chrome, Firefox and Safari.
• I confirmed that this project is responsive, looks good and functions on all standard screen sizes using the DevTools device toolbar.
• I confirmed "buttons and features"

Bugs

• Page is not working in Explorer.

Validator Testing

• HTML

  • No errors were returned when passing through the official W3C validator.

• CSS

  • No errors were found when passing through the official (Jigsaw) validator.

• JavaScript

  • No big error were found when passing through jshint.com. "Game data" shows as undefined as it is in other .js page.

  

• Accessibility

  • I confirmed that the colors and fonts chosen are easy to read and accessible by running through lighthouse in DevTools.

  

Unfixed Bugs

• I will like to put a score counter in a future. I didn't have time to make it work properly, so I decided to leave it without score for now.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab.
  • From the Code and automation section, select pages.
  • From the drop-down menu, select Main Branch.
  • Once the main branch has been selected, the page provided the link to the completed website.

The live link can be found here - Learn Spanish

Credits

Code institute Slack community was checked to see common bugs with other students.

Code institute mentor Adegbenga Adeye was consulted, he helped on the buttons functions.

Google is the primary spot consulted for alternative coding and general inspiration, including Stack Overlow and W3C schools.

Youtube was used as consultation as well as inspiration from other quizzes.

Content

• Use Balsamiq-wireframes for the idea and planing of my project.

Media

• The images was taken from pexel.com.