/mp2_travel_quiz

The Travel Personality Quiz. Take this fun quiz and find out what kind of travel personality you have and get personalised recommendations for your next trip. This quiz is my second milestone project on Code Institute's level 5 diploma in web application development.

Primary LanguageJavaScript

The Travel Personality Quiz

Mock-up

By Emma Hewson

Click here to view the live web application

This is the documentation for my web application: The Travel Personality Quiz. It has been built using HTML5, CSS3 & JavaScript for educational purposes as part of Code Institute’s Diploma in Web Application Development Course.

Table of Contents

  1. Project Development & Planning
  2. Technologies Used
  3. Features
  4. JavaScript Functionality
  5. Testing & Bugs
  6. Deployment
  7. Credits

Project Development & Planning

Throughout the development of this game I followed the principles of User Experience (UX), including the 5 planes of Strategy, Scope, Structure, Skeleton & Surface. At all times I wanted to make sure that the website was easy to use, responsive, accessible and intuitive as well as meeting the goals and needs of the user and client.

Project Goals

Project Purpose

A web-based quiz that allows users to learn more about their 'travel personality' and recommends a destination for them to visit based on their answers.

Client Goals

The quiz was built as a milestone project on my Diploma in Web Application Development with Code Institute as a learning tool for interactive frontend development and my first project using JavaScript and so didn't have a specific client. However in order to make the end product more professional and to help with create a clear scope for the project I treated it as a real-world application which could be used by a travel agency or travel blogger, with a focus on more exotic or lesser known destinations. This client's goals would be:

  • Engaging users with interactivity and a fun application on their site
  • Allowing users to learn more about lesser-known destinations
  • Helping users to choose where to go
  • Helping users learn more about their travel personality

User Goals

The audience for this quiz would be people who are looking to travel or go on holiday but are unsure where to go. They perhaps want to experience more exotic destinations or want to go somewhere off the beaten track and wish to find a destination that would suit their personality and tastes. User Goals:

  • Learning more about themselves and their travel personality
  • Having fun doing a short quiz
  • Getting recommendations of where to go travelling or on holiday
  • Learning more about a lesser-known destination that suits their travel personality

Research

Market Review

I looked at a variety of online travel quizzes. Most were hosted by travel agencies or travel bloggers. I looked at the style and content of their questions and answers, how the results were presented, the design and style of the websites and how the quiz was structured. I also looked more broadly at personality tests. Some of the websites that I researched are below.

Conde Nast Quiz | Jessie On A Journey | Inspiring Travel | British Airways | Truity | 16 Personalities

Key Takeaways from Market Review

  • 10 questions is a good length to keep a user's interest
  • Most questions were about travel though some focused more on personality
  • Many of the quizzes featured simple animations on hover or click
  • Most of the quizzes didn't offer a back button to change an answer

User Stories

Based on the research and goal development above I created a list of user stories. I felt that the quiz was most likely to be something that a visitor used once, rather than repeatedly, as it would likely form part of a bigger website e.g. a tour operator or travel agent site, with a user moving on to discover more about the products offered, so all user stories relate to a first time user.

  • I want to take part in a fun, online game to find out my travel personality and my ideal travel destination
  • I want to see information, images and a map of my recommended destination
  • I want to see a breakdown of my results to learn more about my personality
  • I want to access the quiz on any device
  • I want to navigate the site easily

Content

The quiz is made up of 10 questions each with 6 answer options to choose between. Each of the answers relates to a personality type. These are:

  • Culture-Vulture
  • Thrill-Seeker
  • Peace-Lover
  • People-Person
  • Foodie
  • Animal-Lover

Each time the user selects an answer it builds up a picture of what kind of personality they have. At the end of the quiz these results are presented to the user with a full breakdown of their personality in percentages. These results are also processed to calculate the best country recommendation for the user, I have included 6 countries, all of which are less visited or off the beaten track countries, to fit the client goals. These are:

  • New Zealand
  • Zambia
  • Kyrgyzstan
  • Peru
  • Mexico
  • China

It is worth pointing out that whilst this is presented as a personality test there is no specific psychological research done in to the personality testing and it is purely for fun.

Design, Layout & Structure

Wireframes

I decided to create a fully designed site in Figma, developing the structure, skeleton and layout as well as the style and look of the site, making all major creative design decisions, including the colours, fonts & layout prior to beginning coding. I created designs for desktop, tablet and mobile to make sure that responsiveness was at the forefront of the application from the beginning.

Welcome
Game
Results

Structure

The structure of the site is informed by the scope, user and business goals as well as the principles of IXD (interaction design) to make sure I was conforming to users' expectations and making everything as intuitive as I could.

The site has a simple structure, everything apart from the 404 page is contained on a single web page (index.html) with all the content replaced by the JavaScript code at different points in the game. There are 3 main divs within the page which appear and disappear depending on where you are in the game, these are:

  • Welcome - a brief intro with a name capture input to personalise the user's results and a start game button
  • Game - the main game play area, with a progress bar, question, answer options to choose from and a 'restart game' button
  • Results - the results of the quiz, showing the user's personality results breakdown in the form of a pie chart and text information as well as a recommended destination based on their responses to the quiz. This page also contains a button to take the user back to the start to begin the quiz again.

There is also a 404 page for when a user lands on a non-existent page with a button to link back to index.html to start the quiz again

Both the main index.html and 404 page contain a logo at the top (not clickable to avoid the user mistakenly clicking it and having to start the quiz again) and a cloud graphics footer, containing my name and social links.

Colour & Design

The design of the site is influenced by the view out the window on a plane journey, with the 'paper-like' clouds with drop shadows at the bottom as the footer and a light, airy gradient background as the sky. I have therefore used shades of blue for the colour palette, with a contrasting shades of orange for key elements to allow for good legibility.

Main Colour Pallette

In addition I created a colour palette for the pie chart and personality types, with each colour corresponding to a personality. These make the data more visual for the user. These colours are all soft, slightly desaturated to match the overall light, airy feel of the site design.

Pie Chart Colour Pallette

Other Design Choices

  • The use of drop shadows & inner shadows to match the layered paper effect on the footer
  • Consistent use of border radius to give the site a soft, rounded feel and match the rounded cloud design

Fonts

I imported Google Fonts and used Righteous (with a fallback of Sans Serif) for the logo and some of the main headings. I felt this font had a slightly exotic, exciting look which added to the travel theme. It also has good legibility and is eye-catching. I also used Raleway (with a fallback of Sans Serif) for the main body text as it contrasted well with the heading font, had good flexibility with a range of weights and is known for being clear and legible as an online font, as well as having a warm, friendly roundness to it.

Technologies Used

Languages

Tools

  • Git
    • Used for version control via GitPod by using the terminal to Git and Push to GitHub
  • GitHub
    • Used to store the project code after being created in GitPod / Git
  • Gitpod
    • Used to create, edit & preview the project's code
  • Figma
    • Used to develop the wireframes in to a full mockup including colours, fonts, proportions etc
  • Google Fonts
    • Used to select & import the fonts to the project (Poppins & Fira Sans)
  • Font Awesome
    • Used to add icons to the site
  • Adobe Illustrator
    • Used to help create the colour pallette as well as adjusting the background image
  • Adobe Photoshop
    • Used to crop, adjust and resize the photos to optimise them for the site
  • Tiny PNG
    • Used to further optimise the images for the site and reduce file size
  • Bulk Image Crop
    • Used to bulk crop bulk
  • ezGIF
    • Creating GIFs for the README
  • Techsini Mockup
    • Creating the mockup images for the README
  • Favicon.io
    • Used to create and add the favicon to the browser tab
  • Chart.js
    • Used to create and style the pie chart based on user personality results
  • Google Maps API
    • Linked to Google Maps API to load the relevant country map and create clickable markers

Features

All Sections/Pages

Favicon

Screenshots

Favicon

  • I included a Favicon for the site using the little plane graphic from the logo. This helped to build the brand and continue the site design in the user's browser tab.

Logo

Screenshots

Logo

  • A simple logo with the name of the game
  • The logo appears on all pages
  • The logo is responsive and changes sized based on the user's screen size
  • The logo isn't clickable. I had originally made it go back to the home page but during testing and based on feedback from my mentor I discovered this could cause a user to accidentally reset the quiz back to the start. This would cause a negative emotional response from a user so I broke the convention of having the logo link to the home page in this case as I felt it provided the best user experience.

Footer

Screenshots

Footer on desktop / tablet

Footer on mobile

  • The footer is made of a series of layered 'paper-like' clouds to give a feeling of being above the clouds in a plane.
  • The footer contains the text "Made By Emma Hewson" and links to my relevant social media sites so that it can be used as a portfolio project
  • The footer social icons have aria labels to make them accessible
  • The footer social icons have a hover effect with a smooth colour transition
  • The footer is responsive, the cloud image adjusts as a background image down to tablet-size screens and is replaced by a smaller image on mobile to make the design work and the site perform well.

Welcome Section

Welcome Section - Mock Up

Screenshots

Welcome section

Welcome section - start quiz button

Hover effect on button

  • Brief text info about the game, how it works & encouraging the user to play
  • Layout is responsive with margins changing on smaller devices
  • Name input box
    • User must enter a name to start game - alert with appears if no name entered
    • Name is used in the results section to personalise the results
    • Has a character max of 10 and min of 2 to make the text in the results section work visually
  • Start Quiz button - launches the quiz
    • Has a hover effect on non touchscreen devices with a smooth colour transition

Game Section

Game Section - Mock Up

Screenshot

Game Section

  • The game section is fully responsive with the answers stacking full width on smaller devices and in 2 columns on larger devices as well as other layout changes

Progress Bar

Screenshots

Progress Bar updates with each question answered

  • Gives the user an indication of where they are in the quiz and how many questions are left
  • Contains both a visual reference in the pink bar and a number reference in the question number
  • Updates when a user selects an answer and the question is repopulated

Questions & Answers

Screenshots

Answer selection & question/answer update

Answer hover effect

  • Updates with the next question and a set of answers each time the user makes a selection
  • Has a darker blue hover effect on the answers on non touchscreen devices with a smooth transition
  • Once the user has selected an answer it turns orange
  • There is a brief timeout to allow the orange to appear before the question & answers update, this gives the user a sense that the answer has definitely been selected and submitted and gives them time to see the question update happenning - all part of creating an intuitive and positive user experience.
  • This also avoids having a separate 'next question' button which would add more clicks and may annoy a user
  • During the time out the user cannot select another answer - this avoids accidental selections or duplicate results

Restart Quiz Button

Screenshots

Restart Quiz Button

  • A button to allow the user to go back to the start of the quiz
  • Has a hover effect with a short, smooth colour transition on non touchscreen devices
  • I chose to make this button grey, rather than orange like the other navigation buttons because I didn't want it to draw the user's attention away from the game too much, it doesn't form part of the game and I didn't want the user to mistakenly click on it thinking it was a 'submit answer' button or similar.

Tie Breaker

Tie Breaker - Mock Up

Screenshots

Tie Breaker

Tie Breaker - Number of photos varies depending on how many personality-type scores are tied

Tie Break Image Hover

As there are only 10 questions and each ones selects one of 6 personality types, there was a high chance of a tied result. I wanted to find a way to make the results as accurate and personalised as possible, so, where a tie happens, this round puts the final result decision in to the hands of the user, using images to find out what their perfect trip would look like. This helps it stand apart from the other questions and highlights its importance to the user.

  • Images appear which relate to the tied winning personality results, each image representing a personality e.g. "foodie", "culture-vulture" etc.
  • User selects one of them, this becomes the winning personality
  • This round only appears if there is a tied result
  • This round is also taken in to account in the final personality statistics
  • There can be anything from 2-5 images depending on how many results were tied
  • The images have associated "alt" values to make them accessible
  • The layout is fully responsive depending on the screen size and the number of images that appear

Results Section

Results Section - Mock Up

Personality Type

Screenshots

Personality Type Box

Clickable pie chart

Content of paragraph 3 varies depending on results - this one shows a different example to to other screen shots, where both the 2nd and 3rd place have scored over 15%

  • This section gives detailed information about the user's personality results
  • It is personalised to the user with their name
  • The pie chart has a colour key with each personality type having an associated colour
  • Each answer selected by the user is associated with one of the personality types, the percentages are calculated based on these, including the tie break
  • The pie chart animates on and has clickable sections to see the percentages for each
    • If the pie chart fails to load the user is presented with a friendly error message in the place of the pie chart to improve user experience - see bugs in TESTING.md
  • Includes text information about the personality type
  • The final paragraph is bespoke to the user's results, if they have high % scores in the 2nd and 3rd place personalities these are included here.
    • The recommended country is based on all the personality types chosen, not just the winning one - this helps explain this to the user.
    • This gives a sense of results being truly personalised to the user
  • The personality results are fully responsive, stacking on smaller screens

Recommended Country

Screenshots

Country Recommendation

The recommended country is calculated using all the answers given by the user. This adds more accuracy to the results, taking in to account various different aspects of their personality, rather than just associating a single country with a personality type.

It is calculated as follows:

  • Each answer relates to a personality type
  • Each time the user selects an answer, points are awarded to 3 countries, based on how relevant the personality type is to the destination
    • e.g. if the 'food' answer is selected Mexico gets 3 points, New Zealand gets 2 and Peru gets 1
  • These are added up at the end and a winning country is selected

The country recommendation section contains

  • The name of the country selected
  • A hero image of the country (including an "alt" value to make this accessible)
  • Text about the country

Country Highlights

Screenshots

Country Highlights Section

Clickable marker with page scroll

Google Maps Built in Functionality

Responsive map zoom

  • A map which shows the recommended country using Google Maps API with clickable markers to find out more information about key highlights in that destination
  • The highlight information is hidden until the user clicks on a marker
  • Each marker is located at the site of a tourist attraction
  • Each time a user clicks on a marker it replaces the information, this keeps the page short and neat and creates a better user experience as well as adding interactivity
  • There is explanatory text at the top telling the user to click on a marker, though the markers in themselves encourage users to click on them due to the popularity of Google Maps and people's knowledge of it
  • When a marker is clicked text and images appear about that destination highlight
  • The highlight images have associated "alt" values to make them accessible
  • The page scrolls down when a marker is clicked, this varies depending on screen size - on a large device it scrolls to the bottom of the highlights div, this makes sure that the user can see the whole highlight text and photos on screen at the same time, on a smaller device, where this isn't possible, it scrolls to the top of the highlight text.
  • This section is fully responsive, as well as layout changes to the main div and photos the map zoom level also changes for different devices to allow the whole country to appear on the user's screen and all markers to be visible and not too close together.
  • If something goes wrong and the map fails to load Google has a built in error message to handle the problem in a user-friendly way
  • The map also has Google's in-built functionality including:
    • Zoom buttons
    • Touchscreen zoom and scroll
    • Satellite and map view options
    • Streetview
    • Full screen button

Start Again Button

Screenshots

Start Again Button

  • A button to allow users to re-take the quiz
  • Allows users to navigate the site easily and start again if they're not happy with their results
  • Has explanatory text to give the site a friendly 'voice'
  • Button has a hover effect with a short, smooth colour transition on non touchscreen devices

404 Page

404 Page - Mock Up

Screenshots

404 Page

Go Home Button

  • 404 page to smoothly handle user's who have ended up on a non-existent part of the site
  • This bespoke 404 page provides a positive emotional response to the user and a better user experience
  • The page has the same design as the rest of the site, so the users don't feel like they have left the site, encouraging them to return to the home page
  • The text is light hearted and relevant to the theme of the quiz
  • There is a button to take the user back to the home page so there is no need to user the browser back button

Future Features

I would like to expand the site in the future with the following features

User Account

Give the user the ability to save their results and recommendations, creating an account and log in so that they can re-access their data.

Multiple / More Detailed Recommendations

Give the user more detailed country recommendations, with multiple options and more countries available. This would be a good way to address the bug that I have talked about in the TESTING document where, when 2 countries have an equal number of points, the country that occurs first in the countries array is automatically selected. It would be a nice idea in this situation to give the user multiple options to choose between or compare.

JavaScript Functionality

This section explains in plain English what happens in the JavaScript code as the user moves through the game. This is in addition to the comments in the JavaScript Code.

Welcome Section

Details

  • The user enters their name and clicks on 'Start Quiz':

    • If no name is entered an alert appears prompting the user to enter a name
    • The name is stored to be used in the results page

  • The start game button starts the main JavaScript function which contains all the game functionality

Game Section

Details

  • The start game button:

    • hides the welcome section and reveals the game section
    • populates the question & answers from the first question in the questions array (in a separate .js file)
    const questions = [{
    questionNumber: 1,
    questionText: "At a party you are most likely to be found…",
    answers: [{
            answerNumber: 1,
            answerText: "Leafing through the host's book collection",
            answerType: "culture"
        },
        {
            answerNumber: 2,
            answerText: "Jumping off the roof in to the pool",
            answerType: "thrill"
        },

// questions array continues
    • sets the progress bar based on the question number of the first question in the questions array

  • When the user selects an answer:

    • All other answers are disabled so the user cannot select more than once
    • The answer is given a class of 'selected' to change its colour
    • Each answer has an associated 'personality type' - this is logged to an array called 'personality tally', for each answer selected another 'personality type' is added to the array, one for each question.
    // user selects "thrill-seeker" answer

personalityTally = ["thrill"]
    • There is a brief timeout before the question reloads (see Answers in features section for more information)
    • The 'selected' class is removed from the selected answer to remove the colour styling
    • The first question in the questions array is removed from the array
    • The game is populated with the question and answers from the new first question in the questions array
    • The buttons are re-enabled
    • The progress bar is moved on based on the question number of the first question in the questions array
    • The page scrolls back to the top
    • This repeats until there are no questions left in the questions array

  • When the user selects the final answer:

    • Calculating the winning personality:
      • The personality tally contains the 10 personality types that come from the selected answers
      personalityTally = ["thrill", "food", "culture", "thrill", "thrill", "people", "remote", "food", "food", "culture"]

      • The code checks for the type that occurs the most frequently

        • It does this by:
          • creating a new array of the number of times each personality occurs, the 'personality score' (order matches the personalities array)
          scoreArray = [2, 3, 1, 1, 3, 0]
          • finding the max value in this array
          let maxPersonalityScore = Math.max(...scoreArray);

maxPersonalityScore = 3
          • then creating a new array of only personalities that scored that amount.
          • It can then test to see how many personalities are in that array and therefore whether there is a tie.
          // both "food" and "thrill" scored 3 - there is a tie

topPersonalityArray = ["food", "thrill"]

      • If there is a single winner the personality result is stored and the results show (see below)

      • If there is a tie:

        • The tie breaker question is revealed and the main quiz hidden
        • The tie breaker contains photos which relate to the tied winning personalities only (not the others)
        • The user selects a single image to break the tie - this is now the winning personality
        • This personality is logged and the results show
        // user selects the image associated with the "thrill-seeker" personality

personalityTally = ["thrill", "food", "culture", "thrill", "thrill", "people", "remote", "food", "food", "culture", "thrill"]

// "thrill-seeker" is the winning personality
    • Calculating the recommended country:
      • This is more complex than having a single country associated with a personality type as I wanted the recommendations to be more personalised and less simplistic. It is based on all the user's answers which give points to certain countries based on the personality type.
      • Takes the 'personality tally' array (based on the user's answers)
        • For each personality type in the array it assigns points to different countries based on how much that country would appeal to someone who likes food, culture, thrill-seeking etc.
        • e.g. if a 'food' answer is selected Mexico is awarded 3 points, New Zealand 2 & Peru 1
        • This system of awarding multiple countries points also helps to avoid tied results
        • This is done using arrays of points where the index matches the index of the country in the countries array (stored in a separate js file)
        // [New Zealand, Mexico, Peru, China, Zambia, Kyrgyzstan] - order of countries in the countries array

let userTotal = [0, 0, 0, 0, 0, 0];
let wildlifePoints = [0, 1, 0, 0, 3, 2];
let thrillPoints = [3, 0, 1, 0, 2, 0];
let culturePoints = [0, 0, 3, 2, 0, 1];
let foodPoints = [2, 3, 0, 1, 0, 0];
let peoplePoints = [1, 2, 0, 3, 0, 0];
let remotePoints = [0, 0, 2, 0, 1, 3];
        • These point are added to the userTotal array (see code above)
        • The winning country is the one with the most points (matched using the index in the array)
        // user points after all points added (based on example personality tally above)

userTotal = [19, 11, 12, 16, 9, 5]

// New Zealand is the winning country (index 0 in the countries array)
    • The game div is hidden and the results div appears

Game Section - Restart Quiz Button

  • When the user clicks on the Restart Quiz button the page reloads, which:
    • hides the game section
    • reveals the welcome section
    • clears all results so far

Results Section - Personality

Details
  • The personality results are populated based on the winning personality
    • The user name is included in the heading to personalise the results
    • The personalities array contains all the associated text, colours and details which are used to populate the personality results
    let personalities = [{
    type: "culture",
    score: 0,
    prefix: "a",
    name: "Culture-Vulture",
    text: [
        "Knowledge is power could be your motto! You love to learn about the world around you and what better way to do that than to travel! You may well be knowledgable about art, literature, music or history. You and often seek out opportunities to explore and learn more about different forms of culture.",
        "You love gathering information and facts. You are at your happiest in galleries, museums and ancient ruins or learning a new language and using it to connect with local people on your travels. You are open to new cultural experiences and love to discover and learn."
    ],
    color: "purple",
    colorCode: "#ACAAFF"
},

// personalties array continues...
  • The pie chart and percentages are populated:
    • The personality scores (calculated and added to the personalities array earlier) are compared and sorted and the array sorted in to order based on the scores
    function compareScores(a, b) {
        return a.score - b.score
    };
let sortedPersonalities = personalities.sort(compareScores);
    • This is then reversed to put the highest scoring personality first
    let reverseSortedPersonalities = sortedPersonalities.reverse();
    • The percentages are calculated based on the number of questions answered (10 for a clear winner, 11 for a tie)
    • Due to rounding issues if the number doesn't add up to 100 the top score is increased so that they do
    • These results then populate the pie chart and key
      • The colours for the key & pie chart are assigned by pulling the associated colour from the personalities array
      • This means that the same colours are always used for the same personalities
    • The pie chart animates on - animation by chart.js
    • The pie chart sections have a hover effect on them, when you hover over them you see the personality type and the percentage - hover functionality from chart.js
    • During testing I discovered that chart.js is not supported by older Safari versions on IOS (12 and earlier) - in this situation a try / catch statement is used to replace the failed pie chart with a <p> element telling the user their browser doesn't support the pie chart. 
      try {
    buildPie(percentageArray, keyColors, pieLabels);
} catch (err) {
    pieDiv.classList.add("error-background");
    pieDiv.innerHTML = "<p class='text-centre'>Sorry!<br>Your browser version doesn't support our pie charts.</p>";
}
  • The final paragraph of text is personalised based on the 2nd and 3rd place scores (if over 15%) to explain to the user how the country recommendation is based on all the aspects of their personality, rather than just on the winning personality type.

Results Section - Country

Details
  • The recommended country results are populated based on the winning country
    • This is based on the index of the winning country (see above)
    • All the data is stored in the countries array including text, photos, map information, highlights data etc
    • The country image and highlights images are also assigned an associated 'alt' value to make them accessible (stored in the countries array)
    const countries = [{
    name: "New Zealand",
    image: "nz_main.jpg",
    alt: "Mt Cook and Lake Tekapo, New Zealand",
    text: [
        "New Zealand is a breathtakingly beautiful country that offers a unique blend of stunning landscapes, diverse wildlife, and rich cultural heritage. From the majestic peaks of the Southern Alps to the pristine beaches of the Bay of Islands, visitors will be mesmerized by the natural beauty that surrounds them.",
        "Whether you prefer outdoor adventures, such as hiking, skiing, and surfing, or more relaxed pursuits, such as wine tasting and visiting art galleries, New Zealand has something for everyone. With friendly locals, delicious cuisine, and an abundance of activities, you'll leave with unforgettable memories of your time in this truly magical country."
    ],
    zoomLrg: 4.9,
    zoomSml: 4.5,
    center: {
        lat: -40.51148,
        lng: 172.67
    },
    highlights: [{
            title: "Queenstown, Otago",
            lat: "-45.0295903775837",
            lng: "168.658942058923",
            description: "Snuggled between the shores of shimmering Lake Wakatipu and the snowy peaks of the Remarkables, Queenstown is New Zealand's adventure capital and one of the country's top destinations for international visitors. Bungee jumping, jet boating, white water rafting, paragliding, rock climbing, mountain biking, and downhill skiing are just some of the adrenaline-fueled things to do here, and visitors can explore the stunning alpine scenery on the excellent network of hiking trails.",
            images: [
                {
                    img: "nz_queenstown1.jpeg",
                    alt: "Bungee jumper leaps off platform"
                },
                {
                    img: "nz_queenstown2.jpeg",
                    alt: "Aerial view of Queenstown"
                },
                {
                    img: "nz_queenstown3.jpeg",
                    alt: "Queenstown lakefront"
                },
                {
                    img: "nz_queenstown4.jpeg",
                    alt: "Jetboat on turquoise river"
                }
            ]
        },

        // countries array continues
  • The map uses Google Maps API to create a personalised map showing the winning country - the code for this is stored in a separate file (map.js)
    • The initMap function is passed the index of the winning country
    • Longitude and Latitude taken from the countries array
    • Zoom level taken from the countries array - responsive based on screen size (zoom level changes for smaller screens)
    • The map contains clickable markers
      • Each marker is clickable and reveals text and photos about a tourist attraction at that location
      • The highlight images are also assigned an associated 'alt' value to make them accessible (stored in the countries array)
      • When a user clicks on a marker the page scrolls down to reveal the highlight info - where it scrolls to varies based on screen size for the best user experience.
      • If a user clicks on another marker the highlight text and photos are replaced
    • If the map fails to load text is displayed in the map box which handles the error smoothly for the user (built in functionality from Google Maps API)
    • The map also contains all the standard Google Maps functionality such as zoom, satellite view, street view and full screen

Results Section - Start Again Button

Details
  • When the user clicks on the Start Again button the page reloads, which:
    • hides the game section
    • reveals the welcome section
    • clears all results so far

Testing & Bugs

See TESTING.md for full breakdown of testing & bugs

Deployment

GitHub Pages

The site was deployed to GitHub pages. The steps to deploy are as follows:

  1. In the GitHub repository, navigate to the Settings tab
  2. From the left hand menu select 'Pages'
  3. From the source select Branch: main
  4. Click 'Save'
  5. A live link will be displayed when published successfully.

The live link can be found here - https://emmahewson.github.io/mp2_travel_quiz/

Forking the GitHub Repository

You can fork the repository by following these steps:

  1. Go to the GitHub repository
  2. Click on Fork button in upper right hand corner

Cloning the GitHub Repository

You can clone the repository to use locally by following these steps:

  1. Navigate to the GitHub Repository you want to clone
  2. Click on the code drop down button
  3. Click on HTTPS
  4. Copy the repository link to the clipboard
  5. Open your IDE of choice (git must be installed for the next steps)
  6. Type git clone copied-git-url into the IDE terminal

The project will now be cloned locally for you to use.

Credits

Code

  • Small code snippets & methods taken from online searches. All relevant code is credited in JavaScript files.
  • Chart.js: ChartJS library used to create pie chart
  • Google Maps API: Connected to Google Maps API for the map and clickable markers

Text Content

Media

Photos

New Zealand

Peru

Kyrgyzstan

Mexico

China

Zambia

Acknowledgements

  • My mentor Gareth McGirr for all his help and advice throughout the project
  • The whole team at Code Institute for their teaching and support

Go to Top